femmefaytale/cotech-website
0
0
Fork 0
forked from autonomic-cooperative/cotech-website
Code Issues Pull Requests Projects Releases Wiki Activity

Layout improvements on mobile

Browse Source 
I've hidden the metadata and reduced some whitespace to make things
look a little better on small screens.
This commit is contained in:
Chris Lowis
2025-06-25 21:23:29 +01:00
parent fa70991744
commit fea43c6370
1 changed files with 22 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
assets/css/app.css
View File

@ -118,7 +118,7 @@ section.content h2 {
.hero {
width: 100%;
padding: var(--space-xxl);
padding: var(--space-lg) var(--space-sm);
background-image: url(/assets/img/banner-collage.jpg);
background-position: center center;
background-repeat: no-repeat;
@ -130,6 +130,12 @@ section.content h2 {
text-align: center;
}
@media screen and (width >= 480px) {
.hero {
padding: var(--space-xxl);
}
}
.hero_body {
font-size: 1.5em;
font-weight: bold;
@ -155,7 +161,7 @@ section.content h2 {
.slice {
width: 100%;
padding: var(--space-lg);
padding: var(--space-sm);
display: flex;
flex-direction: column;
align-items: center;
@ -163,6 +169,12 @@ section.content h2 {
text-align: center;
}
@media screen and (width >= 480px) {
.slice {
padding: var(--space-lg);
}
}
.slice--light-grey {
background-color: var(--cotech-light-grey);
}
@ -217,8 +229,14 @@ section.content h2 {
}
.metadata {
display: flex;
gap: var(--space-xl);
display: none;
}
@media screen and (width >= 480px) {
.metadata {
display: flex;
gap: var(--space-xl);
}
}
.metadata_item {