patch for orgweb for better resolution in narrow browsers

patch for orgweb for better resolution in narrow browsers

[Eric Schulte]

[-- Attachment #1: Type: text/plain, Size: 772 bytes --]

Hi,

I just recently noticed the new web site, I think it looks great!
However when the browser window is not very wide (>1000px) the elements
overflow in an unappealing manner [1].  As an example of how the page
looks in my browser see the attached [2], it's not egregious but it is
less than ideal and gets worse as the screen gets narrower.

Attached please find a patch to the orgweb repo which adds a couple of
css @media queries to shrink images and remove wide margins on smaller
screens.  Additionally I'm attaching a patch which will ignore exported
html files in this repo.

As another minor note which is unfortunately beyond my web abilities to
address, with very narrow screens the quote pop-up can make the
"download and install" link unreachable.

Thanks,


[-- Warning: decoded text below may be mangled, UTF-8 assumed --]
[-- Attachment #2: 0001-use-css-media-queries-to-adjust-for-narrow-browsers.patch --]
[-- Type: text/x-patch, Size: 2345 bytes --]

From f403654c101ab4a81f27bdb1f89d48ff1539f838 Mon Sep 17 00:00:00 2001
From: Eric Schulte <eric.schulte@gmx.com>
Date: Wed, 12 Sep 2012 19:33:25 -0600
Subject: [PATCH 1/2] use css media queries to adjust for narrow browsers

---
 index.org |  2 +-
 org.css   | 58 +++++++++++++++++++++++++++++++++++++++++++++++++++-------
 2 files changed, 52 insertions(+), 8 deletions(-)

diff --git a/index.org b/index.org
index da7d65e..215acf3 100644
--- a/index.org
+++ b/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]]
diff --git a/org.css b/org.css
index 84a90a6..da192fb 100644
--- a/org.css
+++ b/org.css
@@ -3,6 +3,39 @@ html {
     font: 300 .9em/1.6em "Droid Serif", "Open Sans", Cambria, Georgia, "DejaVu Serif", serif;

 }

 

+@media(min-width:1000px){

+    #main-image {

+        float: right;

+        width: 500px;

+    }

+    body {

+        padding: 20px;

+        margin-left: 50px;

+        margin-right: 30px;

+    }

+}

+

+@media(min-width:800px) and (max-width:1000px){

+    #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){

+    #main-image {

+        display: none;

+    }

+}

+

 #searchgmane {

     margin-left: 10pt;

 }

@@ -27,12 +60,6 @@ html {
     text-align: right;

 }

 

-body {

-    padding: 20px;

-    margin-left: 50px;

-    margin-right: 30px;

-}

-

 a {

     text-decoration: none;

     color: #537d7b

@@ -112,8 +139,25 @@ h2 {
     padding-left: 5px;

 }

 

+@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%;

+    }

+}

