Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[RFC] Initial papercut fixes for mobile #2

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

[RFC] Initial papercut fixes for mobile #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e5d5e3d
Initial papercut fixes for mobile
maxcrees Dec 22, 2016
35ba07a
Mobile: Keep footer at bottom even if there isn't enough content
maxcrees Dec 22, 2016
61c79c8
Change max-device-width to 768px and more footer changes
maxcrees Dec 31, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions about/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/static/kube.css" type="text/css" rel="stylesheet">
<link href="/static/galapagos.css" type="text/css" rel="stylesheet">
<link href="/static/mobile.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
Expand All @@ -30,12 +31,12 @@ <h1 class="title">Coming Soon</h1>

<footer>
<div class="row">
<div class="col col-6">
Copyright &copy; 2016 Galapagos Linux. All rights reserved. Web site content is licensed under CC-BY-SA-3.0.
</div>
<div class="col col-6">
<div class="col col-6" id="left">
<!-- List of links goes here. -->
</div>
<div class="col col-6" id="right">
Copyright &copy; 2016 Galapagos Linux. All rights reserved. Web site content is licensed under CC-BY-SA-3.0.
</div>
</div>
</footer>
</body>
Expand Down
9 changes: 5 additions & 4 deletions contribute/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/static/kube.css" type="text/css" rel="stylesheet">
<link href="/static/galapagos.css" type="text/css" rel="stylesheet">
<link href="/static/mobile.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
Expand All @@ -30,12 +31,12 @@ <h1 class="title">Coming Soon</h1>

<footer>
<div class="row">
<div class="col col-6">
Copyright &copy; 2016 Galapagos Linux. All rights reserved. Web site content is licensed under CC-BY-SA-3.0.
</div>
<div class="col col-6">
<div class="col col-6" id="left">
<!-- List of links goes here. -->
</div>
<div class="col col-6" id="right">
Copyright &copy; 2016 Galapagos Linux. All rights reserved. Web site content is licensed under CC-BY-SA-3.0.
</div>
</div>
</footer>
</body>
Expand Down
9 changes: 5 additions & 4 deletions download/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/static/kube.css" type="text/css" rel="stylesheet">
<link href="/static/galapagos.css" type="text/css" rel="stylesheet">
<link href="/static/mobile.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
Expand All @@ -30,12 +31,12 @@ <h1 class="title">Coming Soon</h1>

<footer>
<div class="row">
<div class="col col-6">
Copyright &copy; 2016 Galapagos Linux. All rights reserved. Web site content is licensed under CC-BY-SA-3.0.
</div>
<div class="col col-6">
<div class="col col-6" id="left">
<!-- List of links goes here. -->
</div>
<div class="col col-6" id="right">
Copyright &copy; 2016 Galapagos Linux. All rights reserved. Web site content is licensed under CC-BY-SA-3.0.
</div>
</div>
</footer>
</body>
Expand Down
17 changes: 9 additions & 8 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@
<title>Galapagos Linux welcomes you</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="static/kube.css" type="text/css" rel="stylesheet">
<link href="static/galapagos.css" type="text/css" rel="stylesheet">
<link href="/static/kube.css" type="text/css" rel="stylesheet">
<link href="/static/galapagos.css" type="text/css" rel="stylesheet">
<link href="/static/mobile.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
Expand All @@ -29,7 +30,7 @@ <h1 class="title">Welcome to Galapagos</h1>
<br>

<div class="row hero equal">
<div class="col col-6">
<div class="col col-6" id="first">
<div class="inner">
<p><span class="lead">Galapagos is the friendly source-based Linux distribution.</span>
Built out of the long history of the venerable <a href="https://gentoo.org/">Gentoo Linux</a> distribution, Galapagos has three defining goals.</p>
Expand All @@ -41,7 +42,7 @@ <h1 class="title">Welcome to Galapagos</h1>
</ol>
</div>
</div>
<div class="col col-6">
<div class="col col-6" id="second">
<div class="inner">
<h3>Interested?</h3>
<p>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!</p>
Expand All @@ -67,12 +68,12 @@ <h2>Friendliness</h2>

<footer>
<div class="row">
<div class="col col-6">
Copyright &copy; 2016 Galapagos Linux. All rights reserved. Web site content is licensed under CC-BY-SA-3.0.
</div>
<div class="col col-6">
<div class="col col-6" id="left">
<!-- List of links goes here. -->
</div>
<div class="col col-6" id="right">
Copyright &copy; 2016 Galapagos Linux. All rights reserved. Web site content is licensed under CC-BY-SA-3.0.
</div>
</div>
</footer>
</body>
Expand Down
34 changes: 32 additions & 2 deletions static/galapagos.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -81,13 +96,28 @@ 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;
padding: 0.5em 0.5em;
position: fixed;
left: 0;
bottom: 0;
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;
}
44 changes: 44 additions & 0 deletions static/mobile.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
@media only screen and (max-device-width: 768px) {
/* Make header links visible */
body > header > .row {
height: auto;
}

body > header > .row > .hide-on-print {
background-color: #AD6A91;
border-radius: 4px;
}

/* 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: 8em;
margin-bottom: 0;
}

body > footer {
position: absolute;
bottom: 0;
height: auto;
font-size: 10pt;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we have a small amount of padding here? Not sure why, but it seems to have none - at least on Fennec.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Totally agree on this. Checkout the demo page now and see if that's better (clearing cache if necessary).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems to have broken on 320x480: Screen shot 2016-12-31 at 00 44 48.png
:(


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;
}
}
9 changes: 5 additions & 4 deletions template
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/static/kube.css" type="text/css" rel="stylesheet">
<link href="/static/galapagos.css" type="text/css" rel="stylesheet">
<link href="/static/mobile.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
Expand All @@ -30,12 +31,12 @@

<footer>
<div class="row">
<div class="col col-6">
Copyright &copy; 2016 Galapagos Linux. All rights reserved. Web site content is licensed under CC-BY-SA-3.0.
</div>
<div class="col col-6">
<div class="col col-6" id="left">
<!-- List of links goes here. -->
</div>
<div class="col col-6" id="right">
Copyright &copy; 2016 Galapagos Linux. All rights reserved. Web site content is licensed under CC-BY-SA-3.0.
</div>
</div>
</footer>
</body>
Expand Down