style: format
This commit is contained in:
parent
15f7534995
commit
d844a1b3ef
GPG Key ID:
C997C339BE476FF2
|
|
@ -2,43 +2,43 @@
|
|||
@import "vars";
|
||||
|
||||
@font-face {
|
||||
font-family: 'JetBrains Mono';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-display: swap;
|
||||
src: url("../fonts/JetBrainsMono-Light.woff2") format('woff2');
|
||||
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-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-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-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');
|
||||
font-family: 'Jaldi';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url("../fonts/Jaldi-Regular.woff2") format('woff2');
|
||||
}
|
||||
|
||||
@tailwind base;
|
||||
|
|
@ -46,82 +46,88 @@
|
|||
@tailwind utilities;
|
||||
|
||||
body {
|
||||
background: #080808;
|
||||
background: #080808;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
font-family: $font-family-jaldi;
|
||||
@include fluid-font-size(0.625rem);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
font-family: $font-family-jaldi;
|
||||
@include fluid-font-size(0.625rem);
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 2.5em;
|
||||
color: #fff;
|
||||
background: #080808;
|
||||
border-bottom: 0.1em solid #363636;
|
||||
padding: 2.5em;
|
||||
color: #fff;
|
||||
background: #080808;
|
||||
border-bottom: 0.1em solid #363636;
|
||||
|
||||
img {
|
||||
@include fluid-width-height(7.875rem, 2.625rem);
|
||||
}
|
||||
img {
|
||||
@include fluid-width-height(7.875rem, 2.625rem);
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-wrapper {
|
||||
display: flex;
|
||||
gap: 2em;
|
||||
display: flex;
|
||||
gap: 2em;
|
||||
|
||||
button, > a {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
> a {
|
||||
flex: 1
|
||||
}
|
||||
|
||||
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;
|
||||
.btn-wrapper > .btn-main, .btn-wrapper > a {
|
||||
text-align: center;
|
||||
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: #6ee65d;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-black {
|
||||
background: #080808;
|
||||
border-color: #777;
|
||||
|
||||
&:hover {
|
||||
border-color: #a1a1a1;
|
||||
background: #2e2e2e;
|
||||
}
|
||||
|
||||
&.gray-text {
|
||||
color: #777;
|
||||
&.btn-green {
|
||||
color: #080808;
|
||||
background: #62c554;
|
||||
border-color: #62c554;
|
||||
|
||||
&:hover {
|
||||
color: #a1a1a1;
|
||||
}
|
||||
&:hover {
|
||||
background: #6ee65d;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-black {
|
||||
background: #080808;
|
||||
border-color: #777;
|
||||
|
||||
&:hover {
|
||||
border-color: #a1a1a1;
|
||||
}
|
||||
|
||||
&.gray-text {
|
||||
color: #777;
|
||||
|
||||
&:hover {
|
||||
color: #a1a1a1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Reference in New Issue