Responsive desgin
This website honors the user's default font settings (both to be kind and for accessibility reasons). Consequently, the responsive layout is based on character units (ch) rather than pixels.master
parent
a9f2d51bcd
commit
f38aada781
GPG Key ID:
8C917B7F5DC51BA2
|
|
@ -1,3 +1,5 @@
|
|||
<h1 id="about">About</h1>
|
||||
|
||||
<aside class="sm">
|
||||
<img src="/images/me-libreplanet-2016.png"
|
||||
alt="Photo of Mike Gerwitz holding a microphone in front of a blackboard"
|
||||
|
|
@ -5,17 +7,13 @@
|
|||
class="inline-img avatar" />
|
||||
|
||||
<p>
|
||||
GPG Fingerprint: <tt>D6E9 B930 028A 6C38 F43B 2388 FEF6 3574 5E6F 6D05</tt>
|
||||
<a href="https://emailselfdefense.fsf.org/">[?]</a>
|
||||
GPG Fingerprint:
|
||||
<tt>D6E9 B930 028A 6C38 F43B 2388 FEF6 3574 5E6F 6D05</tt> <!--
|
||||
--><a href="https://emailselfdefense.fsf.org/">[?]</a>
|
||||
</p>
|
||||
<ul class="links">
|
||||
<li><a href="about/resume">View my résumé/CV.</a></li>
|
||||
</ul>
|
||||
</aside>
|
||||
|
||||
<article class="abstract">
|
||||
<h1>About</h1>
|
||||
|
||||
<article class="abstract" aria-labelledby="about">
|
||||
<p>
|
||||
I am a <a href="http://www.gnu.org/philosophy/">free (as in
|
||||
freedom) software</a> <a href="https://stallman.org/articles/on-hacking.html">hacker</a>
|
||||
|
|
@ -81,6 +79,9 @@
|
|||
signed with both my <a href="/about/key-transition.txt.new.asc">new</a>
|
||||
and <a href="/about/key-transition.txt.old.asc">old</a> keys.
|
||||
</p>
|
||||
<p>
|
||||
<a href="about/resume">View my résumé/CV.</a>
|
||||
</p>
|
||||
<p>
|
||||
<span class="attribution"><a href="https://media.libreplanet.org/u/libreplanet/m/session-03-c-ms-png-libreplanet-2016-sessions-ec00/">LibrePlanet
|
||||
2016 Photo</a> Copyright © 2016 Kori Feener,
|
||||
|
|
|
|||
|
|
@ -32,8 +32,9 @@ main()
|
|||
|
||||
local title
|
||||
title=$(
|
||||
<<<"$body" grep -A1 '<article' \
|
||||
<<<"$body" grep -A10 '<main' \
|
||||
| grep '<h1' \
|
||||
| head -n1 \
|
||||
| grep -oP '(?<=>)[^<]+' \
|
||||
)
|
||||
|
||||
|
|
|
|||
11
src/index.sh
11
src/index.sh
|
|
@ -88,6 +88,11 @@ main()
|
|||
src/mkheader index
|
||||
|
||||
cat <<EOF
|
||||
<h1 id="latest-posts">Latest Posts</h1>
|
||||
<section class="asideable" aria-labelledby="latest-posts">
|
||||
$( abstracts {1..2} )
|
||||
</section>
|
||||
|
||||
<aside>
|
||||
<ul class="links">
|
||||
<li><a class="box free-sw" href="#">What is Free/Libre Software?</a></li>
|
||||
|
|
@ -95,12 +100,6 @@ main()
|
|||
</ul>
|
||||
</aside>
|
||||
|
||||
<section aria-labelledby="latest-posts">
|
||||
<h1 id="latest-posts">Latest Posts</h1>
|
||||
|
||||
$( abstracts {1..2} )
|
||||
</section>
|
||||
|
||||
<section class="highlight">
|
||||
<h1 class="title">The Surreptitious Assault on Privacy, Security,
|
||||
and Freedom</h1>
|
||||
|
|
|
|||
296
style.css
296
style.css
|
|
@ -37,12 +37,53 @@ body {
|
|||
|
||||
margin: 0;
|
||||
padding: 2em 4em 0em 4em;
|
||||
/*padding: 1em 5em;*/
|
||||
|
||||
text-align: justify;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
|
||||
footer {
|
||||
font-weight: 300;
|
||||
}
|
||||
footer, #footer {
|
||||
font-size: 0.8em;
|
||||
text-align: center;
|
||||
|
||||
background-color: #2e3436;
|
||||
color: #eeeeee;
|
||||
|
||||
margin: 4em -4rem 0 -4rem;
|
||||
padding: 1em 2rem;
|
||||
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
@media ( max-width: 70ch ) {
|
||||
body {
|
||||
padding: 1em 2em 0em 2em;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-left: -2rem;
|
||||
margin-right: -2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media ( max-width: 50ch ) {
|
||||
body {
|
||||
padding: 1em 1em 0em 1em;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-left: -1rem;
|
||||
margin-right: -1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
a { color: #0066cc; }
|
||||
a:visited { color: #6666cc; }
|
||||
|
||||
|
|
@ -55,9 +96,9 @@ a:visited { color: #6666cc; }
|
|||
a.box {
|
||||
display: block;
|
||||
width: 200px;
|
||||
padding: 204px 0 0 0;
|
||||
padding: 206px 0.1em 0 0.1em;
|
||||
|
||||
border-width: 4px;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-color: #2e3436;
|
||||
|
||||
|
|
@ -74,16 +115,43 @@ a.box {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
a.box:hover {
|
||||
border-top-width: 8px;
|
||||
padding-top: 200px;
|
||||
background-position: 0px -4px;
|
||||
a.box:hover,
|
||||
a.box:focus {
|
||||
border-top-width: 8px; /* adds 6px */
|
||||
padding-top: 200px; /* removes 6px */
|
||||
background-position: 0px -6px;
|
||||
}
|
||||
|
||||
a.box:visited {
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media ( max-width: 50ch ) {
|
||||
a.box {
|
||||
width: 150px;
|
||||
padding-top: 156px;
|
||||
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
a.box:hover,
|
||||
a.box:focus {
|
||||
padding-top: 150px; /* removes 6px */
|
||||
}
|
||||
}
|
||||
|
||||
@media ( max-width: 35ch ) {
|
||||
a.box {
|
||||
width: 100px;
|
||||
padding-top: 106px;
|
||||
}
|
||||
|
||||
a.box:hover,
|
||||
a.box:focus {
|
||||
padding-top: 100px; /* removes 6px */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Asides should be dimmed so as not to distract from
|
||||
the main content. */
|
||||
|
|
@ -91,7 +159,8 @@ aside a.box {
|
|||
filter: grayscale(100%);
|
||||
transition: filter 0.25s;
|
||||
}
|
||||
aside a.box:hover {
|
||||
aside a.box:hover,
|
||||
aside a.box:focus {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
|
|
@ -100,7 +169,7 @@ aside a.box:hover {
|
|||
ul.links {
|
||||
display: block;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin: 1em 0;
|
||||
text-align: center;
|
||||
}
|
||||
ul.links > li {
|
||||
|
|
@ -112,14 +181,10 @@ ul.links > li:first-child {
|
|||
}
|
||||
|
||||
|
||||
.talk ul.links {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
/* Talk images */
|
||||
.talk .links a.video {
|
||||
display: block;
|
||||
background-position: center top;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
line-height: 2em; /* some space below image */
|
||||
|
|
@ -153,12 +218,51 @@ main {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
main > aside {
|
||||
float: right;
|
||||
|
||||
@media ( min-width: 90ch ) {
|
||||
main {
|
||||
margin: auto;
|
||||
max-width: 90ch;
|
||||
}
|
||||
|
||||
main > section.asideable {
|
||||
float: left;
|
||||
}
|
||||
main > aside {
|
||||
float: right;
|
||||
}
|
||||
|
||||
body.posts main {
|
||||
width: auto;
|
||||
max-width: 120ch;
|
||||
}
|
||||
}
|
||||
|
||||
/* Style aside as a row on moderate widths */
|
||||
@media not all and ( min-width: 90ch )
|
||||
{
|
||||
main > aside {
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
main > aside > ul.links {
|
||||
display: table-row;
|
||||
}
|
||||
main > aside > ul.links li {
|
||||
display: table-cell;
|
||||
}
|
||||
main > aside > ul.links li a {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
aside.sm {
|
||||
max-width: 30ch;
|
||||
font-size: 0.9em;
|
||||
|
||||
margin: auto; /* for centering responsively */
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -204,9 +308,15 @@ h2.desc {
|
|||
}
|
||||
|
||||
header nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media ( min-width: 90ch ) {
|
||||
header nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.menu ul {
|
||||
|
|
@ -233,17 +343,6 @@ header nav {
|
|||
}
|
||||
|
||||
|
||||
main {
|
||||
margin: auto;
|
||||
width: 90ch;
|
||||
}
|
||||
|
||||
body.posts main {
|
||||
width: auto;
|
||||
max-width: 120ch;
|
||||
}
|
||||
|
||||
|
||||
/* Articles are formatted at a modest width that makes reading
|
||||
easier. Reduced with makes it easier for the reader's eyes to scan to
|
||||
the next line. Alternatively, the line spacing can be increased to make
|
||||
|
|
@ -251,21 +350,32 @@ body.posts main {
|
|||
the larger the line spacing. */
|
||||
|
||||
article {
|
||||
width: 70ch;
|
||||
line-height: 1.8em;
|
||||
max-width: 70ch;
|
||||
margin: auto;
|
||||
}
|
||||
article.abstract {
|
||||
width: 60ch;
|
||||
line-height: 1.5em;
|
||||
margin: 0;
|
||||
|
||||
|
||||
@media ( max-width: 60ch ) {
|
||||
article {
|
||||
line-height: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Main links appear to the right of the abstract. */
|
||||
article.abstract ul.links {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
min-width: 25ch;
|
||||
|
||||
@media ( min-width: 90ch ) {
|
||||
article.abstract {
|
||||
max-width: 60ch;
|
||||
line-height: 1.5em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Main links appear to the right of the abstract. */
|
||||
article.abstract ul.links {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
min-width: 25ch;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -310,20 +420,23 @@ article img {
|
|||
}
|
||||
|
||||
|
||||
section.compact {
|
||||
clear: both;
|
||||
}
|
||||
/* Two columns on larger displays */
|
||||
@media ( min-width: 90ch ) {
|
||||
section.compact {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
section.compact article {
|
||||
width: 48%;
|
||||
float: right;
|
||||
}
|
||||
section.compact article {
|
||||
width: 48%;
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* the first child is the section heading, so odds should
|
||||
be on the left */
|
||||
section.compact article:nth-child(2n) {
|
||||
float: left;
|
||||
clear: both;
|
||||
/* the first child is the section heading, so odds should
|
||||
be on the left */
|
||||
section.compact article:nth-child(2n) {
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -357,44 +470,68 @@ section.highlight {
|
|||
clear: both;
|
||||
}
|
||||
|
||||
@media ( max-width: 50ch ) {
|
||||
section.highlight {
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
section.highlight > .title {
|
||||
font-size: 1.3em;
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
font-weight: bold;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
section.highlight aside {
|
||||
display: block;
|
||||
float: right;
|
||||
width: 40%;
|
||||
|
||||
font-weight: 300;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
section.highlight a.lp-watch {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
|
||||
background-image: url('images/tp/lp-2017-crop.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: middle left;
|
||||
|
||||
/* accommodate background image */
|
||||
line-height: 75px;
|
||||
padding-left: 85px; /* 75px + 10px margin between */
|
||||
|
||||
left: 2em;
|
||||
bottom: 1em;
|
||||
margin-top: 1em;
|
||||
|
||||
font-size: 1.2em;
|
||||
color: white;
|
||||
|
||||
clear: left;
|
||||
}
|
||||
|
||||
@media ( min-width: 50ch ) {
|
||||
section.highlight a.lp-watch {
|
||||
background-image: url('images/tp/lp-2017-crop.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: middle left;
|
||||
|
||||
/* accommodate background image */
|
||||
line-height: 75px;
|
||||
padding-left: 85px; /* 75px + 10px margin between */
|
||||
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
|
||||
@media ( min-width: 90ch ) {
|
||||
section.highlight > .title {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
section.highlight aside {
|
||||
float: right;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
section.highlight a.lp-watch {
|
||||
position: absolute;
|
||||
|
||||
left: 2em;
|
||||
bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.inline-img {
|
||||
text-align: center;
|
||||
|
|
@ -489,24 +626,8 @@ br.end {
|
|||
clear: both;
|
||||
}
|
||||
|
||||
footer, footer h2 {
|
||||
font-weight: 300;
|
||||
}
|
||||
footer, #footer {
|
||||
font-size: 0.8em;
|
||||
text-align: center;
|
||||
|
||||
background-color: #2e3436;
|
||||
color: #eeeeee;
|
||||
|
||||
margin: 4em -4rem 0 -4rem;
|
||||
padding: 1em;
|
||||
|
||||
clear: both;
|
||||
}
|
||||
|
||||
#copyright {
|
||||
width: 80ch;
|
||||
max-width: 80ch;
|
||||
margin: 1em auto 0em auto;
|
||||
}
|
||||
|
||||
|
|
@ -517,7 +638,10 @@ footer .site-nav {
|
|||
footer .site-nav > nav {
|
||||
text-align: left;
|
||||
float: left;
|
||||
margin: 0 2em;
|
||||
margin-right: 2em;
|
||||
}
|
||||
footer .site-nav > nav:last-child {
|
||||
margn-right: 0;
|
||||
}
|
||||
footer .site-nav > nav > h2 {
|
||||
font-size: 1.2em;
|
||||
|
|
|
|||
Loading…
Reference in New Issue