A Pen by Mohamed Cherif Bouchelaghem on CodePen.
Last active
July 19, 2020 09:40
-
-
Save cherifGsoul/76cc5ac365de0d621d96c96935a03f6a to your computer and use it in GitHub Desktop.
Vertical rhythm
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
header.top-bar | |
.top-bar-brand | |
a.brand(href="#") brand | |
aside.sidebar-nav | |
main.main | |
h1 Typography | |
h2 Headings | |
h1 h1 The quick fox jumps over the lazy dog | |
h2 h2 The quick fox jumps over the lazy dog | |
h3 h3 The quick fox jumps over the lazy dog | |
h4 h4 The quick fox jumps over the lazy dog | |
h5 h5 The quick fox jumps over the lazy dog | |
h6 h6 The quick fox jumps over the lazy dog | |
h2 Paragraphs <p> | |
p I'm baby occupy tumeric intelligentsia, sartorial banh mi try-hard green juice taxidermy blue bottle cliche chillwave chicharrones. Sustainable marfa actually, lumbersexual umami everyday carry lyft. Ugh four dollar toast tousled listicle heirloom, butcher actually vegan. Pork belly gastropub tilde crucifix butcher. Four loko pickled messenger bag, quinoa brunch locavore narwhal wayfarers bespoke hella PBR&B. Crucifix fingerstache shoreditch pork belly lumbersexual gluten-free dreamcatcher, edison bulb poutine quinoa. | |
h2 Small | |
small I'm baby occupy tumeric intelligentsia, sartorial banh mi try-hard green juice taxidermy blue bottle cliche chillwave chicharrones. Sustainable marfa actually, lumbersexual umami everyday carry lyft. Ugh four dollar toast tousled listicle heirloom, butcher actually vegan. Pork belly gastropub tilde crucifix butcher. Four loko pickled messenger bag, quinoa brunch locavore narwhal wayfarers bespoke hella PBR&B. Crucifix fingerstache shoreditch pork belly lumbersexual gluten-free dreamcatcher, edison bulb poutine quinoa. | |
script(src="http://files.keyes.ie/things/baseliner/baseliner-latest.js") |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//baseliner = new Baseliner({'gridHeight': 24, 'gridOffset': 0}); | |
// |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
margin: 0; | |
padding: 0; | |
} | |
body, html { | |
font-size: 16px; | |
font-family: Helvetica Neue,Helvetica,Arial,sans-serif; | |
line-height: 1.5; | |
} | |
// Typography | |
// https://www.modularscale.com/?16&px&1.125 | |
h1 { | |
font-size: 28.833px; | |
line-height: 48px; | |
margin-top: 72px; | |
margin-bottom: 24px; | |
} | |
h2 { | |
font-size: 25.629px; | |
line-height: 48px; | |
margin-bottom: 24px; | |
margin-top: 48px; | |
} | |
h3 { | |
font-size: 22.781px; | |
margin-top: 24px; | |
margin-bottom: 24px; | |
line-height: 36px; | |
} | |
h4 { | |
font-size: 20.25px; | |
margin-top: 24px; | |
line-height: 24px; | |
} | |
h5 { | |
font-size: 18px; | |
margin-top: 24px; | |
line-height: 24px; | |
} | |
h6 { | |
margin-top: 24px; | |
font-size: 1em; | |
} | |
p { | |
font-size: 16px; | |
font-weight: 300; | |
letter-spacing: .2px; | |
} | |
small { | |
font-size: 0.889em; | |
font-weight: 300; | |
} | |
a { | |
color: #000; | |
text-decoration: none; | |
} | |
//Components | |
// top bar | |
.top-bar { | |
background-color: #ccc; | |
height: 48px; | |
display: flex; | |
justify-items: center; | |
&-brand { | |
align-self: center; | |
} | |
.brand { | |
padding: .5rem; | |
} | |
} | |
.main { | |
width: 370px; | |
margin: auto; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment