scrapbook CSS

style.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
  }
}