www.franconian.net/assets/style.scss

116 lines
1.4 KiB
SCSS
Raw Normal View History

2020-11-24 21:44:16 +01:00
@import 'breakpoints';
2020-11-23 02:56:53 +01:00
@import 'colors';
2020-11-24 21:44:16 +01:00
@import 'fonts';
2020-11-24 19:31:03 +01:00
@import 'mixins';
2020-11-23 02:06:40 +01:00
2020-11-15 00:32:58 +01:00
* {
2020-11-23 02:06:40 +01:00
font-family: Montserrat, sans-serif;
2020-11-23 02:56:53 +01:00
color: $text-color;
2020-11-15 00:32:58 +01:00
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
2020-11-23 02:56:53 +01:00
background: $background;
2020-11-24 17:58:00 +01:00
display: flex;
flex-direction: column;
min-height: 100vh;
2020-11-23 02:56:53 +01:00
}
header {
margin-bottom: 1em;
}
main {
2020-11-24 19:31:03 +01:00
width: 100%;
2020-11-24 21:44:16 +01:00
max-width: $large;
margin: 0 auto;
2020-11-24 19:31:03 +01:00
flex-grow: 1;
2020-11-15 00:32:58 +01:00
}
2020-11-24 17:58:00 +01:00
footer {
text-align: center;
padding: 0.5em;
}
h1, h2, h3, h4, h5, h6, p {
margin-bottom: 0.5em;
padding: 0 0.5rem;
}
2020-11-23 02:06:40 +01:00
h1, h2, h3, h4, h5, h6 {
2020-11-24 19:31:03 +01:00
@include heading;
2020-11-23 02:56:53 +01:00
}
h1 {
border-bottom: 2px $text-color solid;
}
2020-11-23 18:56:53 +01:00
figure {
2020-11-24 01:09:31 +01:00
margin-bottom: 1rem;
2020-11-23 18:56:53 +01:00
img {
2020-11-23 19:20:05 +01:00
max-width: 100%;
2020-11-23 18:56:53 +01:00
display: block;
margin: 0 auto;
}
figcaption {
display: none;
}
}
2020-11-23 02:56:53 +01:00
.nav {
display: flex;
flex-direction: column;
justify-content: space-between;
2020-11-24 21:44:16 +01:00
&.nav-main {
max-width: $large;
margin: 0 auto;
padding: 0.5em;
2020-11-24 13:09:45 +01:00
}
hr {
margin: 0.5em 40%;
2020-11-23 02:56:53 +01:00
}
.nav-logo {
2020-11-24 19:31:03 +01:00
@include heading;
2020-11-24 21:44:16 +01:00
text-decoration: none;
2020-11-24 19:31:03 +01:00
2020-11-23 02:56:53 +01:00
margin: 0 auto;
img {
2020-11-24 19:31:03 +01:00
width: 48px;
2020-11-24 18:13:42 +01:00
display: inline-block;
2020-11-24 19:31:03 +01:00
margin-right: 1em;
2020-11-24 18:13:42 +01:00
vertical-align: middle;
2020-11-23 02:56:53 +01:00
}
2020-11-24 21:44:16 +01:00
@media screen and (min-width: $small) {
margin-left: 0;
}
2020-11-23 02:56:53 +01:00
}
.nav-link {
align-self: center;
padding: 0.5em;
&.nav-link-active {
}
}
2020-11-24 21:44:16 +01:00
@media screen and (min-width: $small) {
flex-direction: row;
hr {
margin: 0 0.5em;
align-self: center;
}
}
2020-11-23 02:06:40 +01:00
}