-
-
Save dubiels/31161d9cbc879f980d3e0056b0815cb4 to your computer and use it in GitHub Desktop.
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
@font-face { | |
font-family: Baloo\ 2; | |
font-style: normal; | |
font-weight: 400; | |
font-display: swap; | |
src: local("Baloo 2 Regular"), local("Baloo2-Regular"), url(https://fonts.gstatic.com/s/baloo2/v1/wXKrE3kTposypRyd51jcAM4olXc.woff2) format("woff2"); | |
unicode-range: U+00??, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff, U+fffd | |
} | |
@font-face { | |
font-family: Baloo\ 2; | |
font-style: normal; | |
font-weight: 700; | |
font-display: swap; | |
src: local("Baloo 2 Bold"), local("Baloo2-Bold"), url(https://fonts.gstatic.com/s/baloo2/v1/wXKuE3kTposypRyd7-P5FeMKmF0xvdg.woff2) format("woff2"); | |
unicode-range: U+00??, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff, U+fffd | |
} | |
@font-face { | |
font-family: Shrikhand; | |
font-style: normal; | |
font-weight: 400; | |
font-display: swap; | |
src: local("Shrikhand Regular"), local("Shrikhand-Regular"), url(https://fonts.gstatic.com/s/shrikhand/v5/a8IbNovtLWfR7T7bMJwrA4KR8TtctQ.woff2) format("woff2"); | |
unicode-range: U+00??, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff, U+fffd | |
} | |
*, | |
:after, | |
:before { | |
margin: 0; | |
padding: 0; | |
-webkit-box-sizing: inherit; | |
box-sizing: inherit | |
} | |
::selection { | |
color: var(--colors-purple); | |
background: var(--colors-white); | |
} | |
:root { | |
color-scheme: light dark; | |
--fonts-body: "Baloo 2", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; | |
--fonts-display: "Shrikhand", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; | |
--fonts-mono: "SF Mono", "Roboto Mono", Menlo, Consolas, monospace; | |
--colors-darker: #141414; | |
--colors-dark: #20201d; | |
--colors-darkless: #2b2b27; | |
--colors-black: #1d201d; | |
--colors-slate: #3b413a; | |
--colors-muted: #777f76; | |
--colors-smoke: #d5d8d5; | |
--colors-snow: #f5f5f4; | |
--colors-white: #fff; | |
--colors-pink: #ff62dc; | |
--colors-orange: #ff5b00; | |
--colors-yellow: #f7ff00; | |
--colors-green: #28ff00; | |
--colors-cyan: #0ff; | |
--colors-blue: #00a4ff; | |
--colors-purple: #5060F0; | |
--colors-red: #ec3750; | |
--colors-text: var(--colors-slate); | |
--colors-background: var(--colors-darker); | |
--colors-sheet: var(--colors-snow); | |
--colors-elevated: var(--colors-white); | |
--colors-sunken: var(--colors-smoke); | |
--colors-progress: var(--colors-red) | |
} | |
html { | |
height: 100%; | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box | |
} | |
body { | |
position: relative; | |
min-height: 100%; | |
margin: 0; | |
line-height: 1.5; | |
font-family: var(--fonts-body); | |
font-weight: 400; | |
scroll-behavior: smooth; | |
background-image: url("https://i.imgur.com/aADEYCh.gif"); | |
color: var(--colors-text); | |
} | |
img { | |
max-width: 100% | |
} | |
.react-calendar-heatmap { | |
max-width: 300px | |
} | |
.react-calendar-heatmap-month-label, | |
.react-calendar-heatmap-weekday-label { | |
font-size: 12px | |
} | |
.__react_component_tooltip { | |
pointer-events: auto!important | |
} | |
:root { | |
--colors-one: #ccceff; | |
--colors-two: #8e91f5; | |
--colors-three: #6467d9; | |
--colors-four: #3135b0 | |
} | |
/* @media (prefers-color-scheme:dark) { | |
:root { | |
--colors-text: var(--colors-white); | |
--colors-background: var(--colors-darker); | |
--colors-sheet: var(--colors-darkless); | |
--colors-elevated: var(--colors-darkless); | |
--colors-sunken: var(--colors-darker) | |
} | |
} */ | |
.nav { | |
padding: 0 16px; | |
display: flex; | |
align-items: center; | |
width: 100% | |
} | |
.nav-link { | |
margin-left: 16px; | |
color: var(--colors-muted); | |
text-decoration: none; | |
-webkit-transition: color .125s ease-in-out; | |
transition: color .125s ease-in-out | |
} | |
.nav-link:focus, | |
.nav-link:hover { | |
color: var(--colors-purple) | |
} | |
.nav-link-home { | |
font-weight: 700; | |
text-transform: uppercase; | |
letter-spacing: .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%; | |
color: var(--colors-white); | |
} | |
@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 | |
} | |
.badge { | |
background-color: var(--colors-purple); | |
color: var(--colors-white); | |
display: inline-flex; | |
align-items: center; | |
font-weight: 700; | |
border-radius: 999px; | |
text-align: center; | |
white-space: nowrap | |
} | |
.badge:hover { | |
background-color: var(--colors-blue); | |
-webkit-transform: scale(1.0625); | |
-moz-transform: scale(1.0625); | |
-ms-transform: scale(1.0625); | |
transform: scale(1.0625); | |
} | |
.header-streak { | |
padding: 4px 16px 4px 0; | |
margin: 8px 12px 8px 0; | |
max-height: 28px | |
} | |
.header-streak-zero { | |
display: none!important | |
} | |
.header-content { | |
flex-wrap: wrap | |
} | |
.header-content, | |
.header-links { | |
display: flex; | |
align-items: center | |
} | |
.header-link { | |
color: var(--colors-smoke); | |
-webkit-transition: color .125s ease-in-out; | |
transition: color .125s ease-in-out; | |
padding-right: 8px; | |
line-height: 0 | |
} | |
.header-link:focus, | |
.header-link:hover { | |
color: var(--colors-purple) | |
} | |
.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-white); | |
} | |
.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 div:first-child { | |
border-radius: 50%; | |
overflow: hidden; | |
margin-right: 4px | |
} | |
.post-text-mention div:first-child { | |
width: 24px; | |
height: 24px; | |
margin-right: 4px!important; | |
align-self: flex-end | |
} | |
.header-webring h2, | |
.headline { | |
color: var(--colors-muted); | |
letter-spacing: .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; | |
-webkit-transition: all .125s ease-in-out; | |
transition: all .125s ease-in-out | |
} | |
.header-webring-mention:focus, | |
.header-webring-mention:hover { | |
background-color: var(--colors-purple); | |
color: var(--colors-white); | |
-webkit-box-shadow: 0 0 9px var(--colors-pink); | |
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:focus svg, | |
.header-webring-mention:hover svg { | |
color: var(--colors-cyan) | |
} | |
.posts { | |
display: grid; | |
grid-gap: 0px; | |
border-radius: 25px; | |
overflow: hidden; | |
background-color: var(--colors-darker); | |
} | |
@media (min-width:32em) { | |
.posts { | |
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) | |
} | |
} | |
.post { | |
padding: 16px; | |
background-color: var(--colors-white); | |
position: relative; | |
width: 100% | |
} | |
.post:hover { | |
background-color: #f3f0ff; | |
-webkit-transition: background-color 500ms linear; | |
-ms-transition: background-color 500ms linear; | |
transition: background-color 500ms linear; | |
} | |
.post-header { | |
color: var(--colors-purple); | |
text-decoration: none; | |
display: flex; | |
align-items: center; | |
margin-bottom: 8px; | |
line-height: 1 | |
} | |
.post-header div:first-child { | |
flex-shrink: 0 | |
} | |
.post-header-avatar { | |
width: 48px; | |
height: 48px; | |
border-radius: 25px | |
} | |
div+.post-header-container { | |
padding-left: 8px | |
} | |
.post-header-name { | |
font-size: 16px; | |
word-break: break-all; | |
word-wrap: break-word; | |
display: flex; | |
align-items: center; | |
padding-bottom: 3px; | |
color: var(--colors-purple) | |
} | |
.post-header-css { | |
color: var(--colors-purple) | |
} | |
.post-header-audio { | |
color: var(--colors-orange); | |
-webkit-transform: rotate(45deg); | |
transform: rotate(45deg) | |
} | |
.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: 700 | |
} | |
.post-text { | |
font-size: 18px; | |
word-wrap: break-word; | |
white-space: pre-line | |
} | |
.post-text>div { | |
display: inline-block | |
} | |
.post-emoji { | |
object-fit: contain | |
} | |
.post-text a { | |
color: var(--colors-purple) | |
} | |
a:hover { | |
color: var(--colors-blue); | |
font-size: 1.04em; | |
} | |
a.post-text-mention { | |
color: var(--colors-blue) | |
} | |
.post-text code, | |
.post-text pre { | |
background-color: var(--colors-smoke); | |
border-radius: 3px; | |
color: var(--colors-purple); | |
font-family: var(--fonts-mono); | |
font-size: .9em; | |
white-space: pre-wrap; | |
padding: 0 .25em | |
} | |
.post-attachments { | |
display: grid; | |
grid-template-columns: repeat(2, 1fr); | |
grid-gap: 8px; | |
align-items: center; | |
margin-top: 16px | |
} | |
.post-attachment { | |
border-radius: 6px; | |
overflow: hidden; | |
text-align: center | |
} | |
a.post-attachment { | |
line-height: 0 | |
} | |
.post-attachment img.is-loading { | |
-webkit-filter: blur(15px); | |
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 | |
} | |
a.post-attachment:first-child:last-child, | |
audio.post-attachment, | |
video.post-attachment { | |
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; | |
-webkit-transition: background-color .125s ease-in-out; | |
transition: background-color .125s ease-in-out | |
} | |
.post-reaction:focus, | |
.post-reaction:hover { | |
background-color: var(--colors-cyan); | |
border-color: var(--colors-blue) | |
} | |
.post-reaction>div { | |
margin: 5px!important; | |
border-radius: 4px; | |
overflow: hidden; | |
width: 24px; | |
height: 24px | |
} | |
.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