From edaeaf08b8750e8278b18484ff8e0aa180fe3fab Mon Sep 17 00:00:00 2001 From: Valentin Popov Date: Wed, 14 Feb 2024 02:18:06 +0400 Subject: Moved actual theme --- _scss/_framework.scss | 250 +++++++++++++++++++++++++++++++++++ _scss/_navbar.scss | 41 ++++++ _scss/_print.scss | 21 +++ _scss/_reset.scss | 179 +++++++++++++++++++++++++ _scss/_variables.scss | 9 ++ _scss/base/_fonts.scss | 9 -- _scss/base/_highlight.scss | 4 - _scss/base/_main.scss | 1 - _scss/base/_normalize.scss | 1 - _scss/base/_sakura.scss | 11 -- _scss/components/_core.scss | 14 -- _scss/highlight/_main.scss | 139 ------------------- _scss/normalize/_main.scss | 177 ------------------------- _scss/sakura/_main.scss | 212 ----------------------------- _scss/utilities/_textsizeadjust.scss | 14 -- assets/css/styles.scss | 11 +- 16 files changed, 505 insertions(+), 588 deletions(-) create mode 100644 _scss/_framework.scss create mode 100644 _scss/_navbar.scss create mode 100644 _scss/_print.scss create mode 100644 _scss/_reset.scss create mode 100644 _scss/_variables.scss delete mode 100644 _scss/base/_fonts.scss delete mode 100644 _scss/base/_highlight.scss delete mode 100644 _scss/base/_main.scss delete mode 100644 _scss/base/_normalize.scss delete mode 100644 _scss/base/_sakura.scss delete mode 100644 _scss/components/_core.scss delete mode 100644 _scss/highlight/_main.scss delete mode 100644 _scss/normalize/_main.scss delete mode 100644 _scss/sakura/_main.scss delete mode 100644 _scss/utilities/_textsizeadjust.scss diff --git a/_scss/_framework.scss b/_scss/_framework.scss new file mode 100644 index 0000000..8c909ad --- /dev/null +++ b/_scss/_framework.scss @@ -0,0 +1,250 @@ +*, +*::after, +*::before { + box-sizing: border-box; + text-size-adjust: 100%; +} + +html { + 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; + font-synthesis: weight style small-caps; + font-weight: 400; + line-height: 1.5; + margin: auto; + max-width: 52em; + padding: 6em 4em 4em 4em; + text-rendering: optimizeLegibility; +} + +@media (max-width: 684px) { + body { + font-size: $font-size-base * 0.85; + padding: 4em 1em 2em 1em; + } +} + +h1, +h2, +h3, +h4, +h5, +h6 { + 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 { + 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: .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; +} + +input, +textarea { + border: 1px solid $color-text; + + &:focus { + border: 1px solid $color-blossom; + } +} + +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 10; + 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: 10; + padding: 6px 10; + + &: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; +} \ 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/_reset.scss b/_scss/_reset.scss new file mode 100644 index 0000000..2bb25ec --- /dev/null +++ b/_scss/_reset.scss @@ -0,0 +1,179 @@ +html { + line-height: 1.15; + -webkit-text-size-adjust: 100%; +} + +body { + margin: 0; +} + +main { + display: block; +} + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +hr { + box-sizing: content-box; + height: 0; + overflow: visible; +} + +pre { + font-family: monospace, monospace; + font-size: 1em; +} + +a { + background-color: transparent; +} + +abbr[title] { + border-bottom: none; + text-decoration: underline; + text-decoration: underline dotted; +} + +b, +strong { + font-weight: bolder; +} + +code, +kbd, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +small { + font-size: 80%; +} + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +img { + border-style: none; +} + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + font-size: 100%; + line-height: 1.15; + margin: 0; +} + +button, +input { + overflow: visible; +} + +button, +select { + text-transform: none; +} + +button, +[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 { + border-style: none; + padding: 0; +} + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +legend { + box-sizing: border-box; + color: inherit; + display: table; + max-width: 100%; + padding: 0; + white-space: normal; +} + +progress { + vertical-align: baseline; +} + +textarea { + overflow: auto; +} + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; + padding: 0; +} + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +[type="search"] { + -webkit-appearance: textfield; + outline-offset: -2px; +} + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} + +details { + display: block; +} + +summary { + display: list-item; +} + +template { + display: none; +} + +[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/normalize/_main.scss b/_scss/normalize/_main.scss deleted file mode 100644 index 791ed81..0000000 --- a/_scss/normalize/_main.scss +++ /dev/null @@ -1,177 +0,0 @@ -html { - line-height: 1.15; -} - -body { - margin: 0; -} - -main { - display: block; -} - -h1 { - font-size: 2em; - margin: .67em 0; -} - -hr { - box-sizing: content-box; - height: 0; - overflow: visible; -} - -pre { - font-family: monospace, monospace; - font-size: 1em; -} - -a { - background-color: transparent; -} - -abbr[title] { - border-bottom: 0; - text-decoration: underline dotted; -} - -b, -strong { - font-weight: bolder; -} - -code, -kbd, -samp { - font-family: monospace, monospace; - font-size: 1em; -} - -small { - font-size: 80%; -} - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -.25em; -} - -sup { - top: -.5em; -} - -img { - border-style: none; -} - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - font-size: 100%; - line-height: 1.15; - margin: 0; -} - -button, -input { - overflow: visible; -} - -button, -select { - text-transform: none; -} - -button, -[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 { - border-style: none; - padding: 0; -} - -button:-moz-focusring, -[type='button']:-moz-focusring, -[type='reset']:-moz-focusring, -[type='submit']:-moz-focusring { - outline: 1px dotted ButtonText; -} - -fieldset { - padding: .35em .75em .625em; -} - -legend { - box-sizing: border-box; - color: inherit; - display: table; - max-width: 100%; - padding: 0; - white-space: normal; -} - -progress { - vertical-align: baseline; -} - -textarea { - overflow: auto; -} - -[type='checkbox'], -[type='radio'] { - box-sizing: border-box; - padding: 0; -} - -[type='number']::-webkit-inner-spin-button, -[type='number']::-webkit-outer-spin-button { - height: auto; -} - -[type='search'] { - -webkit-appearance: textfield; - outline-offset: -2px; -} - -[type='search']::-webkit-search-decoration { - -webkit-appearance: none; -} - -::-webkit-file-upload-button { - -webkit-appearance: button; - font: inherit; -} - -details { - display: block; -} - -summary { - display: list-item; -} - -template { - display: none; -} - -[hidden] { - display: none; -} diff --git a/_scss/sakura/_main.scss b/_scss/sakura/_main.scss deleted file mode 100644 index 3f1b756..0000000 --- a/_scss/sakura/_main.scss +++ /dev/null @@ -1,212 +0,0 @@ -html { - font-family: $font-family-sans-serif; - font-size: 62.5%; -} - -body { - background-color: $color-bg; - color: $color-text; - font-size: $font-size-base; - line-height: 1.4em; - margin: auto; - max-width: 64em; - padding: 4em; -} - -@media (max-width: 684px) { - body { - font-size: $font-size-base * .85; - padding: 2em; - } -} - -@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; - line-height: 1.1; -} - -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; -} - -small, -sub, -sup { - font-size: 75%; -} - -hr { - border-color: $color-blossom; -} - -a { - color: $color-blossom; - - &:active, - &:focus, - &:hover { - color: $color-fade; - } -} - -ul { - padding-left: 1.4em; -} - -li { - margin-bottom: .4em; -} - -blockquote { - border-left: 3px solid $color-blossom; - font-style: italic; - margin-left: 1.5em; - padding-left: 1em; -} - -img { - max-width: 100%; -} - -pre { - background-color: $color-bg-alt; - border: 1px solid $color-bg-alt; - border-radius: 4px; - display: block; - overflow-x: auto; - padding: 1em; -} - -code { - background-color: $color-bg-alt; - border-radius: 4px; - font-size: .9em; - padding: 0 .5em; - white-space: pre-wrap; -} - -pre > code { - background-color: transparent; - padding: 0; - white-space: pre; -} - -table { - border-collapse: collapse; - text-align: justify; - width: 100%; -} - -td, -th { - border-bottom: 1px solid $color-bg-alt; - padding: .5em; -} - -input, -textarea { - border: 1px solid $color-text; - - &:focus { - border: 1px solid $color-blossom; - } -} - -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: 1em; - text-align: center; - text-decoration: none; - white-space: nowrap; - - &[disabled] { - cursor: default; - opacity: .5; - } - - &:focus, - &:hover { - background-color: $color-fade; - border-color: $color-fade; - color: $color-bg; - outline: 0; - } -} - -textarea, -select, -input[type] { - 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; - - &: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: .5rem; -} 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 | -// 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 -- cgit v1.2.3