116 lines
2.0 KiB
SCSS
116 lines
2.0 KiB
SCSS
@import "./mixins.scss";
|
|
@import "./vars.scss";
|
|
|
|
@font-face {
|
|
font-family: 'JetBrains Mono';
|
|
font-style: normal;
|
|
font-weight: 300;
|
|
font-display: swap;
|
|
src: url("/fonts/JetBrainsMono-Light.woff2") format('woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'JetBrains Mono';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url("/fonts/JetBrainsMono-Regular.woff2") format('woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'JetBrains Mono';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
src: url("/fonts/JetBrainsMono-Bold.woff2") format('woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'JetBrains Mono';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url("/fonts/JetBrainsMono-Regular.woff2") format('woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Jaldi';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url("/fonts/Jaldi-Regular.woff2") format('woff2');
|
|
}
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
body {
|
|
background: #080808;
|
|
}
|
|
|
|
#app {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
font-family: $font-family-jaldi;
|
|
@include fluid-font-size(0.625rem);
|
|
}
|
|
|
|
main {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.btn-wrapper {
|
|
display: flex;
|
|
gap: 2em;
|
|
|
|
button {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
.btn-main {
|
|
display: inline-block;
|
|
padding: 1em;
|
|
@include fluid-font-size(1.25rem);
|
|
line-height: 1;
|
|
color: #fff;
|
|
background: #252525;
|
|
border: 0.05em solid #252525;
|
|
border-radius: 0.25em;
|
|
transition: color $transition-duration, background $transition-duration, border-color $transition-duration;
|
|
white-space: nowrap;
|
|
|
|
&:hover {
|
|
background: #2e2e2e;
|
|
}
|
|
|
|
&.btn-green {
|
|
color: #080808;
|
|
background: #62c554;
|
|
border-color: #62c554;
|
|
|
|
&:hover {
|
|
background: #6ee65d;
|
|
}
|
|
}
|
|
|
|
&.btn-black {
|
|
background: #080808;
|
|
border-color: #777;
|
|
|
|
&:hover {
|
|
border-color: #a1a1a1;
|
|
}
|
|
|
|
&.gray-text {
|
|
color: #777;
|
|
|
|
&:hover {
|
|
color: #a1a1a1;
|
|
}
|
|
}
|
|
}
|
|
}
|