Mike Gerwitz

Free Software Hacker+Activist

aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorMike Gerwitz <mtg@gnu.org>2019-01-16 23:26:45 -0500
committerMike Gerwitz <mtg@gnu.org>2019-01-17 00:01:12 -0500
commitf38aada7818e8c95e3ff0fcf7af812d96572ce0a (patch)
treea01361285c3d26e58ca894cb2b8e729d3e2e1326
parenta9f2d51bcd8c0fb51d70c73cca4c25819f7de3a4 (diff)
downloadthoughts-f38aada7818e8c95e3ff0fcf7af812d96572ce0a.tar.gz
thoughts-f38aada7818e8c95e3ff0fcf7af812d96572ce0a.tar.bz2
thoughts-f38aada7818e8c95e3ff0fcf7af812d96572ce0a.zip
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.
-rw-r--r--src/about.htm17
-rwxr-xr-xsrc/h12title3
-rwxr-xr-xsrc/index.sh11
-rw-r--r--style.css294
4 files changed, 225 insertions, 100 deletions
diff --git a/src/about.htm b/src/about.htm
index c8622ef..231a3ce 100644
--- a/src/about.htm
+++ b/src/about.htm
@@ -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>&nbsp;<!--
+ --><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>
@@ -82,6 +80,9 @@
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&nbsp;©&nbsp;2016 Kori&nbsp;Feener,
<a href="https://creativecommons.org/licenses/by/4.0/">CC&nbsp;BY&nbsp;4.0</a>;
diff --git a/src/h12title b/src/h12title
index c638b96..b5f6026 100755
--- a/src/h12title
+++ b/src/h12title
@@ -32,8 +32,9 @@ main()
local title
title=$(
- <<<"$body" grep -A1 '<article' \
+ <<<"$body" grep -A10 '<main' \
| grep '<h1' \
+ | head -n1 \
| grep -oP '(?<=>)[^<]+' \
)
diff --git a/src/index.sh b/src/index.sh
index b48ed69..83a38f0 100755
--- a/src/index.sh
+++ b/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>
diff --git a/style.css b/style.css
index 18eeda5..3b146e7 100644
--- a/style.css
+++ b/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,45 +470,69 @@ 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;
+}
+
+@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;
+ }
+}
- 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;