$container-width: 800px; $primary-color: #36e281; $primary-color-dark: darken($primary-color, 10%); $code-color: #f0f0f0; $code-color-dark: darken($code-color, 10%); $font-heading: "Lora", serif; $font-body: "Raleway", serif; $font-code: "Inconsolata", monospace; body { font-family: $font-body; font-size: 1.0em; line-height: 1.5; margin-bottom: 1em; text-align: justify; } h1, h2, h3, h4, h5, h6 { margin-bottom: .1em; margin-top: .5em; font-family: $font-heading; font-weight: normal; text-align: left; a { color: black; &:hover { color: $primary-color; } } } code { font-family: $font-code; background-color: $code-color; } pre code { display: block; padding: 0.5em; overflow-x: auto; background-color: $code-color; } .container { margin: auto; width: 100%; max-width: $container-width; box-sizing: border-box; @media screen and (max-width: $container-width){ padding: 0em 1em 0em 1em; } } .button, input[type="submit"] { padding: 0.5em; background-color: $primary-color; border: none; color: white; transition: color 0.25s; transition: background-color 0.25s; text-align: left; &:focus { outline: none; } &:hover, &:focus { background-color: white; color: $primary-color; } } nav { background-color: $primary-color; width: 100%; margin: 1em 0px 1em 0px; } nav a { padding: .75em; text-decoration: none; color: white; display: inline-block; transition: color .25s, background-color .25s; &:hover { color: $primary-color; background-color: white; } } .post-subscript { color: #8f8f8f; } .post-content { margin-top: .5em; } h1 { font-size: 3.0rem; } h2 { font-size: 2.6rem; } h3 { font-size: 2.2rem; } h4 { font-size: 1.8rem; } h5 { font-size: 1.4rem; } h6 { font-size: 1.0rem; } a { color: $primary-color-dark; text-decoration: none; } img { max-width: 100% }