From e5d5e3db9a938ce1e50a2f1b8ed4c42195f04022 Mon Sep 17 00:00:00 2001 From: sroracle Date: Thu, 22 Dec 2016 00:19:02 -0600 Subject: [PATCH 1/3] Initial papercut fixes for mobile Changes for mobile: * The header links are now visible * The footer is anchored to the bottom of the page with smaller font-size * Some margins were added to various boxes that end of stacking on mobile Changes for desktop: * The issue where text was being cut-off should be fixed (for real this time!) Global changes: * The copyright notice was moved to the right-side of the footer in anticipation of links being added to the left side so that the links will appear before the copyright notice on mobile * Update template with the above change and add mobile.css --- about/index.html | 9 +++++---- contribute/index.html | 9 +++++---- download/index.html | 9 +++++---- index.html | 17 +++++++++-------- static/galapagos.css | 17 ++++++++++++++++- static/mobile.css | 39 +++++++++++++++++++++++++++++++++++++++ template | 9 +++++---- 7 files changed, 84 insertions(+), 25 deletions(-) create mode 100644 static/mobile.css diff --git a/about/index.html b/about/index.html index 7a39c9a..9949997 100644 --- a/about/index.html +++ b/about/index.html @@ -6,6 +6,7 @@ +
@@ -30,12 +31,12 @@

Coming Soon

-
- Copyright © 2016 Galapagos Linux. All rights reserved. Web site content is licensed under CC-BY-SA-3.0. -
-
+
+
diff --git a/contribute/index.html b/contribute/index.html index 61a4cb5..43450b1 100644 --- a/contribute/index.html +++ b/contribute/index.html @@ -6,6 +6,7 @@ +
@@ -30,12 +31,12 @@

Coming Soon

-
- Copyright © 2016 Galapagos Linux. All rights reserved. Web site content is licensed under CC-BY-SA-3.0. -
-
+
+
diff --git a/download/index.html b/download/index.html index 1e222fa..00df9a8 100644 --- a/download/index.html +++ b/download/index.html @@ -6,6 +6,7 @@ +
@@ -30,12 +31,12 @@

Coming Soon

-
- Copyright © 2016 Galapagos Linux. All rights reserved. Web site content is licensed under CC-BY-SA-3.0. -
-
+
+
diff --git a/index.html b/index.html index 25543a5..e1d7d6a 100644 --- a/index.html +++ b/index.html @@ -4,8 +4,9 @@ Galapagos Linux welcomes you - - + + +
@@ -29,7 +30,7 @@

Welcome to Galapagos


-
+

Galapagos is the friendly source-based Linux distribution. Built out of the long history of the venerable Gentoo Linux distribution, Galapagos has three defining goals.

@@ -41,7 +42,7 @@

Welcome to Galapagos

-
+

Interested?

Galapagos Linux is available for Intel x86, PowerPC, ARM, MIPS, SPARC, and other architectures. And it's entirely free and open source. Try it now and see how Galapagos is making Linux fun again!

@@ -67,12 +68,12 @@

Friendliness

