From mboxrd@z Thu Jan 1 00:00:00 1970 From: Eric Schulte Subject: Re: Refresh of http://orgmode.org Date: Wed, 14 Dec 2011 21:11:20 -0700 Message-ID: <87sjkmqxsn.fsf@gmx.com> References: <87k461we9q.fsf@gnu.org> <20111213215015.GA53490@kenny.fritz.box> <877h20vtkd.fsf@gmx.com> <87d3br8o14.fsf@gnu.org> <87liqfyou6.fsf@gmx.com> Mime-Version: 1.0 Content-Type: multipart/mixed; boundary="=-=-=" Return-path: Received: from eggs.gnu.org ([140.186.70.92]:50997) by lists.gnu.org with esmtp (Exim 4.71) (envelope-from ) id 1Rb2fY-00043L-EH for emacs-orgmode@gnu.org; Wed, 14 Dec 2011 23:11:45 -0500 Received: from Debian-exim by eggs.gnu.org with spam-scanned (Exim 4.71) (envelope-from ) id 1Rb2fW-0007YR-Ho for emacs-orgmode@gnu.org; Wed, 14 Dec 2011 23:11:44 -0500 Received: from mailout-us.gmx.com ([74.208.5.67]:54307 helo=mailout-us.mail.com) by eggs.gnu.org with smtp (Exim 4.71) (envelope-from ) id 1Rb2fW-0007YG-4X for emacs-orgmode@gnu.org; Wed, 14 Dec 2011 23:11:42 -0500 In-Reply-To: <87liqfyou6.fsf@gmx.com> (Eric Schulte's message of "Wed, 14 Dec 2011 11:45:21 -0700") List-Id: "General discussions about Org-mode." List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , Errors-To: emacs-orgmode-bounces+geo-emacs-orgmode=m.gmane.org@gnu.org Sender: emacs-orgmode-bounces+geo-emacs-orgmode=m.gmane.org@gnu.org To: Bastien Cc: emacs-orgmode@gnu.org --=-=-= Content-Type: text/plain >> >> Mh.. your screen seems quite small. If you can fix the .css to display >> the website better on your screen, please do, I don't have time at hand >> now to do it myself. >> The attached three patches to the orgweb repository change the CSS for smarter rendering on narrow screens (they don't address screen height). The changes include... - scale down images on narrow screens - decrease the width of the left link bar on narrow screens - decrease the padding around the title on narrow screens - shrink the paypal link on smaller screens -- I would like to move this button on really small screens, but somehow that doesn't seem possible - remove the Org-mode image on really small screens - remove the twitter feed on narrow screens -- for some reason I was unable to change the size of this widget, so I just hide it on a tiny screen These changes make the new website work on my system, and should improve the reading experience for everyone who keeps their browser screens less than 1400 pixels wide. If these look good please apply them. Thanks, --=-=-= Content-Type: text/x-patch Content-Disposition: attachment; filename=0001-ignoring-exported-html-indices.patch >From 9bb86f8c206e2b749c9c49c4ad33f11e07e4f3fc Mon Sep 17 00:00:00 2001 From: Eric Schulte Date: Wed, 14 Dec 2011 20:30:02 -0700 Subject: [PATCH 1/3] ignoring exported html indices --- .gitignore | 1 + 1 files changed, 1 insertions(+), 0 deletions(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..dcaf716 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +index.html -- 1.7.8 --=-=-= Content-Type: text/x-patch Content-Disposition: attachment; filename=0002-shrink-links-and-remove-twitter-on-narrow-screens.patch Content-Transfer-Encoding: 8bit >From e262903d6d21173d786c15d4e4db155d466c8407 Mon Sep 17 00:00:00 2001 From: Eric Schulte Date: Wed, 14 Dec 2011 20:30:28 -0700 Subject: [PATCH 2/3] shrink links and remove twitter on narrow screens --- org.css | 147 +++++++++++++++++++++++++++++++++++---------------------------- 1 files changed, 82 insertions(+), 65 deletions(-) diff --git a/org.css b/org.css index cce24dd..ad6785e 100644 --- a/org.css +++ b/org.css @@ -96,50 +96,87 @@ h1.title { font-family: Courier New; } -#linklist -{ - position: fixed; - font-size: 13pt; - font-family: Courier New; - padding-top: 0px; - padding-right: 0px; - top: 107px; - left: 0px; - margin-top: 0px; - width: 180px; - background-color: #fff; - color: black; - box-shadow: 8px 8px 12px #ccc; - -webkit-border-bottom-right-radius: 10px; - -moz-border-radius-bottomright: 10px; - z-index: 100; -} - -#linklist a { - color: black; - font-weight: normal; - text-decoration: none; - display:block; - padding: 7pt; -} - -#linklist ul { - margin: 0; - padding: 0; -} - -#linklist li { - text-align: right; - margin: 0; -} - -.timestamp { - font-family: Courier New; - color: #888888; -} - -#linklist li:hover { - border-left: 7px solid #537d7b; +@media all { + #linklist + { + position: fixed; + font-size: 13pt; + font-family: Courier New; + padding-top: 0px; + padding-right: 0px; + top: 107px; + left: 0px; + margin-top: 0px; + width: 180px; + background-color: #fff; + color: black; + box-shadow: 8px 8px 12px #ccc; + -webkit-border-bottom-right-radius: 10px; + -moz-border-radius-bottomright: 10px; + z-index: 100; + } + + #linklist a { + color: black; + font-weight: normal; + text-decoration: none; + display:block; + padding: 7pt; + } + + #linklist ul { + margin: 0; + padding: 0; + } + + #linklist li { + text-align: right; + margin: 0; + } + + .timestamp { + font-family: Courier New; + color: #888888; + } + + #linklist li:hover { + border-left: 7px solid #537d7b; + } + + #twit { + /* -moz-opacity:.2; */ + /* opacity: .2; */ + /* filter:alpha(opacity=20); */ + position: fixed; + top: 362px; + box-shadow: 8px 8px 12px #ccc; + -webkit-border-bottom-right-radius: 10px; + -moz-border-radius-bottomright: 10px; + z-index: 100; + } + + .outline-2 { + position: relative; + top: 105px; + left: 215px; + width: 75%; + padding-bottom: 5pt; + } +} + +@media all and (max-width: 700px){ + #linklist{ + width: 130px; + } + #linklist a{ + font-size: 10pt; + } + #twit{ + display: none; + } + .outline-2 { + left: 145px; + } } pre { @@ -176,26 +213,6 @@ pre { filter:alpha(opacity=100); } -.outline-2 { - position: relative; - left: 215px; - top: 105px; - width: 75%; - padding-bottom: 5pt; -} - -#twit { - /* -moz-opacity:.2; */ - /* opacity: .2; */ - /* filter:alpha(opacity=20); */ - position: fixed; - top: 362px; - box-shadow: 8px 8px 12px #ccc; - -webkit-border-bottom-right-radius: 10px; - -moz-border-radius-bottomright: 10px; - z-index: 100; -} - /* #twit:hover { */ /* -moz-opacity:1; */ /* opacity: 1; */ @@ -314,7 +331,7 @@ li { } img.random { - max-width: 750px; + max-width: 75%; max-height: 380px; margin-bottom: 10pt; border: 1px solid black; -- 1.7.8 --=-=-= Content-Type: text/x-patch Content-Disposition: attachment; filename=0003-title-width-adjusts-appropriately-given-window-width.patch Content-Transfer-Encoding: 8bit >From 67762c50047bbbfb71d87245b791c02cc9dcf234 Mon Sep 17 00:00:00 2001 From: Eric Schulte Date: Wed, 14 Dec 2011 21:02:28 -0700 Subject: [PATCH 3/3] title width adjusts appropriately given window width --- org.css | 69 ++++++++++++++++++++++++++++++++++++++++++++++---------------- 1 files changed, 51 insertions(+), 18 deletions(-) diff --git a/org.css b/org.css index ad6785e..8cbe0c3 100644 --- a/org.css +++ b/org.css @@ -13,7 +13,6 @@ body { } .title { - background: url(http://orgmode.org/org-mode-unicorn.png) no-repeat 12px 5px; position: fixed; display: inline; left: 0px; @@ -41,14 +40,6 @@ body { z-index: 98; } -#paypal { - position:fixed; - right: 10px; - top: 15px; - z-index: 100; - text-align: center; -} - #paypal a { font-family: Courier new; cursor: pointer; @@ -88,15 +79,23 @@ body { padding-top: 15px; } -h1.title { - text-shadow: 2px 2px 4px #999; - padding-top: 23px; - padding-left: 70pt; - font-size: 23pt; - font-family: Courier New; -} - @media all { + #paypal { + position:fixed; + right: 10px; + top: 15px; + z-index: 100; + text-align: center; + } + + h1.title { + text-shadow: 2px 2px 4px #999; + padding-top: 23px; + padding-left: 0pt; + font-size: 23pt; + font-family: Courier New; + } + #linklist { position: fixed; @@ -164,7 +163,36 @@ h1.title { } } +@media all and (min-width: 1400px){ + padding-left: 75pt; +} + +@media all and (min-width: 650px){ + .title{ + background: url(http://orgmode.org/org-mode-unicorn.png) no-repeat 12px 5px; + } +} + +@media all and (max-width: 750px){ + #paypal{ + position: absolute; + top: 2px; + right: 2px; + } + #paypal a{ + width: 60px; + font-size: 8pt; + } + #paypal a:hover { + width: 60px; + font-size: 8pt; + } +} + @media all and (max-width: 700px){ + h1.title{ + padding-left: 0pt; + } #linklist{ width: 130px; } @@ -174,9 +202,14 @@ h1.title { #twit{ display: none; } - .outline-2 { + .outline-2{ left: 145px; } + #paypal{ + position:fixed; + left: 0px; + top: 362px; + } } pre { -- 1.7.8 --=-=-= Content-Type: text/plain -- Eric Schulte http://cs.unm.edu/~eschulte/ --=-=-=--