Spaces:
Running
Running
@import '@fontsource/fira-mono'; | |
:root { | |
font-family: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, | |
Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; | |
--font-mono: 'Fira Mono', monospace; | |
--pure-white: #ffffff; | |
--primary-color: #b9c6d2; | |
--secondary-color: #d0dde9; | |
--tertiary-color: #edf0f8; | |
--accent-color: #ff3e00; | |
--heading-color: rgba(0, 0, 0, 0.7); | |
--text-color: #444444; | |
--background-without-opacity: rgba(255, 255, 255, 0.7); | |
--column-width: 42rem; | |
--column-margin-top: 4rem; | |
} | |
body { | |
min-height: 100vh; | |
margin: 0; | |
background-color: var(--primary-color); | |
background: linear-gradient( | |
180deg, | |
var(--primary-color) 0%, | |
var(--secondary-color) 10.45%, | |
var(--tertiary-color) 41.35% | |
); | |
} | |
body::before { | |
content: ''; | |
width: 80vw; | |
height: 100vh; | |
position: absolute; | |
top: 0; | |
left: 10vw; | |
z-index: -1; | |
background: radial-gradient( | |
50% 50% at 50% 50%, | |
var(--pure-white) 0%, | |
rgba(255, 255, 255, 0) 100% | |
); | |
opacity: 0.05; | |
} | |
#svelte { | |
min-height: 100vh; | |
display: flex; | |
flex-direction: column; | |
} | |
h1, | |
h2, | |
p { | |
font-weight: 400; | |
color: var(--heading-color); | |
} | |
p { | |
line-height: 1.5; | |
} | |
a { | |
color: var(--accent-color); | |
text-decoration: none; | |
} | |
a:hover { | |
text-decoration: underline; | |
} | |
h1 { | |
font-size: 2rem; | |
text-align: center; | |
} | |
h2 { | |
font-size: 1rem; | |
} | |
pre { | |
font-size: 16px; | |
font-family: var(--font-mono); | |
background-color: rgba(255, 255, 255, 0.45); | |
border-radius: 3px; | |
box-shadow: 2px 2px 6px rgb(255 255 255 / 25%); | |
padding: 0.5em; | |
overflow-x: auto; | |
color: var(--text-color); | |
} | |
input, | |
button { | |
font-size: inherit; | |
font-family: inherit; | |
} | |
button:focus:not(:focus-visible) { | |
outline: none; | |
} | |
@media (min-width: 720px) { | |
h1 { | |
font-size: 2.4rem; | |
} | |
} | |