thoughts/style.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;
}


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 > summary {
  cursor: pointer;
}


@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;
}


/* 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 {
  font-family: 'Open Sans', sans-serif;
}
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 */


/* 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;
  }
}