mmk2410
/
nextDESIGN
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Slight updated design

This commit is contained in:
Marcel Kapfer 2022-02-22 17:34:43 +01:00
parent 607aa88f00
commit e24338ae0e
Signed by: mmk2410
GPG Key ID: CADE6F0C09F21B09
3 changed files with 138 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
assets/css/main.scss
View File

@ -3,7 +3,7 @@
* nextDESIGN is a personal web design for mmk2410.org. * nextDESIGN is a personal web design for mmk2410.org.
* The current version (v9) is focused in simplicity and minimalism. * The current version (v9) is focused in simplicity and minimalism.
* *
* 2020-2021 © Marcel Kapfer <opensource@mmk2410.org> * 2020-2022 © Marcel Kapfer <opensource@mmk2410.org>
* Licensed under the MIT License * Licensed under the MIT License
*/ */
@ -23,12 +23,13 @@ $c-bg-tag: #8171c8;
$c-bg-tag-inv: #4d3c9b; $c-bg-tag-inv: #4d3c9b;
$c-font: #333; $c-font: #333;
$c-font-inv: #fafafa; $c-font-inv: #fafafa;
$c-nav-font: #f4f4f4; $c-btn-font: $c-font;
$c-btn-font: $c-nav-font;
$c-btn-bg: $c-bg-category; $c-btn-bg: $c-bg-category;
$c-btn-shadow: #aaa;
$c-btn-shadow-inv: #000;
$s-content: 800px; $s-content: 800px;
$s-nav-title: 24px; $s-nav-title: 36px;
$s-border: 2px; $s-border: 2px;
$s-border-radius: 2px; $s-border-radius: 2px;
$s-comment-margin-top: 60px; $s-comment-margin-top: 60px;
@ -54,19 +55,22 @@ body {
body > header { body > header {
align-items: center; align-items: center;
color: $c-nav-font; color: $c-font;
display: flex; display: flex;
background-color: $c-primary;
justify-content: space-between; justify-content: space-between;
padding: 20px 40px; padding: 20px 40px;
#title { #title {
color: $c-font;
font-size: $s-nav-title; font-size: $s-nav-title;
font-weight: 700; font-weight: 700;
text-decoration: underline;
text-decoration-color: $c-primary;
text-decoration-thickness: 5px;
} }
a { a {
color: $c-nav-font; color: $c-primary;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@ -77,6 +81,31 @@ body > header {
nav { nav {
display: inline; display: inline;
a {
text-transform: capitalize;
padding: 5px 6px;
display: inline-block;
&:hover {
text-decoration: none;
&:after {
width: 100%;
background: $c-primary;
}
}
&:after {
content: "";
display: block;
margin: auto;
height: 2px;
width: 0;
background: 0 0;
transition: width .25s ease, background-color .25s ease;
}
}
ul { ul {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -84,7 +113,6 @@ body > header {
li { li {
display: inline; display: inline;
padding-right: 10px;
&:last-child { &:last-child {
padding-right: 0; padding-right: 0;
@ -99,15 +127,20 @@ body > header {
padding: 10px; padding: 10px;
text-align: center; text-align: center;
width: 100%; width: 100%;
color: $c-primary;
font-weight: bold;
text-transform: uppercase;
} }
input[type=checkbox] { input[type=checkbox] {
display: none display: none
} }
@media screen and (max-width: 1000px) { @media screen and (max-width: 1100px) {
border-radius: initial; border-radius: initial;
flex-direction: column; flex-direction: column;
background: $c-bg-main;
padding-bottom: 0;
nav { nav {
display: none; display: none;
@ -137,15 +170,24 @@ body > header {
display: block; display: block;
} }
} }
@media (prefers-color-scheme: dark) {
background: $c-bg-inv;
#title {
color: $c-font-inv;
}
}
} }
main { main {
background-color: $c-bg-main; background-color: $c-bg-main;
border: solid $s-border $c-primary; border: solid $s-border $c-primary;
border-radius: 25px;
box-shadow: $p-box-shadow; box-shadow: $p-box-shadow;
margin: 100px auto; margin: 50px auto 100px;
max-width: $s-content; max-width: $s-content;
padding: 40px; padding: 20px 60px 80px;
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
background-color: $c-bg-main-inv; background-color: $c-bg-main-inv;
@ -227,12 +269,22 @@ main {
} }
.btn { .btn {
color: $c-btn-font; border: 1px solid $c-btn-bg;
background: $c-btn-bg; padding: 8px 12px;
padding: 8px 16px;
border-radius: 20px; border-radius: 20px;
line-height: 3; line-height: 3;
white-space: nowrap; white-space: nowrap;
transition: all 0.15s;
margin-right: 5px;
&:hover {
box-shadow: $c-btn-shadow 1px 2px 6px;
text-decoration: none;
@media (prefers-color-scheme: dark) {
box-shadow: $c-btn-shadow-inv 1px 2px 6px;
}
}
} }
.highlight > pre { .highlight > pre {
@ -274,43 +326,62 @@ main {
padding: 4px 8px; padding: 4px 8px;
border-radius: 20px; border-radius: 20px;
white-space: nowrap; white-space: nowrap;
transition: all 0.15s;
&:hover {
box-shadow: $c-btn-shadow 1px 1px 4px;
text-decoration: none;
@media (prefers-color-scheme: dark) {
box-shadow: $c-btn-shadow-inv 1px 1px 4px;
}
}
} }
#tags > a { #tags > a {
background: $c-bg-tag; color: $c-bg-tag;
border: 1px solid $c-bg-tag;
@media (prefers-color-scheme: dark) {
background: $c-bg-tag-inv;
}
} }
#categories > a { #categories > a {
background: $c-bg-category; color: $c-primary;
border: 1px solid $c-primary;
margin-right: 3px;
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
background: $c-bg-category-inv; color: $c-primary-inv;
border: 1px solid $c-primary-inv;
} }
} }
@media screen and (max-width: 1000px) { @media screen and (max-width: 1100px) {
border: none; border: none;
box-shadow: none; box-shadow: none;
margin: 0 auto; margin: 0 auto;
padding: 0 20px 80px;
.tagories {
text-align: left;
}
#tags a, #categories a {
line-height: 35px;
}
} }
} }
footer { footer {
background-color: $c-primary; background-color: $c-font;
color: $c-nav-font; color: $c-font-inv;
padding: 40px; padding: 40px;
text-align: center; text-align: center;
a { a {
color: $c-nav-font; color: $c-font-inv;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
} }
} }

54
layouts/_default/single.html
View File

@ -1,30 +1,32 @@
{{ define "main" }} {{ define "main" }}
<h1>{{ .Title }}</h1> <h1>{{ .Title }}</h1>
<p id="date">{{.Date.Format "2006-01-02"}}</p> <p id="date">{{.Date.Format "2006-01-02"}}</p>
<p>{{ .WordCount }} words, ~ {{ .ReadingTime }} min reading time</p> <p>{{ .WordCount }} words, ~ {{ .ReadingTime }} min reading time</p>
<p> <p>
{{ with .Params.categories }} <div class="tagories">
<span id="categories"> {{ with .Params.categories }}
{{ range . }} <span id="categories">
<a href="{{ "categories" | absURL}}/{{ . | urlize }}">{{ . }}</a> {{ range . }}
{{ end }} <a href="{{ "categories" | absURL}}/{{ . | urlize }}">{{ . }}</a>
</span> {{ end }}
{{ end }} </span>
{{ with .Params.tags }}
<span id="tags">
{{ range . }}
<a href="{{ "tags" | absURL}}/{{ . | urlize }}">{{ . }}</a>
{{ end }}
</span>
{{ end }}
</p>
{{ .Content }}
{{ if isset .Site.Params.comment "mail" }}
<div class="comment">
<p>I would like to hear what you think about this post. Feel free to write me a mail!</p>
<a class="btn" href="mailto:{{ .Site.Params.comment.mail }}?subject=Reply to: &quot;{{ .Page.Title }}&quot;">Reply by mail</a>
</div>
{{ end }} {{ end }}
{{ with .Params.tags }}
<span id="tags">
{{ range . }}
<a href="{{ "tags" | absURL}}/{{ . | urlize }}">{{ . }}</a>
{{ end }}
</span>
{{ end }}
</div>
</p>
{{ .Content }}
{{ if isset .Site.Params.comment "mail" }}
<div class="comment">
<p>I would like to hear what you think about this post. Feel free to write me a mail!</p>
<a class="btn" href="mailto:{{ .Site.Params.comment.mail }}?subject=Reply to: &quot;{{ .Page.Title }}&quot;">Reply by mail</a>
</div>
{{ end }}
{{ end }} {{ end }}

24
layouts/partials/list-post.html
View File

@ -1,21 +1,23 @@
<p id="date">{{.Date.Format "2006-01-02"}}</p> <p id="date">{{.Date.Format "2006-01-02"}}</p>
<p> <p>
<div class="tagories">
{{ with .Params.categories }} {{ with .Params.categories }}
<span id="categories"> <span id="categories">
{{ range . }} {{ range . }}
<a href="{{ "categories" | absURL}}/{{ . | urlize }}">{{ . }}</a> <a href="{{ "categories" | absURL}}/{{ . | urlize }}">{{ . }}</a>
{{ end }} {{ end }}
</span> </span>
{{ end }} {{ end }}
{{ with .Params.tags }} {{ with .Params.tags }}
<span id="tags"> <span id="tags">
{{ range . }} {{ range . }}
<a href="{{ "tags" | absURL}}/{{ . | urlize }}">{{ . }}</a> <a href="{{ "tags" | absURL}}/{{ . | urlize }}">{{ . }}</a>
{{ end }} {{ end }}
</span> </span>
{{ end }} {{ end }}
</div>
</p> </p>
{{ .Summary }} {{ .Summary }}
{{- if .Truncated -}} {{- if .Truncated -}}
<p><a href="{{.Permalink}}">Read more</a></p> <p><a href="{{.Permalink}}">Read more</a></p>
{{- end -}} {{- end -}}