Skip to content

Commit

Permalink
Category landing page basic styling (#89)
Browse files Browse the repository at this point in the history
* initial

* Adding some font handling for italic & fixing a bit of the free-form text stuff.

* New defaults and fix CLS - 600 weight font does not work.

* Default styles.

---------

Co-authored-by: Bryan Stopp <[email protected]>
Co-authored-by: Bryan Stopp <[email protected]>
  • Loading branch information
3 people authored Jan 19, 2024
1 parent 99a4615 commit 761b221
Show file tree
Hide file tree
Showing 7 changed files with 164 additions and 122 deletions.
1 change: 1 addition & 0 deletions cigaradvisor/blocks/header/header.css
Original file line number Diff line number Diff line change
Expand Up @@ -345,6 +345,7 @@
}

.header.block .mobile-nav.mobile-nav-closed {
height: 0;
z-index: 1;
}

Expand Down
11 changes: 8 additions & 3 deletions cigaradvisor/blocks/hero/hero.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

main .hero-container {
padding: 0;
margin-bottom: 10%;
}

main .hero-container > div {
Expand Down Expand Up @@ -43,15 +42,21 @@ main .hero.block .hero-image img {
width: 100%;
}

main .hero.block .hero-content {
main .hero.block.search .hero-content {
padding-top: 80px;
}

main .hero.block:not(.search) {
display: flex;
min-height: 150px;
align-items: center;
justify-content: center;
}

main .hero.block h1 {
color: var(--clr-white);
text-align: center;
line-height: 1;
letter-spacing: 3px;
text-shadow: 3px 3px var(--clr-black);
}

Expand Down
Binary file added cigaradvisor/fonts/montserrat-italic.woff2
Binary file not shown.
Binary file added cigaradvisor/fonts/opensans-italic.woff2
Binary file not shown.
122 changes: 122 additions & 0 deletions cigaradvisor/styles/font-fallbacks.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@

@font-face {
font-family: 'Open Sans Fallback';
font-style: normal;
font-weight: 400;
src: local('Arial');
ascent-override: 101.58%;
descent-override: 27.84%;
line-gap-override: 0.00%;
size-adjust: 105.22%;
}

@font-face {
font-family: 'Open Sans Fallback';
font-style: normal;
font-weight: 600 900;
src: local('Arial Bold');
ascent-override: 109.90%;
descent-override: 30.12%;
line-gap-override: 0.00%;
size-adjust: 97.26%;
}

@font-face {
font-family: 'Open Sans Fallback';
font-style: italic;
font-weight: 400;
src: local('Arial');
ascent-override: 107.47%;
descent-override: 29.46%;
line-gap-override: 0.00%;
size-adjust: 99.46%;
}

@font-face {
font-family: 'Open Sans Fallback';
font-style: italic;
font-weight: 600 900;
src: local('Arial Bold Italic');
ascent-override: 116.27%;
descent-override: 31.87%;
line-gap-override: 0.00%;
size-adjust: 91.93%;
}

@font-face {
font-family: 'Montserrat Fallback';
font-style: normal;
font-weight: 400;
src: local('Arial');
ascent-override: 87.81%;
descent-override: 22.77%;
line-gap-override: 0.00%;
size-adjust: 110.23%;
}

@font-face {
font-family: 'Montserrat Fallback';
font-style: normal;
font-weight: 600 900;
src: local('Arial Bold');
ascent-override: 95.01%;
descent-override: 24.63%;
line-gap-override: 0.00%;
size-adjust: 101.89%;
}

@font-face {
font-family: 'Montserrat Fallback';
font-style: italic;
font-weight: 400;
src: local('Arial Italic');
ascent-override: 86.68%;
descent-override: 22.48%;
line-gap-override: 0.00%;
size-adjust: 111.68%;
}

@font-face {
font-family: 'Montserrat Fallback';
font-style: italic;
font-weight: 600 900;
src: local('Arial Bold Italic');
ascent-override: 93.78%;
descent-override: 24.32%;
line-gap-override: 0.00%;
size-adjust: 103.22%;
}

@font-face {
font-family: 'Alfa Slab One Fallback';
font-style: normal;
font-weight: 400;
src: local('Times New Roman');
ascent-override: 80.29%;
descent-override: 20.82%;
line-gap-override: 0.00%;
size-adjust: 120.57%;
}

@font-face {
font-family: 'Alfa Slab One Fallback';
font-style: normal;
font-weight: 400;
src: local('Times New Roman');
ascent-override: 78.08%;
descent-override: 25.10%;
line-gap-override: 0.00%;
size-adjust: 132.68%;
}

@font-face {
font-family: 'Alfa Slab One Fallback';
font-style: normal;
font-weight: 600 900;
src: local('Times New Roman Bold');
ascent-override: 82.94%;
descent-override: 26.66%;
line-gap-override: 0.00%;
size-adjust: 124.91%;
}

14 changes: 14 additions & 0 deletions cigaradvisor/styles/fonts.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,27 @@
src: url('../fonts/opensans.woff2') format('woff2');
}

@font-face {
font-family: 'Open Sans';
font-style: italic;
font-display: swap;
src: url('../fonts/opensans-italic.woff2') format('woff2');
}

@font-face {
font-family: Montserrat;
font-style: normal;
font-display: swap;
src: url('../fonts/montserrat.woff2') format('woff2');
}

@font-face {
font-family: Montserrat;
font-style: italic;
font-display: swap;
src: url('../fonts/montserrat-italic.woff2') format('woff2');
}

@font-face {
font-family: 'Alfa Slab One';
font-style: normal;
Expand Down
138 changes: 19 additions & 119 deletions cigaradvisor/styles/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -11,116 +11,7 @@
*/

@import url('reset.css');

@font-face {
font-family: 'Open Sans Fallback';
font-style: normal;
font-weight: 400;
src: local('Arial');
ascent-override: 101.58%;
descent-override: 27.84%;
line-gap-override: 0.00%;
size-adjust: 105.22%;
}

@font-face {
font-family: 'Open Sans Fallback';
font-style: normal;
font-weight: 600;
src: local('Arial Bold');
ascent-override: 109.90%;
descent-override: 30.12%;
line-gap-override: 0.00%;
size-adjust: 97.26%;
}

@font-face {
font-family: 'Open Sans Fallback';
font-style: normal;
font-weight: 700;
src: local('Arial Bold');
ascent-override: 109.90%;
descent-override: 30.12%;
line-gap-override: 0.00%;
size-adjust: 97.26%;
}

@font-face {
font-family: 'Open Sans Fallback';
font-style: normal;
font-weight: 900;
src: local('Arial Bold');
ascent-override: 109.90%;
descent-override: 30.12%;
line-gap-override: 0.00%;
size-adjust: 97.26%;
}

@font-face {
font-family: 'Montserrat Fallback';
font-style: normal;
font-weight: 400;
src: local('Arial');
ascent-override: 87.81%;
descent-override: 22.77%;
line-gap-override: 0.00%;
size-adjust: 110.23%;
}

@font-face {
font-family: 'Montserrat Fallback';
font-style: normal;
font-weight: 600;
src: local('Arial Bold');
ascent-override: 95.01%;
descent-override: 24.63%;
line-gap-override: 0.00%;
size-adjust: 101.89%;
}

@font-face {
font-family: 'Montserrat Fallback';
font-style: normal;
font-weight: 700;
src: local('Arial Bold');
ascent-override: 95.01%;
descent-override: 24.63%;
line-gap-override: 0.00%;
size-adjust: 101.89%;
}

@font-face {
font-family: 'Montserrat Fallback';
font-style: normal;
font-weight: 900;
src: local('Arial Bold');
ascent-override: 95.01%;
descent-override: 24.63%;
line-gap-override: 0.00%;
size-adjust: 101.89%;
}

@font-face {
font-family: 'Alfa Slab One Fallback';
font-style: normal;
font-weight: 400;
src: local('Arial');
ascent-override: 85.41%;
descent-override: 27.45%;
line-gap-override: 0.00%;
size-adjust: 121.30%;
}

@font-face {
font-family: 'Alfa Slab One Fallback';
font-style: normal;
font-weight: 900;
src: local('Arial Bold');
ascent-override: 92.40%;
descent-override: 29.70%;
line-gap-override: 0.00%;
size-adjust: 112.12%;
}
@import url('font-fallbacks.css');

:root {
/* colors */
Expand Down Expand Up @@ -250,7 +141,11 @@ h2 {
}

b, strong {
font-weight: bolder;
font-weight: var(--font-weight-bold);
}

i, em {
font-style: italic;
}

a {
Expand All @@ -263,11 +158,12 @@ a {
}

p {
margin: 16px 0;
font-family: var(--ff-opensans);
font-weight: 600;
font-size: var(--body-font-size-m);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-l);
color: var(--clr-dark-gray);
font-size: 12px;
cursor: default
}

a:hover {
Expand Down Expand Up @@ -297,12 +193,12 @@ li {
display: none;
}


.default-content-wrapper {
color: var(--clr-text);
}

main .default-content-wrapper {
padding: 10px 20px;
width: 100%;
margin-left: auto;
margin-right: auto;
Expand Down Expand Up @@ -362,7 +258,7 @@ main .section[data-layout="3-column"] > .left-grid {
flex: 0 0 25%;
}

main .section[data-layout="3-column"] > .center-grid, main .section[data-layout="3-column"] > .right-grid {
main .section[data-layout="3-column"] > .center-grid, main .section[data-layout="3-column"] > .right-grid {
flex: 0 0 37.5%;
}

Expand Down Expand Up @@ -517,7 +413,7 @@ main .button-container .button:hover {

main .section > .default-content-wrapper > h2 {
font-size: 35px;
}
}

main .section > .default-content-wrapper > h2 ::before {
content: 'decor';
Expand All @@ -526,7 +422,7 @@ main .button-container .button:hover {
background-size: contain;
margin-right: 15px;
}

main .section > .default-content-wrapper > h2 ::after {
content: 'decor';
color: transparent;
Expand Down Expand Up @@ -558,7 +454,7 @@ main .button-container .button:hover {
}

main .section > .default-content-wrapper > h2 {
font-size: 45px;
font-size: 45px;
}
}

Expand All @@ -571,6 +467,10 @@ main .button-container .button:hover {
font-size: 14px;
}

.default-content-wrapper {
padding: 0;
}

.blog-post-template .author-container > .default-content-wrapper {
padding: 0;
}
Expand Down

0 comments on commit 761b221

Please sign in to comment.