Moved actual theme

author: Valentin Popov <valentin@popov.link> 2024-02-14 01:18:06 +0300
committer: Valentin Popov <valentin@popov.link> 2024-02-14 01:18:06 +0300
commit: edaeaf08b8750e8278b18484ff8e0aa180fe3fab (patch)
tree: 9a32a03659d396a82c83a1eaca1d19c00a21718d
parent: 6ff06a6e0eb6824925bb058ef465f2713f0b315b (diff)
download: valentineus.github.io-edaeaf08b8750e8278b18484ff8e0aa180fe3fab.tar.xz
valentineus.github.io-edaeaf08b8750e8278b18484ff8e0aa180fe3fab.zip
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
author	Valentin Popov <valentin@popov.link>	2024-02-14 01:18:06 +0300
committer	Valentin Popov <valentin@popov.link>	2024-02-14 01:18:06 +0300
commit	edaeaf08b8750e8278b18484ff8e0aa180fe3fab (patch)
tree	9a32a03659d396a82c83a1eaca1d19c00a21718d
parent	6ff06a6e0eb6824925bb058ef465f2713f0b315b (diff)
download	valentineus.github.io-edaeaf08b8750e8278b18484ff8e0aa180fe3fab.tar.xz valentineus.github.io-edaeaf08b8750e8278b18484ff8e0aa180fe3fab.zip