825 lines
14 KiB
CSS
825 lines
14 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 {
|
||
background-color: white;
|
||
|
||
/* TODO: slightly non-black color */
|
||
|
||
margin: 0;
|
||
padding: 2em 4em 0em 4em;
|
||
|
||
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; }
|
||
|
||
.title > a {
|
||
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;
|
||
}
|
||
|
||
|
||
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;
|
||
}
|
||
|
||
|
||
@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 {
|
||
font-weight: normal;
|
||
line-height: 1.25em;
|
||
text-align: left;
|
||
}
|
||
|
||
h1 { font-size: 1.7em; }
|
||
h2 { font-size: 1.4em; }
|
||
h3 { font-size: 1.1em; }
|
||
h4 { font-size: 1.0em; }
|
||
|
||
|
||
h1 a, h1 a:visited {
|
||
text-decoration: none;
|
||
color: inherit;
|
||
}
|
||
|
||
|
||
header {
|
||
position: relative;
|
||
margin: 0 0 2em 0;
|
||
}
|
||
|
||
header h1 {
|
||
font-size: 2em;
|
||
margin: 0px 0px 0.1em 0px;
|
||
}
|
||
|
||
.title {
|
||
text-align: left;
|
||
}
|
||
|
||
h2.desc {
|
||
font-size: 0.8em;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
font-weight: normal;
|
||
color: #666f63;
|
||
|
||
margin: 0px 0px 2em 0px;
|
||
}
|
||
|
||
header nav {
|
||
text-align: center;
|
||
}
|
||
|
||
@media ( min-width: 90ch ) {
|
||
header nav {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
}
|
||
}
|
||
|
||
.menu ul {
|
||
display: inline-block;
|
||
text-align: center;
|
||
padding: 0;
|
||
margin: 0;
|
||
|
||
/* height of h1 to the left */
|
||
line-height: 2em;
|
||
}
|
||
.menu li {
|
||
display: inline-block;
|
||
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 {
|
||
line-height: 1.8em;
|
||
max-width: 70ch;
|
||
margin: auto;
|
||
}
|
||
|
||
|
||
@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: 2px solid #babdb6;
|
||
}
|
||
article:not(.abstract) > h3 {
|
||
border-bottom: 1px solid #babdb6;
|
||
}
|
||
|
||
|
||
@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;
|
||
}
|
||
|
||
|
||
/* 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);
|
||
}
|
||
}
|
||
|
||
|
||
/**
|
||
* cgit customization
|
||
**/
|
||
|
||
div#cgit div.content {
|
||
padding: 2em 0em; /* remove left/right margin */
|
||
}
|
||
|
||
/* repo name and desc, above tabs */
|
||
div#cgit table#header td.main {
|
||
font-size: 1.7rem; /* h1 font size (see above) */
|
||
}
|
||
div#cgit table#header td.sub {
|
||
border-top: 0px;
|
||
}
|
||
|
||
div#cgit #header {
|
||
margin: inherit; /* undo previous conflicting style */
|
||
}
|
||
|
||
/* reduce tab page separator height */
|
||
div#cgit table.tabs {
|
||
border-bottom-width: 1px;
|
||
}
|
||
div#cgit table.tabs td a {
|
||
padding: 0.25ex 0.75em 0ex;
|
||
}
|
||
div#cgit table.tabs td a.active {
|
||
background-color: inherit;
|
||
border-bottom: 3px solid #ccc;
|
||
}
|
||
|
||
div#cgit div.content {
|
||
border-bottom: inherit; /* we have our own footer */
|
||
}
|
||
|
||
/* we have limited width, so wrap and compensate */
|
||
div#cgit table.list.nowrap td {
|
||
white-space: inherit;
|
||
text-align: left;
|
||
}
|
||
div#cgit table.list.nowrap td.sublevel-repo,
|
||
div#cgit table.list.nowrap td .age-months {
|
||
white-space: nowrap;
|
||
}
|
||
div#cgit table.list.nowrap tr {
|
||
vertical-align: top;
|
||
}
|
||
|
||
div#cgit table.list tr:not(.nohover) td {
|
||
padding-top: 0.5ex;
|
||
padding-bottom: 0.5ex;
|
||
}
|
||
|
||
/* getting creative...separate sections */
|
||
div#cgit table.list tr:not(.nohover) + tr.nohover td {
|
||
padding-top: 1ex;
|
||
}
|
||
|
||
/* reduce headings relative to surrounding page */
|
||
div#cgit h1 { font-size: 1.4em; }
|
||
div#cgit h2 { font-size: 1.2em; }
|
||
div#cgit h3 { font-size: 1.1em; }
|
||
div#cgit h4 { font-size: 1.0em; }
|
||
|
||
|
||
/*** https://github.com/jgm/highlighting-kate/blob/master/css/hk-tango.css ***/
|
||
/* GNU GPLv2 */
|
||
/* Loosely based on pygment's tango colors */
|
||
/* Modified where indicated by Mike Gerwitz */
|
||
table.sourceCode, tr.sourceCode, td.sourceCode, table.sourceCode pre
|
||
{ margin: 0; padding: 0; border: 0; vertical-align: baseline; border: none; background-color: #f8f8f8 }
|
||
td.nums { text-align: right; padding-right: 5px; padding-left: 5px; background-color: #f0f0f0; }
|
||
td.sourceCode { padding-left: 5px; }
|
||
code.sourceCode { background-color: #f8f8f8; }
|
||
pre.sourceCode {
|
||
/* modified by Mike Gerwitz */
|
||
padding: 1em;
|
||
margin: 0 -1em;
|
||
|
||
background-color: #f8f8f8;
|
||
line-height: 125%
|
||
}
|
||
td.nums pre { background-color: #f0f0f0; line-height: 125% }
|
||
code.sourceCode span.kw { color: #204a87; font-weight: bold } /* Keyword */
|
||
code.sourceCode span.dt { color: #204a87 } /* Keyword.Type */
|
||
code.sourceCode span.dv { color: #0000cf } /* Literal.Number.Integer */
|
||
code.sourceCode span.bn { color: #0000cf } /* Literal.Number.Hex */
|
||
code.sourceCode span.fl { color: #0000cf } /* Literal.Number.Float */
|
||
code.sourceCode span.ch { color: #4e9a06 } /* Literal.String.Char */
|
||
code.sourceCode span.st { color: #4e9a06 } /* Literal.String */
|
||
code.sourceCode span.co { color: #8f5902; font-style: italic } /* Comment */
|
||
code.sourceCode span.ot { color: #8f5902 } /* Comment.Preproc */
|
||
code.sourceCode span.al { color: #ef2929 } /* Generic.Error */
|
||
code.sourceCode span.fu { color: #000000 } /* Name.Function */
|
||
code.sourceCode span.re { }
|
||
code.sourceCode span.er { color: #a40000; border: 1px solid #ef2929 } /* Error */
|