/* sections */ .section__headline { text-align: center; } .section__content { display: flex; flex-direction: column; align-items: center; max-width: 95%; } .section__content ul { display: flex; flex-direction: column; align-items: flex-start; max-width: 85%; padding-top: 0.3em; padding-bottom: 1em; padding-left: 0.5em; padding-right: 0.5em; } .section__content li { padding-bottom: 0.7em; } /* lists in section content */ .section__content li { font-size: 1em; list-style-type: none; line-height: 1.1em; } .section__content ul, .section__content ol { margin-left: 2em; list-style-position: inside; padding-top: 0.5em; } .section__content ul > li::before { font-family: FontAwesome; content: "\f18e"; padding-right: 1.1em; margin-left: -2em; } .section__content ol { counter-reset: foo; } .section__content ol > li { counter-increment: foo; } .section__content ol > li::before { content: counter(foo) "."; padding-right: 0.8em; margin-left: -1.4em; } .section--odd { color: white; background-color: black; } .section--404 { color: white; background-color: black; height: 1000px; } .section--hero { color: white; background-color: grey; } .section--odd .btn { color: black; background-color: white; text-transform: uppercase; } .section--footer { color: white; background-color: darkgrey; min-height: 4000px; } /* modal */ .section--modal { display: none; color: white; justify-content: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .section__container--modal { margin: 0.5em; margin-top: 2em; background-color: black; color: white; max-height: 85%; border-radius: 1em; width: auto; padding-bottom: 1em; border-style: solid; border-width: medium; } .section__headline--modal { padding-top: 0.5em; position: relative; width: 100%; padding-right: 1.2em; } .section__headline--modal > h1 { font-size: 1.2em; } .section__headline--modal > a[modal-close] { position: absolute; font-size: 1em; top: 0.4em; right: 0.4em; } .section__content--modal { overflow-y: auto; position: relative; align-items: flex-start; font-size: 0.9em; padding: 1em; } /*fix for fucking google chrome pushing up overflow content */ .section__content--modal * { flex-shrink: 0; } /* ---------------- Hero Section ---------------- */ .section--hero { background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; width: 100vw; } .section--hero .section-content--hero { text-align: center; line-height: 1; } /*mobile first*/ .section--hero h1, .section--hero h2, .section--hero h3, .section--hero h4, .section--hero h5, .section--hero h6 { line-height: 1; } /* ---------------- Components/Shortcodes Styling ---------------- */ /* box creates a flexbox wrapper, row default */ .box { display: flex; flex-flow: wrap; align-content: center; justify-content: center; padding-left: 0.5em; padding-right: 0.5em; } .box--embed { flex-direction: column; flex-wrap: nowrap; padding-bottom: 0; justify-content: center; align-items: center; } .box--embed::before, .box--image::before { content: ""; height: 0.5em; } .box--embed::after, .box--image::after { content: ""; height: 0.5em; } .box--btn-bar { padding-top: 0.5em; padding-bottom: 0.5em; } .box--column { flex-direction: column; align-items: center; } .box__caption { font-style: italic; } .box__title { text-transform: capitalize; font-weight: bold; } .box--headline { } .box--text { } .box--btn { padding: 0.5em; margin-bottom: 0.5em; } .box--btn-bar > .box--btn { margin-right: 0.2em; } .btn__text { align-self: center; } .btn__icon { align-self: center; padding-right: 0.2em; } .btn--large .btn__text, .btn--large .btn__icon { font-size: 3rem; } .btn--small .btn__text, .btn--small .btn__icon { font-size: 1rem; } .btn--circle { border-radius: 50%; padding: 0.5em; } .highlight { font-size: 0.7em; align-items: left; color: red; background-color: white; padding: 0.5em; border-color: black; border-width: 3px; border-radius: 1em; } .highlight > ul > li::before { font-family: FontAwesome; content: "\f054"; /* chevron-right */ padding-right: 1.1em; margin-left: -2em; } .box--avatar > a { opacity: 1; } .thumb--yt { display: flex; align-items: center; justify-content: center; background-repeat: no-repeat; background-size: cover; filter: brightness(0.8); } .thumb--yt:hover { -webkit-filter: brightness(1); cursor: pointer; } .thumb--yt > .play-button { font-size: 3.5em; color: red; text-shadow: 3px 3px black; } .box__embed--disqus { width: 90vw; max-width: 800px; } .box__contact-info > * { padding: 0.1em; align-self: center; } .box__contact-info > * > * { margin: 0.2em; align-self: center; } /*turn off default bullets*/ .box--gallery { list-style: none; } .box--gallery li, .box--gallery__item { padding: 0.2em; } /*turn off fontawesome bullets*/ .box--gallery li::before, .box--gallery__item li::before { display: none; } code { font-size: 0.8em; font-family: 'Roboto Mono', monospace; background-color: black; border-radius: 0.2em; color: white; padding-left: 0.2em; padding-right: 0.2em; padding-top: 0.05em; padding-bottom: 0.07em; overflow-x: scroll; } code.hljs { font-size: 0.75em; border-radius: 0.2em; background-color: black; color: white; padding: 1em; margin-bottom: 0.7em; width: inherit; max-width: 90vw; border-style: solid; border-width: 3px; border-color: dimgrey; }