Skip to content

Instantly share code, notes, and snippets.

@zachlatta
Forked from Anthonykung/scrapbook-css.css
Last active June 23, 2020 16:21
Show Gist options
  • Save zachlatta/e7a34523375401911ff4d507c71cef8c to your computer and use it in GitHub Desktop.
Save zachlatta/e7a34523375401911ff4d507c71cef8c to your computer and use it in GitHub Desktop.
Anthony's Hack Club Scrapbook 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 */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment