feat: responsive website

This commit is contained in:
zaaarf 2023-12-25 02:39:41 +01:00
parent 6c73e82c8c
commit 161589fd3e
No known key found for this signature in database
GPG key ID: 102E445F4C3F829B
9 changed files with 131 additions and 86 deletions

View file

@ -5,7 +5,7 @@ pre {
padding: 1rem;
font-style: monospace;
text-align: left;
white-space: pre-wrap;
overflow-x: scroll;
}
p code,

50
sass/_header.scss Normal file
View file

@ -0,0 +1,50 @@
.navBar {
padding: 1rem 0 0 0;
gap: .4rem;
flex-wrap: wrap;
.navBarRight {
float: right;
a {
padding: 0;
}
}
div.themeButton {
float: right;
padding: 0 0 0 1em;
button {
cursor: pointer;
border: none;
background: transparent;
}
}
}
.dark .themeButton.dark,
.themeButton.light {
display: none
}
.dark .themeButton.light {
display: block
}
@media (max-width: 650px) {
.navBar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
.navBarRight {
float: center;
}
.themeButton {
float: center;
}
}
}

View file

@ -1,16 +1,27 @@
div.home {
margin-top: 35%;
margin-bottom: 15%;
text-align: center;
div.homeContainer {
width: 100%;
height: 100%;
display: flex;
h1 {
margin: 0;
font-size: 4rem;
color: var(--fgColor);
background-color: var(--bgColor);
div.home {
margin: 35% auto;
text-align: center;
&::before {
content: none;
h1 {
margin: 0;
font-size: 4rem;
color: var(--fgColor);
background-color: var(--bgColor);
&::before {
content: none;
}
}
}
@media (max-width: 650px) {
div.home {
margin: auto auto;
}
}
}
@ -19,3 +30,4 @@ a.socialIcon {
padding: .2em .3em 0 .3em;
font-size: 32px;
}

View file

@ -1,44 +1,44 @@
.logo {
display: flex;
align-items: center;
text-decoration: none;
font-weight: bold;
font-display: auto;
font-family: monospace, monospace;
display: flex;
align-items: center;
text-decoration: none;
font-weight: bold;
font-display: auto;
font-family: monospace, monospace;
img {
height: 44px;
}
img {
height: 44px;
}
&__mark {
margin-right: 5px;
}
&__mark {
margin-right: 5px;
}
&__text {
white-space: nowrap;
}
&__text {
white-space: nowrap;
}
&__cursor {
display: inline-block;
width: 10px;
height: 1.5rem;
background: var(--fgColor);
margin-left: 5px;
border-radius: 1px;
animation: cursor 1s infinite;
}
&__cursor {
display: inline-block;
width: 10px;
height: 1.5rem;
background: var(--fgColor);
margin-left: 5px;
border-radius: 1px;
animation: cursor 1s infinite;
}
@media (prefers-reduced-motion: reduce) {
&__cursor {
animation: none;
}
}
@media (prefers-reduced-motion: reduce) {
&__cursor {
animation: none;
}
}
}
@keyframes cursor {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}

View file

@ -54,10 +54,6 @@ a {
background-color: var(--linkColor);
color: var(--bgColor);
}
span.contentDate {
color: var(--dateLinkColor);
}
}
ul {
@ -131,6 +127,7 @@ footer {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: minmax(180px, 1fr);
gap: 2rem;
}
@ -149,36 +146,6 @@ footer {
}
}
.navBar {
padding: 1rem 0 0 0;
gap: .4rem;
flex-wrap: wrap;
.navBarRight {
float: right;
a {
padding: 0;
}
.themeButton {
float: right;
cursor: pointer;
border: none;
background: transparent;
}
}
}
.dark .themeButton.dark,
.themeButton.light {
display: none
}
.dark .themeButton.light {
display: block
}
.tagsData {
display: flex;
flex-direction: column;
@ -190,6 +157,11 @@ footer {
.titleList li {
margin-bottom: .75rem;
text-align: left;
span.contentDate {
color: var(--dateLinkColor);
}
}
.footnote-definition {
@ -244,6 +216,14 @@ div.toc {
body {
max-width: 100%;
}
footer {
text-align: center;
}
a span.contentDate {
display: none;
}
.wrapper {
margin: 1rem;

View file

@ -1,4 +1,5 @@
@import 'main';
@import 'header';
@import 'home';
@import 'code';
@import 'table';

View file

@ -7,11 +7,7 @@
{% if config.extra.header_nav %}
<nav class="navBar">
{% include "logo.html" %}
<div class="navBarRight">
{% for nav_item in config.extra.header_nav %}
<a href="{{ nav_item.url }}" class="{% if nav_item.url == current_url %}active{% endif %}">{% set language_key = 'name_' ~ current_lang %}{{ nav_item[language_key] }}</a>
{% endfor %}
&nbsp;
<div class="themeButton">
{% if not config.extra.default_theme %}
<button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></button>
<button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use></svg></button>
@ -22,5 +18,11 @@
<button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use></svg></button>
<button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></button>
{% endif %}
</div>
<div class="navBarRight">
{% for nav_item in config.extra.header_nav %}
<a href="{{ nav_item.url }}" class="{% if nav_item.url == current_url %}active{% endif %}">{% set language_key = 'name_' ~ current_lang %}{{ nav_item[language_key] }}</a>
{% endfor %}
</div>
</nav>
{% endif %}

View file

@ -1,7 +1,7 @@
{% extends "base.html" %}
{% block content %}
<div class="home">
<div class="homeContainer"><div class="home">
{% if config.extra.home_title %}
<h1>{{ config.extra.home_title }}</h1>
{% else %}
@ -13,7 +13,7 @@
<p>{{ config.description }}<span id="subtitleRand"></span></p>
{% endif %}
{% include "svg.html" %}
</div>
</div></div>
{% if config.extra.home_subtitle_suffixes %}
<script>

View file

@ -20,6 +20,6 @@
</ul>
{% if paginator %}
<div class="metaData">{% if paginator.previous %}<a href="{{ paginator.first }}"></a> &nbsp <a href="{{ paginator.previous }}"><</a>{% endif %} &nbsp {{ paginator.current_index }} / {{ paginator.number_pagers }} &nbsp {% if paginator.next %}<a href="{{ paginator.next }}">></a> &nbsp <a href="{{ paginator.last }}"></a>{% endif %}</div>
<div class="metaData">{% if paginator.previous %}<a href="{{ paginator.first }}"></a> &nbsp; <a href="{{ paginator.previous }}"><</a>{% endif %} &nbsp; {{ paginator.current_index }} / {{ paginator.number_pagers }} &nbsp; {% if paginator.next %}<a href="{{ paginator.next }}"></a> &nbsp; <a href="{{ paginator.last }}"></a>{% endif %}</div>
{% endif %}
{% endblock content %}