autonomic-cooperative/cotech-website
3
0
Fork 2
mirror of https://git.coop/cotech/website.git synced 2025-12-18 00:47:34 +00:00
Code Issues Releases Wiki Activity

Refactor hero into grid-uneven and large-only classes

Browse Source 
This makes it possible to reuse this CSS for the about page layout.
This commit is contained in:
Chris Lowis
2025-12-16 12:11:01 +00:00
parent 4ae2be1ff9
commit ced5d2ad0e
3 changed files with 27 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
assets/css/app.css
View File

@ -211,6 +211,16 @@ section, footer, header {
gap: var(--space-sm);
}
.large-only {
display: none;
}
@media screen and (width > 480px) {
.large-only {
display: inline;
}
}
.btn {
padding: var(--space-sm) var(--space-lg);
background: var(--cotech-white);
@ -249,6 +259,10 @@ section, footer, header {
grid-template-columns: 1fr 1fr;
}
.grid-uneven {
grid-gap: var(--space-lg);
}
@media (min-width: 420px) {
.grid {
grid-template-columns: 1fr 1fr;
@ -257,6 +271,10 @@ section, footer, header {
.grid-dense {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.grid-uneven {
grid-template-columns: 3fr 2fr;
}
}
.header {
@ -353,22 +371,6 @@ section, footer, header {
}
}
.hero__right {
display: none;
}
@media screen and (width > 480px) {
.hero {
display: grid;
gap: var(--space-xl);
grid-template-columns: 3fr 2fr;
}
.hero__right {
display: inline;
}
}
footer {
h3 {
border-left: none;