Browse Source

Handle image width correctly (patch based on Eric's patches)

Bastien Guerry 7 years ago
parent
commit
3808631a06
9 changed files with 90 additions and 34 deletions
  1. 2 0
      .gitignore
  2. 4 4
      community.org
  3. 8 8
      features.org
  4. 4 4
      fr/community.org
  5. 8 8
      fr/features.org
  6. 1 1
      fr/index.org
  7. 1 1
      index.org
  8. 1 1
      ja/index.org
  9. 61 7
      org.css

+ 2 - 0
.gitignore

@@ -1,2 +1,4 @@
 pub
 old
+*.html
+!preamble.html

+ 4 - 4
community.org

@@ -16,7 +16,7 @@ planning, and authoring with a fast and effective plain-text system./
   :ID:       list
   :END:
 
-#+ATTR_HTML: style="float: right;" width="500px"
+#+ATTR_HTML: id="main-image"
 [[file:img/list.png]]
 
 Subscribe to the [[https://lists.gnu.org/mailman/listinfo/emacs-orgmode][mailing list]].
@@ -49,7 +49,7 @@ Users also discuss on the =#org-mode= IRC channel on [[http://webchat.freenode.n
   :ID:       worg
   :END:
 
-#+ATTR_HTML: style="float: right;" width="500px"
+#+ATTR_HTML: id="main-image"
 [[file:img/worg.png]]
 
 =git://orgmode.org/worg.git=
@@ -78,7 +78,7 @@ New contributors are welcome -- just send your public key to Bastien.
   :ID:       gsoc
   :END:
 
-#+ATTR_HTML: style="float: right;" width="500px"
+#+ATTR_HTML: id="main-image"
 [[file:img/gsoc2012.png]]
 
 In 2012, two students successfully achieved and Org mode [[http://code.google.com/soc/][Google Summer of
@@ -136,7 +136,7 @@ Check out the [[https://vimeo.com/17182850][many screencasts]] were VimOrganizer
   :ID:       more
   :END:
 
-#+ATTR_HTML: style="float: right;" width="500px"
+#+ATTR_HTML: id="main-image"
 [[file:img/gplus.png]]
 
 /Takaaki Ishikawa/ is maintaining [[https://twitter.com/#!/orgmode_bot][@orgmode\_bot]] on Twitter and you can

+ 8 - 8
features.org

@@ -16,7 +16,7 @@ planning, and authoring with a fast and effective plain-text system./
   :ID: editing
   :END:
 
-#+ATTR_HTML: style="float: right;" width="500px"
+#+ATTR_HTML: id="main-image"
 [[file:img/structure.jpg]]
 
 Org is built on top of =outline.el=.
@@ -44,7 +44,7 @@ More on [[http://orgmode.org/manual/Document-Structure.html#Document-Structure][
   :ID: planning
   :END:
 
-#+ATTR_HTML: style="float: right;" width="500px"
+#+ATTR_HTML: id="main-image"
 [[file:img/planning.jpg]]
 
 Org can be used as a TODO lists manager and as a planner.
@@ -76,7 +76,7 @@ Handling [[http://orgmode.org/manual/Dates-and-Times.html#Dates-and-Times][dates
   :ID: clocking
   :END:
 
-#+ATTR_HTML: style="float: right;" width="500px"
+#+ATTR_HTML: id="main-image"
 [[file:img/clocking.jpg]]
 
 Clocking in a task is =C-c C-x C-i=.
@@ -107,7 +107,7 @@ More on [[http://orgmode.org/manual/Clocking-work-time.html#Clocking-work-time][
   :ID: agendas
   :END:
 
-#+ATTR_HTML: style="float: right;" width="500px"
+#+ATTR_HTML: id="main-image"
 [[file:img/agenda.jpg]]
 
 Even with large =.org= files and thousands of tasks, it is easy to focus on
@@ -142,7 +142,7 @@ Tutorial on [[http://orgmode.org/worg/org-tutorials/org-custom-agenda-commands.h
   :ID: capturing
   :END:
 
-#+ATTR_HTML: style="float: right;" width="500px"
+#+ATTR_HTML: id="main-image"
 [[file:img/capture.jpg]]
 
 Adding TODO items to your =.org= files is called /capturing/.
@@ -170,7 +170,7 @@ More on [[http://orgmode.org/manual/Capture.html#Capture][capturing]] (manual)
   :ID: tables
   :END:
 
-#+ATTR_HTML: style="float: right;" width="500px"
+#+ATTR_HTML: id="main-image"
 [[file:img/table2.jpg]]
 
 Org is a great plain-text table editor.
@@ -206,7 +206,7 @@ Using [[http://orgmode.org/worg/org-tutorials/org-spreadsheet-intro.html][Org as
   :ID: exporting
   :END:
 
-#+ATTR_HTML: style="float: right;" width="500px"
+#+ATTR_HTML: id="main-image"
 [[file:img/export.jpg]]
 
 Org is an authoring and publication tool.
@@ -245,7 +245,7 @@ More on [[http://orgmode.org/manual/Publishing.html#Publishing][publishing]] (ma
   :ID: babel
   :END:
 
-#+ATTR_HTML: style="float: right;" width="500px"
+#+ATTR_HTML: id="main-image"
 [[file:img/babel.jpg]]
 
 Org makes [[http://en.wikipedia.org/wiki/Literate_programming][literate programming]] a handy and natural way to deal with code.

+ 4 - 4
fr/community.org

@@ -16,7 +16,7 @@ planifier des projets et de publier des documents, le tout en texte brut./
   :ID:       liste
   :END:
 
-#+ATTR_HTML: style="float: right;" width="500px"
+#+ATTR_HTML: id="main-image"
 [[file:../img/list.png]]
 
 Inscrivez-vous à la [[https://lists.gnu.org/mailman/listinfo/emacs-orgmode][liste de discussion]] (en).
@@ -50,7 +50,7 @@ Les utilisateurs discutent aussi sur le canal IRC =#org-mode= de [[http://webcha
   :ID:       worg
   :END:
 
-#+ATTR_HTML: style="float: right;" width="500px"
+#+ATTR_HTML: id="main-image"
 [[file:../img/worg.png]]
 
 =git://orgmode.org/worg.git=
@@ -80,7 +80,7 @@ publique à Bastien.
   :ID:       gsoc
   :END:
 
-#+ATTR_HTML: style="float: right;" width="500px"
+#+ATTR_HTML: id="main-image"
 [[file:../img/gsoc2012.png]]
 
 En 2012, deux étudiants ont fini avec succès un projet [[http://code.google.com/soc/][Google Summer of
@@ -138,7 +138,7 @@ l'oeuvre.
   :ID:       plus
   :END:
 
-#+ATTR_HTML: style="float: right;" width="500px"
+#+ATTR_HTML: id="main-image"
 [[file:../img/gplus.png]]
 
 /Takaaki Ishikawa/ maintient [[https://twitter.com/#!/orgmode_bot][@orgmode\_bot]] sur Twitter et vous pouvez

+ 8 - 8
fr/features.org

@@ -16,7 +16,7 @@ planifier des projets et de publier des documents, le tout en texte brut./
   :ID: édition
   :END:
 
-#+ATTR_HTML: style="float: right;" width="500px"
+#+ATTR_HTML: id="main-image"
 [[file:../img/structure.jpg]]
 
 Org s'appuie sur =outline.el=.
@@ -44,7 +44,7 @@ Plus sur la [[http://orgmode.org/manual/Document-Structure.html#Document-Structu
   :ID: planification
   :END:
 
-#+ATTR_HTML: style="float: right;" width="500px"
+#+ATTR_HTML: id="main-image"
 [[file:../img/planning.jpg]]
 
 Org peut être utilisé comme gestionnaire de listes TODO et de projets.
@@ -76,7 +76,7 @@ Gérer les [[http://orgmode.org/manual/Dates-and-Times.html#Dates-and-Times][dat
   :ID: chronométrage
   :END:
 
-#+ATTR_HTML: style="float: right;" width="500px"
+#+ATTR_HTML: id="main-image"
 [[file:../img/clocking.jpg]]
 
 Chronométrer une tâche se fait avec =C-c C-x C-i=.
@@ -108,7 +108,7 @@ Plus sur le [[http://orgmode.org/manual/Clocking-work-time.html#Clocking-work-ti
   :ID: agendas
   :END:
 
-#+ATTR_HTML: style="float: right;" width="500px"
+#+ATTR_HTML: id="main-image"
 [[file:../img/agenda.jpg]]
 
 Même avec des fichiers =.org= volumineux et des milliers de tâches, vous
@@ -144,7 +144,7 @@ Tutoriel sur les [[http://orgmode.org/worg/org-tutorials/org-custom-agenda-comma
   :ID: capturer
   :END:
 
-#+ATTR_HTML: style="float: right;" width="500px"
+#+ATTR_HTML: id="main-image"
 [[file:../img/capture.jpg]]
 
 Ajouter un item TODO à vos fichiers .org s'appelle /capturer/.
@@ -173,7 +173,7 @@ Plus sur la [[http://orgmode.org/manual/Capture.html#Capture][capture]] (manuel)
   :ID: tableaux
   :END:
 
-#+ATTR_HTML: style="float: right;" width="500px"
+#+ATTR_HTML: id="main-image"
 [[file:../img/table2.jpg]]
 
 Org fait des merveilles comme éditeur de tableaux en texte brut.
@@ -209,7 +209,7 @@ Utiliser [[http://orgmode.org/worg/org-tutorials/org-spreadsheet-intro.html][Org
   :ID: exporter
   :END:
 
-#+ATTR_HTML: style="float: right;" width="500px"
+#+ATTR_HTML: id="main-image"
 [[file:../img/export.jpg]]
 
 Org est un système de publication de documents.
@@ -248,7 +248,7 @@ Plus sur la [[http://orgmode.org/manual/Publishing.html#Publishing][publication]
   :ID: babel
   :END:
 
-#+ATTR_HTML: style="float: right;" width="500px"
+#+ATTR_HTML: id="main-image"
 [[file:../img/babel.jpg]]
 
 Org fait de la programmation littérale ([[http://en.wikipedia.org/wiki/Literate_programming][literate programming]]) un manière

+ 1 - 1
fr/index.org

@@ -25,7 +25,7 @@ Guerry</a> depuis 2011.</span></em></p></div>
   :CUSTOM_ID: intro
   :END:
 
-#+ATTR_HTML: style="float: right;" width="500px"
+#+ATTR_HTML: id="main-image"
 [[file:../img/main.jpg]]
 
 Version stable *7.9.1* (sept. 2012) --- [[http://orgmode.org/org-7.9.1.tar.gz][tar.gz]] ou [[http://orgmode.org/org-7.9.1.zip][zip]]

+ 1 - 1
index.org

@@ -22,7 +22,7 @@ is maintained by <a href="http://lumiere.ens.fr/~guerry/">Bastien Guerry</a> sin
   :CUSTOM_ID: intro
   :END:
 
-#+ATTR_HTML: style="float: right;" width="500px"
+#+ATTR_HTML: id="main-image"
 [[file:img/main.jpg]]
 
 Stable version *7.9.1* (sept. 2012) --- [[http://orgmode.org/org-7.9.1.tar.gz][tar.gz]] or [[http://orgmode.org/org-7.9.1.zip][zip]]

+ 1 - 1
ja/index.org

@@ -24,7 +24,7 @@ is maintained by <a href="http://lumiere.ens.fr/~guerry/">Bastien Guerry</a> sin
   :CUSTOM_ID: intro
   :END:
 
-#+ATTR_HTML: style="float: right;" width="500px"
+#+ATTR_HTML: id="main-image"
 [[file:../img/main.jpg]]
 
 安定版 *7.9.1* (2012年9月) --- [[http://orgmode.org/org-7.9.1.tar.gz][tar.gz]] or [[http://orgmode.org/org-7.9.1.zip][zip]]

+ 61 - 7
org.css

@@ -27,12 +27,6 @@ html {
     text-align: right;
 }
 
-body {
-    padding: 20px;
-    margin-left: 50px;
-    margin-right: 30px;
-}
-
 a {
     text-decoration: none;
     color: #537d7b
@@ -113,7 +107,6 @@ h2 {
 }
 
 code {
-    font-size: 85%;
     background-color: #eeeeee;
     padding: 1pt;
     margin-right: 1pt;
@@ -159,4 +152,65 @@ code {
     text-decoration: none;
 }
 
+@media(min-width:1000px){
+    #screenshot {
+        float: right;
+        width: 500px;
+    }
+    #main-image {
+        float: right;
+        width: 500px;
+    }
+    body {
+        padding: 20px;
+        margin-left: 50px;
+        margin-right: 30px;
+    }
+}
+
+@media(min-width:800px) and (max-width:1000px){
+    #screenshot {
+        float: right;
+        width: 450px;
+    }
+    #main-image {
+        float: right;
+        width: 450px;
+    }
+}
+
+@media(min-width:850px) and (max-width:1000px){
+    body {
+        padding: 10px;
+        margin-left: 25px;
+        margin-right: 15px;
+    }
+}
+
+@media(max-width:800px){
+    #screenshot {
+        display: none;
+    }
+    #main-image {
+        display: none;
+    }
+}
+
+@media(max-width:800px){
+    code{
+        font-size: 85%;
+    }
+}
+
+@media(min-width:800px) and (max-width:900px){
+    code{
+        font-size: 75%;
+    }
+}
+
+@media(min-width:900px){
+    code{
+        font-size: 85%;
+    }
+}