From 2a5de814943ea31378f8961004062117d47c4377 Mon Sep 17 00:00:00 2001
From: alexanderdavide <alexeble1998@gmail.com>
Date: Sat, 08 Jan 2022 22:48:40 +0000
Subject: [PATCH] refactor: add partial scss refactorings
---
assets/scss/partials/layout/_main.scss | 3
layouts/_default/baseof.html | 5
layouts/_default/single.html | 8
assets/scss/_style.scss | 0
assets/scss/main.scss | 12 +
assets/scss/partials/components/_category.scss | 11 +
assets/scss/modules/_variables.scss | 51 +++++++
assets/scss/partials/components/_tag.scss | 11 +
assets/css/style.css | 58 ++++---
assets/scss/partials/components/_wrapper.scss | 3
assets/scss/partials/layout/_header.scss | 31 ++++
assets/scss/partials/_hugo.scss | 25 +++
assets/scss/partials/_base.scss | 6
assets/scss/partials/components/_content.scss | 4
assets/scss/partials/layout/_nav.scss | 55 +++++++
layouts/partials/navbar.html | 38 ++--
assets/scss/partials/components/_animated.scss | 52 +++++++
layouts/partials/head.html | 6
assets/scss/partials/components/_info.scss | 14 ++
assets/scss/partials/layout/_body.scss | 6
assets/scss/partials/layout/_html.scss | 4
layouts/partials/footer.html | 1
22 files changed, 351 insertions(+), 53 deletions(-)
diff --git a/assets/css/style.css b/assets/css/style.css
index 6e7e756..c80ce0a 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,4 +1,4 @@
-@charset "UTF-8";
+/* @charset "UTF-8";
:root {
--bg-color: #fff;
@@ -24,7 +24,6 @@
--sidebar-max-width: calc(var(--body-max-width) - var(--content-max-width));
--content-width: calc(var(--content-ratio) * 100%);
--sidebar-width: calc(var(--sidebar-ratio) * 100%);
- /* prettier-ignore */
--content-ratio: {{ .Site.Params.contentratio | default 0.6 }}
}
@@ -59,7 +58,7 @@
width: 100%;
margin: 0 auto;
background-color: var(--bg-color);
-}
+}
p {
line-height: 1.9em;
@@ -78,6 +77,7 @@
color: var(--blockquote-text-color);
}
+
.category {
padding: 4px 6px;
border-radius: 3px;
@@ -99,6 +99,7 @@
margin: 5px 8px 5px 0;
}
+
pre {
background-color: var(--pre-bg-color);
padding: 5px;
@@ -106,11 +107,13 @@
overflow-x: auto;
}
+
.info i {
opacity: 0.5;
margin-right: 5px;
}
+
a:link,
a:visited {
opacity: 1;
@@ -120,11 +123,12 @@
a:active {
color: var(--link-color);
}
+*/
/*basic styles ends*/
/*animation starts*/
-.animated {
+/* .animated {
transition: top 0.8s linear;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
@@ -139,7 +143,7 @@
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-}
+}
@-webkit-keyframes fadeInDown {
0% {
@@ -187,16 +191,17 @@
-o-animation-name: fadeInDown;
animation-name: fadeInDown;
}
+*/
/*animation ends*/
-.nav__list {
+/* .nav__list {
margin: 0;
-}
+} */
main {
width: var(--content-width);
}
-
+/*
.content {
height: auto;
margin-top: 80px;
@@ -234,6 +239,7 @@
padding-bottom: 22px;
border-bottom: 1px solid var(--nav-text-color);
}
+*/
.theme-switch {
margin-top: -5px;
@@ -241,6 +247,7 @@
font-size: 1.75rem;
}
+/*
header .information {
float: right;
padding-top: 12px;
@@ -267,7 +274,7 @@
display: initial;
padding-right: 40px;
}
-
+*/
aside {
width: var(--sidebar-width);
}
@@ -1095,13 +1102,13 @@
}
@media screen and (min-width: 961px), print {
- header {
+ /* header {
border-bottom: 1px solid var(--border-color);
- }
+ } */
- .nav__links li:not(:last-of-type) {
+ /* .nav__links li:not(:last-of-type) {
padding-right: 20px;
- }
+ } */
.sidebar {
height: 100vh;
@@ -1124,17 +1131,18 @@
justify-content: space-between;
}
- .nav__list {
+ /* .nav__list {
display: flex;
flex: 1;
justify-content: space-between;
align-items: center;
min-height: 0;
- }
+ }
.wrapper {
display: flex;
}
+*/
.footer--base {
display: none;
@@ -1222,9 +1230,9 @@
font-size: 2.2rem;
}
- header {
+ /* header {
width: 100%;
- }
+ } */
.post-title h3 {
line-height: 1.6;
@@ -1258,11 +1266,11 @@
display: grid;
}
- nav {
+ /* nav {
display: none;
- }
+ } */
- header .nav__list {
+ /* header .nav__list {
background-color: var(--secondary-bg-color);
box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
padding: 0.5rem 0;
@@ -1292,7 +1300,7 @@
header .nav__list a.current {
border-bottom: none;
- }
+ } */
.navbar-burger {
cursor: pointer;
@@ -1425,12 +1433,12 @@
cursor: zoom-out;
will-change: transform;
}
-
+/*
@media print {
header {
display: none;
}
-}
+} */
@media (min-width: 1921px) {
.sidebar {
@@ -1441,10 +1449,10 @@
.content {
padding-right: 20%;
}
- header {
+ /* header {
position: fixed;
width: var(--content-width);
- }
+ } */
}
/* (CONTACT) FORM */
diff --git a/assets/scss/_style.scss b/assets/scss/_style.scss
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/assets/scss/_style.scss
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
new file mode 100644
index 0000000..17d8be5
--- /dev/null
+++ b/assets/scss/main.scss
@@ -0,0 +1,12 @@
+@import './modules/variables';
+@import './partials/hugo';
+@import './partials/base';
+@import './partials/layout/html';
+@import './partials/layout/body';
+@import './partials/layout/header';
+@import './partials/layout/nav';
+@import './partials/components/animated';
+@import './partials/components/category';
+@import './partials/components/tag';
+@import './partials/components/content';
+@import './partials/components/wrapper';
diff --git a/assets/scss/modules/_variables.scss b/assets/scss/modules/_variables.scss
new file mode 100644
index 0000000..56a74e3
--- /dev/null
+++ b/assets/scss/modules/_variables.scss
@@ -0,0 +1,51 @@
+/* Newly defined variables */
+$accent: #fff;
+$primary: #464646;
+$primary-light: #9f9f9f;
+$primary-lighter: #eeeeee;
+$info: #0366d7;
+$shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
+
+/* Former variables*/
+$secondary-bg-color: #eeeeee;
+$heading-color: #464646;
+$body-color: rgba(0, 0, 0, 0.7);
+$post-color: rgba(0, 0, 0, 0.44);
+$border-color: rgba(0, 0, 0, 0.15);
+$form-border-color: #9f9f9f;
+$form-button-hover-border-color: #000;
+$pre-bg-color: #f9f9fd;
+$nav-text-color: #5a5a5a;
+$tag-color: #424242;
+$blockquote-text-color: #858585;
+$blockquote-border-color: #dfe2e5;
+$link-color: #0366d7;
+$warning-alert-color: #ffc107;
+$thumbnail-height: 15em;
+$scroll-padding-top: 100px;
+$body-max-width: 1920px;
+$content-ratio: 0.6;
+$sidebar-ratio: calc(1 - #{$content-ratio});
+$content-max-width: calc(#{$body-max-width} * #{$content-ratio});
+$sidebar-max-width: calc(#{$body-max-width} - #{$content-max-width});
+$content-width: calc(#{$content-ratio} * 100%);
+$sidebar-width: calc(#{$sidebar-ratio} * 100%);
+
+/* Dark Mode */
+$bg-color-dark: #010408;
+$secondary-bg-color-dark: rgb(56, 56, 56);
+$heading-color-dark: #c9d1d9;
+$body-color-dark: rgb(169, 169, 179);
+$post-color-dark: rgba(0, 0, 0, 0.44);
+$border-color-dark: #30363d;
+$form-border-color-dark: rgb(169, 169, 179);
+$form-button-hover-border-color-dark: #fff;
+$pre-bg-color-dark: rgb(33, 33, 45);
+$nav-text-color-dark: rgb(191, 191, 191);
+$tag-color-dark: rgb(191, 191, 191);
+$blockquote-text-color-dark: #808080;
+$blockquote-border-color-dark: #424242;
+$link-color-dark: #58a6fe;
+$warning-alert-color-dark: #4d00c9c7;
+
+/* prettier-ignore */
diff --git a/assets/scss/partials/_base.scss b/assets/scss/partials/_base.scss
new file mode 100644
index 0000000..407d0a3
--- /dev/null
+++ b/assets/scss/partials/_base.scss
@@ -0,0 +1,6 @@
+@charset "UTF-8";
+
+* {
+ font-family: 'PingHei', 'PingFang SC', 'Helvetica Neue', 'Work Sans', 'Hiragino Sans GB', sans-serif;
+ font-size: 1.6rem;
+}
diff --git a/assets/scss/partials/_hugo.scss b/assets/scss/partials/_hugo.scss
new file mode 100644
index 0000000..920b51f
--- /dev/null
+++ b/assets/scss/partials/_hugo.scss
@@ -0,0 +1,25 @@
+a {
+ text-decoration: none;
+ color: $primary;
+
+ &:hover {
+ color: $info;
+ }
+}
+
+blockquote {
+ padding: 0 1em;
+ border-left: 0.25em solid $primary;
+ color: $primary;
+}
+
+p {
+ line-height: 1.9em;
+ font-size: 1.4rem;
+}
+
+pre {
+ padding: 5px;
+ display: block;
+ overflow-x: auto;
+}
diff --git a/assets/scss/partials/components/_animated.scss b/assets/scss/partials/components/_animated.scss
new file mode 100644
index 0000000..3ce3af4
--- /dev/null
+++ b/assets/scss/partials/components/_animated.scss
@@ -0,0 +1,52 @@
+.animated {
+ transition: top 0.8s linear;
+ animation-duration: 1s;
+ -webkit-animation-duration: 1s;
+ -moz-animation-duration: 1s;
+ -ms-animation-duration: 1s;
+ -o-animation-duration: 1s;
+ -webkit-animation-name: fadeInDown;
+ -moz-animation-name: fadeInDown;
+ -o-animation-name: fadeInDown;
+ animation-name: fadeInDown;
+
+ @-webkit-keyframes fadeInDown {
+ 0% {
+ -webkit-transform: translateY(-20px);
+ }
+
+ 100% {
+ -webkit-transform: translateY(0);
+ }
+ }
+
+ @-moz-keyframes fadeInDown {
+ 0% {
+ -moz-transform: translateY(-20px);
+ }
+
+ 100% {
+ -moz-transform: translateY(0);
+ }
+ }
+
+ @-o-keyframes fadeInDown {
+ 0% {
+ -o-transform: translateY(-20px);
+ }
+
+ 100% {
+ -o-transform: translateY(0);
+ }
+ }
+
+ @keyframes fadeInDown {
+ 0% {
+ transform: translateY(-20px);
+ }
+
+ 100% {
+ transform: translateY(0);
+ }
+ }
+}
diff --git a/assets/scss/partials/components/_category.scss b/assets/scss/partials/components/_category.scss
new file mode 100644
index 0000000..7a09467
--- /dev/null
+++ b/assets/scss/partials/components/_category.scss
@@ -0,0 +1,11 @@
+.category {
+ padding: 4px 6px;
+ border-radius: 3px;
+ color: $tag-color !important;
+ background-color: $primary-lighter;
+ border: 1px solid $primary-light;
+ display: inline-block;
+ font-size: 1.5rem;
+ line-height: 1;
+ margin: 5px 8px 5px 0;
+}
diff --git a/assets/scss/partials/components/_content.scss b/assets/scss/partials/components/_content.scss
new file mode 100644
index 0000000..16b8a0f
--- /dev/null
+++ b/assets/scss/partials/components/_content.scss
@@ -0,0 +1,4 @@
+.content {
+ height: auto;
+ margin-top: 80px;
+}
diff --git a/assets/scss/partials/components/_info.scss b/assets/scss/partials/components/_info.scss
new file mode 100644
index 0000000..fcd31b0
--- /dev/null
+++ b/assets/scss/partials/components/_info.scss
@@ -0,0 +1,14 @@
+.info {
+ margin: 1em;
+
+ &__icon {
+ margin-right: 4px;
+ opacity: 0.5;
+ }
+
+ &__text {
+ &:not(:last-child) {
+ margin-right: 4px;
+ }
+ }
+}
diff --git a/assets/scss/partials/components/_tag.scss b/assets/scss/partials/components/_tag.scss
new file mode 100644
index 0000000..6979820
--- /dev/null
+++ b/assets/scss/partials/components/_tag.scss
@@ -0,0 +1,11 @@
+.tag {
+ display: inline-block;
+ font-size: 1.5rem;
+ line-height: 1;
+ margin: 5px 8px 5px 0;
+
+ &::before {
+ content: '#';
+ opacity: 0.5;
+ }
+}
diff --git a/assets/scss/partials/components/_wrapper.scss b/assets/scss/partials/components/_wrapper.scss
new file mode 100644
index 0000000..6f47f80
--- /dev/null
+++ b/assets/scss/partials/components/_wrapper.scss
@@ -0,0 +1,3 @@
+.wrapper {
+ display: flex;
+}
diff --git a/assets/scss/partials/layout/_body.scss b/assets/scss/partials/layout/_body.scss
new file mode 100644
index 0000000..128340e
--- /dev/null
+++ b/assets/scss/partials/layout/_body.scss
@@ -0,0 +1,6 @@
+.body {
+ color: $body-color;
+ width: 100%;
+ margin: 0 auto;
+ background-color: $accent;
+}
diff --git a/assets/scss/partials/layout/_header.scss b/assets/scss/partials/layout/_header.scss
new file mode 100644
index 0000000..c4fb9ad
--- /dev/null
+++ b/assets/scss/partials/layout/_header.scss
@@ -0,0 +1,31 @@
+.header {
+ width: $content-width;
+ position: fixed;
+ right: 0;
+ z-index: 3;
+ background-color: $accent;
+}
+
+@media screen and (min-width: 961px), print {
+ .header {
+ border-bottom: 1px solid $primary;
+ }
+}
+@media screen and (max-width: 960px) {
+ .header {
+ width: 100%;
+ }
+}
+
+@media (min-width: 1921px) {
+ .header {
+ position: fixed;
+ width: $content-width;
+ }
+}
+
+@media print {
+ .header {
+ display: none;
+ }
+}
diff --git a/assets/scss/partials/layout/_html.scss b/assets/scss/partials/layout/_html.scss
new file mode 100644
index 0000000..e3d46c2
--- /dev/null
+++ b/assets/scss/partials/layout/_html.scss
@@ -0,0 +1,4 @@
+.html {
+ -webkit-font-smoothing: antialiased;
+ font-size: 62.5%;
+}
diff --git a/assets/scss/partials/layout/_main.scss b/assets/scss/partials/layout/_main.scss
new file mode 100644
index 0000000..fbabe1e
--- /dev/null
+++ b/assets/scss/partials/layout/_main.scss
@@ -0,0 +1,3 @@
+main {
+ width: $content-width;
+}
diff --git a/assets/scss/partials/layout/_nav.scss b/assets/scss/partials/layout/_nav.scss
new file mode 100644
index 0000000..7042355
--- /dev/null
+++ b/assets/scss/partials/layout/_nav.scss
@@ -0,0 +1,55 @@
+.nav {
+ /*display: none;*/
+
+ &--active {
+ display: block;
+ }
+
+ &__list {
+ margin: 0;
+ list-style: none;
+ padding: 20px 30px;
+ background-color: $primary-lighter;
+ box-shadow: $shadow;
+ width: 100%;
+
+ &-item {
+ position: relative;
+ display: initial;
+ display: block;
+ flex-grow: 0;
+ flex-shrink: 0;
+ line-height: 2.5;
+ padding: 0.5rem 0.75rem;
+ position: relative;
+ text-transform: uppercase;
+ text-align: center;
+ font-size: 1.3em;
+ }
+ }
+
+ &__link {
+ &--active {
+ border-bottom: 1px solid $primary;
+ padding-bottom: 22px;
+ }
+ }
+}
+
+@media screen and (min-width: 961px), print {
+ .nav {
+ &__list {
+ display: flex;
+ flex: 1;
+ justify-content: space-between;
+ align-items: center;
+ min-height: 0;
+
+ &-item {
+ &:not(:last-child) {
+ padding-right: 20px;
+ }
+ }
+ }
+ }
+}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 4bb4d5e..31e2b11 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -3,10 +3,11 @@
dir="{{ .Site.Language.LanguageDirection | default "ltr" }}"
lang="{{- site.Language.Lang -}}"
data-theme="{{- .Site.Params.displayMode -}}"
+ class="html"
>
{{- partial "head.html" . -}}
- <body>
- <header>{{ partial "navbar.html" . }}</header>
+ <body class="body">
+ <header class="header">{{ partial "navbar.html" . }}</header>
<div class="wrapper">
<aside>
{{- partial "sidebar.html" . -}}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 6e97077..d704067 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -17,8 +17,8 @@
<h1>{{ .Title }}</h1>
{{ if or (eq .Type "post") (eq .Type .Site.Params.postSectionName) }}
<div class="info">
- <em class="fas fa-calendar-day"></em>
- <span class="date"
+ <em class="fas fa-calendar-day info__icon"></em>
+ <span class="date info__text"
>{{ if isset .Site.Params "singledateformat" }}
{{ .Date.Format .Site.Params.singleDateFormat }}
@@ -29,8 +29,8 @@
{{ end }}</span
>
- <em class="fas fa-stopwatch"></em>
- <span class="reading-time">{{ i18n "reading_time" .ReadingTime }}</span>
+ <em class="fas fa-stopwatch info__icon"></em>
+ <span class="reading-time info__text">{{ i18n "reading_time" .ReadingTime }}</span>
</div>
{{ end }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 87e46ba..332297f 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -16,6 +16,7 @@
{{ range .context.Site.Menus.footer }}
<li class="footer__item">
<a
+ class="link"
href="{{ .URL }}"
{{ if strings.HasPrefix .URL "http" }}
target="_blank" rel="noopener noreferrer"
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 524051b..268d385 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -36,8 +36,10 @@
<!-- CSS -->
- {{ $templateStyle := resources.Get "css/style.css" }}
- {{ $style := $templateStyle | resources.ExecuteAsTemplate "css/main.css" . | resources.Minify | resources.Fingerprint }}
+ {{ $sassTemplate := resources.Get "scss/main.scss" }}
+ {{ $style := $sassTemplate | resources.ToCSS | resources.Minify | resources.Fingerprint }}
+
+
<link
rel="stylesheet"
href="{{ $style.RelPermalink }}"
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index 6e0f482..bafa67a 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -12,30 +12,28 @@
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
- <nav>
+ <nav class="nav">
<ul class="nav__list" id="navMenu">
- <div class="nav__links">
- {{ $url := .RelPermalink }}
- {{ range .Site.Menus.main }}
- {{ $active := eq $url .URL }}
- <li>
- <a
- {{ if $active }}
- class="current"
+ {{ $url := .RelPermalink }}
+ {{ range .Site.Menus.main }}
+ {{ $active := eq $url .URL }}
+ <li class="nav__list-item">
+ <a
+ {{ if $active }}
+ class="nav__link--active"
- {{ end }}
- href="{{ .URL }}"
- {{ if strings.HasPrefix .URL "http" }}
- target="_blank" rel="noopener noreferrer"
+ {{ end }}
+ href="{{ .URL }}"
+ {{ if strings.HasPrefix .URL "http" }}
+ target="_blank" rel="noopener noreferrer"
- {{ end }}
- title="{{ .Title }}"
- >{{ .Name }}</a
- >
- </li>
+ {{ end }}
+ title="{{ .Title }}"
+ >{{ .Name }}</a
+ >
+ </li>
- {{ end }}
- </div>
+ {{ end }}
<ul>
{{ if and .IsTranslated .Site.IsMultiLingual }}
<li>
--
Gitblit v1.10.0