826 lines
13 KiB
CSS
826 lines
13 KiB
CSS
/**
|
||
* mikegerwitz.com stylesheet
|
||
*
|
||
* Copyright (C) 2019 Mike Gerwitz
|
||
* This work is released under the Creative Commons Attribution
|
||
* Share-Alike 4.0 International license.
|
||
*/
|
||
|
||
@font-face {
|
||
font-family: 'Open Sans';
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
src: local('Open Sans Regular'), local('OpenSans-Regular'), url('/fonts/OpenSans-Regular.woff') format('woff');
|
||
}
|
||
@font-face {
|
||
font-family: 'Open Sans';
|
||
font-style: normal;
|
||
font-weight: 300;
|
||
src: local('Open Sans Light'), local('OpenSans-Light'), url('/fonts/OpenSans-Light.woff') format('woff');
|
||
}
|
||
@font-face {
|
||
font-family: 'Open Sans';
|
||
font-style: normal;
|
||
font-weight: 600;
|
||
src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url('/fonts/OpenSans-SemiBold.woff') format('woff');
|
||
}
|
||
|
||
html {
|
||
/* see footer; just in case the page is too short */
|
||
background-color: #2e3436;
|
||
}
|
||
|
||
body { /*inline*/
|
||
margin: 0;
|
||
padding: 2em 4em 0em 4em;
|
||
}
|
||
body {
|
||
background-color: white;
|
||
text-align: justify;
|
||
}
|
||
|
||
body {
|
||
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; }
|
||
|
||
.title > a { /*inline*/
|
||
color: black;
|
||
text-decoration: none;
|
||
}
|
||
|
||
a.muted {
|
||
color: inherit;
|
||
text-decoration: none;
|
||
}
|
||
|
||
|
||
a.box {
|
||
display: block;
|
||
width: 200px;
|
||
padding: 206px 0.1em 0 0.1em;
|
||
|
||
border-width: 2px;
|
||
border-style: solid;
|
||
border-color: #2e3436;
|
||
|
||
background-color: #2e3436;
|
||
color: white;
|
||
|
||
background-repeat: no-repeat;
|
||
background-size: contain;
|
||
|
||
text-align: center;
|
||
font-weight: bold;
|
||
font-size: 1.2em;
|
||
|
||
text-decoration: none;
|
||
}
|
||
|
||
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. */
|
||
aside a.box {
|
||
filter: grayscale(100%);
|
||
transition: filter 0.25s;
|
||
}
|
||
aside a.box:hover,
|
||
aside a.box:focus {
|
||
filter: none;
|
||
}
|
||
|
||
|
||
/* Link lists are to be styled in context-specific ways. */
|
||
ul.links {
|
||
display: block;
|
||
padding: 0;
|
||
margin: 1em 0;
|
||
text-align: center;
|
||
}
|
||
ul.links > li {
|
||
display: block;
|
||
margin-top: 1em;
|
||
}
|
||
ul.links > li:first-child {
|
||
margin-top: 0;
|
||
}
|
||
|
||
|
||
/* Talk images */
|
||
.talk .links a.video {
|
||
display: block;
|
||
background-position: center top;
|
||
background-repeat: no-repeat;
|
||
|
||
line-height: 2em; /* some space below image */
|
||
}
|
||
.talk .links a.video.lp-2016 {
|
||
background-image: url('images/lp-2016.png');
|
||
padding-top: 75px;
|
||
min-width: 220px;
|
||
}
|
||
.talk .links a.video.lp-2017 {
|
||
background-image: url('images/lp-2017.png');
|
||
padding-top: 75px;
|
||
min-width: 220px;
|
||
}
|
||
.talk .links a.video.lp-2018 {
|
||
background-image: url('images/lp-2018.png');
|
||
padding-top: 97px;
|
||
min-width: 200px;
|
||
}
|
||
.talk .links a.video.lp-2019 {
|
||
background-image: url('images/tp/lp-2019-logo.png');
|
||
padding-top: 75px;
|
||
min-width: 220px;
|
||
}
|
||
.talk .links a.video.lp-2021 {
|
||
background-image: url('images/tp/lp-2021-logo.svg');
|
||
padding-top: 205px;
|
||
min-width: 205px;
|
||
}
|
||
|
||
|
||
a.box.free-sw {
|
||
background-image: url('images/tp/fsfs-icons-beige.png');
|
||
}
|
||
a.box.eff-privacy {
|
||
background-image: url('images/tp/eff-privacy.png');
|
||
}
|
||
|
||
|
||
main {
|
||
position: relative;
|
||
display: block; /* for older browsers that default to inline */
|
||
}
|
||
|
||
|
||
@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 */
|
||
}
|
||
|
||
|
||
h1, h2, h3, h4, h5, h6 {
|
||
font-weight: normal;
|
||
line-height: 1.25em;
|
||
text-align: left;
|
||
}
|
||
|
||
h1 { font-size: 1.7em; }
|
||
h2 { font-size: 1.4em; }
|
||
h3 { font-size: 1.3em; }
|
||
h4 { font-size: 1.2em; }
|
||
h5 { font-size: 1.1em; }
|
||
h6 { font-size: 1.0em; }
|
||
|
||
|
||
h1 a,
|
||
h1 a:visited {
|
||
text-decoration: none;
|
||
color: inherit;
|
||
}
|
||
|
||
|
||
header { /*inline*/
|
||
position: relative;
|
||
margin: 0 auto 2em auto;
|
||
max-width: 120ch;
|
||
}
|
||
|
||
header h1 { /*inline*/
|
||
font-size: 2em;
|
||
margin: 0px 0px 0.1em 0px;
|
||
}
|
||
|
||
.title {
|
||
text-align: left;
|
||
}
|
||
|
||
h2.desc { /*inline*/
|
||
font-size: 0.8em;
|
||
}
|
||
|
||
h2.desc {
|
||
color: #666f63;
|
||
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
|
||
margin: 0px 0px 2em 0px;
|
||
}
|
||
|
||
header nav {
|
||
text-align: center;
|
||
}
|
||
|
||
@media ( min-width: 90ch ) { /*inline*/
|
||
header nav {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
}
|
||
}
|
||
|
||
.menu ul { /*inline*/
|
||
display: inline-block;
|
||
}
|
||
.menu ul {
|
||
padding: 0;
|
||
margin: 0;
|
||
|
||
/* height of h1 to the left */
|
||
line-height: 2em;
|
||
text-align: center;
|
||
}
|
||
|
||
.menu li { /*inline*/
|
||
display: inline-block;
|
||
}
|
||
.menu li {
|
||
font-size: 1.1em;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.menu li a {
|
||
color: #2e3436;
|
||
text-decoration: none;
|
||
padding: 0.15em 1em;
|
||
}
|
||
.menu li a:hover {
|
||
border-bottom: 0.2ex solid #2e3436;
|
||
}
|
||
|
||
|
||
/* 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
|
||
it easier for the eyes to not loose their way. So the wider the text,
|
||
the larger the line spacing. */
|
||
|
||
article { /*inline*/
|
||
max-width: 70ch;
|
||
}
|
||
article {
|
||
line-height: 1.8em;
|
||
margin: auto;
|
||
}
|
||
article pre {
|
||
line-height: 1.5em;
|
||
}
|
||
|
||
article aside {
|
||
font-weight: lighter;
|
||
margin: 1em;
|
||
}
|
||
|
||
article section.footnotes {
|
||
font-size: 0.9em;
|
||
font-weight: lighter;
|
||
line-height: 1.5em;
|
||
}
|
||
|
||
article figure {
|
||
margin: 0 2em;
|
||
}
|
||
article figure.inline {
|
||
margin: 0;
|
||
}
|
||
article figure > figcaption {
|
||
font-weight: lighter;
|
||
font-size: 0.9em;
|
||
}
|
||
article figure > figcaption:last-child {
|
||
border-top: 1px solid black;
|
||
margin-top: 1em;
|
||
}
|
||
|
||
article details {
|
||
/* 3px border + 2px spacing for nested details */
|
||
border-left: 5px solid;
|
||
border-image: linear-gradient(to right, #eeeeee 3px, transparent 2px) 5;
|
||
|
||
padding: 0em 1em;
|
||
margin: 1em 0em 1em -1em;
|
||
}
|
||
|
||
article details > summary {
|
||
cursor: pointer;
|
||
}
|
||
|
||
article details[open] > summary {
|
||
border-bottom: 1px dashed;
|
||
}
|
||
|
||
|
||
@media ( max-width: 60ch ) {
|
||
article {
|
||
line-height: 1.5em;
|
||
}
|
||
}
|
||
|
||
|
||
@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;
|
||
}
|
||
}
|
||
|
||
|
||
article.abstract .title {
|
||
display: inline-block;
|
||
margin: 0;
|
||
font-weight: bold;
|
||
font-size: 1.1em; /* h3 */
|
||
text-align: left;
|
||
}
|
||
|
||
article:not(.abstract) > hgroup {
|
||
margin: 0 -2rem;
|
||
}
|
||
article:not(.abstract) > h1:not(:first-child),
|
||
article:not(.abstract) > h2 {
|
||
margin-left: -2rem;
|
||
border-bottom: 0.2ex solid #2e3436;
|
||
margin-block-start: 1.25em;
|
||
}
|
||
article:not(.abstract) > h3 {
|
||
border-bottom: 0.1ex solid #2e3436;
|
||
margin-block-start: 1.25em;
|
||
}
|
||
|
||
|
||
@media ( max-width: 70ch ) {
|
||
article:not(.abstract) > hgroup {
|
||
margin: 0;
|
||
}
|
||
|
||
article:not(.abstract) > h1:not(:first-child),
|
||
article:not(.abstract) > h2 {
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
|
||
article .date {
|
||
font-size: 0.9em;
|
||
color: #666f63;
|
||
margin-top: -1em;
|
||
}
|
||
|
||
article.abstract {
|
||
margin-top: 1em;
|
||
}
|
||
|
||
article.abstract p:first-of-type {
|
||
margin-top: 0;
|
||
}
|
||
|
||
/* Images are all centered by default. */
|
||
article img {
|
||
display: block;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* Non-fenced code (e.g. backticks) */
|
||
article code:not(.sourceCode) {
|
||
background-color: #f8f8f8; /* matches pandoc */
|
||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||
border-radius: 0.25em;
|
||
padding: 0.15ex 0.15em;
|
||
}
|
||
|
||
|
||
/* Two columns on larger displays */
|
||
@media ( min-width: 90ch ) {
|
||
section.compact {
|
||
clear: both;
|
||
}
|
||
|
||
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;
|
||
}
|
||
}
|
||
|
||
|
||
/* posts */
|
||
body.posts section.compact:not(:first-child) {
|
||
padding-top: 2em;
|
||
}
|
||
body.posts section.compact > h1 {
|
||
text-align: center;
|
||
}
|
||
|
||
|
||
section .view-all {
|
||
display: block;
|
||
text-align: center;
|
||
margin: 1em auto;
|
||
clear: both;
|
||
}
|
||
|
||
|
||
section.highlight {
|
||
position: relative;
|
||
display: block;
|
||
|
||
background-color: #2e3436;
|
||
color: #eeeeee; /* just slightly less jarring */
|
||
|
||
padding: 2em;
|
||
margin: 2em 0;
|
||
|
||
clear: both;
|
||
}
|
||
|
||
@media ( max-width: 50ch ) {
|
||
section.highlight {
|
||
padding: 1em;
|
||
}
|
||
}
|
||
|
||
section.highlight > .title {
|
||
font-size: 1.3em;
|
||
display: inline-block;
|
||
font-weight: bold;
|
||
margin-top: 0;
|
||
}
|
||
|
||
section.highlight aside {
|
||
display: block;
|
||
|
||
font-weight: 300;
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
section.highlight a.lp-watch {
|
||
display: inline-block;
|
||
|
||
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;
|
||
}
|
||
}
|
||
|
||
@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;
|
||
}
|
||
}
|
||
|
||
|
||
blockquote {
|
||
margin: 0 0 0 1em;
|
||
padding: 0 0 0 1em;
|
||
border-left: 0.2em solid #2e3436;
|
||
}
|
||
|
||
|
||
.inline-img {
|
||
text-align: center;
|
||
}
|
||
|
||
.avatar {
|
||
display: block;
|
||
|
||
border-radius: 5px;
|
||
box-shadow: 1px 1px 3px #666f63;
|
||
|
||
margin: auto;
|
||
}
|
||
|
||
.attribution {
|
||
display: block;
|
||
|
||
font-size: 0.75em;
|
||
text-decoration: italic;
|
||
text-align: right;
|
||
|
||
width: 66%;
|
||
margin-left: auto;
|
||
}
|
||
|
||
|
||
.page-flip {
|
||
position: absolute;
|
||
display: block;
|
||
|
||
top: 0px;
|
||
right: 0px;
|
||
width: 50px;
|
||
height: 50px;
|
||
}
|
||
|
||
|
||
.affiliation-list ul {
|
||
display: inline-block;
|
||
text-align: center;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
.affiliation-list ul > li {
|
||
display: inline-block;
|
||
margin: 1em;
|
||
}
|
||
.affiliation-list a {
|
||
text-decoration: none;
|
||
}
|
||
|
||
.affiliation-list img:not(:hover) {
|
||
transition: filter 3s;
|
||
filter: grayscale(100%);
|
||
}
|
||
.affiliation-list img[src*=octoright] {
|
||
transition: transform 0.5s;
|
||
}
|
||
.affiliation-list img[src*=octoright]:hover {
|
||
transform: rotate(-20deg);
|
||
}
|
||
|
||
.hn-icon {
|
||
display: inline-block;
|
||
position: relative;
|
||
|
||
background-color: #ff6600;
|
||
|
||
width: 42px;
|
||
height: 42px;
|
||
top: -1em;
|
||
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
line-height: 42px;
|
||
}
|
||
.hn-icon:not(:hover) {
|
||
transition: background-color 3s;
|
||
background-color: #888888;
|
||
}
|
||
|
||
.hn-icon,
|
||
a.hn-icon:visited,
|
||
a.hn-icon:active,
|
||
a.hn-icon:hover {
|
||
color: white;
|
||
text-decoration: none;
|
||
}
|
||
|
||
br.end {
|
||
clear: both;
|
||
}
|
||
|
||
#copyright {
|
||
max-width: 80ch;
|
||
margin: 1em auto 0em auto;
|
||
}
|
||
|
||
footer .site-nav {
|
||
display: inline-block;
|
||
margin: 0 auto 1em auto;
|
||
}
|
||
footer .site-nav > nav {
|
||
text-align: left;
|
||
float: left;
|
||
margin-right: 2em;
|
||
}
|
||
footer .site-nav > nav:last-child {
|
||
margn-right: 0;
|
||
}
|
||
footer .site-nav > nav > h2 {
|
||
font-size: 1.2em;
|
||
margin: 0;
|
||
font-weight: bold;
|
||
}
|
||
footer .site-nav > nav > ul {
|
||
display: inline-block;
|
||
padding: 0 0 0 0.5em;
|
||
margin: 0;
|
||
text-align: left;
|
||
}
|
||
footer .site-nav > nav > ul > li {
|
||
display: block;
|
||
}
|
||
footer .site-nav > nav > ul > li a {
|
||
color: white;
|
||
text-decoration: none;
|
||
}
|
||
|
||
|
||
.octoflop {
|
||
/* make upright again (image is rotated 270deg) */
|
||
transform: rotate(90deg);
|
||
|
||
animation-duration: 2s;
|
||
animation-delay: 2s;
|
||
animation-name: octoflop;
|
||
animation-fill-mode: forwards;
|
||
}
|
||
|
||
@keyframes octoflop {
|
||
30% {
|
||
transform: rotate(-35deg);
|
||
}
|
||
50% {
|
||
transform: rotate(25deg);
|
||
}
|
||
65% {
|
||
transform: rotate(-17deg);
|
||
}
|
||
75% {
|
||
transform: rotate(10deg);
|
||
}
|
||
85% {
|
||
transform: rotate(-5deg);
|
||
}
|
||
90% {
|
||
transform: rotate(3deg);
|
||
}
|
||
95% {
|
||
transform: rotate(-2deg);
|
||
}
|
||
100% {
|
||
transform: rotate(0deg);
|
||
}
|
||
}
|
||
|
||
/* Finally, the perpetual pain in my ass as a web developer: IE. IE11 is
|
||
* the only version I attempt here, enough to make it presentable and warn
|
||
* the user. */
|
||
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
||
main {
|
||
max-width: 50em;
|
||
}
|
||
article {
|
||
max-width: 35em;
|
||
}
|
||
main::before {
|
||
display: block;
|
||
content: 'Warning: Your browser is unsupported and will not display this website correctly.';
|
||
text-align: center;
|
||
}
|
||
}
|