thoughts/style.css

541 lines
9.0 KiB
CSS
Raw Normal View History

2015-05-21 23:56:14 -04:00
@font-face {
font-family: Open Sans;
src: url('/fonts/OpenSans-Regular.woff');
}
body {
margin: 1em 5em;
text-align: justify;
2015-05-21 23:56:14 -04:00
font-family: 'Open Sans', 'Liberation Sans', sans-serif;
}
body.index {
margin: 2em 10em 1em 10em;
padding-right: 300px;
}
a { color: #0066cc; }
a:visited { color: #6666cc; }
/* hanging; ids for asciidoc styling */
header, footer,
#header, #footer, .article #copyright {
margin: 0em -3em;
text-align: left;
}
body.index footer {
margin: 0em -10em;
}
/* typesetting standards for ~50 chars per line */
body article .content,
body.article #content {
clear: both;
margin: auto;
max-width: 50em;
}
body article header,
body.article #header {
margin: auto;
max-width: 56em;
}
2013-05-25 22:15:16 -04:00
h1, h2, h3, #menu,
2013-06-03 22:29:23 -04:00
body.index ul.index li .day,
.author,
2013-06-03 22:29:23 -04:00
strong {
font-family: 'URW Gothic L', 'Avant Garde', sans-serif;
font-weight: normal;
}
h1 { font-size: 1.8em; }
h2 { font-size: 1.4em; }
h2.date {
display: block;
font-size: 1.1em;
color: #666f63;
margin: -1em 1.5em 1.5em 0em;
float: left;
}
h2.date ~ .author {
display: block;
margin-top: -1em;
}
.author > .email {
margin-left: 0.25em;
}
2013-05-27 16:59:14 -04:00
h1 a, h1 a:visited {
text-decoration: none;
color: inherit;
}
/* latter for asciidoc-generated output */
h1.title,
#header h1 {
font-size: 2em;
margin-bottom: 0.1em;
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-top: 0px;
margin-bottom: 2em;
}
2013-05-25 11:09:26 -04:00
#menu {
text-align: center;
padding: 0;
margin: 0px -300px 3.5em 0px;
2013-05-25 11:09:26 -04:00
}
#menu li {
display: inline-block;
font-size: 1.3em;
2013-05-25 11:09:26 -04:00
letter-spacing: 0.05em;
/* in addition to the 3.5em above; allows
for decent spacing when line overflows
at lower resolutions
(3.5 + [0.5/1.3=0.38] = 4.0)*/
margin-bottom: 0.38em;
2013-05-25 11:09:26 -04:00
}
#menu li a {
color: #666f63;
text-decoration: none;
border-left: 1px solid #868f83;
padding: 0.15em 1em;
}
#menu li:first-child a {
border-left: none;
}
#headline {
position: absolute;
text-align: center;
right: 10em;
}
#headline a {
display: block;
: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;
margin-top: 2em;
clear: left;
}
#headline a:first-child {
margin-top: 0;
}
#headline img {
margin-left: 2em;
}
body.index .content {
/* this is not ideal, but works since the sidebar content is (currently) all
images */
min-height: 750px;
padding-right: 1.5em;
}
2013-05-25 22:15:16 -04:00
body.index h3.index {
margin-bottom: 0.5em;
}
body.index ul.index {
text-align: left;
list-style: none;
margin: 0px;
padding-left: 1.5em;
}
body.index ul.index li {
margin: 0.5em 0px;
}
body.index ul.index li .day {
float: left;
margin-right: 0.5em;
}
p#ref-0 {
margin-top: 2em;
}
p.ref {
font-size: 0.9em;
margin: 0.25em 0em;
: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-align: left;
}
sup {
font-size: 0.6em;
}
p.ref:target {
background-color: #fce94f;
}
pre {
white-space: pre-wrap;
}
dt {
letter-spacing: 0.1em;
}
tt {
background-color: #eeeeec;
color: #000055;
}
.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;
}
.listingblock {
background-color: #eeeeec;
background-image: url('images/cross_scratches.png');
padding: 0.5em;
border: 1px solid #babdb6;
border-radius: 0.25em
}
.exampleblock {
margin-left: 2em;
padding-left: 1em;
border-left: 5px solid #eeeeec;
}
#gnuinside {
position: absolute;
display: block;
top: 0px;
right: 0px;
width: 50px;
height: 50px;
}
footer, #footer, .article #copyright {
font-size: 0.9em;
margin-top: 2em;
clear: both;
}
footer .commit-id {
font-family: monospace;
}
/* to account for headline (sidebar) */
body.index footer .bimgs,
body.index footer hr {
margin-right: -300px;
}
#selflinks {
position: absolute;
top: 60px;
right: 0px;
width: 42px;
padding: 6px;
}
: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
#selflinks a {
text-decoration: none;
}
.bimgs {
float: right;
margin-left: 1em;
}
.bimgs img {
margin-left: 0.1em;
}
.bimgs img:first-child {
margin-left: 0em;
}
2013-06-03 22:29:23 -04:00
body.content .abstract {
font-size: 0.9em;
}
body.content .abstract .start {
font-weight: bold;
}
2014-12-07 00:24:56 -05:00
dl > dd {
margin-bottom: 0.5em;
}
dl > dd > dl {
margin-top: 1em;
}
dl > dd > p:last-child {
margin-bottom: 0px;
}
#postamble > p {
margin: 0em;
}
#index-headline {
display: block;
margin: 0em auto 2em auto;
}
2016-06-18 13:21:15 -04:00
#index-headline img {
border-radius: 0.25em;
max-width: 90%;
2016-06-18 13:21:15 -04:00
}
/** exclusively asciidoc-generated content styling **/
body.article h2 {
position: relative;
border-bottom: 2px solid #babdb6;
left: -2em;
margin-right: -2em;
}
body.article h3 {
border-bottom: 1px solid #babdb6;
}
#author {
font-size: 1.1em;
letter-spacing: 0.1em;
}
#footer {
border-top: 2px solid #babdb6;
padding-top: 0.5em;
}
.article #copyright {
margin-top: 0;
}
: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
@media screen and (max-width: 1024px) {
body {
margin: 2em !important;
}
/* account for upper-right page fold using the full
image width---this will be guaranteed to work
regardless of the user's font size; kinda ruins
the illusion if text is atop of it ;) */
h1.subject {
margin-right: 50px;
}
: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
#headline {
right: 2em;
}
header, footer,
#header, #footer, .article #copyright {
margin-left: 0px;
}
body.index footer {
margin: 0em;
}
}
@media screen and (max-width: 640px) {
body {
margin: 1em !important;
padding-right: 0 !important;
}
body.index .content {
min-height: 0px;
padding-right: 0px;
}
header {
margin-right: 0px;
}
#menu {
margin-right: 0px;
margin-bottom: 2em;
}
#headline {
position: initial;
float: right;
: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
}
#headline a {
display: inline;
margin: 0.5em;
}
#headline img {
max-height: 75px;
: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
margin-left: 0;
}
#index-headline img {
max-height: 5em;
}
: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
#selflinks {
position: absolute;
top: 0px;
right: 50px;
width: auto;
height: 42px;
padding: 6px;
}
header, footer,
body.index footer .bimgs,
body.index footer hr,
#header, #footer, .article #copyright {
margin-right: 0px;
}
.bimgs {
float: none;
margin-left: 0px;
}
/* we're pretty low on real estate at this point */
blockquote {
margin: 1em 0px 1em 2em;
}
ul, ul.index {
padding-left: 1em !important;
}
}
/* selflinks start to overlap with heading */
@media screen and (max-width: 475px) {
#selflinks img {
max-width: 32px;
max-height: 32px;
}
}
: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
/* when things start getting odd from 640px */
@media screen and (max-width: 420px) {
: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
#menu {
font-size: 0.8em;
}
#selflinks img {
max-width: 21px;
max-height: 21px;
}
footer {
font-size: 0.9em;
}
.bimgs img {
width: 70px;
height: 25px;
}
: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
}
2014-12-07 00:24:56 -05:00
/*** Org mode HTML output ***/
/* much of the above will overlap, so only some is needed here */
#postamble {
margin: 2em -5em 0em -5em;
text-align: left;
font-size: 0.9em;
border-top: 1px solid #babdb6;
padding-top: 0.5em;
}
.todo, .done {
font-size: 0.1em;
letter-spacing: -0.1em;
color: transparent;
}
/* note that we must undo our hiding */
.todo::before,
.done::before {
position: absolute;
visibility: visible;
letter-spacing: normal;
font-size: 12em;
left: -1.5em;
top: -0.1em;
font-weight: bold;
}
.todo::before {
color: black;
content: '☐';
}
.done::before {
color: #4e9a06;
content: '☑';
}
/* eases positioning in, e.g., margin */
.outline-1,
.outline-2,
.outline-3 {
position: relative;
}
#table-of-contents .todo,
#table-of-contents .done {
display: none;
}
/*** https://github.com/jgm/highlighting-kate/blob/master/css/hk-tango.css * ***/
/* Loosely based on pygment's tango colors */
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 { 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 */