Created
October 4, 2017 00:52
-
-
Save JamiesonRoberts/f27cd42293f8019824b102fc3cd2c34b to your computer and use it in GitHub Desktop.
Fun CSS
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
a, | |
abbr, | |
acronym, | |
address, | |
applet, | |
article, | |
aside, | |
audio, | |
b, | |
big, | |
blockquote, | |
body, | |
canvas, | |
caption, | |
center, | |
cite, | |
code, | |
dd, | |
del, | |
details, | |
dfn, | |
div, | |
dl, | |
dt, | |
em, | |
embed, | |
fieldset, | |
figcaption, | |
figure, | |
footer, | |
form, | |
h1, | |
h2, | |
h3, | |
h4, | |
h5, | |
h6, | |
header, | |
hgroup, | |
html, | |
i, | |
iframe, | |
img, | |
ins, | |
kbd, | |
label, | |
legend, | |
li, | |
main, | |
mark, | |
menu, | |
nav, | |
object, | |
ol, | |
output, | |
p, | |
pre, | |
q, | |
ruby, | |
s, | |
samp, | |
section, | |
small, | |
span, | |
strike, | |
strong, | |
sub, | |
summary, | |
sup, | |
table, | |
tbody, | |
td, | |
tfoot, | |
th, | |
thead, | |
time, | |
tr, | |
tt, | |
u, | |
ul, | |
var, | |
video { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
font-size: 100%; | |
font: inherit; | |
vertical-align: baseline | |
} | |
article, | |
aside, | |
details, | |
figcaption, | |
figure, | |
footer, | |
header, | |
hgroup, | |
main, | |
menu, | |
nav, | |
section { | |
display: block | |
} | |
body { | |
line-height: 1 | |
} | |
ol, | |
ul { | |
list-style: none | |
} | |
blockquote, | |
q { | |
quotes: none | |
} | |
blockquote:after, | |
blockquote:before, | |
q:after, | |
q:before { | |
content: ""; | |
content: none | |
} | |
table { | |
border-collapse: collapse; | |
border-spacing: 0 | |
} | |
*, | |
:after, | |
:before { | |
box-sizing: border-box | |
} | |
body, | |
html { | |
background: #eee url(../images/struckaxiom.png) repeat fixed; | |
font-family: Marcellus, Palatino Linotype, Palatino, serif; | |
font-size: 16px; | |
width: 100vw; | |
height: 100%; | |
margin: 0; | |
overflow-x: hidden | |
} | |
img { | |
width: 100% | |
} | |
h1 { | |
font-size: 2.5rem; | |
font-family: Abel, Verdana, sans-serif; | |
color: #142b3d; | |
margin: 0; | |
padding: 1rem 0; | |
letter-spacing: .1em | |
} | |
h1 span { | |
color: #333; | |
margin: 0; | |
font-size: .5em; | |
display: block | |
} | |
h2 { | |
font-size: 1.75rem; | |
font-weight: 700; | |
font-family: Abel, Verdana, sans-serif; | |
padding-bottom: .5rem | |
} | |
p { | |
line-height: 1.45em | |
} | |
p+p { | |
padding-top: 1.3rem | |
} | |
a { | |
color: #142b3d | |
} | |
a, | |
em { | |
font-weight: 800 | |
} | |
em { | |
font-style: italic | |
} | |
strong { | |
font-weight: 800 | |
} | |
main { | |
display: -ms-flexbox; | |
display: flex; | |
-ms-flex-wrap: wrap; | |
flex-wrap: wrap; | |
-ms-flex-line-pack: stretch; | |
align-content: stretch; | |
-ms-flex-pack: distribute; | |
justify-content: space-around; | |
padding: 5vh 5vw | |
} | |
.center, | |
.sidebar { | |
text-align: center | |
} | |
.sidebar { | |
min-width: 20rem; | |
max-width: 20rem; | |
padding-bottom: 1.5625rem | |
} | |
.sidebar .whiteBg { | |
background-color: #fff | |
} | |
.sidebar img { | |
padding: 1.5625rem | |
} | |
.sidebar .sticky { | |
position: -webkit-sticky; | |
position: sticky; | |
top: 0 | |
} | |
.flexContainer { | |
-ms-flex: 3; | |
flex: 3; | |
min-width: 20rem; | |
max-width: 60vw; | |
-ms-flex-preferred-size: 65%; | |
flex-basis: 65% | |
} | |
.spacer { | |
clear: both; | |
border-top: 2px solid #307991; | |
margin: 0 1.5625rem | |
} | |
.socialLinks { | |
list-style: none; | |
display: -ms-flexbox; | |
display: flex; | |
-ms-flex-wrap: wrap; | |
flex-wrap: wrap; | |
padding: 1.5625rem; | |
-ms-flex-pack: distribute; | |
justify-content: space-around | |
} | |
.socialLinks li { | |
background-size: 2.5rem; | |
background-repeat: no-repeat; | |
margin: 0 .8333333333rem .8333333333rem | |
} | |
.socialLinks li a { | |
display: block; | |
height: 2.5rem; | |
width: 2.5rem; | |
overflow: hidden; | |
text-indent: -9999px | |
} | |
.socialLinks li.facebook { | |
background-image: url(../images/facebook500.png) | |
} | |
.socialLinks li.twitter { | |
background-image: url(../images/twitter.png) | |
} | |
.socialLinks li.linkedin { | |
background-image: url(../images/linkedin.png) | |
} | |
.socialLinks li.rss { | |
background-image: url(../images/rss.png) | |
} | |
.socialLinks li.soundcloud { | |
background-image: url(../images/soundcloud.png) | |
} | |
.socialLinks li.email { | |
background-image: url(../images/email.png) | |
} | |
.socialLinks li.youtube { | |
background-image: url(../images/youtube.png) | |
} | |
.content { | |
background: rgba(228, 233, 246, .4); | |
margin-bottom: 20px; | |
border-top: 4px solid #307991; | |
border-bottom: 4px solid #309179; | |
padding: 1.5625rem | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment