diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/Header.astro | 6 | ||||
| -rw-r--r-- | src/layouts/BaseLayout.astro | 1 | ||||
| -rw-r--r-- | src/scss/_framework.scss | 242 | ||||
| -rw-r--r-- | src/scss/_navbar.scss | 41 | ||||
| -rw-r--r-- | src/scss/_print.scss | 21 | ||||
| -rw-r--r-- | src/scss/_variables.scss | 22 | ||||
| -rw-r--r-- | src/scss/global.scss | 7 |
7 files changed, 335 insertions, 5 deletions
diff --git a/src/components/Header.astro b/src/components/Header.astro index dca2d8a..0fd9269 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -4,10 +4,6 @@ <header> <nav> - <a href="/">Home</a> - <span> - <span>|</span> - <a href="/feed.xml">RSS</a> - </span> + <a href="/feed.xml">RSS</a> </nav> </header> diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 29a7408..af0d20e 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -1,6 +1,7 @@ --- import Head from "../components/Head.astro"; import Header from "../components/Header.astro"; +import "../scss/global.scss"; const { title, description } = Astro.props; --- diff --git a/src/scss/_framework.scss b/src/scss/_framework.scss new file mode 100644 index 0000000..0b80359 --- /dev/null +++ b/src/scss/_framework.scss @@ -0,0 +1,242 @@ +*, +*::after, +*::before { + box-sizing: border-box; + text-size-adjust: 100%; +} + +html { + font-family: $font-family-base; + font-size: 62.5%; + min-height: 100%; + overflow-y: scroll; +} + +body { + background-color: $color-bg; + color: $color-text; + font-size: $font-size-base; + font-synthesis: weight style small-caps; + font-weight: 400; + line-height: 1.5; + margin: auto; + max-width: 52em; + min-height: 100vh; + padding: 6em 4em 4em; + text-rendering: optimizelegibility; +} + +@media (width <=684px) { + body { + font-size: $font-size-base * 0.85; + padding: 4em 1em 2em; + } +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: 700; + line-height: 1.1; + margin-bottom: 1.5rem; + margin-top: 3rem; + overflow-wrap: break-word; + word-break: break-word; + word-wrap: break-word; +} + +h1 { + font-size: 2.35em; +} + +h2 { + font-size: 2em; +} + +h3 { + font-size: 1.75em; +} + +h4 { + font-size: 1.5em; +} + +h5 { + font-size: 1.25em; +} + +h6 { + font-size: 1em; +} + +p { + margin-bottom: 2.5rem; + margin-top: 0; +} + +small, +sub, +sup { + font-size: 75%; +} + +hr { + border-color: $color-blossom; +} + +a { + color: $color-blossom; + text-decoration: inherit; + transition: color 0.25s; + + &:visited { + color: $color-blossom; + } + + &:active, + &:focus, + &:hover { + opacity: 0.5; + } +} + +ul { + margin-bottom: 2.5rem; + margin-top: 0; + padding-left: 1.4em; +} + +li { + margin-bottom: 0.4em; +} + +blockquote { + background-color: $color-bg-alt; + border-left: 5px solid $color-blossom; + margin-bottom: 2.5rem; + margin-left: 0; + margin-right: 0; + padding: 0.8em 0.8em 0.8em 1em; +} + +blockquote p { + margin-bottom: 0; +} + +img, +video { + display: block; + height: auto; + margin-bottom: 2.5rem; + margin-top: 0; + max-width: 100%; +} + +pre { + background-color: $color-bg-alt; + border-radius: 4px; + border: 1px solid $color-bg-alt; + display: block; + font-size: 0.9em; + margin-bottom: 2.5rem; + margin-top: 0; + overflow-x: auto; + padding: 1em; +} + +code, +kbd, +samp { + background-color: $color-bg-code; + border-radius: 4px; + font-size: 0.9em; + padding: 0 0.2em; + white-space: pre-wrap; +} + +pre > code { + background-color: transparent; + font-size: 1em; + padding: 0; + white-space: pre; +} + +table { + border-collapse: collapse; + text-align: justify; + width: 100%; +} + +td, +th { + border-bottom: 1px dashed $color-blossom; + padding: 0.5em; +} + +textarea { + width: 100%; +} + +.button, +button, +input[type="submit"], +input[type="reset"], +input[type="button"] { + background-color: $color-blossom; + border: 1px solid $color-blossom; + border-radius: 1px; + box-sizing: border-box; + color: $color-bg; + cursor: pointer; + display: inline-block; + padding: 5px 10px; + text-align: center; + text-decoration: none; + white-space: nowrap; + + &[disabled] { + cursor: default; + opacity: 0.5; + } + + &:focus:enabled, + &:hover:enabled { + background-color: $color-fade; + border-color: $color-fade; + color: $color-bg; + outline: 0; + } +} + +textarea, +select, +input { + background-color: $color-bg-alt; + border: 1px solid $color-bg-alt; + border-radius: 4px; + box-shadow: none; + box-sizing: border-box; + color: $color-text; + margin-bottom: 10px; + padding: 6px 10px; + + &:focus { + border: 1px solid $color-blossom; + outline: 0; + } +} + +input[type="checkbox"]:focus { + outline: 1px dotted $color-blossom; +} + +label, +legend, +fieldset { + display: block; + font-weight: 600; + margin-bottom: 0.5rem; +} diff --git a/src/scss/_navbar.scss b/src/scss/_navbar.scss new file mode 100644 index 0000000..ee07ae4 --- /dev/null +++ b/src/scss/_navbar.scss @@ -0,0 +1,41 @@ +header { + background-color: $color-bg; + border-bottom: 1px solid $color-header; + box-shadow: 0 5px 5px $color-bg; + left: 0; + line-height: 3.5em; + opacity: 0.975; + position: fixed; + right: 0; + top: 0; +} + +nav { + margin: auto; + max-width: 60em; + padding: 0 4em; + text-align: right; + + a { + color: $color-text; + padding: 0 1em; + + &:visited { + color: $color-text; + } + } +} + +@media (width <=684px) { + header { + box-shadow: none; + } + + nav { + padding: 0 2em; + + span { + display: none; + } + } +} diff --git a/src/scss/_print.scss b/src/scss/_print.scss new file mode 100644 index 0000000..639faa6 --- /dev/null +++ b/src/scss/_print.scss @@ -0,0 +1,21 @@ +@media print { + body { + padding: 0; + } + + audio, + embed, + footer, + form, + header, + iframe, + nav, + object, + video { + display: none; + } + + img { + max-width: 500px; + } +} diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss new file mode 100644 index 0000000..9c69c8f --- /dev/null +++ b/src/scss/_variables.scss @@ -0,0 +1,22 @@ +$color-bg: #212529; +$color-bg-alt: hwb(0deg 0% 100% / 20%); +$color-bg-code: #3b3d42; +$color-blossom: #6da13f; +$color-fade: #598332; +$color-header: #1b1f22; +$color-text: #dee2e6; +$font-family-base: + "Jost", + -apple-system, + blinkmacsystemfont, + "Segoe UI", + roboto, + "Helvetica Neue", + arial, + "Noto Sans", + sans-serif, + "Apple Color Emoji", + "Segoe UI Emoji", + "Segoe UI Symbol", + "Noto Color Emoji"; +$font-size-base: 1.8rem; diff --git a/src/scss/global.scss b/src/scss/global.scss new file mode 100644 index 0000000..831aa25 --- /dev/null +++ b/src/scss/global.scss @@ -0,0 +1,7 @@ +// Base +@import "variables"; +@import "framework"; +@import "print"; + +// Modules +@import "navbar"; |