Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/* 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: rgb(98, 49, 211);
--anthonian-anchor-active: rgb(0, 174, 255);
--anthonian-anchor: rgb(116, 165, 255);
--anthonian-anchor-hover: rgb(255, 255, 255);
--anthonian-body-background: rgb(87, 0, 145);
--anthonian-header-background: rgb(87, 0, 145);
--anthonian-element-background: rgb(129, 33, 86);
--anthonian-element-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
--anthonian-element-border-radius: 8px;
--anthonian-post-background: rgb(129, 131, 255);
--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 0.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