Footer + fixing bugs

This commit is contained in:
Adsooi 2021-06-08 18:18:22 +02:00
parent ea539cdf36
commit 45e0d5fca3
Signed by: Ad5001
GPG key ID: EF45F9C6AFE20160
13 changed files with 147 additions and 23 deletions

View file

@ -3,7 +3,7 @@
{{- partial "head.html" . -}} {{- partial "head.html" . -}}
<body> <body>
{{- partial "header.html" . -}} {{- partial "header.html" . -}}
<div id="content" class="center"> <div id="content">
{{- block "main" . }}{{- end }} {{- block "main" . }}{{- end }}
</div> </div>
{{- partial "footer.html" . -}} {{- partial "footer.html" . -}}

View file

@ -0,0 +1,22 @@
<footer>
<br><br>
<div class="columns-container">
<div class="col3 footer-social-list">
&nbsp;
&nbsp;
{{ range .Site.Menus.social }}
<a role="button" alt="{{ .Name }}" href={{ .URL }}>
{{ .Pre }}
</a>
{{ end }}
</div>
<div class="text-center col3">
{{ .Site.Copyright }}
</div>
<div class="col3 right-center">
{{ .Site.Params.usingTheme }} <a href="https://git.ad5001.eu/Ad5001/omegamma">Omegamma</a><br>
{{ .Site.Params.poweredBy }} <a href="https://gohugo.io">Hugo</a>
</div>
</div>
<br>
</footer>

View file

@ -1,7 +1,10 @@
<head> <head>
<title>{{ .Site.Title }} - {{ .Params.title }}</title> <title>{{ .Site.Title }} - {{ .Title }}</title>
<link rel="stylesheet" href="/css/common.css"> <link rel="stylesheet" href="/css/common.css">
<link rel="stylesheet" href="/css/header.css"> <link rel="stylesheet" href="/css/header.css">
<link rel="stylesheet" href="/css/footer.css">
<link rel="stylesheet" href="/css/font.css"> <link rel="stylesheet" href="/css/font.css">
{{ hugo.Generator }}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/js/header.js"></script> <script src="/js/header.js"></script>
</head> </head>

View file

@ -2,9 +2,9 @@
<div class="center nav-flex"> <div class="center nav-flex">
{{ $currentPage := . }} {{ $currentPage := . }}
<div class="nav-mobile"> <div class="nav-mobile">
<a class="navbar-brand" href="//ad5001.eu"> <a class="navbar-brand" href="{{ .Site.Params.brandWebsite }}" role="button">
<img src="/img/icon.png" class="icon-brand" alt=""></img> <img src="/img/icon.png" class="icon-brand" alt=""></img>
{{ .Site.Title }} Ad5001
</a> </a>
<button id="navbar-toggler"> <button id="navbar-toggler">
@ -16,7 +16,7 @@
<ul class="navbar-list"> <ul class="navbar-list">
{{ range .Site.Menus.main }} {{ range .Site.Menus.main }}
{{ if .HasChildren }} {{ if .HasChildren }}
<a href="#"> <a href="#" role="button">
<li class="{{ if $currentPage.HasMenuCurrent "main" . }}active{{ end }}"> <li class="{{ if $currentPage.HasMenuCurrent "main" . }}active{{ end }}">
{{ .Pre }} {{ .Pre }}
<span>{{ .Name }}</span> <span>{{ .Name }}</span>
@ -24,7 +24,7 @@
</a> </a>
<ul class="sub-menu"> <ul class="sub-menu">
{{ range .Children }} {{ range .Children }}
<a href="{{ .URL }}"> <a href="{{ .URL }}" role="button">
<li class="{{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}"> <li class="{{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}">
{{ .Name }} {{ .Name }}
</li> </li>
@ -32,7 +32,7 @@
{{ end }} {{ end }}
</ul> </ul>
{{ else }} {{ else }}
<a href="{{ .URL }}"> <a href="{{ .URL }}" role="button">
<li class="{{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}"> <li class="{{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}">
{{ .Pre }} {{ .Pre }}
<span>{{ .Name }}</span> <span>{{ .Name }}</span>

View file