+

 code {

-    font-size: 85%;

     background-color: #eeeeee;

     padding: 1pt;

     margin-right: 1pt;

-- 
1.7.12


[-- Warning: decoded text below may be mangled, UTF-8 assumed --]
[-- Attachment #3: 0002-ignore-exported-HTML-files-in-the-base-of-this-repo.patch --]
[-- Type: text/x-patch, Size: 445 bytes --]

From 852bcb92ee34761e9c6037b91afcc740737e17d7 Mon Sep 17 00:00:00 2001
From: Eric Schulte <eric.schulte@gmx.com>
Date: Wed, 12 Sep 2012 22:45:31 -0600
Subject: [PATCH 2/2] ignore exported HTML files in the base of this repo

---
 .gitignore | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.gitignore b/.gitignore
index f03a78c..be1b1a2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,4 @@
 pub
 old
+*.html
+!preamble.html
-- 
1.7.12


[-- Attachment #4: Type: text/plain, Size: 280 bytes --]


Footnotes: 
[1]  FWIW I think that this assumption of wide browser windows is endemic
     recently on the web.  Apparently most web designers full-screen
     their browser window.

[2]  http://cs.unm.edu/~eschulte/data/orgmode.png

-- 
Eric Schulte
http://cs.unm.edu/~eschulte

Re: patch for orgweb for better resolution in narrow browsers

[Bastien]

Hi Eric,

Eric Schulte <eric.schulte@gmx.com> writes:

> I just recently noticed the new web site, I think it looks great!

Thanks!

> However when the browser window is not very wide (>1000px) the elements
> overflow in an unappealing manner [1].  As an example of how the page
> looks in my browser see the attached [2], it's not egregious but it is
> less than ideal and gets worse as the screen gets narrower.
>
> Attached please find a patch to the orgweb repo which adds a couple of
> css @media queries to shrink images and remove wide margins on smaller
> screens.  Additionally I'm attaching a patch which will ignore exported
> html files in this repo.

For some reason, I cannot apply the patch -- as if the email was in
HTML (but I don't see it as HTML... weird.)

Could you send it again as a simple attachment?

> As another minor note which is unfortunately beyond my web abilities to
> address, with very narrow screens the quote pop-up can make the
> "download and install" link unreachable.

Maybe we can simply #quote {display:none;} for narrow screens.

PS: I'm about to leave right now and we be back later tonight.

Thanks,

-- 
 Bastien

Re: patch for orgweb for better resolution in narrow browsers

[Eric Schulte]

[-- Attachment #1: Type: text/plain, Size: 1037 bytes --]

Bastien <bzg@altern.org> writes:

> Hi Eric,
>
> Eric Schulte <eric.schulte@gmx.com> writes:
>
>> I just recently noticed the new web site, I think it looks great!
>
> Thanks!
>
>> However when the browser window is not very wide (>1000px) the elements
>> overflow in an unappealing manner [1].  As an example of how the page
>> looks in my browser see the attached [2], it's not egregious but it is
>> less than ideal and gets worse as the screen gets narrower.
>>
>> Attached please find a patch to the orgweb repo which adds a couple of
>> css @media queries to shrink images and remove wide margins on smaller
>> screens.  Additionally I'm attaching a patch which will ignore exported
>> html files in this repo.
>
> For some reason, I cannot apply the patch -- as if the email was in
> HTML (but I don't see it as HTML... weird.)
>
> Could you send it again as a simple attachment?
>

Re-attaching as attachments rather than inline.  I suspect the problem
is related to windows newline characters which are present in the
patches.


[-- Warning: decoded text below may be mangled, UTF-8 assumed --]
[-- Attachment #2: 0001-use-css-media-queries-to-adjust-for-narrow-browsers.patch --]
[-- Type: text/x-patch, Size: 2345 bytes --]

From f403654c101ab4a81f27bdb1f89d48ff1539f838 Mon Sep 17 00:00:00 2001
From: Eric Schulte <eric.schulte@gmx.com>
Date: Wed, 12 Sep 2012 19:33:25 -0600
Subject: [PATCH 1/2] use css media queries to adjust for narrow browsers

---
 index.org |  2 +-
 org.css   | 58 +++++++++++++++++++++++++++++++++++++++++++++++++++-------
 2 files changed, 52 insertions(+), 8 deletions(-)

diff --git a/index.org b/index.org
index da7d65e..215acf3 100644
--- a/index.org
+++ b/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]]
diff --git a/org.css b/org.css
index 84a90a6..da192fb 100644
--- a/org.css
+++ b/org.css
@@ -3,6 +3,39 @@ html {
     font: 300 .9em/1.6em "Droid Serif", "Open Sans", Cambria, Georgia, "DejaVu Serif", serif;

 }

 

+@media(min-width:1000px){

+    #main-image {

+        float: right;

+        width: 500px;

+    }

+    body {

+        padding: 20px;

+        margin-left: 50px;

+        margin-right: 30px;

+    }

+}

+

+@media(min-width:800px) and (max-width:1000px){

+    #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){

+    #main-image {

+        display: none;

+    }

+}

+

 #searchgmane {

     margin-left: 10pt;

 }

@@ -27,12 +60,6 @@ html {
     text-align: right;

 }

 

-body {

-    padding: 20px;

-    margin-left: 50px;

-    margin-right: 30px;

-}

-

 a {

     text-decoration: none;

     color: #537d7b

@@ -112,8 +139,25 @@ h2 {
     padding-left: 5px;

 }

 

+@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%;

+    }

+}

+

 code {

-    font-size: 85%;

     background-color: #eeeeee;

     padding: 1pt;

     margin-right: 1pt;

-- 
1.7.12


[-- Warning: decoded text below may be mangled, UTF-8 assumed --]
[-- Attachment #3: 0002-ignore-exported-HTML-files-in-the-base-of-this-repo.patch --]
[-- Type: text/x-patch, Size: 445 bytes --]

From 852bcb92ee34761e9c6037b91afcc740737e17d7 Mon Sep 17 00:00:00 2001
From: Eric Schulte <eric.schulte@gmx.com>
Date: Wed, 12 Sep 2012 22:45:31 -0600
Subject: [PATCH 2/2] ignore exported HTML files in the base of this repo

---
 .gitignore | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.gitignore b/.gitignore
index f03a78c..be1b1a2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,4 @@
 pub
 old
+*.html
+!preamble.html
-- 
1.7.12


[-- Attachment #4: Type: text/plain, Size: 390 bytes --]


Thanks,

>
>> As another minor note which is unfortunately beyond my web abilities to
>> address, with very narrow screens the quote pop-up can make the
>> "download and install" link unreachable.
>
> Maybe we can simply #quote {display:none;} for narrow screens.
>
> PS: I'm about to leave right now and we be back later tonight.
>
> Thanks,

-- 
Eric Schulte
http://cs.unm.edu/~eschulte

Re: patch for orgweb for better resolution in narrow browsers

[Bastien]

Hi Eric,

I've finally manage to applied this change, a real enhancement for
handling various screen sizes.

Thanks a lot!

-- 
 Bastien

Re: patch for orgweb for better resolution in narrow browsers

[Eric Schulte]

Bastien <bzg@altern.org> writes:

> Hi Eric,
>
> I've finally manage to applied this change, a real enhancement for
> handling various screen sizes.
>
> Thanks a lot!

Yup, looks much improved on my system now. Thanks,

-- 
Eric Schulte
http://cs.unm.edu/~eschulte