franconian
/
www.franconian.net
13
0
Fork 0
Code Pull Requests Releases Activity

style headers and footer
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Florian Sorg 2020-12-18 20:38:35 +01:00
parent 4dd047f891
commit b988805ea5
2 changed files with 48 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
assets/_mixins.scss
View File

@ -2,4 +2,5 @@
font-family: Orbitron, sans-serif;
font-weight: 900;
text-transform: uppercase;
color: $primary-1;
}

85
assets/style.scss
View File

@ -68,8 +68,6 @@
* {
font-family: Montserrat, sans-serif;
color: $text-color;
box-sizing: border-box;
margin: 0;
padding: 0;
@ -77,45 +75,12 @@
body {
background: $background;
color: $text-color;
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
}
main {
width: 100%;
max-width: $large;
margin: 0 auto;
flex-grow: 1;
}
footer {
border-top: 1px solid #666;
font-size: 0.9em;
color: $text-darker;
width: 100%;
max-width: $large;
margin: 0 auto;
padding: 0.5em;
display: flex;
align-items: center;
flex-direction: column;
@media screen and (min-width: $small) {
flex-direction: row;
& > :first-child {
margin-left: auto;
}
}
}
h1, h2, h3, h4, h5, h6, p, ul {
margin-top: 0.5em;
padding: 0 0.5rem;
@ -129,8 +94,22 @@ h1, h2, h3, h4, h5, h6 {
@include heading;
}
h1 {
border-bottom: 2px $text-color solid;
h1, footer {
padding-bottom: 0.2em;
background: repeat-x center bottom / 250px 4px;
background-image: linear-gradient(
to right,
$primary-3 0%, $primary-3 10%,
$primary-1 10%, $primary-1 20%,
$primary-2 20%, $primary-2 30%,
$primary-3 30%, $primary-3 40%,
$primary-2 40%, $primary-2 50%,
$primary-3 50%, $primary-3 60%,
$primary-1 60%, $primary-1 70%,
$primary-3 70%, $primary-3 80%,
$primary-1 80%, $primary-1 90%,
$primary-2 90%, $primary-2 100%
);
}
a:not(.nav-logo) {
@ -157,6 +136,36 @@ a:not(.nav-logo) {
}
}
main {
width: 100%;
max-width: $large;
margin: 0 auto;
flex-grow: 1;
}
footer {
background-position: right top;
font-size: 0.9em;
color: $text-darker;
width: 100%;
max-width: $large;
margin: 0 auto;
padding: 0.5em;
display: flex;
align-items: center;
flex-direction: column;
@media screen and (min-width: $small) {
flex-direction: row;
& > :first-child {
margin-left: auto;
}
}
}
figure {
margin: 1rem 0;