html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; font: 400 1.2em/1.4em var(--base-type); } html body { background: var(--secondary); margin: 0; padding: 0; perspective: 1px; transform-style: preserve-3d; height: 100%; width: 100%; overflow-y: scroll; overflow-x: hidden; } /* GLOBALS */ a { color: var(--primary); text-decoration: none; transition: all 0.2s linear; } a:hover { border-bottom: 1px solid var(--secondary-highlight); } sup { background: var(--black); color: var(--white); padding: 3px; border-radius: 3px; } pre, code { background: var(--black); color: var(--secondary-highlight); border-radius: 3px; padding: 3px; } img.logo-medium { width: 60px; } #menu-open, #menu-close { cursor: pointer; } /* HEADER */ header { width: 100%; border-top: var(--secondary) 3px solid; position: relative; z-index: 400; } div#menu { position: fixed; width: 100%; height: 100%; background: var(--secondary-highlight); z-index: 500; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; } div.menu > div.links { font-size: 2em; line-height: 1em; } /* Slideshow */ div.slide-show { width: 100%; height: 90%; position: relative; } div.slide-show > div.slide { transition: all 0.7s linear; width: 100%; height: 100%; position: absolute; } .hide { opacity: 0; } .show { opacity: 1; } div.slide-show > div.slide > video { width: 100%; height: 100%; object-fit: cover; } /* HEADER -> Navigation */ nav { width: 97%; margin: 10px auto; display: grid; grid-template-columns: 50% 50%; z-index: 1000; position: relative; color: var(--primary); } nav img { width: 40px; border-bottom: none; } nav > div.right { text-align: right; } nav a[role="menu-link"] { background: var(--secondary); margin-bottom: 14px; padding: 3px; border-radius: 2px; display: inline-block; font-size: 0.8em; border-bottom: none; } /* MAIN CONTENT */ main { z-index: 2; background: var(--secondary); line-height: 30px; font-weight: lighter; width: 100%; color: var(--primary); } main > article { position: relative; background: var(--secondary); vertical-align: top; color: var(--primary); padding: 0 10%; } main > article > div[role="archives"] { display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 10px; margin-bottom: 20px; } main article div[role="archives"] h1, main article div[role="archives"] h2, main article div[role="archives"] h3 { color: var(--primary); } main > section { background: var(--secondary-highlight); display: grid; grid-template-columns: 50% 50%; padding: 0 10%; color: var(--primary); } main > section > div { padding-bottom: 20px; } main > sectio.page-meta > div a { color: var(--primary); } /* FOOTER */ footer { background: var(--primary); padding: 30px 10%; color: var(--secondary); } footer a { color: var(--primary-highlight); } /* RESPONSIVE */ @media only screen and (max-width: 640px) { main > article { padding: 0 10%; } main > section { padding: 0 10%; } footer { background: var(--secondary-highlight); padding: 30px 10%; } } @media only screen and (max-width: 480px) { main > section { display: inline-grid; grid-template-columns: 50%; width: 100%; } }