Skip to content

Instantly share code, notes, and snippets.

@sporeball
Last active April 30, 2021 22:48
Show Gist options
  • Save sporeball/2138c948447ccd3862ad066d848afdd3 to your computer and use it in GitHub Desktop.
Save sporeball/2138c948447ccd3862ad066d848afdd3 to your computer and use it in GitHub Desktop.
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