$container-width: 45rem; $standard-border-width: .075rem; $primary-color: #36e281; $primary-color-dark: darken($primary-color, 10%); $code-color: #f0f0f0; $code-color-dark: darken($code-color, 10%); $border-color: #bfbfbf; $font-heading: "Lora", serif; $font-body: "Raleway", serif; $font-code: "Inconsolata", monospace; $standard-border: $standard-border-width solid $border-color; @mixin bordered-block { border: $standard-border; border-radius: .2rem; } @mixin below-container-width { @media screen and (max-width: $container-width){ @content; } } body { font-family: $font-body; font-size: 1.0rem; line-height: 1.5; margin-bottom: 1rem; text-align: justify; } h1, h2, h3, h4, h5, h6 { margin-bottom: .1rem; margin-top: .5rem; 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.5rem; overflow-x: auto; background-color: $code-color; } .container { position: relative; margin: auto; width: 100%; max-width: $container-width; box-sizing: border-box; @include below-container-width { padding: 0rem 1rem 0rem 1rem; } } .button, input[type="submit"] { padding: 0.5rem; 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: 1rem 0rem 1rem 0rem; } 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: .5rem; } 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% } table { @include bordered-block; margin: auto; padding: 0.5rem; } tr { @include below-container-width { display: flex; flex-direction: column; } } td { @include below-container-width { overflow-x: auto; } padding: 0.5rem; } .katex-html { white-space: nowrap; }