diff options
| -rw-r--r-- | _scss/_framework.scss (renamed from _scss/sakura/_main.scss) | 124 | ||||
| -rw-r--r-- | _scss/_navbar.scss | 41 | ||||
| -rw-r--r-- | _scss/_print.scss | 21 | ||||
| -rw-r--r-- | _scss/_reset.scss (renamed from _scss/normalize/_main.scss) | 44 | ||||
| -rw-r--r-- | _scss/_variables.scss | 9 | ||||
| -rw-r--r-- | _scss/base/_fonts.scss | 9 | ||||
| -rw-r--r-- | _scss/base/_highlight.scss | 4 | ||||
| -rw-r--r-- | _scss/base/_main.scss | 1 | ||||
| -rw-r--r-- | _scss/base/_normalize.scss | 1 | ||||
| -rw-r--r-- | _scss/base/_sakura.scss | 11 | ||||
| -rw-r--r-- | _scss/components/_core.scss | 14 | ||||
| -rw-r--r-- | _scss/highlight/_main.scss | 139 | ||||
| -rw-r--r-- | _scss/utilities/_textsizeadjust.scss | 14 | ||||
| -rw-r--r-- | assets/css/styles.scss | 11 |
14 files changed, 180 insertions, 263 deletions
diff --git a/_scss/sakura/_main.scss b/_scss/_framework.scss index 3f1b756..8c909ad 100644 --- a/_scss/sakura/_main.scss +++ b/_scss/_framework.scss @@ -1,42 +1,50 @@ +*, +*::after, +*::before { + box-sizing: border-box; + text-size-adjust: 100%; +} + html { - font-family: $font-family-sans-serif; + font-family: $font-family-base; font-size: 62.5%; + overflow-y: scroll; } body { background-color: $color-bg; color: $color-text; font-size: $font-size-base; - line-height: 1.4em; + font-synthesis: weight style small-caps; + font-weight: 400; + line-height: 1.5; margin: auto; - max-width: 64em; - padding: 4em; + max-width: 52em; + padding: 6em 4em 4em 4em; + text-rendering: optimizeLegibility; } @media (max-width: 684px) { body { - font-size: $font-size-base * .85; - padding: 2em; + font-size: $font-size-base * 0.85; + padding: 4em 1em 2em 1em; } } -@mixin word-wrap { - hyphens: auto; - overflow-wrap: break-word; - word-break: break-word; - word-wrap: break-word; -} - h1, h2, h3, h4, h5, h6 { - @include word-wrap; - font-weight: 700; + hyphens: auto; line-height: 1.1; + margin-bottom: 1.5rem; + margin-top: 3rem; + overflow-wrap: break-word; + word-break: break-word; + word-wrap: break-word; } h1 { @@ -63,6 +71,11 @@ h6 { font-size: 1em; } +p { + margin-bottom: 2.5rem; + margin-top: 0; +} + small, sub, sup { @@ -75,52 +88,77 @@ hr { a { color: $color-blossom; + text-decoration: inherit; + transition: color 0.25s; + + &:visited { + color: $color-blossom; + } &:active, &:focus, &:hover { - color: $color-fade; + opacity: .5; } } ul { + margin-bottom: 2.5rem; + margin-top: 0; padding-left: 1.4em; } li { - margin-bottom: .4em; + margin-bottom: 0.4em; } blockquote { - border-left: 3px solid $color-blossom; - font-style: italic; - margin-left: 1.5em; - padding-left: 1em; + 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 { +img, +video { + display: block; + height: auto; + margin-bottom: 2.5rem; + margin-top: 0; max-width: 100%; } pre { background-color: $color-bg-alt; - border: 1px solid $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 { - background-color: $color-bg-alt; +code, +kbd, +samp { + background-color: $color-bg-code; border-radius: 4px; - font-size: .9em; - padding: 0 .5em; + font-size: 0.9em; + padding: 0 0.2em; white-space: pre-wrap; } -pre > code { +pre>code { background-color: transparent; + font-size: 1em; padding: 0; white-space: pre; } @@ -133,8 +171,8 @@ table { td, th { - border-bottom: 1px solid $color-bg-alt; - padding: .5em; + border-bottom: 1px dashed $color-blossom; + padding: 0.5em; } input, @@ -152,9 +190,9 @@ textarea { .button, button, -input[type='submit'], -input[type='reset'], -input[type='button'] { +input[type="submit"], +input[type="reset"], +input[type="button"] { background-color: $color-blossom; border: 1px solid $color-blossom; border-radius: 1px; @@ -162,18 +200,18 @@ input[type='button'] { color: $color-bg; cursor: pointer; display: inline-block; - padding: 1em; + padding: 5px 10; text-align: center; text-decoration: none; white-space: nowrap; &[disabled] { cursor: default; - opacity: .5; + opacity: 0.5; } - &:focus, - &:hover { + &:focus:enabled, + &:hover:enabled { background-color: $color-fade; border-color: $color-fade; color: $color-bg; @@ -183,15 +221,15 @@ input[type='button'] { textarea, select, -input[type] { +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: .5em; - padding: 1em; + margin-bottom: 10; + padding: 6px 10; &:focus { border: 1px solid $color-blossom; @@ -199,7 +237,7 @@ input[type] { } } -input[type='checkbox']:focus { +input[type="checkbox"]:focus { outline: 1px dotted $color-blossom; } @@ -208,5 +246,5 @@ legend, fieldset { display: block; font-weight: 600; - margin-bottom: .5rem; -} + margin-bottom: 0.5rem; +}
\ No newline at end of file diff --git a/_scss/_navbar.scss b/_scss/_navbar.scss new file mode 100644 index 0000000..60e2b75 --- /dev/null +++ b/_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: .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 (max-width: 684px) { + header { + box-shadow: none; + } + + nav { + padding: 0 2em; + + span { + display: none; + } + } +}
\ No newline at end of file diff --git a/_scss/_print.scss b/_scss/_print.scss new file mode 100644 index 0000000..9c56324 --- /dev/null +++ b/_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; + } +}
\ No newline at end of file diff --git a/_scss/normalize/_main.scss b/_scss/_reset.scss index 791ed81..2bb25ec 100644 --- a/_scss/normalize/_main.scss +++ b/_scss/_reset.scss @@ -1,5 +1,6 @@ html { line-height: 1.15; + -webkit-text-size-adjust: 100%; } body { @@ -12,7 +13,7 @@ main { h1 { font-size: 2em; - margin: .67em 0; + margin: 0.67em 0; } hr { @@ -31,7 +32,8 @@ a { } abbr[title] { - border-bottom: 0; + border-bottom: none; + text-decoration: underline; text-decoration: underline dotted; } @@ -60,11 +62,11 @@ sup { } sub { - bottom: -.25em; + bottom: -0.25em; } sup { - top: -.5em; + top: -0.5em; } img { @@ -93,29 +95,29 @@ select { } button, -[type='button'], -[type='reset'], -[type='submit'] { +[type="button"], +[type="reset"], +[type="submit"] { -webkit-appearance: button; } button::-moz-focus-inner, -[type='button']::-moz-focus-inner, -[type='reset']::-moz-focus-inner, -[type='submit']::-moz-focus-inner { +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, -[type='button']:-moz-focusring, -[type='reset']:-moz-focusring, -[type='submit']:-moz-focusring { +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { - padding: .35em .75em .625em; + padding: 0.35em 0.75em 0.625em; } legend { @@ -135,23 +137,23 @@ textarea { overflow: auto; } -[type='checkbox'], -[type='radio'] { +[type="checkbox"], +[type="radio"] { box-sizing: border-box; padding: 0; } -[type='number']::-webkit-inner-spin-button, -[type='number']::-webkit-outer-spin-button { +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { height: auto; } -[type='search'] { +[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } -[type='search']::-webkit-search-decoration { +[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } @@ -174,4 +176,4 @@ template { [hidden] { display: none; -} +}
\ No newline at end of file diff --git a/_scss/_variables.scss b/_scss/_variables.scss new file mode 100644 index 0000000..f518ff4 --- /dev/null +++ b/_scss/_variables.scss @@ -0,0 +1,9 @@ +$color-bg: #212529; +$color-bg-alt: hwb(0deg 0% 100% / 20%); +$color-bg-code: #2e3440; +$color-blossom: #85BCF2; +$color-fade: #4e6f8e; +$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;
\ No newline at end of file diff --git a/_scss/base/_fonts.scss b/_scss/base/_fonts.scss deleted file mode 100644 index ad6d38e..0000000 --- a/_scss/base/_fonts.scss +++ /dev/null @@ -1,9 +0,0 @@ -@font-face { - font-display: swap; - font-family: 'Open Sans'; - font-style: normal; - font-weight: normal; - src: url('/assets/fonts/open-sans/open-sans-regular.ttf') format('truetype'), - url('/assets/fonts/open-sans/open-sans-regular.woff') format('woff'), - url('/assets/fonts/open-sans/open-sans-regular.woff2') format('woff2'); -} diff --git a/_scss/base/_highlight.scss b/_scss/base/_highlight.scss deleted file mode 100644 index c3cf783..0000000 --- a/_scss/base/_highlight.scss +++ /dev/null @@ -1,4 +0,0 @@ -$color00: rgb(255, 0, 0); -$color01: rgb(255, 255, 204); - -@import 'highlight/main'; diff --git a/_scss/base/_main.scss b/_scss/base/_main.scss deleted file mode 100644 index 810b2d4..0000000 --- a/_scss/base/_main.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'components/core'; diff --git a/_scss/base/_normalize.scss b/_scss/base/_normalize.scss deleted file mode 100644 index b96534d..0000000 --- a/_scss/base/_normalize.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'normalize/main'; diff --git a/_scss/base/_sakura.scss b/_scss/base/_sakura.scss deleted file mode 100644 index 58b95fe..0000000 --- a/_scss/base/_sakura.scss +++ /dev/null @@ -1,11 +0,0 @@ -$color-bg-alt: rgba(0, 0, 0, .09); -$color-bg: rgb(250, 250, 250); -$color-blossom: rgb(0, 108, 160); -$color-fade: rgb(13, 78, 120); -$color-html: rgb(250, 250, 250); -$color-text: rgb(85, 85, 85); - -$font-family-sans-serif: 'Open Sans', sans-serif; -$font-size-base: 1.6em; - -@import 'sakura/main'; diff --git a/_scss/components/_core.scss b/_scss/components/_core.scss deleted file mode 100644 index 46740ac..0000000 --- a/_scss/components/_core.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import 'utilities/textsizeadjust'; - -*, -*::after, -*::before { - @include text-size-adjust(100%); - - box-sizing: border-box; -} - -html { - background-color: $color-html; - overflow-y: scroll; -} diff --git a/_scss/highlight/_main.scss b/_scss/highlight/_main.scss deleted file mode 100644 index 5e999b9..0000000 --- a/_scss/highlight/_main.scss +++ /dev/null @@ -1,139 +0,0 @@ -.highlight { - .c { - font-style: italic; - } - - .c1 { - font-style: italic; - } - - .cm { - font-style: italic; - } - - .cs { - font-style: italic; - } - - .err { - border: 1px solid $color00; - } - - .ge { - font-style: italic; - } - - .gh { - font-weight: bold; - } - - .gp { - font-weight: bold; - } - - .gs { - font-weight: bold; - } - - .gu { - font-weight: bold; - } - - .hll { - background-color: $color01; - } - - .k { - font-weight: bold; - } - - .kc { - font-weight: bold; - } - - .kd { - font-weight: bold; - } - - .kn { - font-weight: bold; - } - - .kr { - font-weight: bold; - } - - .nc { - font-weight: bold; - } - - .ne { - font-weight: bold; - } - - .ni { - font-weight: bold; - } - - .nn { - font-weight: bold; - } - - .nt { - font-weight: bold; - } - - .ow { - font-weight: bold; - } - - .s { - font-style: italic; - } - - .s1 { - font-style: italic; - } - - .s2 { - font-style: italic; - } - - .sb { - font-style: italic; - } - - .sc { - font-style: italic; - } - - .sd { - font-style: italic; - } - - .se { - font-style: italic; - font-weight: bold; - } - - .sh { - font-style: italic; - } - - .si { - font-style: italic; - font-weight: bold; - } - - .sr { - font-style: italic; - } - - .ss { - font-style: italic; - } - - .sx { - font-style: italic; - } -} diff --git a/_scss/utilities/_textsizeadjust.scss b/_scss/utilities/_textsizeadjust.scss deleted file mode 100644 index 8a01d4d..0000000 --- a/_scss/utilities/_textsizeadjust.scss +++ /dev/null @@ -1,14 +0,0 @@ -// Text Size Adjust -// -// The text-size-adjust CSS property controls the text inflation algorithm used -// on some smartphones and tablets. Other browsers will ignore this property. -// -// Values: none | auto | <percentage> -// Default: none -// -// https://drafts.csswg.org/css-size-adjust/#adjustment-control -@mixin text-size-adjust($value: none) { - -moz-text-size-adjust: $value; - -ms-text-size-adjust: $value; - -webkit-text-size-adjust: $value; -} diff --git a/assets/css/styles.scss b/assets/css/styles.scss index 8bba8f6..80ebd4f 100644 --- a/assets/css/styles.scss +++ b/assets/css/styles.scss @@ -1,9 +1,8 @@ --- -# Loading site styles --- -@import 'base/normalize'; -@import 'base/highlight'; -@import 'base/sakura'; -@import 'base/main'; -@import 'base/fonts'; +@import "reset"; +@import "variables"; +@import "framework"; +@import "navbar"; +@import "print";
\ No newline at end of file |