@ -5,18 +5,24 @@ body {
--light-font: 'Metropolis Light', 'Fira Sans Light','Ubuntu Light', 'Noto Sans Light', sans-serif; --light-font: 'Metropolis Light', 'Fira Sans Light','Ubuntu Light', 'Noto Sans Light', sans-serif;
--primary-color: #50DC71; --primary-color: #50DC71;
--nav-background: #FAFAFA; --nav-background: #FAFAFA;
--footer-background: #111111;
} }
a:not(.default) {
text-decoration: none;
color: black;
}
.center { .center {
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
} }
.text-center {
text-align: center;
}
.right-center {
text-align: right;
}
.icon-as-text { .icon-as-text {
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -25,5 +31,17 @@ a:not(.default) {
#content { #content {
padding: 1em; padding: 1em;
width: 88rem; }
/* Columns */
.columns-container {
display: flex;
}
.column {
flex: auto;
}
.col3 {
width: 33%;
} }

17
static/css/footer.css Normal file
View file

@ -0,0 +1,17 @@
footer {
width: 100%;
background: var(--footer-background);
color: white;
}
.footer-social-list {
display: flex;
font-size: 17px;
}
@media screen and (max-width: 550px) {
footer {
font-size: 10px;
}
}

View file

@ -4,8 +4,7 @@ nav {
height: 3em; height: 3em;
background: var(--nav-background); background: var(--nav-background);
width: 100%; width: 100%;
font-family: var(--light-font) font-family: var(--light-font);
z-index: 3;
} }
nav .nav-flex { nav .nav-flex {
@ -19,20 +18,20 @@ nav .navbar-brand {
display: flex; display: flex;
} }
.navbar-brand .icon-brand { nav .navbar-brand .icon-brand {
width: 2.5em; width: 2.5em;
height: 2.5em; height: 2.5em;
margin-top: -0.7em; margin-top: -0.7em;
margin-right: 5px; margin-right: 5px;
} }
.navbar-menu { nav .navbar-menu {
flex: auto; flex: auto;
display: block; display: block;
width: 2em; width: 2em;
} }
.navbar-list { nav .navbar-list {
float:right; float:right;
flex: auto; flex: auto;
display: flex; display: flex;
@ -41,6 +40,11 @@ nav .navbar-brand {
text-transform: uppercase; text-transform: uppercase;
} }
a[role=button] {
text-decoration: none;
color: black;
}
.navbar-list li { .navbar-list li {
padding: 1em; padding: 1em;
margin-left: 0; margin-left: 0;
@ -67,6 +71,10 @@ nav .navbar-brand {
} }
nav { nav {
position: absolute;
}
nav.menuShown {
position: fixed; position: fixed;
} }
@ -84,24 +92,24 @@ nav .navbar-brand {
.navbar-menu { .navbar-menu {
height: calc(100vh - 3em); height: calc(100vh - 3em);
width: 100%; width: 100% !important;
display: none; display: none !important;
background: var(--nav-background); background: var(--nav-background);
z-index: 3;
} }
.navbar-menu.shown { .navbar-menu.shown {
display: block; display: block !important;
} }
.navbar-list { .navbar-list {
display: block; display: block !important;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding-left: 0;
} }
.navbar-list li { .navbar-list li {
width: 100%; width: 100% !important;
display: flex; display: flex;
} }

View file

@ -0,0 +1 @@
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M23.548 10.931l-10.479-10.478c-.302-.302-.698-.453-1.093-.453-.396 0-.791.151-1.093.453l-2.176 2.176 2.76 2.76c.642-.216 1.377-.071 1.889.44.513.515.658 1.256.435 1.9l2.66 2.66c.644-.222 1.387-.078 1.901.437.718.718.718 1.881 0 2.6-.719.719-1.883.719-2.602 0-.54-.541-.674-1.334-.4-2l-2.481-2.481v6.529c.175.087.34.202.487.348.717.717.717 1.881 0 2.601-.719.718-1.884.718-2.601 0-.719-.72-.719-1.884 0-2.601.177-.178.383-.312.602-.402v-6.589c-.219-.089-.425-.223-.602-.401-.544-.544-.676-1.343-.396-2.011l-2.721-2.721-7.185 7.185c-.302.302-.453.697-.453 1.093 0 .395.151.791.453 1.093l10.479 10.478c.302.302.697.452 1.092.452.396 0 .791-.15 1.093-.452l10.431-10.428c.302-.303.452-.699.452-1.094 0-.396-.15-.791-.452-1.093" fill="#ffffff"/></svg>

After

Width:  |  Height:  |  Size: 858 B

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" fill="#ffffff"/></svg>

After

Width:  |  Height:  |  Size: 830 B

View file

@ -0,0 +1 @@
<svg width="512px" height="512px" enable-background="new 0 0 512 512" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g id="_x32_07-mastodon"><path d="m451.84 183.9c0-91.111-59.709-117.82-59.709-117.82-58.584-26.902-214.18-26.622-272.21 0 0 0-59.709 26.713-59.709 117.82 0 108.45-6.188 243.15 98.984 270.99 37.961 10.027 70.582 12.185 96.827 10.685 47.617-2.624 74.331-16.967 74.331-16.967l-1.593-34.589s-34.026 10.688-72.269 9.468c-37.87-1.313-77.801-4.124-83.988-50.616-0.563-4.124-0.843-8.436-0.843-13.029 80.237 19.589 148.66 8.531 167.5 6.28 52.586-6.28 98.422-38.713 104.23-68.333 9.189-46.68 8.438-113.89 8.438-113.89z" fill="#fff"/><path d="m381.44 300h-43.68v-105.79c0-46.586-59.992-48.367-59.992 6.468v58.584h-43.397v-58.584c0-54.835-59.991-53.054-59.991-6.468v105.79h-43.773c0-114.45-4.874-137.38 17.247-162.78 24.277-27.09 74.801-28.87 97.297 5.718l10.873 18.278 10.873-18.278c22.591-34.777 73.207-32.62 97.296-5.718 22.216 25.59 17.247 48.428 17.247 162.78z"/></g></svg>

After

Width:  |  Height:  |  Size: 1 KiB

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" fill="#ffffff"/></svg>

After

Width:  |  Height:  |  Size: 623 B

50
static/img/mastodon.svg Normal file
View file

@ -0,0 +1,50 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
height="512px"
style="enable-background:new 0 0 512 512;"
version="1.1"
viewBox="0 0 512 512"
width="512px"
xml:space="preserve"
id="svg10"
sodipodi:docname="mastodon.svg"
inkscape:version="1.0.2 (e86c870879, 2021-01-15)"><metadata
id="metadata16"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs14" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1011"
id="namedview12"
showgrid="false"
inkscape:zoom="1.3964844"
inkscape:cx="256"
inkscape:cy="256"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg10" /><g
id="_x32_07-mastodon"><g
id="g6"><path
d="M451.839,183.897c0-91.111-59.709-117.825-59.709-117.825c-58.584-26.902-214.185-26.622-272.206,0 c0,0-59.709,26.713-59.709,117.825c0,108.451-6.188,243.148,98.984,270.988c37.961,10.027,70.582,12.185,96.827,10.685 c47.617-2.624,74.331-16.967,74.331-16.967l-1.593-34.589c0,0-34.026,10.688-72.269,9.468 c-37.87-1.313-77.801-4.124-83.988-50.616c-0.563-4.124-0.843-8.436-0.843-13.029c80.237,19.589,148.661,8.531,167.504,6.28 c52.586-6.28,98.422-38.713,104.233-68.333C452.59,251.104,451.839,183.897,451.839,183.897L451.839,183.897z"
style="fill:#000000;fill-opacity:1"
id="path2" /><path
d="M381.443,300h-43.68V194.207c0-46.586-59.992-48.367-59.992,6.468v58.584h-43.397v-58.584 c0-54.835-59.991-53.054-59.991-6.468V300h-43.773c0-114.449-4.874-137.382,17.247-162.784 c24.277-27.09,74.801-28.87,97.297,5.718l10.873,18.278l10.873-18.278c22.591-34.777,73.207-32.62,97.296-5.718 C386.412,162.806,381.443,185.644,381.443,300L381.443,300z"
style="fill:#FFFFFF;"
id="path4" /></g></g><g
id="Layer_1" /></svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

View file

@ -1,8 +1,10 @@
window.addEventListener("load", () => { window.addEventListener("load", () => {
let menu = document.querySelector(".navbar-menu"); let menu = document.querySelector(".navbar-menu");
let nav = document.querySelector("nav");
// Toggle display of the menu for mobile; // Toggle display of the menu for mobile;
document.querySelector("#navbar-toggler").addEventListener("click", () => { document.querySelector("#navbar-toggler").addEventListener("click", () => {
menu.classList.toggle('shown'); menu.classList.toggle('shown');
nav.classList.toggle('menuShown');
}) })
}) })