first commit
This commit is contained in:
douboer
628
styles.css
Normal file
628
styles.css
Normal file
@@ -0,0 +1,628 @@
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--color-bg: #ffffff;
|
||||
--color-text: #000000;
|
||||
--color-muted: #575757;
|
||||
--color-accent: #f45f00;
|
||||
--color-border: rgba(0, 0, 0, 0.1);
|
||||
--sidebar-width: 250px;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-family: "Rethink Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
background: var(--color-bg);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
width: var(--sidebar-width);
|
||||
padding: 0 20px 30px 32px;
|
||||
border-right: 1px solid var(--color-border);
|
||||
background: var(--color-bg);
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sidebar__logo {
|
||||
padding: 30px 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.sidebar__nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding-bottom: 30px;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.sidebar__nav a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
letter-spacing: -0.3px;
|
||||
padding: 6px 0;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.sidebar__index {
|
||||
color: var(--color-muted);
|
||||
font-size: 10px;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
|
||||
.sidebar__links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
letter-spacing: -0.3px;
|
||||
color: var(--color-muted);
|
||||
}
|
||||
|
||||
.sidebar__links a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hero img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
main {
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
|
||||
section {
|
||||
border-left: 1px solid var(--color-border);
|
||||
border-top: 1px solid transparent;
|
||||
padding: 32px;
|
||||
max-width: 1030px;
|
||||
}
|
||||
|
||||
.intro {
|
||||
border-left: 1px solid var(--color-border);
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.intro__text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.intro h1 {
|
||||
font-size: 60px;
|
||||
line-height: 1.1;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.intro p {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
letter-spacing: -0.15px;
|
||||
color: var(--color-muted);
|
||||
}
|
||||
|
||||
.toc {
|
||||
border-top: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.toc h2 {
|
||||
margin: 0;
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.toc ol {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.6px;
|
||||
}
|
||||
|
||||
.toc li span {
|
||||
color: var(--color-muted);
|
||||
}
|
||||
|
||||
.section header h2 {
|
||||
margin: 0 0 24px;
|
||||
font-size: 60px;
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
display: inline-flex;
|
||||
gap: 12px;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.section header h2 span:first-child {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.section p {
|
||||
color: var(--color-muted);
|
||||
font-size: 15px;
|
||||
letter-spacing: -0.15px;
|
||||
}
|
||||
|
||||
.section__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.section__body figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.section__media {
|
||||
margin: 32px 0;
|
||||
}
|
||||
|
||||
.section__grid {
|
||||
margin-top: 32px;
|
||||
border-top: 1px solid var(--color-border);
|
||||
padding-top: 32px;
|
||||
}
|
||||
|
||||
.section__grid h3 {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
.section__grid--tone ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.section__grid--tone strong {
|
||||
font-weight: 700;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.card-grid article {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.card-grid h4 {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.15px;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.card-grid p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.gallery {
|
||||
display: grid;
|
||||
gap: 40px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.gallery__group h3 {
|
||||
margin: 0 0 20px;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.gallery__group--grid .gallery__tiles {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.gallery__tiles figure {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.gallery__tiles figcaption {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
color: var(--color-text);
|
||||
letter-spacing: -0.13px;
|
||||
}
|
||||
|
||||
.gallery__tiles figcaption img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.palette {
|
||||
display: grid;
|
||||
gap: 64px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.palette__group h3 {
|
||||
margin: 0 0 24px;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.swatches {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.swatches--wrap {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.swatch {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
letter-spacing: -0.13px;
|
||||
}
|
||||
|
||||
.swatch__color {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding-top: 100%;
|
||||
border-radius: 1000px;
|
||||
background: var(--swatch);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.swatch__color--border {
|
||||
border-color: var(--color-text);
|
||||
}
|
||||
|
||||
.swatch__code {
|
||||
color: var(--color-muted);
|
||||
}
|
||||
|
||||
.gradients {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.gradients figure {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
font-size: 13px;
|
||||
letter-spacing: -0.13px;
|
||||
}
|
||||
|
||||
.section--typography .highlight {
|
||||
color: var(--color-accent);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.type-details {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 40px;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.type-details__group h3 {
|
||||
margin: 0 0 16px;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.type-details__sample {
|
||||
margin: 0;
|
||||
font-size: 60px;
|
||||
letter-spacing: -1.2px;
|
||||
}
|
||||
|
||||
.type-details__sample--sans {
|
||||
font-family: "Rethink Sans", sans-serif;
|
||||
}
|
||||
|
||||
.type-details__sample--serif {
|
||||
font-family: "Hedvig Letters Serif", serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.type-sizing {
|
||||
margin-top: 80px;
|
||||
border-top: 1px solid var(--color-border);
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
.type-sizing h3 {
|
||||
margin: 0 0 20px;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.type-sizing p {
|
||||
margin: 0 0 32px;
|
||||
}
|
||||
|
||||
.type-sizing ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.type-sizing__heading {
|
||||
margin: 0 0 20px;
|
||||
font-family: "Rethink Sans", sans-serif;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.type-sizing__meta {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
font-size: 13px;
|
||||
color: var(--color-muted);
|
||||
letter-spacing: -0.13px;
|
||||
}
|
||||
|
||||
.size--xl {
|
||||
font-size: 50px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.size--lg {
|
||||
font-size: 32px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.size--md {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.size--sm {
|
||||
font-family: "Hedvig Letters Serif", serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.section--art {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.photo-grid {
|
||||
margin-top: 40px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.photo-grid figure {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.photo-grid figcaption {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
letter-spacing: -0.13px;
|
||||
color: var(--color-muted);
|
||||
}
|
||||
|
||||
.photo-grid figcaption strong {
|
||||
color: var(--color-text);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: auto;
|
||||
border-top: 1px solid var(--color-border);
|
||||
padding: 128px 40px 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.footer__top {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.footer__logo img {
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
.footer__links {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.footer__top-link {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.footer__bottom {
|
||||
border-top: 1px solid var(--color-border);
|
||||
padding-top: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
color: var(--color-text);
|
||||
letter-spacing: -0.13px;
|
||||
}
|
||||
|
||||
.footer__legal {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.footer__legal a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.page {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: static;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
section {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.gallery__group--grid .gallery__tiles {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.swatches,
|
||||
.swatches--wrap {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.type-details {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.photo-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.footer__top {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.footer__links {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.footer__bottom {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.intro h1 {
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
.section header h2 {
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
.toc {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.toc ol {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.gallery__group--grid .gallery__tiles {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.gradients {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.swatches,
|
||||
.swatches--wrap {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user