oddmuse/css/alex-2018.css

/* This file is in the public domain. */
html{ text-align: center; }

body, rss {
    font-family: "DejaVu Serif", Palatino, serif;
    font-style: normal;
    font-size: 16pt;
    padding: 1em 3em;
    max-width: 72ex;
    display: inline-block;
    text-align: left;
    color: #000;
    background-color: #fff;
}

@media only screen and (max-device-width: 600px) {
    body {
	padding: 1ex;
    }
    textarea {
	font-size: inherit;
    }
}

/* code */

textarea, pre, code, tt {
    font-family: "DejaVu Mono", "Andale Mono", Monaco, "Courier New", Courier, monospace;
}

pre, code, tt {
    font-size: 12pt; /* fits 80ex */
}
pre {
    overflow:hidden;
    white-space: pre-wrap;      /* CSS 3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    word-wrap: break-word;      /* Internet Explorer 5.5+ */
}

@import url(file:///home/alex/alexschroeder.ch/css/alex-2017.css) print;

@media print {
    body {
	font-size: 12pt;
    }
    
    /* hide all the crap */
    div.diff, div.diff+hr, div.refer, div.near, div.definition, div.sister,
    div.cal, div.footer, span.specialdays, span.gotobar, a.edit, a.number span,
    div.rc form, form.tiny, p.comment, p#plus1, div.g-plusone, div.content a.feed {
	display:none;
    }
    div.content a.book,
    div.content a.movie {
	text-decoration: none;
    }
    a cite {
	font-style: italic;
    }
    img[alt="RSS"] { display: none }
    a.rss { font-size: 8pt }
}

/* headings: we can use larger sizes if we use a lighter color.
   we cannot inherit the font-family because header and footer use a narrow font. */

h1, h2, h3, title {
    font-family: inherit;
    font-weight: normal;
}
h1, channel title {
    font-size: 32pt;
    margin: 1em 0 0.5em 0;
    padding: 0.4em 0;
}
h2 {
    font-size: 18pt;
    margin: 2em 0 0 0;
    padding: 0;
}
h3 {
    font-size: inherit;
    font-weight: bold;
    padding: 0;
    margin: 1em 0 0 0;
    clear: both;
}

/* headers in the journal are smaller */

div.journal h1, item title {
    font-size: inherit;
    padding: 0;
    clear: both;
    border-bottom: 1px solid #000;
}
div.journal h2 {
    font-family: inherit;
    font-size: inherit;
}
div.journal h3 {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-style: italic;
}
div.journal hr {
    visibility: hidden;
}
p.more {
    margin-top: 3em;
}
/* Links in headings appear on journal pages. */

h1 a, h2 a, h3 a {
    color:inherit;
    text-decoration:none;
    font-weight: normal;
} 
h1 a:visited, h2 a:visited, h3 a:visited {
    color: inherit;
}

/* for download buttons and the like */

.button {
    display: inline-block;
    font-size: 120%;
    cursor: pointer;
    padding: 0.4em 0.6em;
    text-shadow: 0px -1px 0px #ccc;
    background-color: #cfa;
    border: 1px solid #9d8;
    border-radius: 5px;
    box-shadow: 0px 1px 3px white inset, 0px 1px 3px black;
}

.button .icon {
    color: #363;
    text-shadow: 0px -1px 1px white, 0px 1px 3px #666;
}

.button a {
    text-decoration: none;
    font-weight: normal;
}

/* links */

a.pencil {
    padding-left: 1ex;
    text-decoration: none;
    color: inherit;
    visibility: hidden;
    transition: visibility 0s 1s, opacity 1s linear;
    opacity: 0;
}
*:hover > a.pencil {
    visibility: visible;
    transition: opacity .5s linear;
    opacity: 1;
}
@media print {
    a.pencil {
	display: none;
    }
}

a.number {
    text-decoration: none;
}

/* stop floating content from flowing over the footer */

hr {
    clear: both;
}

/* the distance between links in the navigation bars */

span.bar a {
    margin-right: 1ex;
}

a img {
    border: none;
}

/* search box in the top bar */

.header form, .header p {
    display: inline;
    white-space: nowrap;
}
label[for="searchlang"], #searchlang, .header input[type="submit"] {
    /* don't use display: none! http://stackoverflow.com/questions/5665203/getting-iphone-go-button-to-submit-form */
    visibility: hidden; position: absolute;
}

