georges/scss/style.scss

163 lines
2.7 KiB
SCSS
Raw Normal View History

2022-02-02 15:59:34 +01:00
// vim: tabstop=2 shiftwidth=2 expandtab
@import url('fonts.css');
2022-02-02 23:46:26 +01:00
@import url('../blueimp/css/blueimp-gallery.min.css');
2022-02-02 15:59:34 +01:00
@import 'params';
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html {
background-color: $bg_color;
color:$fg_color;
height: 100%;
}
body {
font-family:Open Sans,Arial;
2022-02-03 00:06:53 +01:00
font-size: $font_size;
2022-02-02 15:59:34 +01:00
line-height:1.4;
text-align:justify;
margin: 0;
padding: 0;
min-height: 100%;
display: flex;
flex-direction: column;
}
#headbg {
background-image: url("../img/headbg.jpg");
/* Full height */
height: 100vh;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#head {
position: absolute;
top: 20%;
width: 100%;
height: 100px;
text-align: center;
font: 400 65px/1.8 sans-serif;
color: white;
letter-spacing: 10px;
z-index: 100;
a {
color: white;
text-decoration: none;
}
&.headerbar {
position: fixed;
top: 0px;
2022-02-03 00:28:24 +01:00
background-color: $head_bg_color;
2022-02-02 15:59:34 +01:00
height: 75px;
font-size: 45px;
transition: none .224s ease-in-out;
transition-property: background-color, font-size, height;
}
}
2022-02-02 23:46:26 +01:00
#content {
margin: 30px 10px;
@media (min-width: $width_med) {
margin: 30px 20px;
}
}
2022-02-02 15:59:34 +01:00
footer {
font-size: 0.7em;
display: flex;
justify-content: flex-end;
align-items: center;
flex-direction: column;
@media (min-width: $width_med) {
flex-direction: row;
}
margin: 10px 20px;
margin-top: auto;
> div {
margin: 5px 15px;
@media (min-width: $width_med) {
margin: 0 15px;
}
}
}
2022-02-02 23:46:26 +01:00
.galleryblock {
.blockhead {
display: flex;
flex-direction: column;
h2 {
margin: 0;
}
.gallerydate {
align-self: flex-end;
}
margin: 15px 0;
gap: 5px;
margin-top: 35px;
@media (min-width: $width_med) {
flex-direction: row;
justify-content: space-between;
align-items: center;
.gallerydate {
align-self: auto;
}
}
}
.gallery {
display: flex;
align-items: stretch;
flex-direction: column;
gap: 15px;
@media (min-width: $gallery_2col) {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: $gallery_3col) {
grid-template-columns: repeat(3, 1fr);
}
@media (min-width: $gallery_autocol) {
grid-template-columns: repeat(
auto-fill,
minmax($gallery_autocol_minwidth, 1fr)
);
}
a {
@media (min-width: $gallery_autocol) {
max-width: $gallery_autocol_maxwidth;
}
}
img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
aspect-ratio: 1/1;
}
}
}
2022-02-02 15:59:34 +01:00
a, a:visited {
color: $link_color;
}