CSS uploaded by scrapbook.hackclub.com/customizer

style.css

@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@500&display=swap');

@font-face {
  font-family: 'HK Grotesk';
  src: url("https://cloud-9yfp7521y.vercel.app/0hkgrotesk-regular-webfont.woff");
}

@font-face {
  font-family: 'HK Grotesk Bold';
  src: url("https://cloud-9yfp7521y.vercel.app/1hkgrotesk-bold-webfont.woff");
}

@font-face {
  font-family: 'HK Grotesk Extra Bold';
  src: url("https://cloud-9yfp7521y.vercel.app/2hkgrotesk-extrabold-webfont.woff");
} 

:root {
  --colors-background: #1E2F33;
  --colors-text: #F9F5DC;
  --colors-secondary: #7BB7A8;
  --colors-elevated: #2B4F45;
  --colors-accent: #CC4C3E;
  --colors-hover: #C6C65D;
  --colors-link: rgba(204, 76, 62, 0.7);
  --colors-link-hover: rgba(198, 198, 93, 0.7);
  --fonts-body: 'HK Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI';
  --fonts-bold: 'HK Grotesk Bold', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI';
}

* {
  letter-spacing: 0.01em;
}

.post-text a {
  color: var(--colors-text) !important;
  font-family: var(--fonts-bold);
  text-decoration: none;
  padding: 0 3px;
  background-color: var(--colors-link);
  transition: background-color 0.15s;
}

.post-text a:hover {
  background-color: var(--colors-link-hover) !important;
}

.header-streak {
  background-color: var(--colors-accent);
  color: var(--colors-text);
  font-family: var(--fonts-bold);
}

.header-title-name {
  display: inline-block;
  background: var(--colors-secondary);
  font-family: 'Fraunces', serif;
  color: var(--colors-background);
  padding: 14px 12px;
  border-radius: 2px;
  transform: rotate(-6deg);
  margin: 10px 0px;
  box-shadow: 0 3px 10px #000;
}

.header-title-name:before {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 99%;
  box-shadow: 0 3px 3px var(--colors-background);
  background-color: var(--colors-accent);
  border-width: 1.2px 0 0 0;
  border-style: solid;
  border-color: white;
}

.header-link {
  color: var(--colors-secondary);
}

.header-link:hover {
  color: var(--colors-hover);
}

.header-chart {
  background-color: var(--colors-elevated);
  color: var(--colors-text);
  box-shadow: 1px 3px 3px #000;
  margin-bottom: 20px;
}

.header-chart:before {
  content: "";
  position: absolute;
  width: auto;
  border-width: 28px 20px 0 0;
  border-style: solid;
  border-color: var(--colors-background) var(--colors-secondary);
  box-shadow: 0 5px 5px var(--colors-background);
}

.react-calendar-heatmap:before {
  padding-top: 20px;
}

.header-webring h2 {
  color: var(--colors-text);
  margin-bottom: 20px;
}

.header-webring-mention {
  background-color: var(--colors-secondary);
  font-family: var(--fonts-bold);
  font-size: 14px;
  color: var(--colors-background);
  border-radius: 0 !important;
  padding-top: 27px;
  margin: 2px;
  box-shadow: 0 3px 10px #000;
}

.header-webring-mention:before {
  content: "";
  position: absolute;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 99%;
  border-width: 1.2px 0 0 0;
  border-style: solid;
  border-color: #fff;
  box-shadow: 0 3px 3px var(--colors-background);
}

.header-webring-mention:nth-child(odd):before {
  background-color: var(--colors-accent);
}

.header-webring-mention:before {
  background-color: var(--colors-hover);
}

.header-webring-mention:hover {
  box-shadow: none;
  background-color: var(--colors-hover);
}

.nav-link {
  color: var(--colors-secondary);
}

.nav-link:hover {
  color: var(--colors-hover);
}

.post-header {
  font-family: 'Fraunces';
  background: var(--colors-accent);
  padding: 10px;
  display: inline-block;
  transform: rotate(-6deg);
  box-shadow: 1px 3px 3px var(--colors-background);
}

.posts {
  border-radius: 0 !important;
  background: var(--colors-background);
}

.post {
  position: relative;
  margin: 5px;
  width: auto;
  box-shadow: -2px 2px 4px #000;
}

.post-attachment {
  border-radius: 0px !important;
  
}

.post:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 20px 28px 0;
  border-style: solid;
  border-color: var(--colors-background) var(--colors-background) var(--colors-secondary) var(--colors-secondary);
  box-shadow: 0 5px 5px var(--colors-background)
}
.post-text {
  font-size: 16px;
}