anhgelus

From 5bfd611e7b3468ae38263388e2415d4bba94b0fc Mon Sep 17 00:00:00 2001 From: Anhgelus Morhtuuzh Date: Thu, 2 Oct 2025 16:59:29 +0200 Subject: feat(frontend): setup and rewrite style with scss --- design/index.html | 2 +- design/log.html | 2 +- design/style.css | 251 ------------------------------------------------------ design/styles.css | 251 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 253 insertions(+), 253 deletions(-) delete mode 100644 design/style.css create mode 100644 design/styles.css (limited to 'design') diff --git a/design/index.html b/design/index.html index ed27fd1..e42aa98 100644 --- a/design/index.html +++ b/design/index.html @@ -5,7 +5,7 @@ anhgelus - +

diff --git a/design/log.html b/design/log.html index 709e918..b95be46 100644 --- a/design/log.html +++ b/design/log.html @@ -5,7 +5,7 @@ anhgelus - log entry - Title - +

diff --git a/design/style.css b/design/style.css deleted file mode 100644 index 6b0e1fb..0000000 --- a/design/style.css +++ /dev/null @@ -1,251 +0,0 @@ -: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 */ - - --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 */ - - --margin-base: 1.5rem; - --margin-header: calc(var(--height-header) / 2); - - font-size: 20px; -} - -body { - font-family: Raveo, Inter, sans-serif; - - background: var(--color-dark); - color: var(--color-light); - - padding: 2rem; -} - -body * { - line-height: 1.4em; -} - -main, article { - max-width: var(--width-content); - margin: 0 auto; -} - -h1, h2, h3 { - font-weight: 500; - - margin-bottom: 0.5rem; -} - -h1 { - font-size: 2rem; - font-weight: 600; -} - -h2 { - font-size: 1.66rem; - - margin-top: calc(var(--margin-base) + 1rem); -} - -h3 { - font-size: 1.33rem; - - margin-top: calc(var(--margin-base) + 0.5rem); -} - -p { - margin-bottom: var(--margin-base); -} - -a { - color: var(--color-rose); - text-decoration: underline; - - &:hover { - background: var(--color-light-rose); - } -} - -em, cite { - font-style: italic; -} - -b { - background: var(--color-light-rose); - /* color: var(--color-dark); */ - font-weight: 500; - - padding: 0.05em 0.1em; -} - -ul, ol { - margin-top: -0.5rem; - margin-bottom: var(--margin-base - 0.5rem); - margin-left: 1rem; - - list-style-position: outside; -} - -ul { - list-style-type: disc; -} - -ol { - list-style-type: roman; -} - -li { - margin-bottom: 0.25rem; -} - -.quote { - font-size: var(--font-size-tiny); -} - -blockquote { - padding: 0.5rem 2rem; - margin-bottom: 0.25rem; - - color: var(--color-gray); - - 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; - } - } -} - -figcaption { - font-size: var(--font-size-tiny); - - color: var(--color-gray); -} - -code, pre { - background: rgba(0, 0, 0, 0.4); -} - -code { - padding: 0.05em 0.1em; - - font-family: monospace; - font-size: var(--font-size-tiny); - - color: var(--color-gray); - border: var(--color-light) 1px solid; -} - -pre { - border: var(--color-light) 2px solid; - - margin: 0 -1rem var(--margin-base) -1rem; - padding: 0.5rem 1rem; - - & code { - padding: 0; - - background: none; - border: none; - } -} - -header { - max-width: var(--width-deco); - height: var(--height-header); - - 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; - } - } - - & nav { - display: flex; - flex-direction: column; - flex-wrap: wrap; - gap: 0.5rem; - - & a { - display: block; - - min-width: 8rem; - - font-family: monospace; - } - } -} - -footer { - max-width: var(--width-deco); - height: var(--height-header); - - margin: var(--margin-header) auto 0 auto; - padding-top: 2rem; - - border-top: var(--color-light) 2px solid; - - font-size: var(--font-size-tiny); -} - -.introduction { - margin: var(--margin-header) 0; -} - -article article { - 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; - } -} diff --git a/design/styles.css b/design/styles.css new file mode 100644 index 0000000..6b0e1fb --- /dev/null +++ b/design/styles.css @@ -0,0 +1,251 @@ +: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 */ + + --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 */ + + --margin-base: 1.5rem; + --margin-header: calc(var(--height-header) / 2); + + font-size: 20px; +} + +body { + font-family: Raveo, Inter, sans-serif; + + background: var(--color-dark); + color: var(--color-light); + + padding: 2rem; +} + +body * { + line-height: 1.4em; +} + +main, article { + max-width: var(--width-content); + margin: 0 auto; +} + +h1, h2, h3 { + font-weight: 500; + + margin-bottom: 0.5rem; +} + +h1 { + font-size: 2rem; + font-weight: 600; +} + +h2 { + font-size: 1.66rem; + + margin-top: calc(var(--margin-base) + 1rem); +} + +h3 { + font-size: 1.33rem; + + margin-top: calc(var(--margin-base) + 0.5rem); +} + +p { + margin-bottom: var(--margin-base); +} + +a { + color: var(--color-rose); + text-decoration: underline; + + &:hover { + background: var(--color-light-rose); + } +} + +em, cite { + font-style: italic; +} + +b { + background: var(--color-light-rose); + /* color: var(--color-dark); */ + font-weight: 500; + + padding: 0.05em 0.1em; +} + +ul, ol { + margin-top: -0.5rem; + margin-bottom: var(--margin-base - 0.5rem); + margin-left: 1rem; + + list-style-position: outside; +} + +ul { + list-style-type: disc; +} + +ol { + list-style-type: roman; +} + +li { + margin-bottom: 0.25rem; +} + +.quote { + font-size: var(--font-size-tiny); +} + +blockquote { + padding: 0.5rem 2rem; + margin-bottom: 0.25rem; + + color: var(--color-gray); + + 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; + } + } +} + +figcaption { + font-size: var(--font-size-tiny); + + color: var(--color-gray); +} + +code, pre { + background: rgba(0, 0, 0, 0.4); +} + +code { + padding: 0.05em 0.1em; + + font-family: monospace; + font-size: var(--font-size-tiny); + + color: var(--color-gray); + border: var(--color-light) 1px solid; +} + +pre { + border: var(--color-light) 2px solid; + + margin: 0 -1rem var(--margin-base) -1rem; + padding: 0.5rem 1rem; + + & code { + padding: 0; + + background: none; + border: none; + } +} + +header { + max-width: var(--width-deco); + height: var(--height-header); + + 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; + } + } + + & nav { + display: flex; + flex-direction: column; + flex-wrap: wrap; + gap: 0.5rem; + + & a { + display: block; + + min-width: 8rem; + + font-family: monospace; + } + } +} + +footer { + max-width: var(--width-deco); + height: var(--height-header); + + margin: var(--margin-header) auto 0 auto; + padding-top: 2rem; + + border-top: var(--color-light) 2px solid; + + font-size: var(--font-size-tiny); +} + +.introduction { + margin: var(--margin-header) 0; +} + +article article { + 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; + } +} -- cgit v1.2.3