-
- Copyright © 2016 Galapagos Linux. All rights reserved. Web site content is licensed under CC-BY-SA-3.0. -
-
+
+
diff --git a/static/galapagos.css b/static/galapagos.css index 0d6879c..70c796a 100644 --- a/static/galapagos.css +++ b/static/galapagos.css @@ -81,7 +81,6 @@ body > footer { -webkit-box-shadow: 0 0px 10px 0 #777; box-shadow: 0 0px 10px 0 #777; height: 3em; - font-size: 11pt; line-height: 2em; margin: 0; padding: 0.5em 0; @@ -91,3 +90,19 @@ body > footer { width: 100%; } +body > footer > .row { + flex-wrap: nowrap; +} + +body > footer > .row > .col-6#left { + width: auto; + max-width: none; + flex-basis: auto; +} + +body > footer > .row > .col-6#right { + width: auto; + max-width: none; + flex-basis: auto; + text-align: right; +} diff --git a/static/mobile.css b/static/mobile.css new file mode 100644 index 0000000..2a548e2 --- /dev/null +++ b/static/mobile.css @@ -0,0 +1,39 @@ +@media only screen and (max-device-width: 750px) { + /* Make header links visible */ + body > header > .row { + height: auto; + } + + body > header > .row > .hide-on-print { + background-color: #AD6A91; + border-radius: 4px; + } + + /* Add margin between main content hero boxes since they will be on top + * of one another */ + .hero > .col#first { + margin-bottom: 2em; + } + + /* Add margin between download / doc buttons since they will be on top + * of one another */ + .hero > .col#second a.primary { + margin-bottom: 1em; + } + + /* Anchor footer to bottom, decrease font size */ + body > footer { + position: static; + height: auto; + font-size: 10pt; + } + + body > footer > .row { + flex-wrap: wrap; + } + + /* Since footer will not be one line, restore left-aligned text */ + body > footer > .row > .col-6#right { + text-align: left; + } +} diff --git a/template b/template index aaaecb0..2a30097 100644 --- a/template +++ b/template @@ -6,6 +6,7 @@ +
@@ -30,12 +31,12 @@
-
- Copyright © 2016 Galapagos Linux. All rights reserved. Web site content is licensed under CC-BY-SA-3.0. -
-
+
+
From 35ba07a4883b91ae8af50ea8b3a3741241865d65 Mon Sep 17 00:00:00 2001 From: sroracle Date: Thu, 22 Dec 2016 01:30:48 -0600 Subject: [PATCH 2/3] Mobile: Keep footer at bottom even if there isn't enough content --- static/mobile.css | 23 ++++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/static/mobile.css b/static/mobile.css index 2a548e2..71456c6 100644 --- a/static/mobile.css +++ b/static/mobile.css @@ -21,10 +21,27 @@ margin-bottom: 1em; } - /* Anchor footer to bottom, decrease font size */ + /* Anchor footer to bottom, decrease font size + * NB: padding-bottom and height will need to be adjusted in the future + * if more content is added to the footer! */ + html { + position: relative; + } + + body, html { + min-height: 100%; + margin: 0; + } + + body > #content { + padding-bottom: 5em; + margin-bottom: 0; + } + body > footer { - position: static; - height: auto; + position: absolute; + bottom: 0; + height: 5em; font-size: 10pt; } From 61c79c8d6b8a6431ae572f82bcaa2324a98dcda6 Mon Sep 17 00:00:00 2001 From: sroracle Date: Sat, 31 Dec 2016 02:11:30 -0600 Subject: [PATCH 3/3] Change max-device-width to 768px and more footer changes * mobile stylesheet max-device-width changed from 750px to 768px to account for some tablets * footer: add horizontal padding and fix anchoring on 320x480 resolution * big link buttons: fix for some weird sizing on some resolutions --- static/galapagos.css | 17 ++++++++++++++++- static/mobile.css | 18 +++--------------- 2 files changed, 19 insertions(+), 16 deletions(-) diff --git a/static/galapagos.css b/static/galapagos.css index 70c796a..fe5c749 100644 --- a/static/galapagos.css +++ b/static/galapagos.css @@ -52,6 +52,21 @@ section#content { padding: 1em; } +/* Add margin between main content hero boxes since they will be on top + * of one another in some situations */ +.hero > .col { + margin-bottom: 2em; +} + +/* Add margin between download / doc buttons since they will be on top + * of one another in some situations */ +.hero > .col#second a.button { + margin-bottom: 1em; + display: inline-flex; + flex-direction: column; + padding: 14px 2em; +} + .hero > .col > .inner { background: #ddd; border-radius: 1em; @@ -83,7 +98,7 @@ body > footer { height: 3em; line-height: 2em; margin: 0; - padding: 0.5em 0; + padding: 0.5em 0.5em; position: fixed; left: 0; bottom: 0; diff --git a/static/mobile.css b/static/mobile.css index 71456c6..796df65 100644 --- a/static/mobile.css +++ b/static/mobile.css @@ -1,4 +1,4 @@ -@media only screen and (max-device-width: 750px) { +@media only screen and (max-device-width: 768px) { /* Make header links visible */ body > header > .row { height: auto; @@ -9,18 +9,6 @@ border-radius: 4px; } - /* Add margin between main content hero boxes since they will be on top - * of one another */ - .hero > .col#first { - margin-bottom: 2em; - } - - /* Add margin between download / doc buttons since they will be on top - * of one another */ - .hero > .col#second a.primary { - margin-bottom: 1em; - } - /* Anchor footer to bottom, decrease font size * NB: padding-bottom and height will need to be adjusted in the future * if more content is added to the footer! */ @@ -34,14 +22,14 @@ } body > #content { - padding-bottom: 5em; + padding-bottom: 8em; margin-bottom: 0; } body > footer { position: absolute; bottom: 0; - height: 5em; + height: auto; font-size: 10pt; }