46 lines
1.5 KiB
CSS
46 lines
1.5 KiB
CSS
body {
|
|
|
|
--site-width: 1200px;
|
|
--site-padding: 20px;
|
|
--nav-height: 50px;
|
|
|
|
--text-color: #000a;
|
|
|
|
--border-shadow: inset 0 -1px 0 0 #0001;
|
|
|
|
}
|
|
|
|
|
|
body {font-family: Cantarell, sans-serif; font-size: 16px; color: var(--text-color); margin: 0;}
|
|
|
|
nav {position: fixed; top: 0; left: 0; width: 100%; background-color: #fffb; backdrop-filter: blur(10px); box-shadow: var(--border-shadow);}
|
|
nav > .inner {max-width: var(--site-width); padding: 0px var(--site-padding); margin: auto; height: var(--nav-height); line-height: var(--nav-height);}
|
|
nav .logo {font-weight: 700; font-size: 18px;}
|
|
|
|
|
|
section .inner {max-width: var(--site-width); padding: 40px var(--site-padding); margin: auto;}
|
|
|
|
section.header {box-shadow: var(--box-shadow), var(--border-shadow);}
|
|
|
|
section:is(.header, .first) {padding-top: var(--nav-height);}
|
|
section:is(.header, .first) .inner {padding-top: 30px;}
|
|
|
|
section .inner.no-padding {padding: 0 var(--site-padding);}
|
|
|
|
|
|
h1, h2, h3, h4, p {margin: .75em 0}
|
|
|
|
|
|
section.hero {font-size: 1.7rem;}
|
|
section.hero .inner {padding: 90px var(--site-padding);}
|
|
|
|
section.hero .alt {background: linear-gradient(45deg, #ff2904, #ffa704); display: inline-block; font-weight: 900; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
|
|
|
|
.hero-grid {display: grid; align-items: center; grid-template-columns: 1fr max-content; gap: 40px;}
|
|
.hero-grid img {height: 240px;}
|
|
.hero-grid > :nth-child(2) {text-align: right;}
|
|
|
|
@media screen and (max-width: 700px) {
|
|
.hero-grid {grid-template-columns: 1fr;}
|
|
.hero-grid > :nth-child(2) {display: none;}
|
|
} |