Skip to content

Commit

Permalink
typography update
Browse files Browse the repository at this point in the history
  • Loading branch information
izabela.horodenska committed Apr 18, 2024
1 parent 8779fb1 commit ed9a139
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 122 deletions.
65 changes: 23 additions & 42 deletions styleguide/js/typography.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,48 +15,29 @@ export const typographyTemplate = () => {
<div class="ls-example">
<h5 class="ls-example__heading">Example</h5>
<div class="ls-example__body">
<h1 class="stl-hero">HERO</h1>
<h1 class="stl-h1--light">H1 light</h1>
<h1 class="stl-h1--semibold">H1 semibold</h1>
<h1 class="stl-h1--upper-light">H1 upper-light</h1>
<h1 class="stl-h1--upper-semibold">H1 upper-semibold</h1>
<h2 class="stl-h2--light">H2 light</h2>
<h2 class="stl-h2--semibold">H2 semibold</h2>
<h2 class="stl-h2--upper-light">H2 upper-light</h2>
<h2 class="stl-h2--upper-semibold">H2 upper-semibold</h2>
<h3 class="stl-h3--light">H3 light</h3>
<h3 class="stl-h3--semibold">H3 semibold</h3>
<h3 class="stl-h3--upper-light">H3 upper-light</h3>
<h3 class="stl-h3--upper-semibold">H3 upper-semibold</h3>
<h4 class="stl-h4--light">H4 light</h4>
<h4 class="stl-h4--semibold">H4 semibold</h4>
<h4 class="stl-h4--upper-light">H4 upper-light</h4>
<h4 class="stl-h4--upper-semibold">H4 upper-semibold</h4>
<h5 class="stl-h5--light">H5 light</h5>
<h5 class="stl-h5--semibold">H5 semibold</h5>
<h5 class="stl-h5--upper-light">H5 upper-light</h5>
<h5 class="stl-h5--upper-semibold">H5 upper-semibold</h5>
<h6 class="stl-h6--light">H6 light</h6>
<h6 class="stl-h6--semibold">H6 upper-light</h6>
<h6 class="stl-h6--upper-light">H6 semibold</h6>
<h6 class="stl-h6--upper-semibold">H6 upper-semibold</h6>
<p class="stl-p--lg-light">paragraph/lg/light</p>
<p class="stl-p--lg-regular">paragraph/lg/regular</p>
<p class="stl-p--lg-semibold">paragraph/lg/semibold</p>
<p class="stl-p--md-light">paragraph/md/light</p>
<p class="stl-p--md-regular">paragraph/md/regular</p>
<p class="stl-p--md-semibold">paragraph/md/semibold</p>
<p class="stl-p--sm-light">paragraph/sm/light</p>
<p class="stl-p--sm-regular">paragraph/sm/regular</p>
<p class="stl-p--sm-semibold">paragraph/sm/semibold</p>
<p class="stl-p--sx-light">paragraph/sx/light</p>
<p class="stl-p--sx-regular">paragraph/sx/regular</p>
<p class="stl-p--sx-semibold">paragraph/sx/semibold</p>
<p class="stl-link--lg">link/lg</p>
<p class="stl-link--sm">link/sm</p>
<p class="stl-link--xs">link/xs</p>
<span class="stl-button-large"> button/large </span>
<span class="stl-button-medium"> button/medium </span>
<h1 class="stl--bold">HERO</h1>
<h1>H1 light</h1>
<h2>H2 light</h2>
<h2 class="stl--bold">H2 semibold</h2>
<h3>H3 light</h3>
<h3 class="stl--bold">H3 semibold</h3>
<h4>H4 light</h4>
<h4 class="stl--bold">H4 semibold</h4>
<h5>H5 light</h5>
<h5 class="stl--bold">H5 semibold</h5>
<h6>H6 light</h6>
<h6 class="stl--bold">H6 light</h6>
<p>paragraph/light</p>
<p class="stl--bold">paragraph/bold</p>
<span> span/light </span>
<span class="stl--bold "> span/bold </span>
</div>
</div>
</div>
Expand Down
20 changes: 1 addition & 19 deletions styleguide/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -189,24 +189,6 @@

/* typography */

.stl-hero {
font-size: 80px;
}

.stl-hero {
font-size: 48px;
font-style: normal;
font-weight: 300;
line-height: 120%;
text-transform: uppercase;
}

.stl-h1--light, .stl-h1--upper-light {
font-weight: 300;
font-style: normal;
line-height: 120%;
}

.stl-h1--semibold {
.stl--bold {
font-weight: 600;
}
112 changes: 51 additions & 61 deletions styleguide/styleguide.css
Original file line number Diff line number Diff line change
@@ -1,62 +1,52 @@
body {
display: block !important;
}

.root {
display: flex;
flex-direction: row;
height: 100vh;
}

.nav-box {
display: flex;
flex-basis: 50%;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}

.nav-box__link {
padding: 15px;
font-size: 2.5rem;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
text-decoration: none;
}

.page-list {
display: flex;
flex-direction: column;
}

.page-list-item {
padding: 10px;
font-size: 1.2rem;
color: #fff;
text-align: center;
text-decoration: none;
}

.nav-box--styleguide:hover .nav-box__link {
border: 2px solid #fff;
}

.nav-box--styleguide {
background-color: #003220;
}

body {

display: block !important;
}

.root {
display: flex;
flex-direction: row;
height: 100vh;
}

.nav-box {
display: flex;
flex-basis: 50%;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}

.nav-box__link{
padding: 15px;
font-size: 2.5rem;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
}

.nav-box__link {
text-decoration: none;
}

.page-list {
display: flex;
flex-direction: column;
}

.page-list-item {
padding: 10px;
font-size: 1.2rem;
color: #fff;
text-align: center;
text-decoration: none;
}

.nav-box--styleguide:hover {
cursor: pointer;

.nav-box__link:hover {
border: 2px solid #fff;
}
}

.nav-box--styleguide {
background-color: #003220;
text-decoration: none;
}

.nav-box--pages{
background-color: #727272;;
}
.nav-box--pages {
background-color: #727272;
}

0 comments on commit ed9a139

Please sign in to comment.