first version

This commit is contained in:
Bastian Allgeier
2019-01-13 23:17:34 +01:00
commit 01277f79f2
595 changed files with 82913 additions and 0 deletions

View File

@@ -0,0 +1,19 @@
.layout {
display: grid;
grid-template-columns: 1fr;
grid-gap: 3rem;
}
@media screen and (min-width: 45rem) {
.layout {
grid-template-columns: 1fr 2fr;
}
}
.layout aside section {
margin-bottom: 3rem;
}
.layout aside h2 {
margin-bottom: .75rem;
}

View File

@@ -0,0 +1,57 @@
.album-cover {
position: relative;
line-height: 0;
margin-bottom: 6rem;
background: #000;
padding-bottom: 75%;
}
.album-cover figcaption {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
bottom: 0;
left: 0;
right: 0;
top: 0;
background: rgba(0,0,0, .5);
text-align: center;
color: #fff;
line-height: 1;
padding: 1.5rem;
}
.album-cover img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
.album-cover h1 {
font-size: 3rem;
}
.album-text {
max-width: 40rem;
margin: 0 auto 6rem;
text-align: center;
}
.album-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
margin: 0 auto;
grid-gap: 1rem;
max-width: calc(var(--content-width) - 15rem);
justify-content: center;
}
.album-gallery[data-even] {
grid-template-columns: repeat(4, 1fr);
}
.album-gallery[data-count="1"] {
grid-template-columns: 1fr;
}
.album-gallery[data-count="2"] {
grid-template-columns: 1fr 1fr;
}

View File

@@ -0,0 +1,4 @@
.text {
max-width: 35rem;
margin: 0 auto;
}

View File

@@ -0,0 +1,76 @@
.grid {
display: grid;
list-style: none;
grid-gap: 1rem;
line-height: 0;
grid-template-columns: repeat(1, 1fr);
grid-auto-flow: dense;
}
.grid li {
position: relative;
--cols: 1;
--rows: 1;
overflow: hidden;
background: #000;
line-height: 0;
}
.grid li:first-child {
--cols: 2;
--rows: 2;
}
.grid li:nth-child(5) {
--cols: 2;
}
.grid li:nth-child(6) {
--rows: 2;
}
.grid li:nth-child(7) {
--cols: 2;
}
.grid a {
display: block;
height: 10rem;
}
.grid img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: all .3s;
}
.grid figcaption {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
color: #fff;
top: 0;
right: 0;
bottom: 0;
left: 0;
line-height: 1;
text-align: center;
background: rgba(0,0,0, .5);
text-transform: uppercase;
font-size: .875rem;
letter-spacing: .125em;
font-weight: 600;
}
@media screen and (min-width: 45em) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
.grid li {
grid-column-start: span var(--cols);
grid-row-start: span var(--rows);
}
.grid a {
padding-bottom: 52.65%;
}
}

View File

@@ -0,0 +1,33 @@
.note {
max-width: 35rem;
margin: 0 auto;
}
.note-header {
text-align: center;
}
.note-date {
margin-bottom: .5rem;
display: block;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
grid-gap: 1.5rem;
margin-bottom: 1.5rem;
padding: 3rem 0;
}
.gallery figure a {
border: 0;
}
.gallery figure {
margin: 0;
padding: 0;
}
@media screen and (min-width: 45rem) {
.gallery {
margin-left: -3rem;
margin-right: -3rem;
}
}

View File

@@ -0,0 +1,20 @@
.notes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
grid-gap: 1.5rem;
grid-auto-rows: 1fr;
}
.note {
border: 2px solid #000;
}
.note a {
display: block;
padding: 1rem;
line-height: 1.25em;
}
.note h2 {
font-size: 1rem;
}
.note time {
font-size: .75rem;
}

View File

@@ -0,0 +1,62 @@
.albums {
display: grid;
list-style: none;
grid-gap: 1rem;
line-height: 0;
}
@media screen and (min-width: 30em) {
.albums {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (min-width: 60em) {
.albums {
grid-template-columns: repeat(3, 1fr);
}
.albums[data-even] {
grid-template-columns: repeat(4, 1fr);
}
}
.albums li {
overflow: hidden;
background: #000;
}
.albums figure {
position: relative;
padding-bottom: 125%;
}
.albums figcaption {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: #fff;
background: rgba(0,0,0, .5);
display: flex;
justify-content: space-between;
align-items: flex-end;
line-height: 1.5em;
padding: 1rem;
font-size: .875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .125em;
}
.albums img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: all .3s;
}
.albums img:hover {
opacity: .2;
}