aboutsummaryrefslogtreecommitdiff
path: root/assets/_sass
diff options
context:
space:
mode:
Diffstat (limited to 'assets/_sass')
-rw-r--r--assets/_sass/_layout.scss337
-rw-r--r--assets/_sass/base/_animations.scss92
-rw-r--r--assets/_sass/base/_helpers.scss10
-rw-r--r--assets/_sass/base/_mixins.scss31
-rw-r--r--assets/_sass/base/_reset.scss69
-rw-r--r--assets/_sass/base/_syntax.scss519
-rw-r--r--assets/_sass/base/_vars.scss82
-rw-r--r--assets/_sass/components/_page.scss348
-rw-r--r--assets/_sass/components/_pagination.scss40
-rw-r--r--assets/_sass/components/_post.scss892
-rw-r--r--assets/_sass/main.scss42
-rw-r--r--assets/_sass/pages/_fourofour.scss17
-rw-r--r--assets/_sass/partials/_burger-menu.scss136
-rw-r--r--assets/_sass/partials/_header-separator.scss54
14 files changed, 1313 insertions, 1356 deletions
diff --git a/assets/_sass/_layout.scss b/assets/_sass/_layout.scss
index 9c1dd0a..a27b8a7 100644
--- a/assets/_sass/_layout.scss
+++ b/assets/_sass/_layout.scss
@@ -1,166 +1,171 @@
-.site-header {
- display: grid;
- @include justify-content();
- padding: 0 20px;
- text-align: center;
-
- .site-header-wrapper {
- position: relative;
- overflow: hidden;
- background: var(--main-color);
- padding: 10px 25px 20px 25px;
- border-radius: 0 0 5px 5px;
- text-decoration: none;
-
- transition: background .2s ease;
-
- &:before { position: absolute; top: 0; left: -150%; content: ""; width: 50%; height: 100%;
- background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
- background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
- transform: skew(-45deg, 0);
- }
- &:hover {
- background: var(--main-color-hover);
- &:before {
- animation: headerShine .35s;
- }
- }
- .site-logo { display: block; margin: 0 0 10px;
- img {
- display: block;
- }
- }
- .site-subtitle {
- display: block;
- font-family: 'Bebas Neue', sans-serif;
- font-size: 11px;
- line-height: 14px;
- color: var(--grey-fc);
- }
- .site-title {
- display: block;
- font-family: 'Bebas Neue', sans-serif;
- font-size: 26px;
- line-height: 28px;
- color: var(--grey-fc);
- }
- }
-}
-
-.site-navigation {
- display: flex;
- @include justify-content();
- @include align-items();
- @include flex-flow(row wrap);
- gap: 10px 40px;
- max-width: 800px;
- margin: 30px auto 0;
- padding: 0 20px;
- text-align: center;
-
- a, span {
- position: relative;
- text-decoration: none;
- color: var(--grey-555);
- padding: 0 0 2px;
- transition: color .2s ease;
- cursor: pointer;
-
- &:before {
- position: absolute;
- opacity: 0;
- left: 0;
- bottom: 0;
- width: 0%;
- border-bottom: 2px solid var(--grey-222);
-
- transition: width .18s ease, opacity .18s ease;
- content: "";
- }
-
- &:hover, &.active { color: var(--grey-222);
- &:before {
- width: 100%; opacity: 1;
- }
- }
- }
-}
-
-@media screen and (max-width: 800px) {
- .site-header {
- position: fixed;
- left: 0;
- top: 0;
- width: 100%;
- z-index: 9;
- background: var(--body-bg);
- box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
-
- .site-header-wrapper {
- display: flex;
- @include align-items();
- @include justify-content();
- @include flex-flow(row wrap);
- gap: 0 15px;
- border-radius: 0;
- padding: 20px;
- background: transparent;
-
- &:hover {
- background: transparent;
- }
- .site-logo,
- .site-subtitle {
- display: none;
- }
- .site-title {
- font-size: 32px;
- line-height: 36px;
- color: var(--main-color);
- }
- }
- }
-
- .site-navigation {
- position: fixed;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 100%;
- @include justify-content(flex-start);
- @include flex-flow(column nowrap);
- gap: 20px 0;
- transform: translate(0, -100%);
- transition: transform .25s ease-in-out;
- padding: 100px 20px 0;
- background: rgba(255, 255, 255, .9);
- z-index: 10;
-
- a, span {
- color: var(--grey-222);
- font-size: 30px;
- line-height: 40px;
- }
- }
-}
-
-.wrapper {
- max-width: 600px;
- margin: 0 auto;
- padding: 0 20px 35px;
- border-bottom: 1px solid var(--grey-eee);
-
- &.long {
- max-width: 800px;
- }
-}
-
-.site-footer {
- max-width: 800px;
- margin: 0 auto;
- padding: 40px 20px;
- font-size: 14px;
- line-height: 22px;
- color: var(--grey-ccc);
- text-align: center;
-}
+.site-header {
+ display: grid;
+ justify-content: center;
+ padding: 0 20px;
+ text-align: center;
+
+ .site-header-wrapper {
+ position: relative;
+ overflow: hidden;
+ background: var(--main-color);
+ padding: 10px 25px 20px 25px;
+ border-radius: 0 0 5px 5px;
+ text-decoration: none;
+
+ transition: background .2s ease;
+
+ &:before {
+ position: absolute;
+ top: 0;
+ left: -150%;
+ content: "";
+ width: 50%;
+ height: 100%;
+ background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
+ transform: skew(-45deg, 0);
+ }
+ &:hover {
+ background: var(--main-color-hover);
+ &:before {
+ animation: headerShine .35s;
+ }
+ }
+ .site-logo { display: block; margin: 0 0 10px;
+ img {
+ display: block;
+ }
+ }
+ .site-subtitle {
+ display: block;
+ font-family: 'Bebas Neue', sans-serif;
+ font-size: 11px;
+ line-height: 14px;
+ color: var(--grey-fc);
+ }
+ .site-title {
+ display: block;
+ font-family: 'Bebas Neue', sans-serif;
+ font-size: 26px;
+ line-height: 28px;
+ color: var(--grey-fc);
+ }
+ }
+}
+
+.site-navigation {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-flow: row wrap;
+ gap: 10px 40px;
+ max-width: 800px;
+ margin: 30px auto 0;
+ padding: 0 20px;
+ text-align: center;
+
+ a, span {
+ position: relative;
+ text-decoration: none;
+ color: var(--grey-555);
+ padding: 0 0 2px;
+ transition: color .2s ease;
+ cursor: pointer;
+
+ &:before {
+ position: absolute;
+ opacity: 0;
+ left: 0;
+ bottom: 0;
+ width: 0%;
+ border-bottom: 2px solid var(--grey-222);
+
+ transition: width .18s ease, opacity .18s ease;
+ content: "";
+ }
+
+ &:hover, &.active { color: var(--grey-222);
+ &:before {
+ width: 100%; opacity: 1;
+ }
+ }
+ }
+}
+
+@media screen and (max-width: 800px) {
+ .site-header {
+ position: fixed;
+ left: 0;
+ top: 0;
+ width: 100%;
+ z-index: 9;
+ background: var(--body-bg);
+ box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
+
+ .site-header-wrapper {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-flow: row wrap;
+ gap: 0 15px;
+ border-radius: 0;
+ padding: 20px;
+ background: transparent;
+
+ &:hover {
+ background: transparent;
+ }
+ .site-logo,
+ .site-subtitle {
+ display: none;
+ }
+ .site-title {
+ font-size: 32px;
+ line-height: 36px;
+ color: var(--main-color);
+ }
+ }
+ }
+
+ .site-navigation {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ justify-content: flex-start;
+ flex-flow: column nowrap;
+ gap: 20px 0;
+ transform: translate(0, -100%);
+ transition: transform .25s ease-in-out;
+ padding: 100px 20px 0;
+ background: rgba(255, 255, 255, .9);
+ z-index: 10;
+
+ a, span {
+ color: var(--grey-222);
+ font-size: 30px;
+ line-height: 40px;
+ }
+ }
+}
+
+.wrapper {
+ max-width: 600px;
+ margin: 0 auto;
+ padding: 0 20px 35px;
+ border-bottom: 1px solid var(--grey-eee);
+
+ &.long {
+ max-width: 800px;
+ }
+}
+
+.site-footer {
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 40px 20px;
+ font-size: 14px;
+ line-height: 22px;
+ color: var(--grey-ccc);
+ text-align: center;
+}
diff --git a/assets/_sass/base/_animations.scss b/assets/_sass/base/_animations.scss
index 2885970..9bbe938 100644
--- a/assets/_sass/base/_animations.scss
+++ b/assets/_sass/base/_animations.scss
@@ -1,46 +1,46 @@
-@keyframes headerShine {
- 100% {
- left: 150%;
- }
-}
-
-@keyframes fadeIn {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
-}
-
-@keyframes fadeOut {
- from {
- opacity: 1;
- }
- to {
- opacity: 0;
- }
-}
-
-@keyframes zoomIn {
- from {
- opacity: 0;
- transform: scale3d(0.3, 0.3, 0.3);
- }
- to {
- opacity: 1;
- }
-}
-
-@keyframes zoomOut {
- from {
- opacity: 1;
- }
- 50% {
- opacity: 0;
- transform: scale3d(0.3, 0.3, 0.3);
- }
- to {
- opacity: 0;
- }
-}
+@keyframes headerShine {
+ 100% {
+ left: 150%;
+ }
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes fadeOut {
+ from {
+ opacity: 1;
+ }
+ to {
+ opacity: 0;
+ }
+}
+
+@keyframes zoomIn {
+ from {
+ opacity: 0;
+ transform: scale3d(0.3, 0.3, 0.3);
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes zoomOut {
+ from {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0;
+ transform: scale3d(0.3, 0.3, 0.3);
+ }
+ to {
+ opacity: 0;
+ }
+}
diff --git a/assets/_sass/base/_helpers.scss b/assets/_sass/base/_helpers.scss
deleted file mode 100644
index d461516..0000000
--- a/assets/_sass/base/_helpers.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.hidden {
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- width: 1px;
-}
diff --git a/assets/_sass/base/_mixins.scss b/assets/_sass/base/_mixins.scss
deleted file mode 100644
index 47c3cc3..0000000
--- a/assets/_sass/base/_mixins.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-@mixin placeholder {
- &.placeholder { @content }
- &:-ms-input-placeholder { @content }
- &:-moz-placeholder { @content }
- &::-moz-placeholder { @content }
- &::-webkit-input-placeholder { @content }
-}
-
-@mixin flex($grow: 1, $shrink: 1, $basis: auto) {
- -webkit-flex: $grow $shrink $basis;
- -moz-flex: $grow $shrink $basis;
- -ms-flex: $grow $shrink $basis;
- flex: $grow $shrink $basis;
-}
-
-@mixin flex-flow($values: (row wrap)) {
- -webkit-flex-flow: $values;
- -moz-flex-flow: $values;
- -ms-flex-flow: $values;
- flex-flow: $values;
-}
-
-@mixin justify-content($pos: center) {
- -webkit-justify-content: $pos;
- justify-content: $pos;
-}
-
-@mixin align-items($align: center) {
- -webkit-align-items: $align;
- align-items: $align;
-}
diff --git a/assets/_sass/base/_reset.scss b/assets/_sass/base/_reset.scss
index f896901..8e0f0f3 100644
--- a/assets/_sass/base/_reset.scss
+++ b/assets/_sass/base/_reset.scss
@@ -1,35 +1,34 @@
-* {
- box-sizing: border-box;
- -moz-box-sizing: border-box;
-}
-
-body {
- margin: 0;
- padding: 0;
- font-family: 'PT Serif', serif;
- font-size: 18px;
- line-height: 30px;
- color: var(--grey-555);
- background: var(--body-bg);
-}
-
-header,
-nav,
-section,
-main,
-article,
-aside,
-figure,
-footer,
-iframe,
-object,
-svg {
- display: block;
- margin: 0;
-}
-
-@media screen and (max-width: 800px) {
- body {
- padding: 80px 0 0;
- }
-}
+* {
+ box-sizing: border-box;
+}
+
+body {
+ margin: 0;
+ padding: 0;
+ font-family: 'PT Serif', serif;
+ font-size: 18px;
+ line-height: 30px;
+ color: var(--grey-555);
+ background: var(--body-bg);
+}
+
+header,
+nav,
+section,
+main,
+article,
+aside,
+figure,
+footer,
+iframe,
+object,
+svg {
+ display: block;
+ margin: 0;
+}
+
+@media screen and (max-width: 800px) {
+ body {
+ padding: 80px 0 0;
+ }
+}
diff --git a/assets/_sass/base/_syntax.scss b/assets/_sass/base/_syntax.scss
index 8951f90..00d491f 100644
--- a/assets/_sass/base/_syntax.scss
+++ b/assets/_sass/base/_syntax.scss
@@ -1,260 +1,259 @@
-.highlight {
- background: var(--grey-fa);
- border: 1px solid var(--grey-ccc);
- padding: 30px;
-
- .lineno {
- padding: 0 15px 0 0;
- }
- // Comment
- .c {
- color: #998;
- font-style: italic
- }
- // Error
- .err {
- color: #a61717;
- background-color: #e3d2d2
- }
- // Keyword
- .k {
- font-weight: bold
- }
- // Operator
- .o {
- font-weight: bold
- }
- // Comment.Multiline
- .cm {
- color: #998;
- font-style: italic
- }
- // Comment.Preproc
- .cp {
- color: #999;
- font-weight: bold
- }
- // Comment.Single
- .c1 {
- color: #998;
- font-style: italic
- }
- // Comment.Special
- .cs {
- color: #999;
- font-weight: bold;
- font-style: italic
- }
- // Generic.Deleted
- .gd {
- color: #000;
- background-color: #fdd
- }
- // Generic.Deleted.Specific
- .gd .x {
- color: #000;
- background-color: #faa
- }
- // Generic.Emph
- .ge {
- font-style: italic
- }
- // Generic.Error
- .gr {
- color: #a00
- }
- // Generic.Heading
- .gh {
- color: #999
- }
- // Generic.Inserted
- .gi {
- color: #000;
- background-color: #dfd
- }
- // Generic.Inserted.Specific
- .gi .x {
- color: #000;
- background-color: #afa
- }
- // Generic.Output
- .go {
- color: #888
- }
- // Generic.Prompt
- .gp {
- color: #555
- }
- // Generic.Strong
- .gs {
- font-weight: bold
- }
- // Generic.Subheading
- .gu {
- color: #aaa
- }
- // Generic.Traceback
- .gt {
- color: #a00
- }
- // Keyword.Constant
- .kc {
- font-weight: bold
- }
- // Keyword.Declaration
- .kd {
- font-weight: bold
- }
- // Keyword.Pseudo
- .kp {
- font-weight: bold
- }
- // Keyword.Reserved
- .kr {
- font-weight: bold
- }
- // Keyword.Type
- .kt {
- color: #458;
- font-weight: bold
- }
- // Literal.Number
- .m {
- color: #099
- }
- // Literal.String
- .s {
- color: #d14
- }
- // Name.Attribute
- .na {
- color: #008080
- }
- // Name.Builtin
- .nb {
- color: #0086B3
- }
- // Name.Class
- .nc {
- color: #458;
- font-weight: bold
- }
- // Name.Constant
- .no {
- color: #008080
- }
- // Name.Entity
- .ni {
- color: #800080
- }
- // Name.Exception
- .ne {
- color: #900;
- font-weight: bold
- }
- // Name.Function
- .nf {
- color: #900;
- font-weight: bold
- }
- // Name.Namespace
- .nn {
- color: #555
- }
- // Name.Tag
- .nt {
- color: #000080
- }
- // Name.Variable
- .nv {
- color: #008080
- }
- // Operator.Word
- .ow {
- font-weight: bold
- }
- // Text.Whitespace
- .w {
- color: #bbb
- }
- // Literal.Number.Float
- .mf {
- color: #099
- }
- // Literal.Number.Hex
- .mh {
- color: #099
- }
- // Literal.Number.Integer
- .mi {
- color: #099
- }
- // Literal.Number.Oct
- .mo {
- color: #099
- }
- // Literal.String.Backtick
- .sb {
- color: #d14
- }
- // Literal.String.Char
- .sc {
- color: #d14
- }
- // Literal.String.Doc
- .sd {
- color: #d14
- }
- // Literal.String.Double
- .s2 {
- color: #d14
- }
- // Literal.String.Escape
- .se {
- color: #d14
- }
- // Literal.String.Heredoc
- .sh {
- color: #d14
- }
- // Literal.String.Interpol
- .si {
- color: #d14
- }
- // Literal.String.Other
- .sx {
- color: #d14
- }
- // Literal.String.Regex
- .sr {
- color: #009926
- }
- // Literal.String.Single
- .s1 {
- color: #d14
- }
- // Literal.String.Symbol
- .ss {
- color: #990073
- }
- // Name.Builtin.Pseudo
- .bp {
- color: #999
- }
- // Name.Variable.Class
- .vc {
- color: #008080
- }
- // Name.Variable.Global
- .vg {
- color: #008080
- }
- // Name.Variable.Instance
- .vi {
- color: #008080
- }
- // Literal.Number.Integer.Long
- .il {
- color: #099
- }
-}
+.highlight {
+ background: var(--grey-fa);
+ border: 1px solid var(--grey-ccc);
+ padding: 30px;
+}
+.highlight .lineno {
+ padding: 0 15px 0 0;
+}
+/* Comment */
+.highlight .c {
+ color: #998;
+ font-style: italic
+}
+/* Error */
+.highlight .err {
+ color: #a61717;
+ background-color: #e3d2d2
+}
+/* Keyword */
+.highlight .k {
+ font-weight: bold
+}
+/* Operator */
+.highlight .o {
+ font-weight: bold
+}
+/* Comment.Multiline */
+.highlight .cm {
+ color: #998;
+ font-style: italic
+}
+/* Comment.Preproc */
+.highlight .cp {
+ color: #999;
+ font-weight: bold
+}
+/* Comment.Single */
+.highlight .c1 {
+ color: #998;
+ font-style: italic
+}
+/* Comment.Special */
+.highlight .cs {
+ color: #999;
+ font-weight: bold;
+ font-style: italic
+}
+/* Generic.Deleted */
+.highlight .gd {
+ color: #000;
+ background-color: #fdd
+}
+/* Generic.Deleted.Specific */
+.highlight .gd .x {
+ color: #000;
+ background-color: #faa
+}
+/* Generic.Emph */
+.highlight .ge {
+ font-style: italic
+}
+/* Generic.Error */
+.highlight .gr {
+ color: #a00
+}
+/* Generic.Heading */
+.highlight .gh {
+ color: #999
+}
+/* Generic.Inserted */
+.highlight .gi {
+ color: #000;
+ background-color: #dfd
+}
+/* Generic.Inserted.Specific */
+.highlight .gi .x {
+ color: #000;
+ background-color: #afa
+}
+/* Generic.Output */
+.highlight .go {
+ color: #888
+}
+/* Generic.Prompt */
+.highlight .gp {
+ color: #555
+}
+/* Generic.Strong */
+.highlight .gs {
+ font-weight: bold
+}
+/* Generic.Subheading */
+.highlight .gu {
+ color: #aaa
+}
+/* Generic.Traceback */
+.highlight .gt {
+ color: #a00
+}
+/* Keyword.Constant */
+.highlight .kc {
+ font-weight: bold
+}
+/* Keyword.Declaration */
+.highlight .kd {
+ font-weight: bold
+}
+/* Keyword.Pseudo */
+.highlight .kp {
+ font-weight: bold
+}
+/* Keyword.Reserved */
+.highlight .kr {
+ font-weight: bold
+}
+/* Keyword.Type */
+.highlight .kt {
+ color: #458;
+ font-weight: bold
+}
+/* Literal.Number */
+.highlight .m {
+ color: #099
+}
+/* Literal.String */
+.highlight .s {
+ color: #d14
+}
+/* Name.Attribute */
+.highlight .na {
+ color: #008080
+}
+/* Name.Builtin */
+.highlight .nb {
+ color: #0086B3
+}
+/* Name.Class */
+.highlight .nc {
+ color: #458;
+ font-weight: bold
+}
+/* Name.Constant */
+.highlight .no {
+ color: #008080
+}
+/* Name.Entity */
+.highlight .ni {
+ color: #800080
+}
+/* Name.Exception */
+.highlight .ne {
+ color: #900;
+ font-weight: bold
+}
+/* Name.Function */
+.highlight .nf {
+ color: #900;
+ font-weight: bold
+}
+/* Name.Namespace */
+.highlight .nn {
+ color: #555
+}
+/* Name.Tag */
+.highlight .nt {
+ color: #000080
+}
+/* Name.Variable */
+.highlight .nv {
+ color: #008080
+}
+/* Operator.Word */
+.highlight .ow {
+ font-weight: bold
+}
+/* Text.Whitespace */
+.highlight .w {
+ color: #bbb
+}
+/* Literal.Number.Float */
+.highlight .mf {
+ color: #099
+}
+/* Literal.Number.Hex */
+.highlight .mh {
+ color: #099
+}
+/* Literal.Number.Integer */
+.highlight .mi {
+ color: #099
+}
+/* Literal.Number.Oct */
+.highlight .mo {
+ color: #099
+}
+/* Literal.String.Backtick */
+.highlight .sb {
+ color: #d14
+}
+/* Literal.String.Char */
+.highlight .sc {
+ color: #d14
+}
+/* Literal.String.Doc */
+.highlight .sd {
+ color: #d14
+}
+/* Literal.String.Double */
+.highlight .s2 {
+ color: #d14
+}
+/* Literal.String.Escape */
+.highlight .se {
+ color: #d14
+}
+/* Literal.String.Heredoc */
+.highlight .sh {
+ color: #d14
+}
+/* Literal.String.Interpol */
+.highlight .si {
+ color: #d14
+}
+/* Literal.String.Other */
+.highlight .sx {
+ color: #d14
+}
+/* Literal.String.Regex */
+.highlight .sr {
+ color: #009926
+}
+/* Literal.String.Single */
+.highlight .s1 {
+ color: #d14
+}
+/* Literal.String.Symbol */
+.highlight .ss {
+ color: #990073
+}
+/* Name.Builtin.Pseudo */
+.highlight .bp {
+ color: #999
+}
+/* Name.Variable.Class */
+.highlight .vc {
+ color: #008080
+}
+/* Name.Variable.Global */
+.highlight .vg {
+ color: #008080
+}
+/* Name.Variable.Instance */
+.highlight .vi {
+ color: #008080
+}
+/* Literal.Number.Integer.Long */
+.highlight .il {
+ color: #099
+}
diff --git a/assets/_sass/base/_vars.scss b/assets/_sass/base/_vars.scss
index 25435ff..06d5b8d 100644
--- a/assets/_sass/base/_vars.scss
+++ b/assets/_sass/base/_vars.scss
@@ -1,41 +1,41 @@
-:root, [data-theme="light"] {
- --body-bg: #fafafa;
-
- --main-color: #639f93;
- --main-color-hover: #5b9287;
-
- --form-success-bg: #d0f1cc;
- --form-success-text: #597755;
- --form-error-bg: #f1cccc;
- --form-error-text: #775555;
-
- --grey-222: #222;
- --grey-555: #555;
- --grey-aaa: #aaa;
- --grey-ccc: #ccc;
- --grey-ddd: #ddd;
- --grey-eee: #eee;
- --grey-fc: #fcfcfc;
- --grey-fa: #fafafa;
-}
-
-[data-theme="dark"] {
- --body-bg: #050505;
-
- --main-color: #639f93;
- --main-color-hover: #5b9287;
-
- --form-success-bg: #d0f1cc;
- --form-success-text: #597755;
- --form-error-bg: #f1cccc;
- --form-error-text: #775555;
-
- --grey-222: #ddd;
- --grey-555: #ddd;
- --grey-aaa: #777;
- --grey-ccc: #666;
- --grey-ddd: #666;
- --grey-eee: #222;
- --grey-fc: #fcfcfc;
- --grey-fa: #151515;
-}
+:root, [data-theme="light"] {
+ --body-bg: #fafafa;
+
+ --main-color: #639f93;
+ --main-color-hover: #5b9287;
+
+ --form-success-bg: #d0f1cc;
+ --form-success-text: #597755;
+ --form-error-bg: #f1cccc;
+ --form-error-text: #775555;
+
+ --grey-222: #222;
+ --grey-555: #555;
+ --grey-aaa: #aaa;
+ --grey-ccc: #ccc;
+ --grey-ddd: #ddd;
+ --grey-eee: #eee;
+ --grey-fc: #fcfcfc;
+ --grey-fa: #fafafa;
+}
+
+[data-theme="dark"] {
+ --body-bg: #050505;
+
+ --main-color: #639f93;
+ --main-color-hover: #5b9287;
+
+ --form-success-bg: #d0f1cc;
+ --form-success-text: #597755;
+ --form-error-bg: #f1cccc;
+ --form-error-text: #775555;
+
+ --grey-222: #ddd;
+ --grey-555: #ddd;
+ --grey-aaa: #777;
+ --grey-ccc: #666;
+ --grey-ddd: #666;
+ --grey-eee: #222;
+ --grey-fc: #fcfcfc;
+ --grey-fa: #151515;
+}
diff --git a/assets/_sass/components/_page.scss b/assets/_sass/components/_page.scss
index d4ec79b..020e8b6 100644
--- a/assets/_sass/components/_page.scss
+++ b/assets/_sass/components/_page.scss
@@ -1,174 +1,174 @@
-.page {
- .page-title {
- margin: 0 0 25px;
- font-family: "PT Sans", sans-serif;
- font-size: 32px;
- line-height: 42px;
- font-weight: 700;
- color: var(--grey-222);
- }
- .page-content {
- abbr {
- border-bottom: 1px dotted var(--grey-555);
- text-decoration: none;
- cursor: help;
- }
- code,
- kbd,
- pre {
- margin: 0;
- font-family: monospace;
- word-wrap: break-word;
- word-break: break-word;
- white-space: pre-wrap;
- }
- address,
- cite,
- var {
- font-style: italic;
- }
- blockquote {
- margin: 40px 0;
- padding: 0 0 0 20px;
- border-left: 3px solid var(--grey-555);
- color: var(--grey-222);
- font-weight: 700;
- }
- em,
- strong {
- color: var(--grey-222);
- }
-
- h1,
- h2,
- h3,
- h4,
- h5,
- h6 {
- font-family: "PT Sans", sans-serif;
- margin: 40px 0 25px 0;
- color: var(--grey-222);
- }
- h4,
- h5,
- h6 {
- margin: 25px 0;
- }
- h1 {
- font-size: 28px;
- }
- h2 {
- font-size: 26px;
- }
- h3 {
- font-size: 22px;
- }
- h4 {
- font-size: 20px;
- }
- h5 {
- font-size: 18px;
- }
- h6 {
- font-size: 16px;
- }
-
- a {
- color: var(--main-color);
- &:hover {
- text-decoration: none;
- }
- }
-
- img {
- display: block;
- max-width: 100%;
- height: auto;
- }
-
- ul {
- list-style-type: disc;
- list-style-position: inside;
- }
-
- ul,
- ol {
- margin: 15px 0;
- padding: 0 0 0 20px;
- ul,
- ol {
- padding: 0 0 0 20px;
- }
- li {
- margin: 5px 0;
- & > code {
- font-size: 14px;
- padding: 3px 6px;
- margin: 0 4px;
- background: var(--grey-fa);
- border: 1px solid var(--grey-ccc);
- }
- }
- }
-
- dl {
- margin: 40px 0;
- dt {
- margin: 10px 0 0;
- font-weight: 700;
- }
- dd {
- margin: 5px 0;
- & > code {
- font-size: 14px;
- padding: 3px 6px;
- margin: 0 4px;
- background: var(--grey-fa);
- border: 1px solid var(--grey-ccc);
- }
- }
- }
-
- p {
- margin: 15px 0;
- & > code {
- font-size: 14px;
- padding: 3px 6px;
- margin: 0 4px;
- background: var(--grey-fa);
- border: 1px solid var(--grey-ccc);
- }
- }
-
- .alignleft {
- float: left;
- margin: 20px 30px 10px 0;
- }
- .alignright {
- float: right;
- margin: 20px 0 10px 20px;
- }
- .aligncenter {
- clear: both;
- margin: 0 auto 20px;
- }
-
- figcaption {
- font-size: 13px;
- font-style: italic;
- padding-top: 10px;
- }
-
- .iframe-wrapper {
- position: relative;
- padding-top: 56.25%;
- & > iframe {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- }
- }
- }
-}
+.page {
+ .page-title {
+ margin: 0 0 25px;
+ font-family: "PT Sans", sans-serif;
+ font-size: 32px;
+ line-height: 42px;
+ font-weight: 700;
+ color: var(--grey-222);
+ }
+ .page-content {
+ abbr {
+ border-bottom: 1px dotted var(--grey-555);
+ text-decoration: none;
+ cursor: help;
+ }
+ code,
+ kbd,
+ pre {
+ margin: 0;
+ font-family: monospace;
+ word-wrap: break-word;
+ word-break: break-word;
+ white-space: pre-wrap;
+ }
+ address,
+ cite,
+ var {
+ font-style: italic;
+ }
+ blockquote {
+ margin: 40px 0;
+ padding: 0 0 0 20px;
+ border-left: 3px solid var(--grey-555);
+ color: var(--grey-222);
+ font-weight: 700;
+ }
+ em,
+ strong {
+ color: var(--grey-222);
+ }
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ font-family: "PT Sans", sans-serif;
+ margin: 40px 0 25px 0;
+ color: var(--grey-222);
+ }
+ h4,
+ h5,
+ h6 {
+ margin: 25px 0;
+ }
+ h1 {
+ font-size: 28px;
+ }
+ h2 {
+ font-size: 26px;
+ }
+ h3 {
+ font-size: 22px;
+ }
+ h4 {
+ font-size: 20px;
+ }
+ h5 {
+ font-size: 18px;
+ }
+ h6 {
+ font-size: 16px;
+ }
+
+ a {
+ color: var(--main-color);
+ &:hover {
+ text-decoration: none;
+ }
+ }
+
+ img {
+ display: block;
+ max-width: 100%;
+ height: auto;
+ }
+
+ ul {
+ list-style-type: disc;
+ list-style-position: inside;
+ }
+
+ ul,
+ ol {
+ margin: 15px 0;
+ padding: 0 0 0 20px;
+ ul,
+ ol {
+ padding: 0 0 0 20px;
+ }
+ li {
+ margin: 5px 0;
+ & > code {
+ font-size: 14px;
+ padding: 3px 6px;
+ margin: 0 4px;
+ background: var(--grey-fa);
+ border: 1px solid var(--grey-ccc);
+ }
+ }
+ }
+
+ dl {
+ margin: 40px 0;
+ dt {
+ margin: 10px 0 0;
+ font-weight: 700;
+ }
+ dd {
+ margin: 5px 0;
+ & > code {
+ font-size: 14px;
+ padding: 3px 6px;
+ margin: 0 4px;
+ background: var(--grey-fa);
+ border: 1px solid var(--grey-ccc);
+ }
+ }
+ }
+
+ p {
+ margin: 15px 0;
+ & > code {
+ font-size: 14px;
+ padding: 3px 6px;
+ margin: 0 4px;
+ background: var(--grey-fa);
+ border: 1px solid var(--grey-ccc);
+ }
+ }
+
+ .alignleft {
+ float: left;
+ margin: 20px 30px 10px 0;
+ }
+ .alignright {
+ float: right;
+ margin: 20px 0 10px 20px;
+ }
+ .aligncenter {
+ clear: both;
+ margin: 0 auto 20px;
+ }
+
+ figcaption {
+ font-size: 13px;
+ font-style: italic;
+ padding-top: 10px;
+ }
+
+ .iframe-wrapper {
+ position: relative;
+ padding-top: 56.25%;
+ & > iframe {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
+ }
+ }
+}
diff --git a/assets/_sass/components/_pagination.scss b/assets/_sass/components/_pagination.scss
index fcb1b23..5387af8 100644
--- a/assets/_sass/components/_pagination.scss
+++ b/assets/_sass/components/_pagination.scss
@@ -1,20 +1,20 @@
-.pagination {
- display: grid;
- grid-template-columns: 100px 1fr 100px;
- margin: 50px 0 0;
- font-size: 16px;
-
- .previous,
- .next {
- text-decoration: none;
- color: var(--grey-555);
-
- &:hover {
- text-decoration: underline;
- }
- }
- .page_number {
- text-align: center;
- color: var(--grey-ccc);
- }
-}
+.pagination {
+ display: grid;
+ grid-template-columns: 100px 1fr 100px;
+ margin: 50px 0 0;
+ font-size: 16px;
+
+ .previous,
+ .next {
+ text-decoration: none;
+ color: var(--grey-555);
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ .page_number {
+ text-align: center;
+ color: var(--grey-ccc);
+ }
+}
diff --git a/assets/_sass/components/_post.scss b/assets/_sass/components/_post.scss
index 46a31e3..5abeb15 100644
--- a/assets/_sass/components/_post.scss
+++ b/assets/_sass/components/_post.scss
@@ -1,447 +1,445 @@
-.post-lists-title {
- font-family: 'PT Sans', sans-serif;
- font-size: 24px;
- line-height: 42px;
- font-weight: 700;
- color: var(--grey-aaa);
- margin: 0 0 40px;
- text-align: center;
-
- span {
- color: var(--grey-222);
- }
-}
-
-.post-list {
- display: grid;
- gap: 100px 0;
-}
-
-.post {
- position: relative;
-
- .post-title {
- margin: 0 0 25px;
- font-family: 'PT Sans', sans-serif;
- font-size: 32px;
- line-height: 42px;
- font-weight: 700;
- color: var(--grey-222);
-
- a {
- color: var(--grey-222);
- text-decoration: none;
-
- &:hover {
- text-decoration: underline;
- }
- }
- }
-
- .post-author {
- position: absolute;
- top: 10px;
- left: -200px;
- width: 150px;
- text-align: right;
-
- .author-avatar {
- display: inline-block;
- width: 50px;
- height: 50px;
- border-radius: 50%;
- fill: currentColor;
- color: var(--grey-ddd);
- }
- .author-info {
- .author-name {
- display: block;
- margin: 10px 0 4px;
- font-family: 'PT Sans', sans-serif;
- font-size: 16px;
- line-height: 20px;
- font-weight: 700;
- color: var(--grey-222);
- text-transform: uppercase;
- }
- .author-title {
- display: block;
- font-size: 12px;
- line-height: 16px;
- font-style: italic;
- color: var(--grey-aaa);
- }
- }
-
- .post-meta {
- position: relative;
- margin: 15px 0 0;
- padding: 15px 0 0;
- line-height: 20px;
- font-size: 14px;
- color: var(--grey-aaa);
-
- &:before {
- position: absolute;
- top: 0;
- right: 0;
- width: 30px;
- height: 1px;
- background: var(--grey-ddd);
- content: "";
- }
-
- .post-date {
- position: relative;
- margin: 0 5px 0 0;
- padding: 0 10px 0 0;
-
- &:after {
- position: absolute;
- top: 50%;
- right: 0;
- width: 3px;
- height: 3px;
- border-radius: 50%;
- background: var(--grey-ccc);
- content: "";
- }
- }
- .post-categories {
- position: relative;
- display: flex;
- @include justify-content(flex-end);
- gap: 5px;
- margin: 8px 0 0;
-
- a {
- color: var(--main-color);
- text-decoration: none;
-
- &:hover {
- text-decoration: underline;
- }
- }
- }
- }
-}
-
-.post-content {
- abbr {
- border-bottom: 1px dotted var(--grey-555);
- text-decoration: none;
- cursor: help;
- }
- code, kbd, pre {
- margin: 0;
- font-family: monospace;
- word-wrap: break-word;
- word-break: break-word;
- white-space: pre-wrap;
- }
- address, cite, var {
- font-style: italic;
- }
- blockquote {
- margin: 40px 0;
- padding: 0 0 0 20px;
- border-left: 3px solid var(--grey-555);
- color: var(--grey-222);
- font-weight: 700;
- }
- em, strong {
- color: var(--grey-222);
- }
-
- h1, h2, h3, h4, h5, h6 {
- font-family: 'PT Sans', sans-serif;
- margin: 40px 0 25px 0;
- color: var(--grey-222);
- }
- h4, h5, h6 {
- margin: 25px 0;
- }
- h1 {
- font-size: 28px;
- }
- h2 {
- font-size: 26px;
- }
- h3 {
- font-size: 22px;
- }
- h4 {
- font-size: 20px;
- }
- h5 {
- font-size: 18px;
- }
- h6 {
- font-size: 16px;
- }
-
- a {
- color: var(--main-color);
-
- &:hover {
- text-decoration: none;
- }
- }
- img {
- display: block;
- max-width: 100%;
- height: auto;
- }
-
- ul {
- list-style-type: disc;
- list-style-position: inside;
- }
-
- ul, ol {
- margin: 15px 0;
- padding: 0 0 0 20px;
-
- ul, ol {
- padding: 0 0 0 20px;
- }
- li {
- margin: 5px 0;
-
- & > code {
- font-size: 14px;
- padding: 3px 6px;
- margin: 0 4px;
- background: var(--grey-fa);
- border: 1px solid var(--grey-ccc);
- }
- }
- }
-
- dl {
- margin: 40px 0;
-
- dt {
- margin: 10px 0 0;
- font-weight: 700;
- }
- dd {
- margin: 5px 0;
-
- & > code {
- font-size: 14px;
- padding: 3px 6px;
- margin: 0 4px;
- background: var(--grey-fa);
- border: 1px solid var(--grey-ccc);
- }
- }
- }
-
- p {
- margin: 15px 0;
-
- & > code {
- font-size: 14px;
- padding: 3px 6px;
- margin: 0 4px;
- background: var(--grey-fa);
- border: 1px solid var(--grey-ccc);
- }
- }
-
- .alignleft {
- float: left;
- margin: 20px 30px 10px 0;
- }
- .alignright {
- float: right;
- margin: 20px 0 10px 20px;
- }
- .aligncenter {
- clear: both;
- margin: 0 auto 20px;
- }
-
- figcaption {
- font-size: 13px;
- font-style: italic;
- padding-top: 10px;
- }
-
- .iframe-wrapper {
- position: relative;
- padding-top: 56.25%;
-
- & > iframe {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- }
- }
-
- .read-more-button {
- font-size: 16px;
- color: var(--grey-555);
- }
-}
-
-.post-footer {
- display: flex;
- @include justify-content(space-between);
- @include align-items(flex-start);
- gap: 0 20px;
- margin: 50px 0 0;
-
- .post-tags {
- display: flex;
- @include flex-flow(row wrap);
- @include flex(9, 1, auto);
- gap: 0 20px;
- list-style: none;
- margin: 0;
- padding: 0;
-
- li {
- a {
- font-size: 14px;
- font-family: 'PT Sans', sans-serif;
- color: var(--grey-ccc);
- text-decoration: none;
- transition: all .15s ease;
- &:hover {
- color: var(--grey-555);
- }
- }
- }
- }
- .post-share {
- position: relative;
- @include flex(0, 0, auto);
- border: 1px solid var(--grey-ddd);
- overflow: hidden;
-
- &:hover {
- & > span {
- margin-left: -100%;
- }
- & > ul {
- left: 0;
- }
- }
- span {
- display: block;
- width: 100%;
- padding: 0 15px;
- font-family: 'PT Sans', sans-serif;
- font-size: 12px;
- text-transform: uppercase;
- text-align: center;
- letter-spacing: .1em;
- color: var(--grey-aaa);
- cursor: pointer;
- transition: margin .2s ease;
- }
- ul {
- position: absolute;
- top: 0;
- left: 100%;
- width: 100%;
- height: 100%;
- display: flex;
- list-style: none;
- margin: 0;
- padding: 0;
- transition: left .2s ease;
-
- li {
- @include flex(1, 0, auto);
- cursor: pointer;
-
- &:last-child {
- border-left: 1px solid var(--grey-ddd);
- }
- a {
- display: flex;
- @include align-items();
- @include justify-content();
- height: 100%;
- color: var(--grey-ccc);
- &:hover {
- background: var(--grey-eee);
- }
- svg {
- fill: currentColor;
- }
- }
- }
- }
- }
- }
-
- .post-comments {
- position: relative;
- margin: 40px 0 0;
- padding: 20px 0 0;
- border-top: 1px solid var(--grey-ddd);
- }
-}
-
-
-@media screen and (max-width: 960px) {
- .post {
- .post-title {
- margin: 0 0 15px;
- }
- .post-author {
- display: flex;
- @include align-items();
- @include flex-flow(row wrap);
- gap: 15px;
- position: static;
- width: 100%;
- margin: 0 0 20px;
- text-align: left;
- .author-avatar {
- width: 36px;
- height: 36px;
- }
- .author-info {
- .author-name {
- margin: 0;
- color: var(--grey-555);
- text-transform: initial;
- }
- .author-title { display: none; }
- }
- .post-meta {
- display: flex;
- @include flex-flow(row wrap);
- margin: 0;
- margin-left: auto;
- padding: 0;
-
- &:before {
- content: none;
- }
- .post-categories {
- margin: 0 0 0 5px;
- padding: 0 0 0 10px;
-
- &:before {
- position: absolute;
- top: 50%;
- left: 0;
- width: 3px;
- height: 3px;
- border-radius: 50%;
- background: var(--grey-ccc);
- content: "";
- }
- }
- }
- }
- }
-}
+.post-lists-title {
+ font-family: 'PT Sans', sans-serif;
+ font-size: 24px;
+ line-height: 42px;
+ font-weight: 700;
+ color: var(--grey-aaa);
+ margin: 0 0 40px;
+ text-align: center;
+
+ span {
+ color: var(--grey-222);
+ }
+}
+
+.post-list {
+ display: grid;
+ gap: 100px 0;
+}
+
+.post {
+ position: relative;
+
+ .post-title {
+ margin: 0 0 25px;
+ font-family: 'PT Sans', sans-serif;
+ font-size: 32px;
+ line-height: 42px;
+ font-weight: 700;
+ color: var(--grey-222);
+
+ a {
+ color: var(--grey-222);
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+
+ .post-author {
+ position: absolute;
+ top: 10px;
+ left: -200px;
+ width: 150px;
+ text-align: right;
+
+ .author-avatar {
+ display: inline-block;
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ fill: currentColor;
+ color: var(--grey-ddd);
+ }
+ .author-info {
+ .author-name {
+ display: block;
+ margin: 10px 0 4px;
+ font-family: 'PT Sans', sans-serif;
+ font-size: 16px;
+ line-height: 20px;
+ font-weight: 700;
+ color: var(--grey-222);
+ text-transform: uppercase;
+ }
+ .author-title {
+ display: block;
+ font-size: 12px;
+ line-height: 16px;
+ font-style: italic;
+ color: var(--grey-aaa);
+ }
+ }
+
+ .post-meta {
+ position: relative;
+ margin: 15px 0 0;
+ padding: 15px 0 0;
+ line-height: 20px;
+ font-size: 14px;
+ color: var(--grey-aaa);
+
+ &:before {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 30px;
+ height: 1px;
+ background: var(--grey-ddd);
+ content: "";
+ }
+
+ .post-date {
+ position: relative;
+ margin: 0 5px 0 0;
+ padding: 0 10px 0 0;
+
+ &:after {
+ position: absolute;
+ top: 50%;
+ right: 0;
+ width: 3px;
+ height: 3px;
+ border-radius: 50%;
+ background: var(--grey-ccc);
+ content: "";
+ }
+ }
+ .post-categories {
+ position: relative;
+ display: flex;
+ justify-content: flex-end;
+ gap: 5px;
+ margin: 8px 0 0;
+
+ a {
+ color: var(--main-color);
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+ }
+}
+
+.post-content {
+ abbr {
+ border-bottom: 1px dotted var(--grey-555);
+ text-decoration: none;
+ cursor: help;
+ }
+ code, kbd, pre {
+ margin: 0;
+ font-family: monospace;
+ word-wrap: break-word;
+ word-break: break-word;
+ white-space: pre-wrap;
+ }
+ address, cite, var {
+ font-style: italic;
+ }
+ blockquote {
+ margin: 40px 0;
+ padding: 0 0 0 20px;
+ border-left: 3px solid var(--grey-555);
+ color: var(--grey-222);
+ font-weight: 700;
+ }
+ em, strong {
+ color: var(--grey-222);
+ }
+
+ h1, h2, h3, h4, h5, h6 {
+ font-family: 'PT Sans', sans-serif;
+ margin: 40px 0 25px 0;
+ color: var(--grey-222);
+ }
+ h4, h5, h6 {
+ margin: 25px 0;
+ }
+ h1 {
+ font-size: 28px;
+ }
+ h2 {
+ font-size: 26px;
+ }
+ h3 {
+ font-size: 22px;
+ }
+ h4 {
+ font-size: 20px;
+ }
+ h5 {
+ font-size: 18px;
+ }
+ h6 {
+ font-size: 16px;
+ }
+
+ a {
+ color: var(--main-color);
+
+ &:hover {
+ text-decoration: none;
+ }
+ }
+ img {
+ display: block;
+ max-width: 100%;
+ height: auto;
+ }
+
+ ul {
+ list-style-type: disc;
+ list-style-position: inside;
+ }
+
+ ul, ol {
+ margin: 15px 0;
+ padding: 0 0 0 20px;
+
+ ul, ol {
+ padding: 0 0 0 20px;
+ }
+ li {
+ margin: 5px 0;
+
+ & > code {
+ font-size: 14px;
+ padding: 3px 6px;
+ margin: 0 4px;
+ background: var(--grey-fa);
+ border: 1px solid var(--grey-ccc);
+ }
+ }
+ }
+
+ dl {
+ margin: 40px 0;
+
+ dt {
+ margin: 10px 0 0;
+ font-weight: 700;
+ }
+ dd {
+ margin: 5px 0;
+
+ & > code {
+ font-size: 14px;
+ padding: 3px 6px;
+ margin: 0 4px;
+ background: var(--grey-fa);
+ border: 1px solid var(--grey-ccc);
+ }
+ }
+ }
+ p {
+ margin: 15px 0;
+
+ & > code {
+ font-size: 14px;
+ padding: 3px 6px;
+ margin: 0 4px;
+ background: var(--grey-fa);
+ border: 1px solid var(--grey-ccc);
+ }
+ }
+
+ .alignleft {
+ float: left;
+ margin: 20px 30px 10px 0;
+ }
+ .alignright {
+ float: right;
+ margin: 20px 0 10px 20px;
+ }
+ .aligncenter {
+ clear: both;
+ margin: 0 auto 20px;
+ }
+
+ figcaption {
+ font-size: 13px;
+ font-style: italic;
+ padding-top: 10px;
+ }
+
+ .iframe-wrapper {
+ position: relative;
+ padding-top: 56.25%;
+
+ & > iframe {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ .read-more-button {
+ font-size: 16px;
+ color: var(--grey-555);
+ }
+}
+
+.post-footer {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ gap: 0 20px;
+ margin: 50px 0 0;
+
+ .post-tags {
+ display: flex;
+ flex-flow: row wrap;
+ flex: 9 1 auto;
+ gap: 0 20px;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+
+ li {
+ a {
+ font-size: 14px;
+ font-family: 'PT Sans', sans-serif;
+ color: var(--grey-ccc);
+ text-decoration: none;
+ transition: all .15s ease;
+ &:hover {
+ color: var(--grey-555);
+ }
+ }
+ }
+ }
+ .post-share {
+ position: relative;
+ flex: 0 0 auto;
+ border: 1px solid var(--grey-ddd);
+ overflow: hidden;
+
+ &:hover {
+ & > span {
+ margin-left: -100%;
+ }
+ & > ul {
+ left: 0;
+ }
+ }
+ span {
+ display: block;
+ width: 100%;
+ padding: 0 15px;
+ font-family: 'PT Sans', sans-serif;
+ font-size: 12px;
+ text-transform: uppercase;
+ text-align: center;
+ letter-spacing: .1em;
+ color: var(--grey-aaa);
+ cursor: pointer;
+ transition: margin .2s ease;
+ }
+ ul {
+ position: absolute;
+ top: 0;
+ left: 100%;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ transition: left .2s ease;
+
+ li {
+ flex: 1 0 auto;
+ cursor: pointer;
+
+ &:last-child {
+ border-left: 1px solid var(--grey-ddd);
+ }
+ a {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ color: var(--grey-ccc);
+ &:hover {
+ background: var(--grey-eee);
+ }
+ svg {
+ fill: currentColor;
+ }
+ }
+ }
+ }
+ }
+ }
+ .post-comments {
+ position: relative;
+ margin: 40px 0 0;
+ padding: 20px 0 0;
+ border-top: 1px solid var(--grey-ddd);
+ }
+}
+
+
+@media screen and (max-width: 960px) {
+ .post {
+ .post-title {
+ margin: 0 0 15px;
+ }
+ .post-author {
+ display: flex;
+ align-items: center;
+ flex-flow: row wrap;
+ gap: 15px;
+ position: static;
+ width: 100%;
+ margin: 0 0 20px;
+ text-align: left;
+ .author-avatar {
+ width: 36px;
+ height: 36px;
+ }
+ .author-info {
+ .author-name {
+ margin: 0;
+ color: var(--grey-555);
+ text-transform: initial;
+ }
+ .author-title { display: none; }
+ }
+ .post-meta {
+ display: flex;
+ flex-flow: row wrap;
+ margin: 0;
+ margin-left: auto;
+ padding: 0;
+
+ &:before {
+ content: none;
+ }
+ .post-categories {
+ margin: 0 0 0 5px;
+ padding: 0 0 0 10px;
+
+ &:before {
+ position: absolute;
+ top: 50%;
+ left: 0;
+ width: 3px;
+ height: 3px;
+ border-radius: 50%;
+ background: var(--grey-ccc);
+ content: "";
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/assets/_sass/main.scss b/assets/_sass/main.scss
index cc1bc5e..7215fc7 100644
--- a/assets/_sass/main.scss
+++ b/assets/_sass/main.scss
@@ -1,22 +1,20 @@
-@import 'base/vars';
-@import 'base/mixins';
-@import 'base/reset';
-@import 'base/fonts';
-@import 'base/syntax';
-@import 'base/animations';
-@import 'base/helpers';
-
-//Layout
-@import 'layout';
-
-//Pages
-@import 'pages/fourofour';
-
-//Components
-@import 'components/post';
-@import 'components/page';
-@import 'components/pagination';
-
-//Partials
-@import 'partials/header-separator';
-@import 'partials/burger-menu';
+@import 'base/vars';
+@import 'base/reset';
+@import 'base/fonts';
+@import 'base/syntax';
+@import 'base/animations';
+
+/* Layout */
+@import 'layout';
+
+/* Pages */
+@import 'pages/fourofour';
+
+/* Components */
+@import 'components/post';
+@import 'components/page';
+@import 'components/pagination';
+
+/* Partials */
+@import 'partials/header-separator';
+@import 'partials/burger-menu';
diff --git a/assets/_sass/pages/_fourofour.scss b/assets/_sass/pages/_fourofour.scss
index 5257ff1..c8cd137 100644
--- a/assets/_sass/pages/_fourofour.scss
+++ b/assets/_sass/pages/_fourofour.scss
@@ -1,9 +1,8 @@
-.page-not-found {
- text-align: center;
-
- svg {
- fill: currentColor;
- color: var(--grey-ddd);
- margin: 0 auto;
- }
-}
+.page-not-found {
+ text-align: center;
+}
+.page-not-found svg {
+ fill: currentColor;
+ color: var(--grey-ddd);
+ margin: 0 auto;
+}
diff --git a/assets/_sass/partials/_burger-menu.scss b/assets/_sass/partials/_burger-menu.scss
index 73a5b4d..573e406 100644
--- a/assets/_sass/partials/_burger-menu.scss
+++ b/assets/_sass/partials/_burger-menu.scss
@@ -1,68 +1,68 @@
-.toggleBurger {
- display: none;
-
- &:checked {
- & ~ .site-navigation {
- transform: translate(0, 0);
- }
- & ~ .toggleBurgerWrapper {
- span {
- background: transparent;
- &:before {
- top: 0;
- transform: rotate(135deg);
- }
- &:after {
- top: 0;
- transform: rotate(-135deg);
- }
- }
- }
- }
-}
-
-.toggleBurgerWrapper {
- display: none;
- position: fixed;
- top: 20px;
- left: 20px;
- width: 25px;
- height: 30px;
- cursor: pointer;
- z-index: 100;
- user-select: none;
-
- span {
- position: absolute;
- top: 50%;
- height: 2px;
- width: 100%;
- background: var(--grey-222);
-
- transition: all .3s ease;
- transform: translate(0, -50%);
-
- &:before,
- &:after {
- position: absolute;
- height: 2px;
- width: 100%;
- background: var(--grey-222);
- content: "";
-
- transition: all .3s ease;
- }
- &:before {
- top: -6px;
- }
- &:after {
- top: 6px;
- }
- }
-}
-
-@media screen and (max-width: 800px) {
- .toggleBurgerWrapper {
- display: block;
- }
-}
+.toggleBurger {
+ display: none;
+
+ &:checked {
+ & ~ .site-navigation {
+ transform: translate(0, 0);
+ }
+ & ~ .toggleBurgerWrapper {
+ span {
+ background: transparent;
+ &:before {
+ top: 0;
+ transform: rotate(135deg);
+ }
+ &:after {
+ top: 0;
+ transform: rotate(-135deg);
+ }
+ }
+ }
+ }
+}
+
+.toggleBurgerWrapper {
+ display: none;
+ position: fixed;
+ top: 20px;
+ left: 20px;
+ width: 25px;
+ height: 30px;
+ cursor: pointer;
+ z-index: 100;
+ user-select: none;
+
+ span {
+ position: absolute;
+ top: 50%;
+ height: 2px;
+ width: 100%;
+ background: var(--grey-222);
+
+ transition: all .3s ease;
+ transform: translate(0, -50%);
+
+ &:before,
+ &:after {
+ position: absolute;
+ height: 2px;
+ width: 100%;
+ background: var(--grey-222);
+ content: "";
+
+ transition: all .3s ease;
+ }
+ &:before {
+ top: -6px;
+ }
+ &:after {
+ top: 6px;
+ }
+ }
+}
+
+@media screen and (max-width: 800px) {
+ .toggleBurgerWrapper {
+ display: block;
+ }
+}
diff --git a/assets/_sass/partials/_header-separator.scss b/assets/_sass/partials/_header-separator.scss
index 4c264df..da5a007 100644
--- a/assets/_sass/partials/_header-separator.scss
+++ b/assets/_sass/partials/_header-separator.scss
@@ -1,27 +1,27 @@
-.header-content-separator {
- position: relative;
- margin: 40px auto;
- width: 4px;
- height: 4px;
- border-radius: 50%;
- background: var(--grey-ccc);
-
- &:before {
- position: absolute;
- left: -8px;
- width: 4px;
- height: 4px;
- border-radius: 50%;
- background: var(--grey-ccc);
- content: "";
- }
- &:after {
- position: absolute;
- left: 8px;
- width: 4px;
- height: 4px;
- border-radius: 50%;
- background: var(--grey-ccc);
- content: "";
- }
-}
+.header-content-separator {
+ position: relative;
+ margin: 40px auto;
+ width: 4px;
+ height: 4px;
+ border-radius: 50%;
+ background: var(--grey-ccc);
+
+ &:before {
+ position: absolute;
+ left: -8px;
+ width: 4px;
+ height: 4px;
+ border-radius: 50%;
+ background: var(--grey-ccc);
+ content: "";
+ }
+ &:after {
+ position: absolute;
+ left: 8px;
+ width: 4px;
+ height: 4px;
+ border-radius: 50%;
+ background: var(--grey-ccc);
+ content: "";
+ }
+}
generated by cgit v1.2.3 (git 2.26.2) at 2026-07-18 05:29:03 +0000