/* stylesheet for nechnif.net */ /* * The website that uses this CSS file as a style resource is * Python-generated. But do not be afraid, this happens entirely on * my computer and you are absolutely safe! It is pure HTML anc CSS * you are looking at. If you are curious about how my Python script * makes HTML magic, feel free to contact me! * Python code and web design by Raffaela Busse, 2017 * Copyright of all text and image content by Raffaela Busse, 2017 * (if not denoted otherwise) */ /*### define nechnif.net fonts */ @font-face { font-family: Muli; src: url(./fonts/Muli-Regular.WOFF); } @font-face { font-family: Muli; src: url(./fonts/Muli-Bold.WOFF); font-weight: bold; } @font-face { font-family: Muli; src: url(./fonts/Muli-Italic.WOFF); font-style: italic; } /*### declaring colour scheme: */ :root { --crimson: #DF4848; --litergrey: #DADADA; --litegrey: #BDBDBD; --grey: #848484; --seab: #086A87; --shell: #FAF8F3; --sand: #EDE9E0; --creek: #7D97B3; --creeker: #365E88; --litecreek: #8FADCD; --shadow: #D7D3CA; } /*### declaring some global variables: */ :root { --block-margin: 0.8em; --block-padding: 0.75em; --ul-padding: 0.3em; --padding_a: 0.3em; --article_padding: 0.5em; --gallery-hormargin: 0.8em; --gallery-vermargin: 0.4em; --gallery-padding: 0.8em; --gallery-mix-padding: 2%; } /*### define box behaviour */ html { box-sizing: border-box; } *, ::before, ::after { box-sizing: inherit; } /*### define background & overall text appearance properties */ body { background: var(--sand); border: 0; margin: 10px auto; min-width: 16em; max-width: 60em; font-family: "Muli"; font-size: 12pt; line-height: 1.5; color: black; text-align: justify; } a { text-decoration: none; color: white; } ul, li { list-style: none; margin: 0; padding: 0; } /*### define box layout & shadowing */ header, nav, article, footer { border: 0; margin: var(--block-margin); padding: var(--block-padding); } nav, article, footer { box-shadow: 5px 5px 5px var(--shadow); } header { box-shadow: 5px 0px 5px -1px var(--shadow); } /*### header properties */ header { position: relative; height: 15em; margin: var(--block-margin); margin-bottom: 0; background-size: cover; color: white; } header h1 { position: absolute; bottom: 0; padding-left: 0.7em; font-size: 28pt; letter-spacing: 0.1em;} /*### navigation & footer properties */ nav, footer { margin: 0 var(--block-margin); padding: 0; background-color: var(--creek); color: white; } nav li, footer li { padding: 0.9em 1.0em; } nav li:hover, footer li:hover { background-color: var(--litecreek); } nav li:active, footer li:active { background-color: var(--litecreek); } #current_nav { background-color: var(--creeker); } /*### section properties */ section { position: relative; margin-left: 2.0em; padding-left: 1.0em; border-left: 0.5em dotted black; } /*### article properties */ article { background-color: var(--shell); } article.title img { width: 100%; height: auto; } article.title img.top { padding-bottom: 0.3em; } article h3 { font-size: 14pt; margin: 0.5em 0; } article ul.head { justify-content: space-between; background-color: var(--litergrey); color: var(--crimson); font-size: 12pt; font-weight: bold; padding: var(--padding_a);} article li { padding: var(--padding_a); } article ul.head span { color: #BDBDBD; } article ul.head a { color: var(--grey); font-weight: bold; } article ul.head a:hover { color: var(--litegrey); } article ul.head a:active { color: var(--litegrey); } article a { color: var(--creeker); font-weight: bold; } article a:hover { color: var(--creek); } article a:active { color: var(--creek); } /*### special article properties*/ article.scifacts { background-color: var(--creeker); color: white; } article.scifacts li { color: var(--creeker); } article.scifacts a { color: var(--creek); } article.scifacts a:hover { color: var(--litegrey); } article.icefacts { background-color: var(--creek); color: white; } article.icefacts li { color: var(--creeker); } article.icefacts a { color: var(--creeker); } article.icefacts a:hover { color: var(--litegrey); } /*### gallery properties for small viewports */ div.gallery { display: block; width: 100%; margin: 0; padding: 0; } article figure { position: relative; margin: var(--gallery-vermargin) auto; padding: 0; } article figure img { width: 100%; height: auto; vertical-align: top; } article figure figcaption { position: absolute; bottom: 0; width: 100%; padding: 0.5em 0.3em; text-align: center; background-color: rgb(238, 238, 238); background-color: rgba(238, 238, 238, 0.8); color: #000000; } article figure.undercap figcaption { position: relative; } /*### gallery properties for larger viewports */ @media all and (min-width: 40em) { div.pair { width: calc(100% - var(--gallery-padding)); } div.gallery_float { display: inline; float: right; padding-left: var(--gallery-padding); width: 50%; } div.gallery_float_l { display: inline; float: left; padding-right: var(--gallery-padding); width: 50%; } article figure.two { margin-left: var(--gallery-hormargin); } } /* general classes */ div.glossar { background-color: #E5EFF1; margin: 1.0em 0; padding: 0.1em 0.5em; } div.glossar h4 { color: var(--seab); } div.glossar p { color: var(--seab); } div.reddot { position: absolute; left: -2.0em; width: 1.50em; height: 1.50em; border-radius: 0.75em; margin: 0.4em 0 0 1.0em; background-color: var(--crimson); } p.center { text-align: center; font-style: italic; } p.cite { text-align: center; font-style: italic; margin-bottom: 2.0em; } p.cite span { display: block; font-style: normal; margin-top: 0.3em;} /*### adjust website to larger viewport */ @media all and (min-width: 40em) { nav ul, footer ul, article ul, div.gallery { display: flex; flex-direction: row; } } @media all and (min-width: 40em) { div.rows { display: flex; flex-direction: row; } article div.left { flex: 1 1 30em; } article div.right { flex: 1 1 25em; padding-left: 1em; } }