interkollektives/lichterei-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Design adjustments, new content and more

Browse Source
This commit is contained in:
Bastian Allgeier
2020-12-10 16:10:45 +01:00
parent c378376bc9
commit 4d7b192c94
103 changed files with 1695 additions and 1003 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
assets/css/templates/about.css
View File

@@ -1,19 +1,7 @@
.layout {
display: grid;
grid-template-columns: 1fr;
grid-gap: 3rem;
.contact {
padding: 3rem;
border: 2px solid #000;
}
@media screen and (min-width: 45rem) {
.layout {
grid-template-columns: 1fr 2fr;
}
}
.layout aside section {
margin-bottom: 3rem;
}
.layout aside h2 {
margin-bottom: .75rem;
.contact .h1 {
margin-bottom: 1.5rem;
}

64
assets/css/templates/album.css
View File

@@ -1,57 +1,15 @@
.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;
line-height: 0;
columns: 1;
column-gap: 1.5rem;
}
.album-gallery[data-even] {
grid-template-columns: repeat(4, 1fr);
.album-gallery li {
display: block;
margin-bottom: 1.5rem;
break-inside: avoid;
}
.album-gallery[data-count="1"] {
grid-template-columns: 1fr;
}
.album-gallery[data-count="2"] {
grid-template-columns: 1fr 1fr;
@media screen and (min-width: 60rem) {
.album-gallery {
columns: 2;
}
}

4
assets/css/templates/default.css
View File

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

30
assets/css/templates/home.css
View File

@@ -1,12 +1,12 @@
.grid {
.home-grid {
display: grid;
list-style: none;
grid-gap: 1rem;
grid-gap: 1.5rem;
line-height: 0;
grid-template-columns: repeat(1, 1fr);
grid-auto-flow: dense;
}
.grid li {
.home-grid li {
position: relative;
--cols: 1;
--rows: 1;
@@ -15,24 +15,24 @@
background: #000;
line-height: 0;
}
.grid li:first-child {
.home-grid li:first-child {
--cols: 2;
--rows: 2;
}
.grid li:nth-child(5) {
.home-grid li:nth-child(5) {
--cols: 2;
}
.grid li:nth-child(6) {
.home-grid li:nth-child(6) {
--rows: 2;
}
.grid li:nth-child(7) {
.home-grid li:nth-child(7) {
--cols: 2;
}
.grid a {
.home-grid a {
display: block;
height: 10rem;
}
.grid img {
.home-grid img {
position: absolute;
top: 0;
right: 0;
@@ -43,7 +43,7 @@
object-fit: cover;
transition: all .3s;
}
.grid figcaption {
.home-grid figcaption {
display: flex;
align-items: center;
justify-content: center;
@@ -56,21 +56,17 @@
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 {
.home-grid {
grid-template-columns: repeat(3, 1fr);
}
.grid li {
.home-grid li {
grid-column-start: span var(--cols);
grid-row-start: span var(--rows);
}
.grid a {
.home-grid a {
padding-bottom: 52.65%;
}
}

37
assets/css/templates/note.css Normal file → Executable file
View File

@@ -3,31 +3,28 @@
margin: 0 auto;
}
.note-header {
text-align: center;
padding-top: 3rem;
margin-bottom: 3rem;
}
.note-footer {
padding: 6rem 0;
}
.note-date {
margin-bottom: .5rem;
display: block;
color: var(--color-text-grey);
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
grid-gap: 1.5rem;
.note-tags {
display: flex;
margin-bottom: 1.5rem;
padding: 3rem 0;
}
.gallery figure a {
border: 0;
.note-tags li {
margin-right: .5rem;
}
.gallery figure {
margin: 0;
padding: 0;
.note-tags a {
padding: .5rem 1rem;
display: block;
background: var(--color-light);
}
@media screen and (min-width: 45rem) {
.gallery {
margin-left: -3rem;
margin-right: -3rem;
}
.note-tags a:hover {
background: var(--color-black);
color: var(--color-white);
}

20
assets/css/templates/notes.css
View File

@@ -1,20 +0,0 @@
.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;
}

62
assets/css/templates/photography.css
View File

@@ -1,62 +0,0 @@
.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;
}