Skip to content
Snippets Groups Projects
Unverified Commit e203ae8d authored by kogeletey's avatar kogeletey
Browse files

sass: clean up code and formating

parent 9f4212e3
No related branches found
No related tags found
No related merge requests found
// flex space between basic styles // flex space between basic styles
header > nav, main, main > div{ header > nav,
main,
main > div {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
header > nav > ul,.flex-center { header > nav > ul {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.nav, main>nav { main > nav,
aside {
position: sticky; position: sticky;
top: 1rem; top: 1rem;
height: calc(110vh - 1rem); height: calc(110vh - 1rem);
...@@ -10,19 +11,20 @@ ...@@ -10,19 +11,20 @@
} }
@media (max-width: 1000px) { @media (max-width: 1000px) {
.nav, main>nav { main > nav,
top: -0.25rem; aside {
border: none; top: -0.25rem;
bottom: 0; border: none;
background: var(--white); bottom: 0;
width: 50%; background: var(--white);
height: 100%; width: 50%;
overflow-y: auto; height: 100%;
position: fixed; overflow-y: auto;
transition: transform 0.25s ease; position: fixed;
transition: transform 0.25s ease;
a.close { a.close {
display: block; display: block;
z-index: 6; z-index: 6;
} }
} }
} }
...@@ -22,14 +22,14 @@ header { ...@@ -22,14 +22,14 @@ header {
margin-right: 1rem; margin-right: 1rem;
} }
ul:first-child { ul:first-child {
span:hover, span:hover,
.active{ .active {
padding-bottom: 9px; padding-bottom: 9px;
border-bottom: 2px solid; border-bottom: 2px solid;
border-color: var(--green); border-color: var(--green);
}
} }
} .vector {
.vector {
display: flex; display: flex;
margin-top: 0.2em; margin-top: 0.2em;
border: 1px solid $dark3; border: 1px solid $dark3;
...@@ -40,19 +40,19 @@ header { ...@@ -40,19 +40,19 @@ header {
span:hover { span:hover {
color: var(--black); color: var(--black);
} }
span.svg:hover{ span.svg:hover {
filter: invert(100%); filter: invert(100%);
} }
}
} }
}
a { a {
span { span {
color: $dark3; color: $dark3;
} }
span.svg { span.svg {
display: flex; display: flex;
padding: 3px 3px; padding: 3px 3px;
} }
span:hover { span:hover {
color: var(--green); color: var(--green);
} }
...@@ -71,10 +71,11 @@ header { ...@@ -71,10 +71,11 @@ header {
position: absolute; position: absolute;
background: transparent; background: transparent;
} }
&:hover,& input:focus, & input:hover { &:hover,
width: 34rem; & input:focus,
& input:hover {
} width: 34rem;
}
} }
} }
...@@ -104,7 +105,7 @@ header { ...@@ -104,7 +105,7 @@ header {
} }
@media (max-width: 1000px) { @media (max-width: 1000px) {
header form, header form,
#suggestions { #suggestions {
display: none; display: none;
} }
......
...@@ -3,7 +3,7 @@ section { ...@@ -3,7 +3,7 @@ section {
margin-bottom: 3rem; margin-bottom: 3rem;
display: grid; display: grid;
position: relative; position: relative;
grid-template-columns: repeat(auto-fit, minmax(33%,1fr)); grid-template-columns: repeat(auto-fit, minmax(33%, 1fr));
grid-auto-rows: 25rem; grid-auto-rows: 25rem;
width: 100%; width: 100%;
grid-gap: 1px 1px; grid-gap: 1px 1px;
...@@ -49,7 +49,7 @@ section { ...@@ -49,7 +49,7 @@ section {
} }
@media (max-width: 1000px) { @media (max-width: 1000px) {
section { section {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
} }
main > nav{ main > nav {
padding-left: 0; padding-left: 0;
max-height: 100vh; max-height: 100vh;
width: 350px; width: 350px;
...@@ -13,53 +13,53 @@ main > nav{ ...@@ -13,53 +13,53 @@ main > nav{
li.subsection { li.subsection {
margin-left: 0.5rem; margin-left: 0.5rem;
svg { svg {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
top: 0.150rem; top: 0.15rem;
left: -0.15rem; left: -0.15rem;
}
input[type="checkbox"] {
position: absolute;
opacity: 0;
overflow: hidden;
cursor: pointer;
z-index: 2;
}
input[type="checkbox"] ~ ul.subsection {
display: none;
} }
input[type="checkbox"]:checked ~ ul.subsection { input[type='checkbox'] {
display: block; position: absolute;
opacity: 0;
overflow: hidden;
cursor: pointer;
z-index: 2;
} }
input[type="checkbox"] ~ nav > li > svg { input[type='checkbox'] ~ ul.subsection {
transform: rotate(0deg); display: none;
transition: .2s ease-in-out;
} }
input[type="checkbox"]:checked ~ svg { input[type='checkbox']:checked ~ ul.subsection {
transform: rotate(90deg); display: block;
transition: .2s ease-in-out; }
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 { &:hover {
color: var(--black); color: var(--black);
border-right: none; border-right: none;
} }
} }
ul.subsection { ul.subsection {
padding-left: 0.5em; padding-left: 0.5em;
margin-top: 1em; margin-top: 1em;
color: $dark3; color: $dark3;
li { li {
display: flex; display: flex;
text-align: left; text-align: left;
a { a {
margin-top: 0em; margin-top: 0em;
} }
&::before { &::before {
content: ''; content: '';
padding-left: 1.5rem; padding-left: 1.5rem;
}
} }
} }
}
li.active, li.active,
li:hover { li:hover {
color: var(--green); color: var(--green);
...@@ -80,9 +80,6 @@ main > nav{ ...@@ -80,9 +80,6 @@ main > nav{
border: none; border: none;
} }
} }
.sidebar {
margin-left: 0.5rem;
}
#sidebar { #sidebar {
display: block; display: block;
left: 0; left: 0;
......
...@@ -46,12 +46,6 @@ aside { ...@@ -46,12 +46,6 @@ aside {
a:hover { a:hover {
color: var(--green); color: var(--green);
} }
a.close {
display: block;
}
}
.toc {
margin-right: 0.5rem;
} }
#toc { #toc {
display: block; display: block;
......
.header__container { .header__container {
display: none; display: none;
flex-flow: row wrap; flex-flow: row wrap;
background: var(--white); background: var(--white);
// box-shadow: 0 3px 10px $light3; // box-shadow: 0 3px 10px $light3;
width: 100%; width: 100%;
gap: 3rem; gap: 3rem;
&-link { &-link {
display: flex; display: flex;
margin: 1em; margin: 1em;
margin-left: 3rem; margin-left: 3rem;
flex: 0 0 25%; flex: 0 0 25%;
} }
&-title, &-title,
&-description { &-description {
padding-left: 1em; padding-left: 1em;
} }
&-svg { &-svg {
margin-top: 0.25rem; margin-top: 0.25rem;
color: var(--black); color: var(--black);
} }
&-column { &-column {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-width: 10rem; max-width: 10rem;
} }
&-description { &-description {
color: var(--black); color: var(--black);
} }
} }
...@@ -5,7 +5,6 @@ ...@@ -5,7 +5,6 @@
@import 'layouts/header'; @import 'layouts/header';
@import 'layouts/footer'; @import 'layouts/footer';
:root { :root {
--black: #111111; --black: #111111;
--white: #ffffff; --white: #ffffff;
......
...@@ -6,7 +6,6 @@ ...@@ -6,7 +6,6 @@
@import 'layouts/sidebar'; @import 'layouts/sidebar';
@import 'layouts/toc'; @import 'layouts/toc';
main { main {
margin-bottom: 25px; margin-bottom: 25px;
margin-top: 15px; margin-top: 15px;
...@@ -27,5 +26,8 @@ main { ...@@ -27,5 +26,8 @@ main {
width: 100%; width: 100%;
height: 2.1rem; height: 2.1rem;
border-bottom: 1px solid var(--black); border-bottom: 1px solid var(--black);
a {
margin-left: 0.5rem;
}
} }
} }
...@@ -18,15 +18,15 @@ ...@@ -18,15 +18,15 @@
} }
@media (max-width: 1000px) { @media (max-width: 1000px) {
.welcome { .welcome {
height: 20vh; height: 20vh;
h1 { h1 {
font-size: 40px; font-size: 40px;
}
p {
font-size: 18px;
}
} }
p {
font-size: 18px;
}
}
} }
.error { .error {
......
{% extends 'base.html' %} {% extends 'base.html' %} {% block styles %} {{
macros::styles(file='section.css') }} {% endblock styles %} {% block htmltitle
{% block styles %} %} 404 Page Not Found {% endblock htmltitle %} {% block header %}
{{ macros::styles(file='section.css') }} {{macros::header(current_url="/")}} {% endblock header %} {% block content %}
{% endblock styles %}
{% block htmltitle %}
404 Page Not Found
{% endblock htmltitle %}
{% block header %}
{{macros::header(current_url="/")}}
{% endblock header %}
{% block content %}
<div class="error"> <div class="error">
<h1> 404 </h1> <h1>404</h1>
<h2> Page Not Found </h2> <h2>Page Not Found</h2>
<h3> The requested page doesn't exist <h3>The requested page doesn't exist or you don't have access to it.</h3>
or you don't have access to it. </h3>
</div> </div>
{% endblock content %} {% endblock content %}
{% extends 'base.html' %} {% extends 'base.html' %}
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
<link rel="stylesheet" href="{{ get_url(path='@fontsource/jetbrains-mono/400.css') }}"> <link rel="stylesheet" href="{{ get_url(path='@fontsource/jetbrains-mono/400.css') }}">
{% else %} {% else %}
{% set cdnurl = config.extra.cdnurl | default(value="https://cdn.jsdelivr.net/npm/") %} {% 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 }}modern-normalize/modern-normalize.min.css">
<link rel="stylesheet" href="{{cdnurl | safe }}@fontsource/inter/400.css"> <link rel="stylesheet" href="{{cdnurl | safe }}@fontsource/inter/400.css">
<link rel="stylesheet" href="{{cdnurl | safe }}@fontsource/inter/700.css"> <link rel="stylesheet" href="{{cdnurl | safe }}@fontsource/inter/700.css">
......
...@@ -31,10 +31,12 @@ ...@@ -31,10 +31,12 @@
<form> <form>
<input id="userinput" type="search" placeholder="Search ..." <input id="userinput" type="search" placeholder="Search ..."
aria-label="Search ..." autocomplete="off"> aria-label="Search ..." autocomplete="off">
{#
<!-- <button type="submit" title="Submit your search query."> <!-- <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> <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> </button>
--> -->
#}
<div id="suggestions"></div> <div id="suggestions"></div>
</form> </form>
{% endif %} {% endif %}
......
{% extends "base.html" %} {% extends "base.html" %} {% block styles %} {{ macros::styles(file='page.css')
}} {% endblock styles %} {% block htmltitle %} {{ page.title }} {% endblock
{% block styles %} htmltitle %} {% block content %}
{{ macros::styles(file='page.css') }}
{% endblock styles %}
{% block htmltitle %}
{{ page.title }}
{% endblock htmltitle %}
{% block content %}
<main> <main>
<div class="show-bar"> <div class="show-bar">
<a href="#sidebar" class="sidebar" role="button" x-data="{ open:false}"> <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>
<a href="#toc" class="toc" role="button"> <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> </a>
</div> </div>
{{ page_macros::sidebar(current_url=current_url) }} {{ page_macros::sidebar(current_url=current_url) }}
<article> <article>
<h1 class="title"> {{ page.title }} </h1> <h1 class="title">{{ page.title }}</h1>
{% block sections %} {% block sections %}
<ul class="sections"> <ul class="sections">
{{ page_macros::relative_path() }} {{ page_macros::relative_path() }} {{ page_macros::word_count() }} {{
{{ page_macros::word_count() }} page_macros::reading_time() }} {{ page_macros::date() }} {{
{{ page_macros::reading_time() }} page_macros::taxonomies_authors() }}
{{ page_macros::date() }}
{{ page_macros::taxonomies_authors() }}
</ul> </ul>
{% endblock sections %} {% endblock sections %} {{ page.content | safe }}
{{ page.content | safe }} </article>
</article> {{ page_macros::toc(page=page) }}
{{ page_macros::toc(page=page) }}
</main> </main>
{% endblock content %} {% endblock content %}
{% extends "base.html" %} {% extends "base.html" %} {% block styles %} {{
macros::styles(file='section.css') }} {% endblock styles %} {% block htmltitle
{% block styles %} %} {{ macros::title_or_last(component=section) }} - {{ config.title }} {%
{{ macros::styles(file='section.css') }} endblock htmltitle %} {% block title %} {{
{% endblock styles %} macros::title_or_last(component=section) }} {% endblock title %} {% block math
%} {{ macros::math() }} {% endblock math %} {% block content %}
{% 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> <section>
{% for page in section.pages %} {% for page in section.pages %}
<a href="{{ page.permalink }}"> <a href="{{ page.permalink }}">
<span>{{ macros::title_or_last(component=page, offset=0) }}</span> <span>{{ macros::title_or_last(component=page, offset=0) }}</span>
<div> <div>
{% if page.date %} {% if page.date %}
<time> {{page.date}} </time> <time> {{page.date}} </time>
{% endif %} {% endif %} {% if page.description %}
{% if page.description %} <p>{{ page.description }}</p>
<p> {{ page.description }} </p> {% endif %}
{% endif %} </div>
</div> </a>
</a> {% endfor %}
{% endfor %}
</section> </section>
{% endblock content %} {% endblock content %}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment