>>
>> 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,
>From 9bb86f8c206e2b749c9c49c4ad33f11e07e4f3fc Mon Sep 17 00:00:00 2001
From: Eric Schulte <eric.schu...@gmx.com>
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
>From e262903d6d21173d786c15d4e4db155d466c8407 Mon Sep 17 00:00:00 2001
From: Eric Schulte <eric.schu...@gmx.com>
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
>From 67762c50047bbbfb71d87245b791c02cc9dcf234 Mon Sep 17 00:00:00 2001
From: Eric Schulte <eric.schu...@gmx.com>
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
--
Eric Schulte
http://cs.unm.edu/~eschulte/