.header input {
    width: 10ex;
}

/* other form fields */

input[type="text"] {
    padding: 0;
    font-size: 80%;
    line-height: 125%;
}

/* styling for divs that will be invisible when printing
   when printing. */

div.header, div.footer, div.near, div.definition, p.comment, a.tag {
    
    font-size: 14pt;
}
@media print {
    div.header, div.footer, div.near, div.definition, p.comment, a.tag {
	font-size: 8pt;
    }
}

div.footer form.search {
    display: none;
}

/* Recent Changes */

div.rc {
    overflow: hidden;
}
div.rc li + li {
    margin-top: 1em;
}
div.rc li strong, table.history strong, strong.description {
    font-family: inherit;
    font-weight: inherit;
}
.red {
    background: red;
    color: red;
}

.orange {
    background: orange;
    color: orange;
}

.yellow {
    background: yellow;
    color: yellow;
}

.green {
    background: green;
    color: green;
}

.blue {
    background: blue;
    color: blue;
}

.indigo {
    background: indigo;
    color: indigo;
}

.violet {
    background: violet;
    color: violet;
}

.white {
    background: white;
    color: white;
}

.ip-code {
    border: 1px solid #666;
}

/* Diff */

div.diff {
    padding-left: 5%;
    padding-right: 5%;
    font-size: 12pt;
    color: #000;
}
div.old {
    background-color: #ffffaf;
}
div.new {
    background-color: #cfffcf;
}

div.refer {
    padding-left: 5%;
    padding-right: 5%;
    font-size: 12pt;
}

div.message {
    background-color:#fee;
    color:#000;
}

img.xml {
    border:none;
    padding:1px;
}
a.small img {
    max-width:300px;
}
a.large img {
    max-width:600px;
}
div.sister {
    margin-right:1ex;
    background-color:inherit;
}
div.sister p {
    margin-top:0;
}
div.sister hr {
    display:none;
}
div.sister img {
    border:none;
}

div.near, div.definition {
    background-color:#efe;
}

div.sidebar {
    float:right;
    border:1px dotted #000;
    padding:0 1em;
}
div.sidebar ul {
    padding-left:1em;
}

/* replacements, features */

ins {
    font-style: italic;
    text-decoration: none;
}
acronym, abbr {
    letter-spacing:0.1em;
    font-variant:small-caps;
}

/* Interlink prefix not shown */
a .site, a .separator {
        display: none;
}
a cite { font:inherit; }
/* browser borkage */
textarea[name="text"] { width:97%; height:80%; }
textarea[name="summary"] { width:97%; height:3em; }
/* comments */
textarea[name="aftertext"] { width:97%; height:10em; }
div.commentshown {
    font-size: 12pt;
    padding: 2em 0;
}
div.commenthidden {
    display:none;
}
div.commentshown {
    display:block;
}
p.comment {
    margin-bottom: 0;
}
div.comment {
    font-size: 14pt;
}
div.comment h2 {
    margin-top: 5em;
}
/* comment pages with username, homepage, and email subscription */
.comment form span { display: block; }
.comment form span label { display: inline-block; width: 10em; }
/* IE sucks */
.comment input#username,
.comment input#homepage,
.comment input#mail { width: 20em; }

/* cal */
div.month { padding:0; margin:0 2ex; }
body > div.month {
    float:right;
    background-color: inherit;
    border:solid thin;
    padding:0 1ex;
}
.year > .month {
    float:left;
}
.footer {
    clear:both;
}
.month .title a.local {
    background-color: inherit;
}
.month a.local {
    background-color: #ddf;
}
.month a.today {
    background-color: #fdd;
}
.month a {
    color:inherit;
    font-weight:inherit;
    text-decoration: none;
    background-color: #eee;
}
/* history tables and other tables */
table.history {
    border: none;
}
td.history {
    border: none;
}

