thoughts/style.css

594 lines
10 KiB
CSS
Raw Normal View History

/**
* mikegerwitz.com stylesheet
*
* Copyright (C) 2019 Mike Gerwitz
* This work is released under the Creative Commons Attribution
* Share-Alike 4.0 International license.
*/
/* TODO: Good font stack to fall back on if user has fonts blocked. */
2015-05-21 23:56:14 -04:00
@font-face {
font-family: Source Sans Pro;
src: url('/fonts/SourceSansPro-Regular.otf.woff');
}
@font-face {
font-family: Source Sans Pro Light;
src: url('/fonts/SourceSansPro-Light.otf.woff');
}
html {
/* see footer; just in case the page is too short */
background-color: #2e3436;
2015-05-21 23:56:14 -04:00
}
body {
background-color: white;
/* TODO: slightly non-black color */
margin: 0;
padding: 2em 4em 0em 4em;
/*padding: 1em 5em;*/
text-align: justify;
font-family: 'Source Sans Pro', 'Liberation Sans', sans-serif;
}
a { color: #0066cc; }
a:visited { color: #6666cc; }
.title > a {
color: black;
text-decoration: none;
2017-04-03 23:52:52 -04:00
}
a.box {
display: block;
width: 200px;
padding: 204px 0 0 0;
2017-04-03 23:52:52 -04:00
border-width: 4px;
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 {
border-top-width: 8px;
padding-top: 200px;
background-position: 0px -4px;
}
a.box:visited {
color: white;
}
/* 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 {
filter: none;
}
/* Link lists are to be styled in context-specific ways. */
ul.links {
display: block;
padding: 0;
margin: 0;
text-align: center;
}
ul.links > li {
display: block;
margin-top: 1em;
}
ul.links > li:first-child {
margin-top: 0;
}
.talk ul.links {
display: inline-block;
}
/* Talk images */
.talk .links a.video {
display: block;
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;
}
main > aside {
float: right;
}
aside.sm {
max-width: 30ch;
font-size: 0.9em;
}
h1, h2, h3 {
font-weight: normal;
}
h1 { font-size: 1.7em; }
h2 { font-size: 1.4em; }
h3 { font-size: 1.1em; }
h4 { font-size: 1.0em; }
2013-05-27 16:59:14 -04:00
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;
text-align: left;
}
.title {
2014-12-07 00:24:56 -05:00
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 {
position: absolute;
top: 0;
right: 0;
}
.menu ul {
display: inline-block;
2013-05-25 11:09:26 -04:00
text-align: center;
padding: 0;
margin: 0;
/* height of h1 to the left */
line-height: 2em;
2017-04-03 23:52:52 -04:00
}
.menu li {
display: inline-block;
font-size: 1.1em;
font-weight: bold;
2013-05-25 11:09:26 -04:00
}
.menu li a {
color: #2e3436;
2013-05-25 11:09:26 -04:00
text-decoration: none;
padding: 0.15em 1em;
}
.menu li a:hover {
border-bottom: 0.3ex solid #2e3436;
2013-05-25 11:09:26 -04:00
}
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
it easier for the eyes to not loose their way. So the wider the text,
the larger the line spacing. */
article {
width: 70ch;
line-height: 1.8em;
margin: auto;
}
article.abstract {
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;
}
2017-10-29 00:12:15 -04:00
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;
2017-10-29 00:12:15 -04:00
}
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;
2017-04-03 23:52:52 -04:00
}
article .date {
font-size: 0.9em;
color: #666f63;
margin-top: -1em;
2013-05-25 22:15:16 -04:00
}
article.abstract {
margin-top: 1em;
2013-05-25 22:15:16 -04:00
}
article.abstract p:first-of-type {
margin-top: 0;
2013-05-25 22:15:16 -04:00
}
/* Images are all centered by default. */
article img {
display: block;
margin: 0 auto;
}
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) {
2013-05-25 22:15:16 -04:00
float: left;
clear: both;
2013-05-25 22:15:16 -04:00
}
/* 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 {
display: block;
background-color: #2e3436;
padding: 2em;
color: #eeeeee; /* just slightly less jarring */
margin: 2em 0;
clear: both;
}
section.highlight > .title {
font-size: 1.2em;
display: inline-block;
width: 50%;
font-weight: bold;
margin-top: 0;
}
section.highlight aside {
display: block;
float: right;
width: 40%;
font-family: 'Source Sans Pro Light';
font-size: 0.9em;
}
section.highlight a.lp-watch {
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 */
font-size: 1.2em;
color: white;
clear: left;
}
.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;
2017-04-03 23:52:52 -04:00
}
.affiliation-list ul > li {
display: inline-block;
margin: 1em;
}
.affiliation-list a {
:Updated CSS to format pages for smaller resolutions The page is designed for modern PC resolutions---that is, 1280 or greater width. Since it uses a 300px right-hand sidebar in conjunction with fairly generous margins (for the index pages, at least), this causes problems with smaller resolutions. For the classic (but outdated) 1024px resolution, the margins will adjust to give more viewing room. For 640px or less resolutions, which are common on some mobile devies such as tablets, the headline that is normally displayed in the sidebar is moved to the top and the images are significantly reduced in size, providing 300px additional viewing width. The 42x42px images that are displayed below the GNU logo on the upper-right are also moved to the top of the page and to the left of the GNU logo and certain other margins (such as blockquote and ul) are reduced. At around 400px, the images next to the GNU logo start to become problematic and may overlap with the title; therefore, the size of the images are halved so that they can fit above the title. This happens to be close the resolution of certain mobile devices, such as the iPhone (which unfortunately I see many hits from in my sever logs) with a width of 320px, so this is the layout that will be used for such devices. Note that the styles for these widths are build atop of the existing rules and essentially ``undo'' certain styles; this is to fall back to the default desktop style in case the browser does not support such media queries.
2013-06-15 23:13:46 -04:00
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;
2017-07-29 08:47:41 -04:00
width: 42px;
height: 42px;
top: -1em;
font-size: 16px;
font-weight: bold;
text-align: center;
2017-07-29 08:47:41 -04:00
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;
2013-06-03 22:29:23 -04:00
}
footer, footer h2 {
font-family: 'Source Sans Pro Light';
2014-12-07 00:24:56 -05:00
}
footer, #footer {
font-size: 0.8em;
text-align: center;
2014-12-07 00:24:56 -05:00
background-color: #2e3436;
color: #eeeeee;
2014-12-07 00:24:56 -05:00
margin: 4em -4rem 0 -4rem;
padding: 1em;
2014-12-07 00:24:56 -05:00
clear: both;
2014-12-07 00:24:56 -05:00
}
#copyright {
width: 80ch;
margin: 1em auto 0em auto;
}
footer .site-nav {
display: inline-block;
margin: 0 auto 1em auto;
2016-06-18 13:21:15 -04:00
}
footer .site-nav > nav {
text-align: left;
float: left;
margin: 0 2em;
}
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;
}
:Updated CSS to format pages for smaller resolutions The page is designed for modern PC resolutions---that is, 1280 or greater width. Since it uses a 300px right-hand sidebar in conjunction with fairly generous margins (for the index pages, at least), this causes problems with smaller resolutions. For the classic (but outdated) 1024px resolution, the margins will adjust to give more viewing room. For 640px or less resolutions, which are common on some mobile devies such as tablets, the headline that is normally displayed in the sidebar is moved to the top and the images are significantly reduced in size, providing 300px additional viewing width. The 42x42px images that are displayed below the GNU logo on the upper-right are also moved to the top of the page and to the left of the GNU logo and certain other margins (such as blockquote and ul) are reduced. At around 400px, the images next to the GNU logo start to become problematic and may overlap with the title; therefore, the size of the images are halved so that they can fit above the title. This happens to be close the resolution of certain mobile devices, such as the iPhone (which unfortunately I see many hits from in my sever logs) with a width of 320px, so this is the layout that will be used for such devices. Note that the styles for these widths are build atop of the existing rules and essentially ``undo'' certain styles; this is to fall back to the default desktop style in case the browser does not support such media queries.
2013-06-15 23:13:46 -04:00
.octoflop {
/* make upright again (image is rotated 270deg) */
transform: rotate(90deg);
:Updated CSS to format pages for smaller resolutions The page is designed for modern PC resolutions---that is, 1280 or greater width. Since it uses a 300px right-hand sidebar in conjunction with fairly generous margins (for the index pages, at least), this causes problems with smaller resolutions. For the classic (but outdated) 1024px resolution, the margins will adjust to give more viewing room. For 640px or less resolutions, which are common on some mobile devies such as tablets, the headline that is normally displayed in the sidebar is moved to the top and the images are significantly reduced in size, providing 300px additional viewing width. The 42x42px images that are displayed below the GNU logo on the upper-right are also moved to the top of the page and to the left of the GNU logo and certain other margins (such as blockquote and ul) are reduced. At around 400px, the images next to the GNU logo start to become problematic and may overlap with the title; therefore, the size of the images are halved so that they can fit above the title. This happens to be close the resolution of certain mobile devices, such as the iPhone (which unfortunately I see many hits from in my sever logs) with a width of 320px, so this is the layout that will be used for such devices. Note that the styles for these widths are build atop of the existing rules and essentially ``undo'' certain styles; this is to fall back to the default desktop style in case the browser does not support such media queries.
2013-06-15 23:13:46 -04:00
animation-duration: 2s;
animation-delay: 2s;
animation-name: octoflop;
animation-fill-mode: forwards;
:Updated CSS to format pages for smaller resolutions The page is designed for modern PC resolutions---that is, 1280 or greater width. Since it uses a 300px right-hand sidebar in conjunction with fairly generous margins (for the index pages, at least), this causes problems with smaller resolutions. For the classic (but outdated) 1024px resolution, the margins will adjust to give more viewing room. For 640px or less resolutions, which are common on some mobile devies such as tablets, the headline that is normally displayed in the sidebar is moved to the top and the images are significantly reduced in size, providing 300px additional viewing width. The 42x42px images that are displayed below the GNU logo on the upper-right are also moved to the top of the page and to the left of the GNU logo and certain other margins (such as blockquote and ul) are reduced. At around 400px, the images next to the GNU logo start to become problematic and may overlap with the title; therefore, the size of the images are halved so that they can fit above the title. This happens to be close the resolution of certain mobile devices, such as the iPhone (which unfortunately I see many hits from in my sever logs) with a width of 320px, so this is the layout that will be used for such devices. Note that the styles for these widths are build atop of the existing rules and essentially ``undo'' certain styles; this is to fall back to the default desktop style in case the browser does not support such media queries.
2013-06-15 23:13:46 -04:00
}
@keyframes octoflop {
30% {
transform: rotate(-35deg);
:Updated CSS to format pages for smaller resolutions The page is designed for modern PC resolutions---that is, 1280 or greater width. Since it uses a 300px right-hand sidebar in conjunction with fairly generous margins (for the index pages, at least), this causes problems with smaller resolutions. For the classic (but outdated) 1024px resolution, the margins will adjust to give more viewing room. For 640px or less resolutions, which are common on some mobile devies such as tablets, the headline that is normally displayed in the sidebar is moved to the top and the images are significantly reduced in size, providing 300px additional viewing width. The 42x42px images that are displayed below the GNU logo on the upper-right are also moved to the top of the page and to the left of the GNU logo and certain other margins (such as blockquote and ul) are reduced. At around 400px, the images next to the GNU logo start to become problematic and may overlap with the title; therefore, the size of the images are halved so that they can fit above the title. This happens to be close the resolution of certain mobile devices, such as the iPhone (which unfortunately I see many hits from in my sever logs) with a width of 320px, so this is the layout that will be used for such devices. Note that the styles for these widths are build atop of the existing rules and essentially ``undo'' certain styles; this is to fall back to the default desktop style in case the browser does not support such media queries.
2013-06-15 23:13:46 -04:00
}
50% {
transform: rotate(25deg);
}
65% {
transform: rotate(-17deg);
2017-07-29 08:47:41 -04:00
}
75% {
transform: rotate(10deg);
:Updated CSS to format pages for smaller resolutions The page is designed for modern PC resolutions---that is, 1280 or greater width. Since it uses a 300px right-hand sidebar in conjunction with fairly generous margins (for the index pages, at least), this causes problems with smaller resolutions. For the classic (but outdated) 1024px resolution, the margins will adjust to give more viewing room. For 640px or less resolutions, which are common on some mobile devies such as tablets, the headline that is normally displayed in the sidebar is moved to the top and the images are significantly reduced in size, providing 300px additional viewing width. The 42x42px images that are displayed below the GNU logo on the upper-right are also moved to the top of the page and to the left of the GNU logo and certain other margins (such as blockquote and ul) are reduced. At around 400px, the images next to the GNU logo start to become problematic and may overlap with the title; therefore, the size of the images are halved so that they can fit above the title. This happens to be close the resolution of certain mobile devices, such as the iPhone (which unfortunately I see many hits from in my sever logs) with a width of 320px, so this is the layout that will be used for such devices. Note that the styles for these widths are build atop of the existing rules and essentially ``undo'' certain styles; this is to fall back to the default desktop style in case the browser does not support such media queries.
2013-06-15 23:13:46 -04:00
}
85% {
transform: rotate(-5deg);
:Updated CSS to format pages for smaller resolutions The page is designed for modern PC resolutions---that is, 1280 or greater width. Since it uses a 300px right-hand sidebar in conjunction with fairly generous margins (for the index pages, at least), this causes problems with smaller resolutions. For the classic (but outdated) 1024px resolution, the margins will adjust to give more viewing room. For 640px or less resolutions, which are common on some mobile devies such as tablets, the headline that is normally displayed in the sidebar is moved to the top and the images are significantly reduced in size, providing 300px additional viewing width. The 42x42px images that are displayed below the GNU logo on the upper-right are also moved to the top of the page and to the left of the GNU logo and certain other margins (such as blockquote and ul) are reduced. At around 400px, the images next to the GNU logo start to become problematic and may overlap with the title; therefore, the size of the images are halved so that they can fit above the title. This happens to be close the resolution of certain mobile devices, such as the iPhone (which unfortunately I see many hits from in my sever logs) with a width of 320px, so this is the layout that will be used for such devices. Note that the styles for these widths are build atop of the existing rules and essentially ``undo'' certain styles; this is to fall back to the default desktop style in case the browser does not support such media queries.
2013-06-15 23:13:46 -04:00
}
90% {
transform: rotate(3deg);
2017-07-29 08:47:41 -04:00
}
95% {
transform: rotate(-2deg);
}
100% {
transform: rotate(0deg);
}
:Updated CSS to format pages for smaller resolutions The page is designed for modern PC resolutions---that is, 1280 or greater width. Since it uses a 300px right-hand sidebar in conjunction with fairly generous margins (for the index pages, at least), this causes problems with smaller resolutions. For the classic (but outdated) 1024px resolution, the margins will adjust to give more viewing room. For 640px or less resolutions, which are common on some mobile devies such as tablets, the headline that is normally displayed in the sidebar is moved to the top and the images are significantly reduced in size, providing 300px additional viewing width. The 42x42px images that are displayed below the GNU logo on the upper-right are also moved to the top of the page and to the left of the GNU logo and certain other margins (such as blockquote and ul) are reduced. At around 400px, the images next to the GNU logo start to become problematic and may overlap with the title; therefore, the size of the images are halved so that they can fit above the title. This happens to be close the resolution of certain mobile devices, such as the iPhone (which unfortunately I see many hits from in my sever logs) with a width of 320px, so this is the layout that will be used for such devices. Note that the styles for these widths are build atop of the existing rules and essentially ``undo'' certain styles; this is to fall back to the default desktop style in case the browser does not support such media queries.
2013-06-15 23:13:46 -04:00
}
/*** 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 */