79 lines
2.7 KiB
CSS
79 lines
2.7 KiB
CSS
/* Classless.css v1.0 (Tiny Inline Version)*/
|
|
|
|
/* Tiny Reset for block elements */
|
|
* {box-sizing: border-box; border-spacing: 0;}
|
|
header, footer, figure, table, video, details, blockquote,
|
|
ul, ol, dl, fieldset, pre, pre > code, caption, nav {
|
|
display: block;
|
|
margin: 0.5rem 0rem 1rem;
|
|
width: 100%;
|
|
overflow: auto hidden;
|
|
text-align: left;
|
|
}
|
|
video, summary, input, select { outline:none; }
|
|
html { font: 12pt/1.6 'Open Sans', Helvetica, sans-serif; }
|
|
body {
|
|
position: relative;
|
|
margin: auto;
|
|
max-width: 50rem;
|
|
color: #433;
|
|
padding: 3.1rem 0.6rem 0;
|
|
overflow-x: hidden;
|
|
}
|
|
body > footer { margin: 10rem 0rem 0rem; }
|
|
|
|
/* clickable stuff */
|
|
a, summary, button, select { color: #07c; cursor: pointer; }
|
|
a { text-decoration: underline solid #d1d1d1; text-underline-position: under; }
|
|
a:hover { color: #088; border-color: #088; }
|
|
|
|
/* common */
|
|
td, th, pre > code { padding: 0.5rem 0.8rem; }
|
|
.card, details { padding: 0 .6rem; }
|
|
code, kbd, samp { padding: 0.2rem; font: .9em/1.4 monospace; }
|
|
code, kbd, samp, nav, .card { background: #f4f5f6; border-radius: 0.3em; }
|
|
kbd, .card, details[open] { border: 1px solid #d1d1d1; }
|
|
td, th, figcaption, caption, .card { font-size: 95%; }
|
|
td, th, hr { border: 0; border-bottom: 0.1rem solid #d1d1d1; }
|
|
|
|
/* lists */
|
|
ul, ol { padding-top: 0.5rem; }
|
|
li, dd { margin-bottom: 0.5rem; }
|
|
dt { font-weight: bold; }
|
|
|
|
/* headings */
|
|
h1, h2, h3, h4, h5 { margin: 1.5em 0 0em; line-height: 1.2em; }
|
|
h1+h2, h2+h3, h3+h4, h4+h5 { margin-top: .5em; }
|
|
h1 { font-size: 2.2em; font-weight: 300; }
|
|
h2 { font-size: 2.0em; font-weight: 300; font-variant-caps: small-caps; }
|
|
h3 { font-size: 1.5em; font-weight: 400; }
|
|
h4 { font-size: 1.1em; font-weight: 700; }
|
|
h5 { font-size: 1.2em; font-weight: 400; color: #888; }
|
|
h6 { font-size: 1.0em; font-weight: 600; display: inline; }
|
|
h6 + p { display: inline; }
|
|
|
|
/* tables */
|
|
td, th { text-align: right; white-space: nowrap; }
|
|
td:first-child, th:first-child { text-align: left; }
|
|
tr:hover{ background-color: #f4f5f6; }
|
|
|
|
/* figures */
|
|
img, svg { max-width: 100%; vertical-align: text-top; }
|
|
p>img:not(:only-child) { float: right; margin: 0 0 .5em .5em; }
|
|
figure > img { display: block; margin: 0.5em auto; }
|
|
figcaption, caption { color: #888; margin-bottom: 1rem; }
|
|
figure > *:not(:last-child) { margin: 0 0 0.4rem; }
|
|
|
|
/*code*/
|
|
pre > code { margin: 0; border-left: 0.4rem solid #088; }
|
|
|
|
/* misc */
|
|
blockquote{ border-left: 0.3rem solid #d1d1d1; padding: 1rem 1.5rem; font-style: italic; }
|
|
input { font-size: 1em; }
|
|
p>cite:before { content: ' ('; } p>cite:after {content: ') '}
|
|
|
|
/* grid */
|
|
.row { display: flex; margin: 0.5rem -0.5rem; align-items: stretch; }
|
|
.row [class*="col"] { padding: 0 0.5rem; flex: 1 1 100%; }
|
|
@media (max-width: 40em) { .row { flex-direction: column !important; } }
|