$font-header: 'Merienda', cursive; $font-body: 'Source Sans Pro', sans-serif; $color-frame: #DBDBDB; $color-main-normal: #795548; $color-main-light: #D7CCC8; $color-main-dark: #5D4037; $color-bg: #FFFFFF; $color-accent: #9E9E9E; $color-text-normal: #212121; $color-text-alt: #757575; $color-divider: #BDBDBD; $information-phone: “only screen and (max-width : 639px)”; $information-comp: “only screen and (min-width: 640px)”;
@import “reset”;
html { height: 100%; } body {
height: 100%; max-width: 100%; background-color: $color-bg; // HEADER SIDEBAR #sidebarbackground { @media #{$information-comp} { position: fixed; top: 0; bottom: 0; width: 25%; max-width: 16em; border-right: 2px solid $color-divider; background-color: $color-main-normal; margin-right: 2em; } } header { @media #{$information-phone} { width: 100%; color: $color-text-normal; } @media #{$information-comp} { position: absolute; top: 0; bottom: 0; width: 25%; max-width: 16em; margin-right: 2em; } background-color: $color-main-normal; padding: 0; text-align: center; h1 { font-family: $font-header; font-size: xx-large; color: $color-text-normal; background-color: $color-main-dark; padding-top: 1em; padding-bottom: 1em; min-height: 5%; max-height: 13%; } p { @media #{$information-phone} { padding-bottom: 1em; } @media #{$information-comp} { padding-bottom: 2em; padding-right: 25%; padding-left: 25%; } font-family: $font-body; color: $color-text-alt; background-color: $color-main-dark; text-align: center; } hr { padding: 0; margin: 0; style: none; color: $color-divider; } nav { @media #{$information-phone} { padding: 0.5em; } @media #{$information-comp} { margin-top: 1em; } font-size: large; li { @media #{$information-phone} { display: inline; padding: 1em; line-height: 1.5em; } @media #{$information-comp} { padding: 1em; letter-spacing: 0.5em; margin-bottom: 2em; } } li:hover { color: $color-accent; } } } // ACTUAL CONTENT .content { @media #{$information-phone} { max-width: 90vw; margin-left: 5vw; margin-right: 5vw; } @media #{$information-comp} { width: 60%; min-width: 20em; margin-left: 25%; margin-right: 15%; padding: 2em; } background-color: $color-bg; h1,h2,h3,h4,h5 {
// padding-left: 0.5em; // letter-spacing: 0.5em;
color: $color-text-normal; font-family: $font-header; padding-top: 2em; padding-bottom: 1em; text-align: center; } h1 { @media #{$information-phone} { font-size: 10vw; } @media #{$information-comp} { font-size: xx-large; } } h2 { @media #{$information-phone} { font-size: 8vw; } @media #{$information-comp} { font-size: x-large; } } h3 { @media #{$information-phone} { font-size: 7vw; } @media #{$information-comp} { font-size: large; } } h4 { @media #{$information-phone} { font-size: 6vw; } @media #{$information-comp} { font-size: normal; } } h5 { @media #{$information-phone} { font-size: 5vw; } @media #{$information-comp} { font-size: small; } } hr { margin-top: 2em; margin-bottom: 2em; border: 0; height: 1px; background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); width: 40%; } a { text-decoration-line: underline; } p { @media #{$information-phone} { margin-top: 1em; margin-bottom: 1em; } @media #{$information-comp} { margin: 1em; } width: 100%; max-width: 80em; } code { background-color: $color-bg; } ul,ol { text-align: left; margin-left: 10%; margin-right: auto; } ul { list-style: circle outside; } ol { list-style: upper-roman outside; } table { @media #{$information-phone} { padding: 0; max-width: 98vw; margin-left: auto; margin-right: auto; left: -8; font-size: 4vw; } @media #{$information-comp} { margin-left: auto; margin-right: auto; } text-align: center; border: 1px solid $color-accent; border-collapse: collapse; th { padding: 1em; font-size: large; background-color: $color-divider; border: 1px solid $color-accent; } td { padding: 0.75em; border: 1px solid $color-accent; } tr:nth-child(even) { background-color: $color-divider; } } blockquote { margin: auto; width: 60%; background-color: $color-divider; border: 1px solid $color-accent; padding: 1em; font-size: small; cite { font-style: italic; } } footer { padding-top: 2em; text-align: center; span { color: $color-text-normal; font-size: x-small; text-align: right; } } em { font-style: italic; } strong { font-style: bold; } pre { @media #{$information-phone} { font-size: 3.5vw; } margin: 1em; text-align: center; } .synopsis { @media #{$information-phone} { padding: 0; width: 98vw; margin-left: -4vw; margin-right: 1vw; } @media #{$information-comp} { padding: 1em; width: 65%; margin: auto; } text-align: center; font-size: small; font-style: italic; border: 1px solid $color-accent; background-color: $color-divider; } }
}
@import “syntax”;