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
Download patch file Download diff file Expand all files Collapse all files

121
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;
@ -40,23 +41,23 @@ a {
{{ if .Site.Params.list.icon }}
ul {
list-style: none;
padding-left: 1rem;
}
ul {
list-style: none;
padding-left: 1rem;
}
ul li {
display: flex;
}
ul li {
display: flex;
}
ul li:before {
content: url({{ .Site.Params.list.icon }});
display: inline-block;
width: 21px;
height: 21px;
margin-right: 10px;
flex-shrink: 0;
}
ul li:before {
content: url({{ .Site.Params.list.icon }});
display: inline-block;
width: 21px;
height: 21px;
margin-right: 10px;
flex-shrink: 0;
}
{{ end }}
@ -72,17 +73,87 @@ a {
.col-12 {flex: 100%; width: 100%; max-width: 100%;}
[class*="col-"] {
float: left;
float: left;
}
.row {
display: flex;
flex-wrap: wrap;
flex-flow: column;
display: flex;
flex-wrap: wrap;
flex-flow: column;
}
/* 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;
@ -167,7 +232,7 @@ a {
bottom: 0;
border-right: 3px solid {{ .Site.Params.color.primary }};
border-bottom: 3px solid {{ .Site.Params.color.primary }};
}
}
.hero-content div {
flex-grow: 1;