mirror of https://github.com/lxndrblz/anatole.git
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 }} } @@ -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; @@ -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,7 +1131,7 @@ justify-content: space-between; } .nav__list { /* .nav__list { display: flex; flex: 1; justify-content: space-between; @@ -1135,6 +1142,7 @@ .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 */
assets/scss/main.scss
New file @@ -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'; assets/scss/modules/_variables.scss
New file @@ -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 */ assets/scss/partials/_base.scss
New file @@ -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; } assets/scss/partials/_hugo.scss
New file @@ -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; } assets/scss/partials/components/_animated.scss
New file @@ -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); } } } assets/scss/partials/components/_category.scss
New file @@ -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; } assets/scss/partials/components/_content.scss
New file @@ -0,0 +1,4 @@ .content { height: auto; margin-top: 80px; } assets/scss/partials/components/_info.scss
New file @@ -0,0 +1,14 @@ .info { margin: 1em; &__icon { margin-right: 4px; opacity: 0.5; } &__text { &:not(:last-child) { margin-right: 4px; } } } assets/scss/partials/components/_tag.scss
New file @@ -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; } } assets/scss/partials/components/_wrapper.scss
New file @@ -0,0 +1,3 @@ .wrapper { display: flex; } assets/scss/partials/layout/_body.scss
New file @@ -0,0 +1,6 @@ .body { color: $body-color; width: 100%; margin: 0 auto; background-color: $accent; } assets/scss/partials/layout/_header.scss
New file @@ -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; } } assets/scss/partials/layout/_html.scss
New file @@ -0,0 +1,4 @@ .html { -webkit-font-smoothing: antialiased; font-size: 62.5%; } assets/scss/partials/layout/_main.scss
New file @@ -0,0 +1,3 @@ main { width: $content-width; } assets/scss/partials/layout/_nav.scss
New file @@ -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; } } } } } 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" . -}} 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 }} 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" 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 }}" layouts/partials/navbar.html
@@ -12,16 +12,15 @@ <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> <li class="nav__list-item"> <a {{ if $active }} class="current" class="nav__link--active" {{ end }} href="{{ .URL }}" @@ -35,7 +34,6 @@ </li> {{ end }} </div> <ul> {{ if and .IsTranslated .Site.IsMultiLingual }} <li>
