Spacing and typography

This commit is contained in:
Sodbileg Gansukh 2023-07-26 17:06:49 +08:00
parent fa133aa6ad
commit 1ee17823c2
3 changed files with 47 additions and 35 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -64,9 +64,9 @@ X. Footer
--font-serif: "EB Garamond", Georgia, Times, serif;
--font-slab: "Roboto Slab", Georgia, Times, serif;
--font-mono: Menlo, Courier, monospace;
--container-width: 1280px;
--container-width: 1320px;
--container-gap: clamp(24px, 1.7032rem + 1.9355vw, 48px);
--grid-gap: 40px;
--grid-gap: 48px;
}
:root.has-light-text,
@ -279,7 +279,7 @@ a:hover {
.gh-navigation {
height: 100px;
font-size: 1.5rem;
font-size: 1.6rem;
font-weight: 550;
color: var(--color-darker-gray);
}
@ -320,7 +320,7 @@ a:hover {
.gh-navigation .nav {
display: inline-flex;
gap: 24px;
gap: 28px;
align-items: center;
padding: 0;
margin: 0;
@ -415,7 +415,7 @@ LOGO Home About Collection Author Portal Login Subscribe
@media (min-width: 992px) {
.gh-navigation.is-left-logo .gh-navigation-menu {
margin-right: 64px;
margin-right: 100px;
margin-left: 16px;
}
}
@ -742,7 +742,7 @@ Search LOGO Login Subscribe
.gh-card-link {
display: flex;
flex-direction: column;
gap: 16px;
gap: 20px;
}
.gh-card-link:hover {
@ -777,9 +777,9 @@ Search LOGO Login Subscribe
}
.gh-card-title {
font-size: 2rem;
font-weight: 725;
letter-spacing: -0.017em;
font-size: 2.2rem;
font-weight: 800;
letter-spacing: -0.014em;
}
.gh-card-link:hover .gh-card-title {
@ -789,10 +789,10 @@ Search LOGO Login Subscribe
.gh-card-excerpt {
display: -webkit-box;
overflow-y: hidden;
margin-top: 6px;
margin-top: 10px;
max-width: 720px;
font-size: 1.6rem;
line-height: 1.35;
font-size: 1.5rem;
line-height: 1.4;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
@ -804,12 +804,12 @@ Search LOGO Login Subscribe
font-size: 1.3rem;
font-weight: 550;
line-height: 1.05;
letter-spacing: -0.0025em;
letter-spacing: -0.004em;
color: var(--color-secondary-text);
}
.gh-card-meta:not(:empty) {
margin-top: 8px;
margin-top: 12px;
}
.gh-card-author + .gh-card-date::before {
@ -866,7 +866,7 @@ Search LOGO Login Subscribe
}
.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-link {
gap: 20px;
gap: 28px;
}
.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-image {
@ -875,7 +875,7 @@ Search LOGO Login Subscribe
.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-tag {
display: block;
margin-bottom: 8px;
margin-bottom: 12px;
}
.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-title {
@ -886,8 +886,8 @@ Search LOGO Login Subscribe
}
.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-excerpt {
margin-top: 10px;
font-size: 1.7rem;
margin-top: 20px;
font-size: 1.8rem;
}
.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-meta:not(:empty) {
@ -942,12 +942,12 @@ Search LOGO Login Subscribe
}
.gh-header.is-highlight .gh-card:first-child .gh-card-link {
gap: 24px;
gap: 28px;
}
.gh-header.is-highlight .gh-card:first-child .gh-card-tag {
display: block;
margin-bottom: 10px;
margin-bottom: 12px;
}
.gh-header.is-highlight :is(.gh-header-inner, .gh-header-left) > .gh-card:first-child .gh-card-title {
@ -959,8 +959,8 @@ Search LOGO Login Subscribe
}
.gh-header.is-highlight :is(.gh-header-inner, .gh-header-left) > .gh-card:first-child .gh-card-excerpt {
margin-top: 10px;
font-size: 1.7rem;
margin-top: 20px;
font-size: 1.8rem;
}
.gh-header.is-highlight :is(.gh-header-inner, .gh-header-left) > .gh-card:first-child .gh-card-meta:not(:empty) {
@ -1154,20 +1154,28 @@ Search LOGO Login Subscribe
}
.gh-featured-feed .gh-card-image {
width: 80px;
width: 72px;
aspect-ratio: 1;
}
.gh-featured-feed .gh-card-title {
display: -webkit-box;
overflow-y: hidden;
font-size: 1.6rem;
font-weight: 700;
font-weight: 725;
letter-spacing: -0.011em;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.gh-featured-feed .gh-card-excerpt {
display: none;
}
.gh-featured-feed .gh-card-meta:not(:empty) {
margin-top: 10px;
}
.gh-featured-feed .gh-card + .gh-card::before {
position: absolute;
top: 0;
@ -1224,7 +1232,7 @@ Search LOGO Login Subscribe
.gh-container-title {
grid-column: 1 / -1;
margin-bottom: 20px;
margin-bottom: calc(var(--grid-gap) / 2);
padding-bottom: 12px;
font-size: 1.2rem;
font-weight: 500;
@ -1238,7 +1246,7 @@ Search LOGO Login Subscribe
}
.gh-container .gh-card-meta:not(:empty) {
margin-top: 14px;
margin-top: 16px;
}
/* 11.1. List style */
@ -1264,6 +1272,10 @@ Search LOGO Login Subscribe
max-width: 600px;
}
.gh-container.is-list .gh-card-excerpt {
font-size: 1.6rem;
}
.gh-container.is-list .gh-card::before {
position: absolute;
top: calc(var(--grid-gap) / -2);
@ -1287,7 +1299,7 @@ Search LOGO Login Subscribe
}
.gh-container.is-grid .gh-card-excerpt {
-webkit-line-clamp: 3;
-webkit-line-clamp: 4;
}
.gh-container.is-grid .gh-card::before {
@ -2078,8 +2090,8 @@ figcaption a {
/* ---------------------------------------------------------- */
.gh-footer {
margin-top: 64px;
font-size: 1.5rem;
margin-top: 120px;
font-size: 1.6rem;
color: var(--color-darker-gray);
}
@ -2118,7 +2130,7 @@ figcaption a {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding-block: 24px;
padding-block: 28px;
font-weight: 550;
border-block: 1px solid var(--color-border);
}
@ -2153,7 +2165,7 @@ figcaption a {
display: flex;
flex-direction: column;
align-items: center;
padding-block: 80px 100px;
padding-block: 80px 120px;
}
.gh-footer-signup-header {
@ -2163,7 +2175,7 @@ figcaption a {
}
.gh-footer-signup-subhead {
margin-top: 4px;
margin-top: 8px;
font-size: clamp(1.6rem, 0.68vw + 1.33rem, 2.2rem);
font-weight: 450;
letter-spacing: -0.018em;
@ -2171,7 +2183,7 @@ figcaption a {
}
.gh-footer-signup .gh-button {
margin-top: 24px;
margin-top: 28px;
padding: 16px 32px;
font-size: 1.9rem;
letter-spacing: -0.01em;