Anthony's Hack Club Scrapbook CSS

scrapbook-css.css

/**************************************************
 *                                                *
 * Name: scrapbook-css.css                        *
 * Description: Anthony's Hack Club Scrapbook CSS *
 * Date: June 20, 2020                            *
 * Created by: Anthony Kung                       *
 * Business URL: https://hailiga.org/anthonykung  *
 * Author URL: https://anthonykung.com            *
 *                                                *
 **************************************************/

/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');

/* Global Variables */
:root {
  --anthonian-dark-blue: #009eff;
  --anthonian-light-blue: #02ddf7;
  --anthonian-primary-color: lightcyan;
  --anthonian-anchor-active: tomato;
  --anthonian-anchor: lightsalmon;
  --anthonian-anchor-hover: salmon;
  --anthonian-body-background: CornSilk;
  --anthonian-header-background: CornSilk;
  --anthonian-element-background: LightGoldenRodYellow;
  --anthonian-element-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.1);
  --anthonian-element-border-radius: 8px;
  --anthonian-post-background: lightcyan; /* Alternative: Aquamarine */
  --anthonian-pink: DeepPink;
  --anthonian-font-family: 'Varela Round', sans-serif;
  --anthonian-secondary-font-family: "Montserrat", Sans-serif;
  --anthonian-primary-box-shadow: 0 4px 8px 0 lightcyan, 0 6px 20px 0 lightcyan;
  --anthonian-box-shadow-pink: 0 4px 8px 0 hotpink, 0 6px 20px 0 hotpink;
  --anthonian-box-shadow-blue: 0 4px 8px 0 cornflowerblue, 0 6px 20px 0 cornflowerblue;
  --anthonian-button-padding: 5% 10%;
  --anthonian-button-border-radius: 8px;
  --anthonian-vibrate-animation-duration: 0.5s;
  --anthonian-vibrate-animation-iteration-count: infinite;
}

/* Begin Animation */

@keyframes anthonian-vibrate-animation {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

/* End Animation */

/* Begin CSS */

body {
  background-color: var(--anthonian-body-background);
}

a {
  color: var(--anthonian-anchor) !important;
  transition: all .3s;
}

a:hover {
  color: var(--anthonian-anchor-hover) !important;
  animation: anthonian-vibrate-animation;
  animation-duration: var(--anthonian-vibrate-animation-duration);
  animation-iteration-count: var(--anthonian-vibrate-animation-iteration-count);
}

.anthonian-h2 {
  font-family: "Varela Round", Sans-serif;
  font-size: 36px;
  font-weight: 300;
  text-transform: capitalize;
  line-height: 1.2em;
}

.nav {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.container {

}

header.header {
  background-color: var(--anthonian-header-background);
  margin-bottom: 5%;
}

img.header-title-avatar:hover {
  animation: anthonian-vibrate-animation;
  animation-duration: var(--anthonian-vibrate-animation-duration);
  animation-iteration-count: var(--anthonian-vibrate-animation-iteration-count);
}

svg.anthonian-svg-contents {
  width: 100%;
  height: auto;
}

.react-calendar-heatmap {
  background-color: var(--anthonian-primary-color);
  border-radius: var(--anthonian-element-border-radius);
  box-shadow: var(--anthonian-element-box-shadow);
}

.posts {
  background-color: transparent;
}

.post {
  border-radius: var(--anthonian-element-border-radius);
  background-color: var(--anthonian-post-background);
  box-shadow: var(--anthonian-element-box-shadow);
  opacity: 1 !important;
  margin: 2%;
  width: auto;
}

.post-header {

}

.post-text {

}

.post-attachments {

}

/* End CSS */