table {
    border: none;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 1em;
    margin: 1em 2em;
}
table tr td, table tr th {
    border: none;
    padding: 0.2em 0.5em;
    vertical-align: top;
}
table.arab tr th {
    font-weight:normal;
    text-align:left;
    vertical-align:top;
}
table.arab, table.arab tr th, table.arab tr td {
    border:none;
}
th.nobreak {
    white-space:nowrap;
}
table.full { width:99%; margin-left:1px; }
table.j td, table.j th, table tr td.j, table tr th.j, .j { text-align:justify; }
table.l td, table.l th, table tr td.l, table tr th.l, .l { text-align:left; }
table.r td, table.r th, table tr td.r, table tr th.r, .r { text-align:right; }
table.c td, table.c th, table tr td.c, table tr th.c, .c { text-align:center; }
table.t td { vertical-align: top; }
td.half { width:50%; }
td.third { width:33%; }

form table td { padding:5px; }

/* lists */
dd { padding-bottom:0.5ex; }
dl.inside dt { float:left; }
/* search */
div.search span.result { font-size:larger; }
div.search span.info { font-size:smaller; font-style:italic; }
div.search p.result { display:none; }

img.logo {
    float: right;
    margin: 0 0 0 1ex;
    padding: 0;
    border: 1px solid #000;
    opacity: 0.3;
    background-color:#ffe;
}

/* images */

div.content a.feed img, div.journal a.feed img,
div.content a img.smiley, div.journal a img.smiley, img.smiley,
div.content a.inline img, div.journal a.inline img,
div.content li a.image img, div.journal li a.image img { 
    margin: 0; padding: 0; border: none;
}
div.image a img {
    margin-bottom: 0;
}
div.image span.caption {
    margin: 0 1em;
}

img {
    max-width: 100%;
}

.left { float:left; margin-right: 1em; }
.right { float:right; margin-left: 1em; }
.half img { height: 50%; width: 50%; }
.face img { width: 200px; }
div.left .left, div.right .right {
    float:none;
}
.center { text-align:center; }
table.aside {
    float:right;
    width:40%;
    margin-left: 1em;
    padding: 1ex;
    border: 1px dotted #666;
}
table.aside td {
    text-align:left;
}
div.sidebar {
    float:right; width: 250px;
    text-align: right;
    border: none;
    margin: 1ex;
}

.bigsidebar {
    float:right;
    width: 500px;
    border: none;
    margin-left: 1ex;
    font-size: 80%;
}

dl.irc dt { width:20ex; float:left; text-align:right; clear:left; }
dl.irc dt span.time { float:left; }
dl.irc dd { margin-left:22ex; }

/* portrait */

div.footer, div.comment, hr { clear: both; }
.portrait { float: left; font-size: small; margin-right: 1em; }
.portrait a { color: #999; }

div.left { float:left; margin:1em; padding: 0.5em; }
div.left p { display:table-cell; }
div.left p + p { display:table-caption; caption-side:bottom; }

p.table a { float:left; width:20ex; }
p.table + p { clear:both; }

/* mastodon */

div.mastodon { padding: 0 2em }
div.mastodon .status {padding-top: 1ex; border-bottom: 1px solid grey;}
div.mastodon .status:first-child {border-top: 1px solid grey;}

/* terminal "screenshots" */

.terminal {
    width: 80%;
    margin: 50px auto 100px auto;
    padding: 5px;
    font-size: 62%; /* fits 80ex */
    border: 1px solid #999;
    border-radius: 5px;
    box-shadow: 0px 25px 50px #999;  
}

/* rss */

channel * { display: block; }

channel title {
    margin-top: 30pt;
}
copyright {
    font-size: 14pt;
    margin-top: 1em;
}
channel:before {
    font-size: 14pt;
    display: block;
    margin: 1em;
    padding: 0.5em;
    content: "This document is to be read in a feed reader. The item content is escaped HTML, which makes it hard to read for humans. Sorry!";
    color: red;
    border: 1px solid red;
}
license {
    font-size: 11pt;
    margin-bottom: 9pt;
}
contributor:before { content: "Last edited by "; }
contributor:after { content: "."; }
generator:before { content: "Feed generated by "; }
generator:after { content: "."; }
channel description {
    font-weight: bold;
}
item description {
    font-weight: normal;
    margin-bottom: 1em;
}
link, managingEditor, webMaster, license, url,
docs, language,
pubDate, lastBuildDate, ttl, guid, category, comments,
docs, image title, image link,
status, version, diff, history, importance {
    display: none;
}