scrapbook CSS
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap'); | |
:root { | |
--colors-muted:#7e28ff; | |
--colors-elevated:#a163ff; | |
--colors-sunken:#9650ff; | |
--colors-black:#4f00c5; | |
--colors-yellow:#a163ff; | |
--colors-cyan:#9650ff; | |
--colors-blue:#7e28ff; | |
--colors-text:#2d1d73; | |
--transparent:rgba(0,0,0,0); | |
--fonts-body:"Nunito Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif | |
} | |
body { | |
background-color:#dad3f4; | |
background-image:url("https://www.transparenttextures.com/patterns/az-subtle.png") | |
} | |
.nav-link { | |
font-weight:400; | |
text-transform:lowercase | |
} | |
.nav-link-home { | |
color:var(--colors-text) | |
} | |
.nav-link-about, .nav-link-github { | |
color:#5438ce | |
} | |
.header { | |
margin-bottom:2rem | |
} | |
.header-streak { | |
padding:0; | |
margin-bottom:0.5rem | |
} | |
.header-streak:before { | |
content:"(" | |
} | |
.header-streak:after { | |
content:"!)" | |
} | |
.header-streak svg { | |
display:none; | |
} | |
.header-content, .header-links { | |
display:block; | |
} | |
.badge { | |
background-color:var(--transparent); | |
color:var(--colors-text); | |
font-weight:400; | |
text-align:left | |
} | |
.post-header > .post-header-date { | |
font-weight:400; | |
text-transform:lowercase | |
} | |
.header-title-name { | |
font-size:1.5rem; | |
font-weight:400; | |
margin-top:1rem; | |
padding-bottom:4px | |
} | |
.header-title-name:after { | |
content:"'s scrapbook" | |
} | |
.header-col-1 { | |
text-align:center | |
} | |
.header-chart, .header-links svg { | |
display:none | |
} | |
.header-link-mentions:after { | |
content:"mentions" | |
} | |
.header-link-slack:after { | |
content:"slack" | |
} | |
.header-link-github:after { | |
content:"github" | |
} | |
.header-link-website { | |
padding-right:0 | |
} | |
.header-link-website:after { | |
content:"website" | |
} | |
.posts, .post { | |
background-color:var(--transparent) | |
} | |
.post-attachments { | |
float:left | |
} | |
.post-text, .header-link { | |
font-size:80%; | |
color:#5438ce; | |
-moz-transform:scale(1) rotate(0deg) translate(0px, 0px) skew(-5deg, 0deg); | |
-webkit-transform:scale(1) rotate(0deg) translate(0px, 0px) skew(-5deg, 0deg); | |
-o-transform:scale(1) rotate(0deg) translate(0px, 0px) skew(-5deg, 0deg); | |
-ms-transform:scale(1) rotate(0deg) translate(0px, 0px) skew(-5deg, 0deg); | |
transform:scale(1) rotate(0deg) translate(0px, 0px) skew(-5deg, 0deg) | |
} | |
.css { | |
color:#5438ce | |
} | |
.css-link { | |
font-family:var(--fonts-body); | |
text-transform:lowercase | |
} | |
@media (min-width:48em) { | |
.header { | |
grid-template-columns:repeat(1,1fr) | |
} | |
} | |
@media (max-width:32em) { | |
.header-col-1 { | |
display:block | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment