mirror of
https://github.com/zaaarf/friendenstein.git
synced 2024-11-22 15:34:50 +01:00
feat: responsive website
This commit is contained in:
parent
6c73e82c8c
commit
161589fd3e
9 changed files with 131 additions and 86 deletions
|
|
@ -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
50
sass/_header.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@import 'main';
|
||||
@import 'header';
|
||||
@import 'home';
|
||||
@import 'code';
|
||||
@import 'table';
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
||||
<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 %}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -20,6 +20,6 @@
|
|||
</ul>
|
||||
|
||||
{% if paginator %}
|
||||
<div class="metaData">{% if paginator.previous %}<a href="{{ paginator.first }}">⥶</a>   <a href="{{ paginator.previous }}"><</a>{% endif %}   {{ paginator.current_index }} / {{ paginator.number_pagers }}   {% if paginator.next %}<a href="{{ paginator.next }}">></a>   <a href="{{ paginator.last }}">⥸</a>{% endif %}</div>
|
||||
<div class="metaData">{% if paginator.previous %}<a href="{{ paginator.first }}">⥶</a> <a href="{{ paginator.previous }}"><</a>{% endif %} {{ paginator.current_index }} / {{ paginator.number_pagers }} {% if paginator.next %}<a href="{{ paginator.next }}"></a> <a href="{{ paginator.last }}"></a>{% endif %}</div>
|
||||
{% endif %}
|
||||
{% endblock content %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue