You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
782 lines
16 KiB
CSS
782 lines
16 KiB
CSS
@charset "UTF-8";
|
|
/* might be needed when you have non-ASCII characters
|
|
* in a "content" rule
|
|
* MUST be the very first thing in a stylesheet
|
|
*/
|
|
|
|
/*! YAMB CSS v1.0.0 | BOML License | github.com/runxel/yamb-css */
|
|
|
|
/* load your custom fonts like this
|
|
* WOFF2 is enough (except you have to support IE11? Have fun with that shipwreck!)
|
|
* Also please selfhost them and DO NOT use Google Fonts directly
|
|
* https://www.tunetheweb.com/blog/should-you-self-host-google-fonts/
|
|
*/
|
|
@font-face {
|
|
font-family: 'My Font';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: local('My Font'), local('MyFont-Regular'),
|
|
url('../fonts/myfont.woff2') format('woff2');
|
|
}
|
|
|
|
/* obligatory element reset
|
|
* if you look for a more in-depth, proper approach:
|
|
* http://necolas.github.io/normalize.css/ or
|
|
* https://github.com/hankchizljaw/modern-css-reset
|
|
*/
|
|
*, ::before, ::after {
|
|
box-sizing: inherit;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
html {
|
|
font-size: 16px; /* this will be one REM */
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* I use :root to store all my global variables */
|
|
:root {
|
|
--text-color: #242424;
|
|
--text-header-color: var(--text-color);
|
|
--text-muted-color: #585858;
|
|
--text-placheolder-color: #686868;
|
|
--link-color: #32b6b6;
|
|
--code-color: #3b444e;
|
|
|
|
--background-color: hsl(40, 10%, 95%);
|
|
--background-dark-color: hsl(48, 5%, 80%);
|
|
--background-code-color: hsl(50, 5%, 90%);
|
|
--background-alt-color: hsl(40, 10%, 90%);
|
|
--background-alt-bright-color: #f7f7f7;
|
|
--thumb-color: #c5c5c5; /* scrollbar thumb */
|
|
|
|
--accent-color: #14da6d;
|
|
--highlight: #ffee00c2;
|
|
--selection-color: hsla(162, 75%, 51%, 0.5);
|
|
--focus-color: #24c278;
|
|
--border-color: #c6cbd1;
|
|
--border-alt-color: #959da5;
|
|
--button-color: hsl(150, 70%, 60%);
|
|
--button-hover-color: hsl(150, 60%, 75%);
|
|
--warning: #eb6363b2;
|
|
--accepted: #75ee6a8c;
|
|
|
|
--animation-duration: 0.2s;
|
|
|
|
--base-font: Clear Sans Light, Clear Sans, PT Sans, Inter, Segoe UI, Roboto, Trebuchet MS, Helvetica Neue, Arial, sans-serif;
|
|
--text-font: 'Libre Franklin', sans-serif;
|
|
--h-font: var(--text-font); /* Header font h1-h6 */
|
|
--mono-font: Consolas, 'Fira Code', 'Ubuntu Mono', monospace;
|
|
|
|
--content-width: 70ch;
|
|
--text-fat: 700; /* change for different weight */
|
|
|
|
--select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='63' width='117' fill='%23161f27'%3E%3Cpath d='M115 2c-1-2-4-2-5 0L59 53 7 2a4 4 0 0 0-5 5l54 54 2 2 3-2 54-54c2-1 2-4 0-5z'/%3E%3C/svg%3E");
|
|
|
|
scrollbar-color: var(--thumb-color) var(--background-color);
|
|
}
|
|
|
|
/* visual sugar */
|
|
::selection {
|
|
color: var(--text-color);
|
|
background-color: var(--selection-color);
|
|
text-shadow: none;
|
|
}
|
|
|
|
/* use 'body' for all the basic declarations
|
|
* most commonly fonts + bg-color
|
|
*/
|
|
body {
|
|
font-family: var(--text-font);
|
|
/* you could also set it to "optimizeSpeed",
|
|
* but I think legibility is more important and old problems are gone meanwhile */
|
|
text-rendering: optimizeLegibility;
|
|
font-variant-ligatures: common-ligatures;
|
|
font-kerning: normal;
|
|
line-height: 1.6;
|
|
color: var(--text-color);
|
|
background-color: var(--background-color);
|
|
}
|
|
|
|
/* LINKS */
|
|
a, a:visited {
|
|
text-decoration: underline;
|
|
color: var(--link-color);
|
|
white-space: break-word; /* not nowrap! */
|
|
}
|
|
a:hover {
|
|
text-decoration: underline;
|
|
text-decoration-thickness: 2px;
|
|
}
|
|
a:focus {
|
|
color: var(--focus-color);
|
|
}
|
|
|
|
/* ELEMENTS */
|
|
img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
header {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
section {
|
|
margin: 1.5em 0;
|
|
}
|
|
|
|
article {
|
|
margin: 0.7em 0;
|
|
}
|
|
|
|
article > footer {
|
|
margin-bottom: 1.3em;
|
|
}
|
|
|
|
hr {
|
|
border: none;
|
|
border-top: 1px solid var(--border-color);
|
|
margin: 0.3em 0;
|
|
}
|
|
|
|
ul,
|
|
ol {
|
|
list-style-position: inside;
|
|
padding-left: 1em;
|
|
}
|
|
:not(fieldset) > ul:not(.no-marker) li::marker {
|
|
color: currentColor;
|
|
content: '🞄 ';
|
|
}
|
|
ul.no-marker {
|
|
list-style-type: none;
|
|
}
|
|
|
|
/* TABLES */
|
|
table {
|
|
border-collapse: collapse;
|
|
margin-bottom: 10px;
|
|
width: 100%;
|
|
}
|
|
table > caption {
|
|
margin-bottom: 5px;
|
|
}
|
|
td,
|
|
th {
|
|
padding: 6px;
|
|
text-align: left;
|
|
}
|
|
thead {
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
tfoot {
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
tbody tr:nth-child(even) {
|
|
background-color: var(--background-alt-color);
|
|
}
|
|
|
|
/* Details */
|
|
details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
background-color: var(--background-alt-color);
|
|
margin: 1em 0;
|
|
padding: 10px 10px 0;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
}
|
|
details[open] {
|
|
padding: 10px;
|
|
}
|
|
details > :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
details[open] summary {
|
|
margin-bottom: 10px;
|
|
}
|
|
summary {
|
|
display: list-item;
|
|
background-color: var(--background-dark-color);
|
|
margin: -10px -10px 0;
|
|
padding: 10px;
|
|
}
|
|
details > :not(summary) {
|
|
margin-top: 0;
|
|
}
|
|
summary::-webkit-details-marker {
|
|
color: var(--text-main);
|
|
}
|
|
|
|
footer {
|
|
padding-top: 10px;
|
|
font-size: 0.8em;
|
|
color: var(--text-muted-color);
|
|
}
|
|
main + footer {
|
|
text-align: center;
|
|
border-top: 1px solid var(--background-dark-color);
|
|
}
|
|
|
|
/* TYPOGRAPHY */
|
|
h1 {
|
|
font-size: 2.2em;
|
|
margin-top: 0;
|
|
}
|
|
h1, h2, h3, h4, h5, h6 {
|
|
margin: 5px 0 calc(0.4rem + 0.2em);
|
|
color: var(--text-header-color);
|
|
}
|
|
h1, h2, h3, h4, h5, h6,
|
|
b,
|
|
strong,
|
|
th {
|
|
font-weight: var(--text-fat);
|
|
}
|
|
h2 { letter-spacing: 0.02em; }
|
|
h3 { letter-spacing: 0.03em; }
|
|
h4 { letter-spacing: 0.04em; }
|
|
h5 { letter-spacing: 0.06em; }
|
|
h6 { letter-spacing: 0.08em; }
|
|
|
|
small {
|
|
letter-spacing: 0.025em;
|
|
}
|
|
|
|
q {
|
|
font-style: italic;
|
|
}
|
|
q::before {
|
|
content: "«";
|
|
}
|
|
q::after {
|
|
content: "»"
|
|
}
|
|
blockquote {
|
|
border-left: 3px solid var(--text-muted-color);
|
|
margin: 1.5em 0em;
|
|
padding: 0.5em 1em;
|
|
font-style: normal;
|
|
}
|
|
blockquote {
|
|
border-radius: 4px;
|
|
}
|
|
blockquote p:last-of-type {
|
|
margin-bottom: 1em;
|
|
}
|
|
blockquote cite,
|
|
blockquote > footer {
|
|
font-style: italic;
|
|
border: 0;
|
|
}
|
|
blockquote cite::before {
|
|
content: '✲ ';
|
|
}
|
|
|
|
address {
|
|
font-style: normal;
|
|
}
|
|
address a {
|
|
text-decoration: none;
|
|
}
|
|
a[href^='mailto\:']::before {
|
|
content: '📧 ';
|
|
filter: saturate(0);
|
|
}
|
|
a[href^='tel\:']::before {
|
|
content: '📞 ';
|
|
filter: saturate(0);
|
|
}
|
|
a[href^='sms\:']::before {
|
|
content: '💬 ';
|
|
filter: saturate(0);
|
|
}
|
|
|
|
mark {
|
|
background-color: var(--highlight);
|
|
border-radius: 2px;
|
|
padding: 0px 2px 0px 2px;
|
|
}
|
|
|
|
/* CODE */
|
|
pre, code, samp, time, var, kbd {
|
|
font-family: var(--mono-font);
|
|
}
|
|
code, samp, time {
|
|
background: var(--background-code-color);
|
|
color: var(--code-color);
|
|
padding: 2.5px 5px;
|
|
border-radius: calc(1em * 0.2);
|
|
font-size: 1em;
|
|
}
|
|
pre > code {
|
|
padding: 10px;
|
|
display: block;
|
|
overflow-x: auto;
|
|
}
|
|
var {
|
|
color: var(--code-color);
|
|
font-style: normal;
|
|
}
|
|
kbd {
|
|
background: var(--background-alt-bright-color);
|
|
border: 1px solid var(--border-color);
|
|
border-bottom-color: var(--border-alt-color);
|
|
box-shadow: inset 0 -1px 0 var(--border-alt-color);
|
|
border-radius: calc(1em * 0.4);
|
|
color: var(--text-main);
|
|
font-size: 80%;
|
|
padding: 2px 5px;
|
|
display: inline-block;
|
|
position: relative;
|
|
bottom: 3px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
abbr,
|
|
acronym {
|
|
cursor:help;
|
|
}
|
|
|
|
sup, sub {
|
|
vertical-align: baseline;
|
|
position: relative;
|
|
top: -0.5em;
|
|
font-size: 0.7em;
|
|
}
|
|
sub {
|
|
top: 0.3em;
|
|
}
|
|
|
|
del {
|
|
background-color: var(--warning);
|
|
}
|
|
ins {
|
|
background-color: var(--accepted);
|
|
}
|
|
|
|
iframe {
|
|
border: none;
|
|
}
|
|
|
|
/* FORMS */
|
|
::placeholder {
|
|
color: var(--form-placeholder);
|
|
}
|
|
button, select,
|
|
input[type='submit'],
|
|
input[type='button'],
|
|
input[type='checkbox'],
|
|
input[type='range'],
|
|
input[type='radio'] {
|
|
cursor: pointer;
|
|
}
|
|
input:not([type='checkbox']):not([type='radio']),
|
|
select {
|
|
display: block;
|
|
}
|
|
input,
|
|
button,
|
|
textarea,
|
|
select {
|
|
color: var(--text-placeholder-color);
|
|
background-color: var(--background-alt-color);
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
margin-right: 6px;
|
|
margin-bottom: 6px;
|
|
padding: 10px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
outline: none;
|
|
}
|
|
input,
|
|
select,
|
|
button,
|
|
textarea {
|
|
-webkit-appearance: none;
|
|
}
|
|
textarea {
|
|
min-height: 4rem;
|
|
margin-right: 0;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
resize: vertical;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--thumb-color) var(--background-color);
|
|
}
|
|
select {
|
|
background: var(--background-alt-color) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat;
|
|
padding-right: 35px;
|
|
}
|
|
select::-ms-expand {
|
|
display: none;
|
|
}
|
|
select[multiple] {
|
|
padding-right: 10px;
|
|
background-image: none;
|
|
overflow-y: auto;
|
|
}
|
|
select > optgroup {
|
|
background-color: var(--background-alt-color);
|
|
color: var(--text-color);
|
|
}
|
|
optgroup > option {
|
|
background-color: var(--background-color);
|
|
}
|
|
button,
|
|
input[type='submit'],
|
|
input[type='button'] {
|
|
background-color: var(--button-color);
|
|
padding-right: 30px;
|
|
padding-left: 30px;
|
|
}
|
|
button:not(:disabled):hover,
|
|
input[type='submit']:not(:disabled):hover,
|
|
input[type='button']:not(:disabled):hover {
|
|
background-color: var(--button-hover-color);
|
|
}
|
|
/* STATES */
|
|
/* -- FOCUS */
|
|
input:focus,
|
|
select:focus,
|
|
button:focus,
|
|
textarea:focus {
|
|
box-shadow: 0 0 0 2px var(--focus-color);
|
|
background-color: var(--background-alt-bright-color);
|
|
}
|
|
/* -- DISABLED */
|
|
input:disabled,
|
|
select:disabled,
|
|
button:disabled,
|
|
textarea:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
}
|
|
/* -- INVALID / ERROR */
|
|
input:invalid,
|
|
input.is-error,
|
|
input.error {
|
|
box-shadow: 0 0 0 2px var(--warning);
|
|
}
|
|
/* -- VALID */
|
|
/* input:valid, -> would style *evertyhing*, even empty */
|
|
input.is-valid,
|
|
input.valid {
|
|
box-shadow: 0 0 0 2px var(--accepted);
|
|
}
|
|
|
|
input[type='checkbox'],
|
|
input[type='radio'] {
|
|
position: relative;
|
|
width: 14px;
|
|
height: 14px;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin: 0;
|
|
margin-right: 2px;
|
|
}
|
|
input[type='radio'] {
|
|
border-radius: 50%;
|
|
}
|
|
input[type='checkbox']:checked,
|
|
input[type='radio']:checked {
|
|
background: var(--button-hover);
|
|
}
|
|
input[type='checkbox']:checked::before,
|
|
input[type='radio']:checked::before {
|
|
content: '🞇';
|
|
display: block;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
}
|
|
input[type='checkbox']:checked::before {
|
|
content: '✔';
|
|
transform: translateY(-50%) translateX(-6px);
|
|
}
|
|
input[type='checkbox']:active,
|
|
input[type='radio']:active,
|
|
input[type='submit']:active,
|
|
input[type='button']:active,
|
|
input[type='range']:active,
|
|
button:active {
|
|
transform: translateY(2px);
|
|
}
|
|
input:read-only {
|
|
user-select: all;
|
|
}
|
|
fieldset {
|
|
border: 1px var(--border-color) solid;
|
|
border-radius: 6px;
|
|
margin: 0;
|
|
margin-bottom: 6px;
|
|
padding: 10px;
|
|
}
|
|
legend {
|
|
font-size: 0.9em;
|
|
font-weight: var(--text-fat);
|
|
}
|
|
input[type='color'] {
|
|
min-height: 1.8em;
|
|
padding: 2px;
|
|
border-radius: 0;
|
|
}
|
|
/* RANGE */
|
|
input[type='range'] {
|
|
margin: 10px 0;
|
|
padding: 10px 0;
|
|
background: transparent;
|
|
}
|
|
input[type='range']:focus {
|
|
outline: none;
|
|
}
|
|
input[type='range']::-webkit-slider-runnable-track,
|
|
input[type='range']::-moz-range-track {
|
|
width: 100%;
|
|
height: 9.5px;
|
|
transition: 0.2s;
|
|
background: var(--background-dark-color);
|
|
border-radius: 3px;
|
|
}
|
|
input[type='range']:focus::-webkit-slider-runnable-track,
|
|
input[type='range']:focus::-moz-range-track {
|
|
background: var(--background-alt-color);
|
|
}
|
|
input[type='range']::-webkit-slider-thumb,
|
|
input[type='range']::-moz-range-thumb {
|
|
box-shadow: 0px 1px 1px var(--border-alt-color), 0px 0px 1px var(--border-alt-color);
|
|
height: 20px;
|
|
width: 20px;
|
|
border-radius: 50%;
|
|
background: var(--background-alt-bright-color);
|
|
margin-top: -7px;
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
/* SEARCH input */
|
|
/* mitigations against Chrome's uglyness */
|
|
input[type="search"] {
|
|
-webkit-appearance: textfield;
|
|
}
|
|
input::-webkit-search-decoration,
|
|
input::-webkit-search-cancel-button {
|
|
/* get rid of non-standard weirdness */
|
|
display: none;
|
|
}
|
|
|
|
/* EXPLICIT */
|
|
/* a wrapper for all elements on the page */
|
|
div.page {
|
|
max-width: var(--content-width);
|
|
margin: 20px auto;
|
|
}
|
|
@media screen and (max-width: 720px) {
|
|
div.page {
|
|
padding: 2vh 3.5vw;
|
|
}
|
|
}
|
|
|
|
nav ul {
|
|
list-style: none;
|
|
}
|
|
nav ul li::marker {
|
|
content: none;
|
|
}
|
|
|
|
/* DARK THEME */
|
|
/* Media queries are really powerful.
|
|
* Here we'd like to know, if the user prefers to have a dark color scheme
|
|
*/
|
|
@media ( prefers-color-scheme: dark) {
|
|
/* if you use CSS variables (and you definitely should!) this is extremely easy to accomplish */
|
|
:root {
|
|
--text-color: #dbdbdb;
|
|
--text-header-color: var(--text-color);
|
|
--text-muted-color: #585858;
|
|
--text-placheolder-color: #686868;
|
|
--code-color: hsl(210, 10%, 85%);
|
|
|
|
--background-color: hsl(0, 0%, 20%);
|
|
--background-dark-color: hsl(0, 0%, 12%);
|
|
--background-code-color: hsl(50, 2%, 30%);
|
|
--background-alt-color: hsl(40, 1%, 26%);
|
|
--background-alt-bright-color: hsl(0, 0%, 40%);
|
|
--thumb-color: #585858; /* scrollbar thumb */
|
|
|
|
--accent-color: #14da6d;
|
|
--focus-color: #24c278;
|
|
--border-color: #75787c;
|
|
--border-alt-color: #535557;
|
|
--button-color: hsl(150, 36%, 52%);
|
|
--button-hover-color: hsl(150, 39%, 66%);
|
|
--warning: #ec4444d3;
|
|
--accepted: #7eff73bd;
|
|
|
|
--select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='63' width='117' fill='%23dbdbdb'%3E%3Cpath d='M115 2c-1-2-4-2-5 0L59 53 7 2a4 4 0 0 0-5 5l54 54 2 2 3-2 54-54c2-1 2-4 0-5z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
ins {
|
|
color: var(--background-color);
|
|
}
|
|
|
|
button,
|
|
input[type='submit'],
|
|
input[type='button'] {
|
|
color: var(--background-color);
|
|
}
|
|
|
|
/* let's style images, because they are too harsh
|
|
when having a dark theme enabled */
|
|
img {
|
|
/* filter are a nice feature
|
|
you can have Photoshop-esque <img> stylings
|
|
*/
|
|
filter:
|
|
opacity(90%)
|
|
/* why not the 'opacity' property of CSS?
|
|
-> `filter` has hardware acceleration in most browsers! = FAST */
|
|
brightness(0.9)
|
|
contrast(90%);
|
|
}
|
|
|
|
/* If you have graphics with white background (like charts) this will help */
|
|
img.graphic {
|
|
filter:
|
|
/* invert will help with the white background */
|
|
invert(100%)
|
|
/* to get the original colors back, you rotate the hue back */
|
|
hue-rotate(180deg);
|
|
}
|
|
|
|
/* our friend, the filter again!
|
|
* desaturate things that are to colorful
|
|
* nicest thing: it even works on emojis! 👋🏻
|
|
*/
|
|
.desaturate {
|
|
filter: saturate(0);
|
|
}
|
|
}
|
|
|
|
/* --------------- */
|
|
/* targeting PRINT */
|
|
/* (yes, this is a thing) */
|
|
@media print {
|
|
@page {
|
|
size: A4;
|
|
/* 'legal' if you're in the US
|
|
* you set page orientation by either 'portrait' or 'landscape'
|
|
*/
|
|
margin: 15mm;
|
|
}
|
|
|
|
body {
|
|
background: transparent !important; /* we don't want any color here */
|
|
color: black !important;
|
|
font-size: 12pt;
|
|
max-width: 100%;
|
|
box-decoration-break: clone; /* boxes should be treated per page */
|
|
box-shadow: none !important;
|
|
text-shadow: none !important;
|
|
}
|
|
|
|
img,
|
|
pre,
|
|
code,
|
|
blockquote,
|
|
table,
|
|
figure,
|
|
ul,
|
|
ol,
|
|
li,
|
|
tr,
|
|
hr {
|
|
page-break-before: auto;
|
|
page-break-after: auto;
|
|
page-break-inside: avoid;
|
|
break-before: auto;
|
|
break-after: auto;
|
|
break-inside: avoid;
|
|
}
|
|
|
|
pre {
|
|
white-space: pre-wrap !important;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
/* prevent single lines at page end/start */
|
|
p,
|
|
a {
|
|
orphans: 4;
|
|
widows: 3;
|
|
}
|
|
|
|
/* always cause a page break before an h1 header */
|
|
h1 {
|
|
break-before: page;
|
|
}
|
|
/* avoid paragraphs being detached from preceding header */
|
|
h1, h2, h3 {
|
|
page-break-after: avoid;
|
|
break-after: avoid-page;
|
|
}
|
|
h1, h2, h3, h4, h5, h6 {
|
|
page-break-inside: avoid;
|
|
break-inside: avoid;
|
|
}
|
|
|
|
/* display expansions of abbreviations */
|
|
abbr[title]::after,
|
|
acronym[title]::after {
|
|
content: " (" attr(title) ")";
|
|
}
|
|
/* SHOW targets of external links
|
|
* "a:not(:local-link):after" if we ever got to CSS4
|
|
*/
|
|
a[href^="http"]:not([href*="example.com"])::after {
|
|
content: " (" attr(href) ")";
|
|
}
|
|
|
|
/* if you have a map on your site consider to display a static image
|
|
* older browsers and Safari aren't able to print maps
|
|
*/
|
|
#map iframe {
|
|
display: none;
|
|
/* don't show the default interactive map*/
|
|
}
|
|
|
|
#map {
|
|
width: 400px;
|
|
height: 300px;
|
|
background-image: url('https://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&format=png&visual_refresh=true');
|
|
/* force printing of the image */
|
|
-webkit-print-color-adjust: exact;
|
|
print-color-adjust: exact;
|
|
}
|
|
|
|
/* IF you use white, alpha-masked images on a dark background
|
|
* you should invert them
|
|
*/
|
|
header img {
|
|
-webkit-filter: invert(100%);
|
|
filter: invert(100%);
|
|
}
|
|
|
|
nav,
|
|
aside {
|
|
display: none;
|
|
}
|
|
|
|
/* KIND of a catch all, just slam this class on everything you don't want to print */
|
|
.no-print {
|
|
display: none;
|
|
}
|
|
/* IF the space reserved for the element should stay, just without content */
|
|
.no-show {
|
|
visibility: hidden;
|
|
}
|
|
}
|