Created
September 21, 2020 15:57
-
-
Save thatDaiwikKashyap/2808a14f200f89c88eef37b1be39eaac to your computer and use it in GitHub Desktop.
CSS uploaded by scrapbook.hackclub.com/customizer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
:root { | |
--colors-one: #9be9a8; | |
--colors-two: #40c463; | |
--colors-three: #30a14e; | |
--colors-four: #216e39; | |
--anthonian-dark-blue: #009eff; | |
--anthonian-light-blue: #02ddf7; | |
--anthonian-primary-color: Blue; | |
--anthonian-anchor-active: Blue; | |
--anthonian-anchor: papayawhip; | |
--anthonian-anchor-hover: lime; | |
--anthonian-body-background: lime; | |
--anthonian-header-background: lime; | |
--anthonian-element-background: lime; | |
--anthonian-element-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.1); | |
--anthonian-element-border-radius: 8px; | |
--anthonian-post-background: lime; /* Alternative: Aquamarine */ | |
--anthonian-pink: lime; | |
--anthonian-font-family: 'Varela Round', sans-serif; | |
--anthonian-secondary-font-family: "Montserrat", Sans-serif; | |
--anthonian-primary-box-shadow: 0 4px 8px 0 lime, 0 6px 20px 0 lime; | |
--anthonian-box-shadow-pink: 0 4px 8px 0 lime, 0 6px 20px 0 lime; | |
--anthonian-box-shadow-blue: 0 4px 8px 0 lime, 0 6px 20px 0 lime; | |
--anthonian-button-padding: 5% 10%; | |
--anthonian-button-border-radius: 8px; | |
--anthonian-vibrate-animation-duration: 0.5s; | |
--anthonian-vibrate-animation-iteration-count: infinite; | |
} | |
@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); | |
} | |
} | |
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 { | |
color: lime; | |
font-family: "Varela Round", Sans-serif; | |
font-size: 36px; | |
font-weight: 300; | |
text-transform: capitalize; | |
line-height: 1.2em; | |
} | |
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); | |
} | |
@media (prefers-color-scheme: dark) { | |
:root { | |
--colors-text: White; | |
--colors-background: Black; | |
--colors-sheet: LavenderBlush; | |
--colors-elevated:coral; | |
--colors-sunken: Aqua; | |
} | |
} | |
@keyframes rotate { | |
0% { | |
transform: rotate(360deg) | |
} | |
50%{ | |
transform: rotate(0deg) | |
} | |
100% { | |
transform: rotate(360deg) | |
} | |
} | |
.header-title-avatar { | |
animation: rotate 5s infinite; | |
} | |
.nav { | |
padding: 0 16px; | |
display: flex; | |
align-items: center; | |
width: 100%; | |
} | |
.nav-link { | |
margin-left: 16px; | |
color: var(--colors-muted); | |
text-decoration: none; | |
transition: 0.125s color ease-in-out; | |
} | |
.nav-link:hover, | |
.nav-link:focus { | |
color: var(--colors-cyan); | |
} | |
.nav-link-home { | |
font-weight: bold; | |
text-transform: uppercase; | |
letter-spacing: 0.03em; | |
margin-right: auto; | |
font-size: 20px; | |
-webkit-text-fill-color: currentColor; | |
} | |
.nav-link-about { | |
margin-left: auto; | |
} | |
.nav-link-github { | |
line-height: 0; | |
} | |
.container { | |
max-width: 72rem; | |
padding: 1rem 1rem 2rem; | |
margin: auto; | |
} | |
.header { | |
display: grid; | |
grid-gap: 16px; | |
width: 100%; | |
} | |
@media (min-width: 48em) { | |
.nav { | |
padding: 0 32px; | |
} | |
.nav-link-home { | |
margin-left: 12px; | |
} | |
.header { | |
grid-template-columns: repeat(3, 1fr); | |
} | |
} | |
@media (max-width: 32em) { | |
.header { | |
margin-bottom: 16px; | |
} | |
.header-col-1 { | |
display: flex; | |
align-items: center; | |
margin-top: 24px; | |
} | |
} | |
.header-title-avatar { | |
border-radius: 64px; | |
margin-right: 16px; | |
} | |
.header-title-name { | |
margin: 0; | |
flex: 1 1 auto; | |
font-size: 48px; | |
line-height: 1; | |
word-break: break-all; | |
word-wrap: break-word; | |
text-transform: uppercase; | |
text-decoration: underline; | |
} | |
.badge { | |
background-color: var(--colors-yellow); | |
color: Black; | |
display: inline-flex; | |
align-items: center; | |
font-weight: bold; | |
border-radius: 999px; | |
text-align: center; | |
white-space: nowrap; | |
} | |
.header-streak { | |
padding: 4px 16px 4px 0; | |
margin: 8px 12px 8px 0; | |
max-height: 28px; | |
} | |
.header-streak-zero { | |
display: none; | |
} | |
.header-content { | |
display: flex; | |
align-items: center; | |
flex-wrap: wrap; | |
} | |
.header-links { | |
display: flex; | |
align-items: center; | |
} | |
.header-link { | |
color: var(--colors-blue); | |
transition: 0.125s color ease-in-out; | |
padding-right: 8px; | |
line-height: 0; | |
} | |
.header-link:hover, | |
.header-link:focus { | |
color: var(--colors-cyan); | |
} | |
.header-content audio { | |
margin-top: 6px; | |
margin-bottom: 12px; | |
} | |
.header-chart svg { | |
max-width: 100%; | |
max-height: 266px; | |
overflow-y: hidden; | |
} | |
.react-calendar-heatmap text { | |
fill: var(--colors-muted); | |
font-size: 6px; | |
} | |
.react-calendar-heatmap .color-empty { | |
fill: var(--colors-sheet); | |
} | |
.react-calendar-heatmap .color-1 { | |
fill: var(--colors-one); | |
} | |
.react-calendar-heatmap .color-2 { | |
fill: var(--colors-two); | |
} | |
.react-calendar-heatmap .color-3 { | |
fill: var(--colors-three); | |
} | |
.react-calendar-heatmap .color-4 { | |
fill: var(--colors-four); | |
} | |
.mention { | |
display: inline-flex; | |
align-items: baseline; | |
text-decoration: none; | |
} | |
.mention-avatar { | |
border-radius: 50%; | |
margin-right: 4px; | |
align-self: flex-end; | |
} | |
.headline, | |
.header-webring h2 { | |
color: var(--colors-muted); | |
letter-spacing: 0.08em; | |
text-transform: uppercase; | |
} | |
.header-webring-mentions { | |
display: grid; | |
grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); | |
align-items: start; | |
margin: 0 -6px 12px; | |
} | |
.header-webring-mention { | |
padding: 6px; | |
max-width: 100%; | |
border-radius: 9px; | |
flex-direction: column; | |
place-items: center; | |
position: relative; | |
color: var(--colors-text); | |
font-size: 16px; | |
line-height: 1; | |
text-align: center; | |
word-break: break-all; | |
word-wrap: break-word; | |
transition: 0.125s all ease-in-out; | |
} | |
.header-webring-mention:hover, | |
.header-webring-mention:focus { | |
background-color: var(--colors-purple); | |
color: var(--colors-white); | |
box-shadow: 0 0 9px var(--colors-pink); | |
outline: none; | |
} | |
.header-webring-mention .mention-avatar { | |
width: 48px; | |
height: 48px; | |
margin: 0 0 6px; | |
align-self: center; | |
} | |
.header-webring-mention svg { | |
color: var(--colors-muted); | |
position: absolute; | |
right: 8px; | |
top: -2px; | |
} | |
.header-webring-mention:hover svg, | |
.header-webring-mention:focus svg { | |
color: var(--colors-cyan); | |
} | |
.posts { | |
display: grid; | |
grid-gap: 1px; | |
border-radius: 16px; | |
overflow: hidden; | |
background-color: var(--colors-sunken); | |
} | |
@media (min-width: 32em) { | |
.posts { | |
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); | |
} | |
} | |
.post { | |
padding: 16px; | |
background-color: var(--colors-elevated); | |
position: relative; | |
width: 100%; | |
} | |
.post-header { | |
color: inherit; | |
text-decoration: none; | |
display: flex; | |
align-items: center; | |
margin-bottom: 8px; | |
line-height: 1; | |
} | |
.post-header-avatar { | |
width: 48px; | |
height: 48px; | |
border-radius: 24px; | |
margin-right: 8px; | |
} | |
.post-header-name { | |
font-size: 16px; | |
word-break: break-all; | |
word-wrap: break-word; | |
display: flex; | |
align-items: center; | |
padding-bottom: 3px; | |
} | |
.post-header-css { | |
color: var(--colors-pink); | |
} | |
.post-header-audio { | |
color: var(--colors-orange); | |
} | |
.post-header-streak { | |
margin-right: 4px; | |
margin-left: 8px; | |
padding-left: 10px; | |
font-size: 12px; | |
max-height: 20px; | |
} | |
.post-header-date { | |
color: var(--colors-muted); | |
font-family: 14px; | |
} | |
.post-header > .post-header-date { | |
margin-left: 0; | |
color: var(--colors-text); | |
font-size: 18px; | |
font-weight: bold; | |
} | |
.post-text { | |
font-size: 18px; | |
word-wrap: break-word; | |
white-space: pre-line; | |
} | |
.post-emoji { | |
object-fit: contain; | |
} | |
.post-text a { | |
color: var(--colors-blue); | |
} | |
a.post-text-mention { | |
color: var(--colors-purple); | |
} | |
.post-text pre, | |
.post-text code { | |
background-color: var(--colors-background); | |
border-radius: 3px; | |
color: var(--colors-purple); | |
font-family: var(--fonts-mono); | |
font-size: 0.9em; | |
white-space: pre-wrap; | |
padding: 0 0.25em; | |
} | |
.post-attachments { | |
display: grid; | |
grid-template-columns: repeat(2, 1fr); | |
grid-gap: 8px; | |
align-items: center; | |
margin-top: 16px; | |
} | |
.post-attachment { | |
width: 100%; | |
border-radius: 6px; | |
overflow: hidden; | |
text-align: center; | |
} | |
a.post-attachment { | |
line-height: 0; | |
} | |
.post-attachment img { | |
height: 100%; | |
} | |
.post-attachment img.is-loading { | |
filter: blur(15px); | |
} | |
.post-attachment img, | |
video.post-attachment { | |
border-radius: 6px; | |
background-color: var(--colors-background); | |
max-width: 100%; | |
max-height: 384px; | |
object-fit: contain; | |
} | |
video.post-attachment, | |
audio.post-attachment, | |
a.post-attachment:first-child:last-child { | |
grid-column: span 2; | |
} | |
.post-reactions { | |
display: flex; | |
flex-wrap: wrap; | |
margin-top: 16px; | |
margin-bottom: -12px; | |
} | |
.post-reaction { | |
display: inline-block; | |
text-decoration: none; | |
font-size: 20px; | |
margin-right: 12px; | |
margin-bottom: 12px; | |
width: 36px; | |
height: 36px; | |
line-height: 36px; | |
text-align: center; | |
background-color: var(--colors-background); | |
border: 1px dashed var(--colors-sunken); | |
border-radius: 24px; | |
transition: 0.125s background-color ease-in-out; | |
} | |
.post-reaction:hover, | |
.post-reaction:focus { | |
background-color: var(--colors-cyan); | |
border-color: var(--colors-blue); | |
} | |
.post-reaction img { | |
margin: 5px; | |
border-radius: 4px; | |
} | |
.css { | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
color: var(--colors-muted); | |
margin-top: 32px; | |
} | |
.css-icon { | |
margin-left: -4px; | |
margin-right: 8px; | |
} | |
.css-link { | |
flex: 1 1 auto; | |
word-wrap: break-word; | |
word-break: break-all; | |
color: inherit; | |
font-size: 14px; | |
font-family: var(--fonts-mono); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment