From mboxrd@z Thu Jan 1 00:00:00 1970 From: Eric Schulte Subject: patch for orgweb for better resolution in narrow browsers Date: Wed, 12 Sep 2012 23:00:00 -0600 Message-ID: <87vcfiqzqn.fsf@gmx.com> Mime-Version: 1.0 Content-Type: multipart/mixed; boundary="=-=-=" Return-path: Received: from eggs.gnu.org ([208.118.235.92]:40472) by lists.gnu.org with esmtp (Exim 4.71) (envelope-from ) id 1TC1cX-00060G-Rm for emacs-orgmode@gnu.org; Thu, 13 Sep 2012 01:05:47 -0400 Received: from Debian-exim by eggs.gnu.org with spam-scanned (Exim 4.71) (envelope-from ) id 1TC1cW-0006Hx-Ce for emacs-orgmode@gnu.org; Thu, 13 Sep 2012 01:05:45 -0400 Received: from mailout-eu.gmx.com ([213.165.64.42]:34090) by eggs.gnu.org with smtp (Exim 4.71) (envelope-from ) id 1TC1cW-0006Hs-2T for emacs-orgmode@gnu.org; Thu, 13 Sep 2012 01:05:44 -0400 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: Org Mode Mailing List --=-=-= Content-Type: text/plain 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, --=-=-= Content-Type: text/x-patch Content-Disposition: inline; filename=0001-use-css-media-queries-to-adjust-for-narrow-browsers.patch Content-Transfer-Encoding: 8bit >From f403654c101ab4a81f27bdb1f89d48ff1539f838 Mon Sep 17 00:00:00 2001 From: Eric Schulte 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 Bastien Guerry 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 --=-=-= Content-Type: text/x-patch Content-Disposition: inline; filename=0002-ignore-exported-HTML-files-in-the-base-of-this-repo.patch >From 852bcb92ee34761e9c6037b91afcc740737e17d7 Mon Sep 17 00:00:00 2001 From: Eric Schulte 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 --=-=-= Content-Type: text/plain 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 --=-=-=--