Last active
October 10, 2015 16:38
-
-
Save kidGodzilla/39a651dced3dc2fe84ea to your computer and use it in GitHub Desktop.
Example CSS Styles for the Ember 2 blog example application
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
@import url(//fonts.googleapis.com/css?family=Lato:300,400,300italic,400italic); | |
@import url(//fonts.googleapis.com/css?family=Merriweather:300italic,300,700,700italic); | |
@import url(//fonts.googleapis.com/css?family=Montserrat:400,700); | |
body { | |
width: 60%; | |
margin-left: 20%; | |
font-family: 'Merriweather', serif; | |
font-weight: 300; | |
font-size: 18px; | |
} | |
p { | |
line-height: 1.75; | |
margin-top: 10px; | |
} | |
h1, h2, h3, h4, h5, h6 { | |
font-family: Montserrat, sans-serif; | |
font-weight: 700; | |
} | |
h1 { | |
font-size: 2.5em; | |
line-height: 1.5; | |
margin-left: -2px; | |
} | |
h2 { | |
font-size: 1.75em; | |
line-height: 1; | |
margin-bottom: 0; | |
margin-left: -1px; | |
} | |
h3 { | |
font-family: Lato, sans-serif; | |
font-size: 1.5em; | |
line-height: 0; | |
letter-spacing: 1px; | |
font-weight: 300; | |
opacity: 0.6; | |
margin-left: -2px; | |
} | |
h4 { | |
font-size: 1.25em; | |
line-height: 1; | |
margin-bottom: 0; | |
} | |
.pull-right { | |
float: right; | |
} | |
a { | |
color: #c0392b; | |
text-decoration: none; | |
} | |
a:hover { | |
color: #e74c3c; | |
} | |
.menu { | |
margin-top: 60px; | |
} | |
button, .menu a { | |
font-family: Lato, sans-serif; | |
border: 1px solid #c0392b; | |
text-decoration: none; | |
border-radius: 18px; | |
padding: 7px 32px; | |
background: #fff; | |
color: #c0392b; | |
} | |
.menu a { | |
margin: 10px; | |
} | |
button:last-of-type, | |
.menu a:last-of-type { | |
margin-right: 0; | |
} | |
button:hover, | |
.menu a:hover{ | |
border-color: #e74c3c; | |
color: #fff; | |
background-color: #e74c3c; | |
} | |
textarea:focus, input:focus, button:focus { | |
outline: 0; | |
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); | |
} | |
input[type=text], textarea { | |
width: calc(100% - 5px); | |
font-size: 0.75em; | |
padding: 10px; | |
line-height: 1.5; | |
margin: 10px 0; | |
} | |
textarea { | |
margin-top: 10px; | |
} | |
label { | |
display: block; | |
font-family: Montserrat, sans-serif; | |
font-weight: bold; | |
font-size: 11px; | |
line-height: 1; | |
margin-bottom: 0; | |
} | |
#NewPost input, | |
#NewPost textarea { | |
width: calc(100% - 23px); | |
} | |
article > a { | |
color: #000; | |
text-decoration: none; | |
} | |
h1 { | |
display: inline-block; | |
text-shadow: | |
2px 2px 0 #fff, | |
-2px -1px 0 #fff, | |
1px -2px 0 #fff, | |
-2px 1px 0 #fff, | |
1px 1px 0 #fff; | |
} | |
h1::first-letter { | |
margin-left: -3px; | |
} | |
h1::before { | |
content: ''; | |
width: 100%; | |
display: inline-block; | |
border-bottom: 3px solid #c0392b; | |
/* margin: 0; */ | |
float: left; | |
position: relative; | |
top: calc(1em + 12px); | |
z-index: -1; | |
} | |
h1:hover::before { | |
border-bottom: 3px solid #e74c3c; | |
} | |
.mtm3 { | |
margin-top: -3px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment