themes/kobel
themes/kobel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

ADD footer WIP header

Browse source
This commit is contained in:
Hoernschen 2023-12-25 23:14:57 +01:00
parent 06b0b4d643
commit 826abcd7ae
Signed by: hoernschen
GPG key ID: 37591FAF4E6D3462
4 changed files with 131 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
assets/scss/index.scss
View file

@ -1,4 +1,5 @@
$font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
$width: 680px;
* {
box-sizing: border-box;
@ -83,6 +84,76 @@ a {
/* Header */
.header {
display: flex;
flex-direction: row;
width: 100%;
max-width: $width;
margin: auto;
padding: 10px;
font-size: large;
}
.header i {
font-size: x-large;
}
.header > .items {
display: flex;
flex-grow: 1;
justify-content: right;
}
.header > .items > .item {
align-self: center;
padding-inline-end: 10px;
}
/* Footer */
.footer {
display: flex;
flex-direction: column;
padding-block-start: 16px;
font-size: medium;
text-align: center;
}
.footer > .social {
display: flex;
justify-content: center;
font-size: x-large;
}
.footer > .social a {
padding-inline: 3px;
color: {{ .Site.Params.color.primary }};
}
.footer > .links {
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 0;
}
.footer > .links .link {
display: flex;
padding-inline: 16px;
}
.footer > .links .link a {
color: inherit;
}
.footer > .links .link:before {
content: none;
}
.footer > .copyright {
font-size: small;
}
/* Sections */
#content {
@ -97,7 +168,7 @@ a {
padding-right: 1.5rem;
padding-left: 1.5rem;
width: 100%;
max-width: 680px;
max-width: $width;
margin: 0;
align-self: center;
flex-grow: 1;
@ -124,17 +195,11 @@ a {
.section-content {
width: 100%;
max-width: 680px;
max-width: $width;
margin: auto;
justify-content: center;
}
// .hero > div {
// width: 100%;
// max-width: 680px;
// margin: auto;
// }
.hero .hero-content {
display: flex;
justify-content: center;

4
layouts/_default/baseof.html
View file

@ -4,9 +4,9 @@
<body>
{{- partial "header.html" . -}}
<div id="content">
<main id="content">
{{- block "main" . }}{{- end }}
</div>
</main>
{{- partial "footer.html" . -}}
</body>

24
layouts/partials/footer.html
View file

@ -1 +1,23 @@
<div>test</div>
{{ with .Site.Params.footer }}
<footer class="footer">
{{ if .social }}
<div class="social">
{{ range .social }}
<a href="{{ .url }}"><i class="{{ if .type }} icon-{{ .type }} {{ else }} icon-link {{ end }}"></i></a>
{{ end }}
</div>
{{ end }}
{{ if .links }}
<ul class="links">
{{- range .links }}
<li class="link"><a href="{{ .url }}">{{ .text }}</a></li>
{{- end }}
</ul>
{{ end }}
{{ if .copyright }}
<p class="copyright">
© {{ dateFormat "2006" now }} {{ .copyright }}</a>
</p>
{{ end }}
</footer>
{{ end }}

14
layouts/partials/header.html
View file

@ -1 +1,13 @@
<div>test</div>
{{ with .Site.Params.header }}
<header id="header" class="header">
<a class="home" href="/#"><i class="icon-home"></i></a>
<div class="items">
{{ if .links }}
{{ range .links }}
<a class="item" href="{{ .url }}">{{ .text }}</a>
{{ end }}
{{ end }}
</div>
<a href="/#"><i class="icon-adjust"></i></a>
</header>
{{ end }}