diff options
Diffstat (limited to 'design/styles.css')
| -rw-r--r-- | design/styles.css | 291 |
1 files changed, 149 insertions, 142 deletions
diff --git a/design/styles.css b/design/styles.css index 6b0e1fb..398605a 100644 --- a/design/styles.css +++ b/design/styles.css @@ -1,251 +1,258 @@ :root { - --color-dark: hsl(202, 25%, 9%); - --color-light: #EFF7F6; - --color-gray: #BCB3BB; /* quote and legend */ - --color-rose: #F2B5D4; /* link accent */ - --color-light-rose: hsl(330, 55%, 70%, 0.2); /* link accent hover and highlight */ + --color-dark: hsl(202, 25%, 9%); + --color-light: #eff7f6; + --color-gray: #bcb3bb; /* quote and legend */ + --color-rose: #f2b5d4; /* link accent */ + --color-light-rose: hsl(330, 55%, 70%, 0.2); /* link accent hover and highlight */ - --font-size-tiny: 0.85rem; /* quote, legend, code */ + --font-size-tiny: 0.85rem; /* quote, legend, code */ - --width-content: 700px; /* main, article */ - --width-deco: 900px; /* header, footer, large image */ - --height-header: 8rem; /* header, footer, introduction */ + --width-content: 700px; /* main, article */ + --width-deco: 900px; /* header, footer, large image */ + --height-header: 8rem; /* header, footer, introduction */ - --margin-base: 1.5rem; - --margin-header: calc(var(--height-header) / 2); + --margin-base: 1.5rem; + --margin-header: calc(var(--height-header) / 2); - font-size: 20px; + font-size: 20px; } body { - font-family: Raveo, Inter, sans-serif; + font-family: Raveo, Inter, sans-serif; - background: var(--color-dark); - color: var(--color-light); + background: var(--color-dark); + color: var(--color-light); - padding: 2rem; + padding: 2rem; } body * { - line-height: 1.4em; + line-height: 1.4em; } -main, article { - max-width: var(--width-content); - margin: 0 auto; +main, +article { + max-width: var(--width-content); + margin: 0 auto; } -h1, h2, h3 { - font-weight: 500; +h1, +h2, +h3 { + font-weight: 500; - margin-bottom: 0.5rem; + margin-bottom: 0.5rem; } h1 { - font-size: 2rem; - font-weight: 600; + font-size: 2rem; + font-weight: 600; } h2 { - font-size: 1.66rem; + font-size: 1.66rem; - margin-top: calc(var(--margin-base) + 1rem); + margin-top: calc(var(--margin-base) + 1rem); } h3 { - font-size: 1.33rem; + font-size: 1.33rem; - margin-top: calc(var(--margin-base) + 0.5rem); + margin-top: calc(var(--margin-base) + 0.5rem); } p { - margin-bottom: var(--margin-base); + margin-bottom: var(--margin-base); } a { - color: var(--color-rose); - text-decoration: underline; + color: var(--color-rose); + text-decoration: underline; - &:hover { - background: var(--color-light-rose); - } + &:hover { + background: var(--color-light-rose); + } } -em, cite { - font-style: italic; +em, +cite { + font-style: italic; } b { - background: var(--color-light-rose); - /* color: var(--color-dark); */ - font-weight: 500; + background: var(--color-light-rose); + /* color: var(--color-dark); */ + font-weight: 500; - padding: 0.05em 0.1em; + padding: 0.05em 0.1em; } -ul, ol { - margin-top: -0.5rem; - margin-bottom: var(--margin-base - 0.5rem); - margin-left: 1rem; +ul, +ol { + margin-top: -0.5rem; + margin-bottom: var(--margin-base - 0.5rem); + margin-left: 1rem; - list-style-position: outside; + list-style-position: outside; } ul { - list-style-type: disc; + list-style-type: disc; } ol { - list-style-type: roman; + list-style-type: roman; } li { - margin-bottom: 0.25rem; + margin-bottom: 0.25rem; } .quote { - font-size: var(--font-size-tiny); + font-size: var(--font-size-tiny); } blockquote { - padding: 0.5rem 2rem; - margin-bottom: 0.25rem; + padding: 0.5rem 2rem; + margin-bottom: 0.25rem; + + color: var(--color-gray); - color: var(--color-gray); - - border-left: var(--color-rose) solid 0.25em; + border-left: var(--color-rose) solid 0.25em; } figure { - display: flex; - flex-direction: column; - justify-content: center; - gap: 0.5rem; - - text-align: center; - - margin-bottom: var(--margin-base); - - & a, img { - max-height: max(60vh, 400px); - max-width: 100%; - display: block; - - &.large { - --max-width: var(--width-deco); - --width: min(calc(100vw - 4rem), var(--max-width)); - margin-left: max(-15%, calc((100% - var(--width))/2)); - width: var(--max-width); - max-width: var(--width); - max-height: none; - } + display: flex; + flex-direction: column; + justify-content: center; + gap: 0.5rem; + + text-align: center; + + margin-bottom: var(--margin-base); + + & a, + img { + max-height: max(60vh, 400px); + max-width: 100%; + display: block; + + &.large { + --max-width: var(--width-deco); + --width: min(calc(100vw - 4rem), var(--max-width)); + margin-left: max(-15%, calc((100% - var(--width)) / 2)); + width: var(--max-width); + max-width: var(--width); + max-height: none; } + } } figcaption { - font-size: var(--font-size-tiny); + font-size: var(--font-size-tiny); - color: var(--color-gray); + color: var(--color-gray); } -code, pre { - background: rgba(0, 0, 0, 0.4); +code, +pre { + background: rgba(0, 0, 0, 0.4); } code { - padding: 0.05em 0.1em; + padding: 0.05em 0.1em; - font-family: monospace; - font-size: var(--font-size-tiny); + font-family: monospace; + font-size: var(--font-size-tiny); - color: var(--color-gray); - border: var(--color-light) 1px solid; + color: var(--color-gray); + border: var(--color-light) 1px solid; } pre { - border: var(--color-light) 2px solid; + border: var(--color-light) 2px solid; - margin: 0 -1rem var(--margin-base) -1rem; - padding: 0.5rem 1rem; + margin: 0 -1rem var(--margin-base) -1rem; + padding: 0.5rem 1rem; - & code { - padding: 0; + & code { + padding: 0; - background: none; - border: none; - } + background: none; + border: none; + } } header { - max-width: var(--width-deco); - height: var(--height-header); + max-width: var(--width-deco); + height: var(--height-header); - margin: 0 auto var(--margin-header) auto; - padding-bottom: 2rem; + margin: 0 auto var(--margin-header) auto; + padding-bottom: 2rem; - display: flex; - flex-direction: row; - gap: 2rem; - - border-bottom: var(--color-light) 2px solid; - - @media only screen and (max-width: 600px) { - flex-direction: column; - height: auto; - min-height: var(--height-header); - & img { - width: max(33%, 128px); - margin: 0 auto; - } + display: flex; + flex-direction: row; + gap: 2rem; + + border-bottom: var(--color-light) 2px solid; + + @media only screen and (max-width: 600px) { + flex-direction: column; + height: auto; + min-height: var(--height-header); + & img { + width: max(33%, 128px); + margin: 0 auto; } + } - & nav { - display: flex; - flex-direction: column; - flex-wrap: wrap; - gap: 0.5rem; + & nav { + display: flex; + flex-direction: column; + flex-wrap: wrap; + gap: 0.5rem; - & a { - display: block; + & a { + display: block; - min-width: 8rem; + min-width: 8rem; - font-family: monospace; - } + font-family: monospace; } + } } footer { - max-width: var(--width-deco); - height: var(--height-header); + max-width: var(--width-deco); + height: var(--height-header); - margin: var(--margin-header) auto 0 auto; - padding-top: 2rem; + margin: var(--margin-header) auto 0 auto; + padding-top: 2rem; - border-top: var(--color-light) 2px solid; + border-top: var(--color-light) 2px solid; - font-size: var(--font-size-tiny); + font-size: var(--font-size-tiny); } .introduction { - margin: var(--margin-header) 0; + margin: var(--margin-header) 0; } article article { - margin-bottom: var(--margin-header); - &:last-child { - margin-bottom: 0; - } + margin-bottom: var(--margin-header); + &:last-child { + margin-bottom: 0; + } } .pagination { - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - gap: var(--margin-base); - - & p { - margin-bottom: 0; - } + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: var(--margin-base); + + & p { + margin-bottom: 0; + } } |