From e203ae8d36aa975db27832ab368e1a988a4e2ee5 Mon Sep 17 00:00:00 2001
From: kogeletey <kg@re128.org>
Date: Thu, 19 May 2022 13:20:16 +0300
Subject: [PATCH] sass: clean up code and formating
---
sass/components/_flexs.scss | 10 +++--
sass/components/_navs.scss | 28 +++++++------
sass/layouts/_header.scss | 35 ++++++++--------
sass/layouts/_menu.scss | 8 ++--
sass/layouts/_sidebar.scss | 73 ++++++++++++++++------------------
sass/layouts/_toc.scss | 6 ---
sass/layouts/experimental.scss | 56 +++++++++++++-------------
sass/main.scss | 1 -
sass/page.scss | 4 +-
sass/section.scss | 16 ++++----
templates/404.html | 25 ++++--------
templates/authors/list.html | 1 -
templates/base.html | 2 +-
templates/macros.html | 2 +
templates/page.html | 67 ++++++++++++++++++-------------
templates/section.html | 49 +++++++++--------------
16 files changed, 184 insertions(+), 199 deletions(-)
diff --git a/sass/components/_flexs.scss b/sass/components/_flexs.scss
index 3fede10..4509006 100644
--- a/sass/components/_flexs.scss
+++ b/sass/components/_flexs.scss
@@ -1,10 +1,12 @@
// flex space between basic styles
-header > nav, main, main > div{
+header > nav,
+main,
+main > div {
display: flex;
justify-content: space-between;
}
-header > nav > ul,.flex-center {
- display: flex;
- align-items: center;
+header > nav > ul {
+ display: flex;
+ align-items: center;
}
diff --git a/sass/components/_navs.scss b/sass/components/_navs.scss
index 6c67985..74b9b30 100644
--- a/sass/components/_navs.scss
+++ b/sass/components/_navs.scss
@@ -1,4 +1,5 @@
-.nav, main>nav {
+main > nav,
+aside {
position: sticky;
top: 1rem;
height: calc(110vh - 1rem);
@@ -10,19 +11,20 @@
}
@media (max-width: 1000px) {
- .nav, main>nav {
- top: -0.25rem;
- border: none;
- bottom: 0;
- background: var(--white);
- width: 50%;
- height: 100%;
- overflow-y: auto;
- position: fixed;
- transition: transform 0.25s ease;
+ main > nav,
+ aside {
+ top: -0.25rem;
+ border: none;
+ bottom: 0;
+ background: var(--white);
+ width: 50%;
+ height: 100%;
+ overflow-y: auto;
+ position: fixed;
+ transition: transform 0.25s ease;
a.close {
display: block;
z-index: 6;
- }
-}
+ }
+ }
}
diff --git a/sass/layouts/_header.scss b/sass/layouts/_header.scss
index 621a11c..9d19d5d 100644
--- a/sass/layouts/_header.scss
+++ b/sass/layouts/_header.scss
@@ -22,14 +22,14 @@ header {
margin-right: 1rem;
}
ul:first-child {
- span:hover,
- .active{
- padding-bottom: 9px;
- border-bottom: 2px solid;
- border-color: var(--green);
+ span:hover,
+ .active {
+ padding-bottom: 9px;
+ border-bottom: 2px solid;
+ border-color: var(--green);
+ }
}
- }
- .vector {
+ .vector {
display: flex;
margin-top: 0.2em;
border: 1px solid $dark3;
@@ -40,19 +40,19 @@ header {
span:hover {
color: var(--black);
}
- span.svg:hover{
+ span.svg:hover {
filter: invert(100%);
}
+ }
}
-}
a {
span {
color: $dark3;
}
span.svg {
- display: flex;
- padding: 3px 3px;
- }
+ display: flex;
+ padding: 3px 3px;
+ }
span:hover {
color: var(--green);
}
@@ -71,10 +71,11 @@ header {
position: absolute;
background: transparent;
}
- &:hover,& input:focus, & input:hover {
- width: 34rem;
-
- }
+ &:hover,
+ & input:focus,
+ & input:hover {
+ width: 34rem;
+ }
}
}
@@ -104,7 +105,7 @@ header {
}
@media (max-width: 1000px) {
- header form,
+ header form,
#suggestions {
display: none;
}
diff --git a/sass/layouts/_menu.scss b/sass/layouts/_menu.scss
index b4b122a..b9c12a7 100644
--- a/sass/layouts/_menu.scss
+++ b/sass/layouts/_menu.scss
@@ -3,7 +3,7 @@ section {
margin-bottom: 3rem;
display: grid;
position: relative;
- grid-template-columns: repeat(auto-fit, minmax(33%,1fr));
+ grid-template-columns: repeat(auto-fit, minmax(33%, 1fr));
grid-auto-rows: 25rem;
width: 100%;
grid-gap: 1px 1px;
@@ -49,7 +49,7 @@ section {
}
@media (max-width: 1000px) {
- section {
- grid-template-columns: 1fr;
- }
+ section {
+ grid-template-columns: 1fr;
+ }
}
diff --git a/sass/layouts/_sidebar.scss b/sass/layouts/_sidebar.scss
index 633d50d..49702f8 100644
--- a/sass/layouts/_sidebar.scss
+++ b/sass/layouts/_sidebar.scss
@@ -1,4 +1,4 @@
-main > nav{
+main > nav {
padding-left: 0;
max-height: 100vh;
width: 350px;
@@ -13,53 +13,53 @@ main > nav{
li.subsection {
margin-left: 0.5rem;
svg {
- position: relative;
- cursor: pointer;
- top: 0.150rem;
- left: -0.15rem;
- }
- input[type="checkbox"] {
- position: absolute;
- opacity: 0;
- overflow: hidden;
- cursor: pointer;
- z-index: 2;
- }
- input[type="checkbox"] ~ ul.subsection {
- display: none;
+ position: relative;
+ cursor: pointer;
+ top: 0.15rem;
+ left: -0.15rem;
}
- input[type="checkbox"]:checked ~ ul.subsection {
- display: block;
+ input[type='checkbox'] {
+ position: absolute;
+ opacity: 0;
+ overflow: hidden;
+ cursor: pointer;
+ z-index: 2;
}
- input[type="checkbox"] ~ nav > li > svg {
- transform: rotate(0deg);
- transition: .2s ease-in-out;
+ input[type='checkbox'] ~ ul.subsection {
+ display: none;
}
- input[type="checkbox"]:checked ~ svg {
- transform: rotate(90deg);
- transition: .2s ease-in-out;
+ input[type='checkbox']:checked ~ ul.subsection {
+ display: block;
+ }
+ input[type='checkbox'] ~ nav > li > svg {
+ transform: rotate(0deg);
+ transition: 0.2s ease-in-out;
+ }
+ input[type='checkbox']:checked ~ svg {
+ transform: rotate(90deg);
+ transition: 0.2s ease-in-out;
}
&:hover {
- color: var(--black);
- border-right: none;
+ color: var(--black);
+ border-right: none;
}
}
ul.subsection {
padding-left: 0.5em;
margin-top: 1em;
color: $dark3;
- li {
- display: flex;
- text-align: left;
- a {
- margin-top: 0em;
- }
- &::before {
- content: '';
- padding-left: 1.5rem;
+ li {
+ display: flex;
+ text-align: left;
+ a {
+ margin-top: 0em;
+ }
+ &::before {
+ content: '';
+ padding-left: 1.5rem;
+ }
}
}
-}
li.active,
li:hover {
color: var(--green);
@@ -80,9 +80,6 @@ main > nav{
border: none;
}
}
- .sidebar {
- margin-left: 0.5rem;
- }
#sidebar {
display: block;
left: 0;
diff --git a/sass/layouts/_toc.scss b/sass/layouts/_toc.scss
index a5bb00b..aff0bda 100644
--- a/sass/layouts/_toc.scss
+++ b/sass/layouts/_toc.scss
@@ -46,12 +46,6 @@ aside {
a:hover {
color: var(--green);
}
- a.close {
- display: block;
- }
- }
- .toc {
- margin-right: 0.5rem;
}
#toc {
display: block;
diff --git a/sass/layouts/experimental.scss b/sass/layouts/experimental.scss
index d11369e..f13ac2f 100644
--- a/sass/layouts/experimental.scss
+++ b/sass/layouts/experimental.scss
@@ -1,30 +1,30 @@
.header__container {
- display: none;
- flex-flow: row wrap;
- background: var(--white);
-// box-shadow: 0 3px 10px $light3;
- width: 100%;
- gap: 3rem;
- &-link {
- display: flex;
- margin: 1em;
- margin-left: 3rem;
- flex: 0 0 25%;
- }
- &-title,
- &-description {
- padding-left: 1em;
- }
- &-svg {
- margin-top: 0.25rem;
- color: var(--black);
- }
- &-column {
- display: flex;
- flex-direction: column;
- max-width: 10rem;
- }
- &-description {
- color: var(--black);
- }
+ display: none;
+ flex-flow: row wrap;
+ background: var(--white);
+ // box-shadow: 0 3px 10px $light3;
+ width: 100%;
+ gap: 3rem;
+ &-link {
+ display: flex;
+ margin: 1em;
+ margin-left: 3rem;
+ flex: 0 0 25%;
+ }
+ &-title,
+ &-description {
+ padding-left: 1em;
+ }
+ &-svg {
+ margin-top: 0.25rem;
+ color: var(--black);
+ }
+ &-column {
+ display: flex;
+ flex-direction: column;
+ max-width: 10rem;
+ }
+ &-description {
+ color: var(--black);
+ }
}
diff --git a/sass/main.scss b/sass/main.scss
index 79e40e3..e34f1d9 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -5,7 +5,6 @@
@import 'layouts/header';
@import 'layouts/footer';
-
:root {
--black: #111111;
--white: #ffffff;
diff --git a/sass/page.scss b/sass/page.scss
index 45ee3e3..8b12443 100644
--- a/sass/page.scss
+++ b/sass/page.scss
@@ -6,7 +6,6 @@
@import 'layouts/sidebar';
@import 'layouts/toc';
-
main {
margin-bottom: 25px;
margin-top: 15px;
@@ -27,5 +26,8 @@ main {
width: 100%;
height: 2.1rem;
border-bottom: 1px solid var(--black);
+ a {
+ margin-left: 0.5rem;
+ }
}
}
diff --git a/sass/section.scss b/sass/section.scss
index 83f9b9f..571e087 100644
--- a/sass/section.scss
+++ b/sass/section.scss
@@ -18,15 +18,15 @@
}
@media (max-width: 1000px) {
- .welcome {
- height: 20vh;
- h1 {
- font-size: 40px;
- }
- p {
- font-size: 18px;
- }
+ .welcome {
+ height: 20vh;
+ h1 {
+ font-size: 40px;
}
+ p {
+ font-size: 18px;
+ }
+ }
}
.error {
diff --git a/templates/404.html b/templates/404.html
index f1bebec..b6e7e09 100644
--- a/templates/404.html
+++ b/templates/404.html
@@ -1,21 +1,10 @@
-{% extends 'base.html' %}
-
-{% block styles %}
-{{ macros::styles(file='section.css') }}
-{% endblock styles %}
-
-{% block htmltitle %}
- 404 Page Not Found
-{% endblock htmltitle %}
-
-{% block header %}
- {{macros::header(current_url="/")}}
-{% endblock header %}
-{% block content %}
+{% extends 'base.html' %} {% block styles %} {{
+macros::styles(file='section.css') }} {% endblock styles %} {% block htmltitle
+%} 404 Page Not Found {% endblock htmltitle %} {% block header %}
+{{macros::header(current_url="/")}} {% endblock header %} {% block content %}
<div class="error">
-<h1> 404 </h1>
-<h2> Page Not Found </h2>
-<h3> The requested page doesn't exist
- or you don't have access to it. </h3>
+ <h1>404</h1>
+ <h2>Page Not Found</h2>
+ <h3>The requested page doesn't exist or you don't have access to it.</h3>
</div>
{% endblock content %}
diff --git a/templates/authors/list.html b/templates/authors/list.html
index b65a6cb..21f5da2 100644
--- a/templates/authors/list.html
+++ b/templates/authors/list.html
@@ -1,2 +1 @@
{% extends 'base.html' %}
-
diff --git a/templates/base.html b/templates/base.html
index e0ecafe..e28dbcb 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -29,7 +29,7 @@
<link rel="stylesheet" href="{{ get_url(path='@fontsource/jetbrains-mono/400.css') }}">
{% else %}
{% set cdnurl = config.extra.cdnurl | default(value="https://cdn.jsdelivr.net/npm/") %}
- <!-- <link rel="stylesheet" href="{{ cdnurl | safe }}normalize.css/normalize.css"> -->
+ {# <!-- <link rel="stylesheet" href="{{ cdnurl | safe }}normalize.css/normalize.css"> --> #}
<link rel="stylesheet" href="{{cdnurl | safe }}modern-normalize/modern-normalize.min.css">
<link rel="stylesheet" href="{{cdnurl | safe }}@fontsource/inter/400.css">
<link rel="stylesheet" href="{{cdnurl | safe }}@fontsource/inter/700.css">
diff --git a/templates/macros.html b/templates/macros.html
index 3d2a8ac..c2f4900 100644
--- a/templates/macros.html
+++ b/templates/macros.html
@@ -31,10 +31,12 @@
<form>
<input id="userinput" type="search" placeholder="Search ..."
aria-label="Search ..." autocomplete="off">
+ {#
<!-- <button type="submit" title="Submit your search query.">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29zM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9z" fill="currentColor"></path></svg>
</button>
-->
+ #}
<div id="suggestions"></div>
</form>
{% endif %}
diff --git a/templates/page.html b/templates/page.html
index dff8f34..ef88b69 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -1,37 +1,48 @@
-{% extends "base.html" %}
-
-{% block styles %}
- {{ macros::styles(file='page.css') }}
-{% endblock styles %}
-
-{% block htmltitle %}
- {{ page.title }}
-{% endblock htmltitle %}
-
-{% block content %}
+{% extends "base.html" %} {% block styles %} {{ macros::styles(file='page.css')
+}} {% endblock styles %} {% block htmltitle %} {{ page.title }} {% endblock
+htmltitle %} {% block content %}
<main>
- <div class="show-bar">
+ <div class="show-bar">
<a href="#sidebar" class="sidebar" role="button" x-data="{ open:false}">
- <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><rect x="12" y="6" width="14" height="2"/><rect x="12" y="12" width="10" height="2"/><rect x="12" y="18" width="14" height="2"/><rect x="12" y="24" width="10" height="2"/><rect x="6" y="4" width="2" height="24"/></svg>
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="32"
+ height="32"
+ viewBox="0 0 32 32"
+ >
+ <rect x="12" y="6" width="14" height="2" />
+ <rect x="12" y="12" width="10" height="2" />
+ <rect x="12" y="18" width="14" height="2" />
+ <rect x="12" y="24" width="10" height="2" />
+ <rect x="6" y="4" width="2" height="24" />
+ </svg>
</a>
<a href="#toc" class="toc" role="button">
- <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><rect x="6" y="6" width="14" height="2"/><rect x="10" y="12" width="10" height="2"/><rect x="6" y="18" width="14" height="2"/><rect x="10" y="24" width="10" height="2"/><rect x="24" y="4" width="2" height="24"/></svg>
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="32"
+ height="32"
+ viewBox="0 0 32 32"
+ >
+ <rect x="6" y="6" width="14" height="2" />
+ <rect x="10" y="12" width="10" height="2" />
+ <rect x="6" y="18" width="14" height="2" />
+ <rect x="10" y="24" width="10" height="2" />
+ <rect x="24" y="4" width="2" height="24" />
+ </svg>
</a>
-</div>
-{{ page_macros::sidebar(current_url=current_url) }}
- <article>
- <h1 class="title"> {{ page.title }} </h1>
-{% block sections %}
+ </div>
+ {{ page_macros::sidebar(current_url=current_url) }}
+ <article>
+ <h1 class="title">{{ page.title }}</h1>
+ {% block sections %}
<ul class="sections">
- {{ page_macros::relative_path() }}
- {{ page_macros::word_count() }}
- {{ page_macros::reading_time() }}
- {{ page_macros::date() }}
- {{ page_macros::taxonomies_authors() }}
+ {{ page_macros::relative_path() }} {{ page_macros::word_count() }} {{
+ page_macros::reading_time() }} {{ page_macros::date() }} {{
+ page_macros::taxonomies_authors() }}
</ul>
-{% endblock sections %}
- {{ page.content | safe }}
- </article>
-{{ page_macros::toc(page=page) }}
+ {% endblock sections %} {{ page.content | safe }}
+ </article>
+ {{ page_macros::toc(page=page) }}
</main>
{% endblock content %}
diff --git a/templates/section.html b/templates/section.html
index 6d30234..9848490 100644
--- a/templates/section.html
+++ b/templates/section.html
@@ -1,34 +1,21 @@
-{% extends "base.html" %}
-
-{% block styles %}
-{{ macros::styles(file='section.css') }}
-{% endblock styles %}
-
-{% block htmltitle %}
- {{ macros::title_or_last(component=section) }} - {{ config.title }}
-{% endblock htmltitle %}
-
-{% block title %}
- {{ macros::title_or_last(component=section) }}
-{% endblock title %}
-
-{% block math %}
-{{ macros::math() }}
-{% endblock math %}
-{% block content %}
+{% extends "base.html" %} {% block styles %} {{
+macros::styles(file='section.css') }} {% endblock styles %} {% block htmltitle
+%} {{ macros::title_or_last(component=section) }} - {{ config.title }} {%
+endblock htmltitle %} {% block title %} {{
+macros::title_or_last(component=section) }} {% endblock title %} {% block math
+%} {{ macros::math() }} {% endblock math %} {% block content %}
<section>
-{% for page in section.pages %}
- <a href="{{ page.permalink }}">
- <span>{{ macros::title_or_last(component=page, offset=0) }}</span>
- <div>
- {% if page.date %}
- <time> {{page.date}} </time>
- {% endif %}
- {% if page.description %}
- <p> {{ page.description }} </p>
- {% endif %}
- </div>
- </a>
-{% endfor %}
+ {% for page in section.pages %}
+ <a href="{{ page.permalink }}">
+ <span>{{ macros::title_or_last(component=page, offset=0) }}</span>
+ <div>
+ {% if page.date %}
+ <time> {{page.date}} </time>
+ {% endif %} {% if page.description %}
+ <p>{{ page.description }}</p>
+ {% endif %}
+ </div>
+ </a>
+ {% endfor %}
</section>
{% endblock content %}
--
GitLab