Spacing and typography
This commit is contained in:
Sodbileg Gansukh
parent
fa133aa6ad
commit
1ee17823c2
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user