nasg/style.css
2017-05-23 11:21:10 +01:00

845 lines
12 KiB
CSS

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
/*! margin: 0; */
/*! padding: 0; */
}
html, body {
min-height: 100%;
font-size:19px;
line-height: 1.4em;
font-family:"Liberation Sans", "Helvetica Neue", "Roboto", sans-serif;
font-weight: normal;
color: #333336;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
margin:0;
padding:0;
background-color: #fafafa;
}
html {
position: relative;
}
a {
color: #333;
border-bottom: 1px solid #999;
text-decoration:none;
}
a:hover {
color: #000;
border-bottom: 1px solid #000;
}
b, strong {
font-weight:bold;
}
em {
font-style: italic;
}
p {
padding: 0.6rem 0;
}
ul, ol {
margin: 0.3rem 0;
padding-left:2rem;
}
ul li p,
ol li p {
margin: 0.6rem 0;
padding: 0;
line-height: 1.1rem;
}
blockquote, q {
quotes: none;
margin: 1em 0 1em 1em;
padding-left: 1em;
font-style: italic;
border-left: 2px solid #333;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.footnotes hr {
border:0;
margin-bottom:2rem;
}
.footnotes hr:before {
content: "References";
color: #333336;
}
h1,
h2,
h3,
h4,
h5,
h6,
dt,
.footnotes hr:before {
font-weight:bold;
clear:both;
margin: 0.6rem 0;
font-size: 1rem;
line-height: 1.1rem;
}
.footnoteRef,
.footnoteRef:hover {
border: 0;
white-space: nowrap;
}
.footnoteRef sup {
vertical-align: baseline;
position: relative;
top: -0.3rem;
font-size: 0.8rem;
color: #33c;
margin: 0 0.1rem 0 0;
/*
letter-spacing: -0.08rem;
left: -0.1rem;
*/
}
.footnoteRef sup:before,
.footnoteRef sup:after {
color: #33c;
}
.footnoteRef sup:before {
content: "[";
}
.footnoteRef sup:after {
content: "]";
}
.footnoteRef sup:hover,
.footnoteRef sup:hover:after,
.footnoteRef sup:hover:before {
text-shadow: 1px 0 0 #33c;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #999;
margin: 0.6rem 0;
clear:both;
}
pre {
font-family: "Inconsolata", monospace;
font-size: 0.9rem;
margin: 0.3rem 0;
padding: 0.3rem;
overflow: auto;
}
svg {
transform: rotate(0.01deg);
}
.icon {
width: 19px;
height: 19px;
display: inline-block;
fill: currentColor;
vertical-align:middle;
overflow: visible;
}
code.sourceCode span.kw { font-weight: bold; }
code.sourceCode span.dt { color: #800000; }
code.sourceCode span.dv { color: #0000FF; }
code.sourceCode span.bn { color: #0000FF; }
code.sourceCode span.fl { color: #800080; }
code.sourceCode span.ch { color: #FF00FF; }
code.sourceCode span.st { color: #DD0000; }
code.sourceCode span.co { color: #808080; font-style: italic; }
code.sourceCode span.ot { }
code.sourceCode span.al { color: green; font-weight: bold; }
code.sourceCode span.fu { color: #000080; }
code.sourceCode span.re { }
code.sourceCode span.er { color: red; font-weight: bold; }
code,
pre {
font-family: "Inconsolata", monospace;
font-size: 0.9rem;
}
pre.sourceCode {
margin-top: -0.3rem;
overflow: auto;
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
}
code.sourceCode {
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
-moz-tab-size: 2;
-o-tab-size: 2;
tab-size: 2;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
.tags {
}
.tags ul {
list-style-type: none;
padding: 0.6rem 0;
}
.tags ul li {
display: inline-block;
}
.tags ul li:after {
content: ",";
margin: 0 0.3rem 0 -0.2rem;
}
.tags ul li:last-child:after {
content: "";
display:none;
}
/*
.tags ul li:before {
content: "#";
margin: 0 -0.2rem 0 0;
}
*/
.shortlink svg {
width: 5rem;
height: 5rem;
display:block;
margin: 0 0 0.6rem 0;
}
.footnotes ol li a {
display: inline-block;
max-width: 80%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: top;
margin-bottom: 0.3rem;
}
.footnotes ol li a[href^="#"] {
margin: 0 0 0 0.6rem;
max-width: 20%;
font-size: 0.6rem;
}
.footnotes ol li a[href^="#"]:after {
content: "back to text";
margin: 0 0 0 0.1rem;
color: #666;
}
.footnotes ol li a[href^="#"]:hover:after {
color: #000;
}
.hide {
display: none;
visibility: hidden;
}
.content-header,
.content-footer {
background-color: #333336;
color: #bbb;
}
.content-header a,
.content-footer a {
color: #cccccc;
text-decoration: none;
border: none;
}
.content-header a:hover,
.content-footer a:hover {
color: #fefefe;
border: none;
}
.content-navigation,
.search-form {
display:block;
}
input {
vertical-align:middle;
border: none;
border-bottom: 3px solid #aaa;
background-color: transparent;
color: #ccc;
padding: 0.2rem;
height: 1.6rem;
width: 6rem;
}
input[type=submit] {
width: 2.2rem;
cursor: pointer;
}
input:focus,
input[type=submit]:hover {
border-bottom: 3px solid #fff;
color: #fff;
}
.search-form {
display: block;
padding: 0.3rem 0.1rem;
text-align: center;
}
.content-navigation ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align:center;
}
.content-navigation ul li {
padding: 0.3rem 0;
display: inline-block;
text-align: center;
}
.content-navigation ul li a {
display:block;
padding:0.2rem;
font-weight: bold;
border-bottom: 0.2rem solid transparent;
text-align: center;
font-size: 0.7rem;
}
.content-navigation ul li a svg {
display:block;
margin: auto;
}
.content-navigation ul li a.active {
border-bottom: 0.2rem solid #cccccc;
}
.content-navigation ul li a:hover {
border-bottom: 0.2rem solid #fefefe;
}
@media all and (min-width: 50rem) {
.content-navigation ul li a {
font-size: 0.9rem;
}
.content-navigation ul li a svg {
display:inline-block;
}
.search-form,
.content-navigation {
display:inline-block;
}
.search-form {
float:right;
margin: 0.1rem;
}
}
.more {
display:block;
padding:0.3rem 0 0 0;
font-weight:bold;
}
.more a:before {
content:'Continue \00BB';
}
.follow {
cursor:pointer;
display:block;
text-align:right;
margin: 0.6rem 0;
font-size: 0.8rem;
}
.follow a {
border-bottom: 3px solid #aaa;
padding: 0.3rem;
}
.follow a:hover {
border-bottom-color: #333;
}
.limit,
.content-body {
max-width: 72ch;
margin: 1rem auto;
}
.h-entry {
font-size: 0.86rem;
padding: 0.6rem;
margin: 0 0 1rem 0;
}
.h-entry header h1 {
font-size: 1.3rem;
line-height: 1.3rem;
margin: 0;
}
.h-entry header h1 a {
border: none;
}
.h-entry header h2 {
font-size: 0.96rem;
margin: 0;
}
.h-entry header aside {
font-size: 0.76rem;
display: inline-block;
margin: 0;
}
.h-entry header h2 a,
.h-entry header aside a {
border-color: transparent;
}
.h-entry header h2 a:hover,
.h-entry header aside a:hover {
border-color: #999;
}
.h-entry header aside p {
margin: 0;
padding: 0;
}
.h-entry .author .avatar {
display:none;
visibility: hidden;
}
.h-entry .reaction a {
display:inline-block;
vertical-align: middle;
max-width: 80%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: normal;
border-color: #ccc;
font-size: 0.9rem;
margin: 0.3rem 0;
}
.h-entry .e-summary {
margin: 0.6rem 0.6rem 0 0.6rem;
}
.h-entry .e-summary img {
width: 5.4rem;
height: 5.4rem;
margin: 0 1rem 0 0;
float: left;
display: block;
}
.h-entry .e-summary p {
display:inline;
}
.h-entry .e-content {
margin: 0.6rem 0.6rem 0 0.6rem;
}
.h-entry .e-content h2 {
padding: 0.3rem 0;
border-bottom: 2px solid #989898;
}
.h-entry .e-content h3 {
display: inline-block;
padding: 0.3rem 0 0 0;
border-bottom: 1px solid #989898;
}
.h-entry footer,
.footnotes {
font-size: 0.8rem;
}
.h-entry footer a,
.footnotes a {
border-color: #ddd;
}
.h-entry footer a:hover,
.footnotes a:hover {
border-color: #000;
}
.footnotes ol li p {
line-height: 1.3rem;
padding: 0;
margin: 0;
}
.h-entry footer h6,
.h-entry .footnotes hr:before {
font-size: 0.8rem;
margin: 1rem 0 0 0;
}
.content-note {
font-size: 0.8rem;
}
.adaptimg {
display: block;
max-height: 98vh;
max-width: 100%;
width:auto;
height:auto;
margin: 0.6rem auto;
padding: 0;
outline: 1px solid #333;
}
.w25,
.w33 {
display: inline-block;
height: auto;
}
.w33 {
width: 32%;
}
.w25 {
width: 24%;
}
/*
transition-duration: 0.2s;
transition-property: outline-offset;
}
.adaptimg:hover, .adaptimg:focus {
outline-offset: 0.3rem;
}
*/
.photo .caption {
display:block;
font-style: italic;
margin-bottom: 2em;
}
.exif {
font-size: 0.7rem;
text-align:center;
}
.exif ul {
list-style-type: none;
}
.exif ul li {
display: inline-block;
margin: 0 0.3rem;
}
.exif ul li i {
margin-right: 0.3rem;
}
.pagination ul {
text-align:center;
display: block;
list-style-type: none;
font-size: 1.2rem;
line-height: 1.4rem;
}
.pagination ul li {
display:inline-block;
}
.pagination ul li a,
.pagination ul li span {
padding: 0.3rem 0.6rem;
}
.pagination ul li a {
border-bottom: 3px solid #aaa;
}
.pagination ul li a:hover {
border-bottom-color: #333336;
}
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.content-footer {
margin-top: 2rem;
line-height: 1.3rem;
overflow: hidden;
}
.footer-contact,
.footer-notes {
display: block;
padding: 1rem;
font-size: 0.9rem;
}
.footer-contact dl,
.footer-contact img {
display: inline-block;
vertical-align: top;
width: 80%;
}
.footer-contact img {
width: 18%;
}
.footer-contact .p-name {
font-size: 1.1rem;
font-variant: small-caps;
}
.footer-contact dl dt {
display:none;
visibility: hidden;
}
.footer-contact dl dd {
padding: 0 1rem 0.3rem 0;
margin: 0 1rem 0.3rem 0.3rem;
border-bottom: 1px solid #666;
}
.footer-contact dl dd:first-of-type {
border-bottom: none;
}
@media all and (min-width: 50rem) {
.footer-contact,
.footer-notes {
display: inline-block;
max-width: 48%;
padding: 1rem;
vertical-align: top;
}
}
.searchresult {
margin: 0 0 2rem 0;
}
.searchresult h3 {
font-weight: normal;
font-family: mono, monospace;
font-size: 0.7rem;
margin: 0;
}
.searchresult h3:before {
content: "\2937";
}
.searchresult .highlight {
font-size: 0.9rem;
}
@media print {
html, body {
font-size:10pt !important;
text-shadow:unset !important;
}
@page {
margin: 0.5in;
orphans: 4;
widows: 3;
}
.limit,
.content-body {
max-width: 100% !important;
margin: 0 !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
page-break-after: avoid;
}
p,
li,
pre,
figure,
blockquote,
aside,
.footnotes {
page-break-inside: avoid !important;
}
.e-content {
-webkit-columns: 2 20rem;
-moz-columns: 2 20rem;
columns: 2 20rem;
-webkit-column-gap: 1rem;
-moz-column-gap: 1rem;
column-gap: 1rem;
}
.e-content .photo {
display:block;
page-break-inside: avoid !important;
}
.e-content .adaptive {
display:block;
max-width: 100%;
max-height: 45vh;
text-align:center;
border:none;
text-decoration:none;
padding:0;
margin: 1rem auto 1rem auto;
page-break-inside: avoid !important;
}
.e-content .adaptive img {
page-break-inside: avoid !important;
max-width: 100%;
max-height:45vh;
}
.e-content .adaptive .caption {
font-style: italic;
display:block;
margin-bottom: 2em
}
.content-note,
.content-header,
.content-footer,
video,
audio {
display:none;
visibility: hidden;
}
.footnotes ol li a {
display: block;
overflow: visible;
white-space: normal;
}
.footnotes ol li a[href^="#"],
.footnotes ol li a[href^="#"]:after {
display:none;
visibility: hidden;
}
}