You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
2.2 KiB
SCSS
108 lines
2.2 KiB
SCSS
@font-face {
|
|
font-family: 'Open Sans';
|
|
src: url("/fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf");
|
|
}
|
|
@import "parts/_cards.scss";
|
|
@import "parts/_code.scss";
|
|
@import "parts/_header.scss";
|
|
@import "parts/_image.scss";
|
|
@import "parts/misc.scss";
|
|
@import "parts/table.scss";
|
|
@import "parts/home-banner.scss";
|
|
@import "parts/footer.scss";
|
|
@import "parts/theme-switch.scss";
|
|
|
|
:root {
|
|
--max-layout-width:900px;
|
|
--normal-layout-width:600px;
|
|
--medium-layout-width:350px;
|
|
--small-layout-width:200px;
|
|
font-family: 'Roboto Mono', monospace;
|
|
line-height: 180%;
|
|
|
|
|
|
--bg-0: #121212;
|
|
--bg-1: rgba(255, 255, 255, 5%);
|
|
--bg-2: rgba(23, 23, 23, 100%);
|
|
--primary-color: #5053ef;
|
|
--hover-color: white;
|
|
--background-color:#29292e;
|
|
--navbar-color:#222226;
|
|
--secondary-color:#1b1b20;
|
|
--highlights: #b35a5a;
|
|
--links: #7de1ff;
|
|
--text-color: #f2f2f2;
|
|
--code: #ef476f;
|
|
--border-color: #111;
|
|
--light-border-color: rgba(255, 255, 255, 0.1);
|
|
--input-back: #4b4a4a;
|
|
--input-color: #294797;
|
|
--meta-color: rgb(198, 197, 197);
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
--bg-0: #fff;
|
|
--bg-1: #f2f2f2;
|
|
--bg-2: #fefefe;
|
|
--hover-color: white;
|
|
--background-color:#fff;
|
|
--navbar-color:#e3e3e3;
|
|
--text-color: #222226;
|
|
--border-color: rgb(114, 114, 114);
|
|
--light-border-color: rgba(255, 255, 255, 0.1);
|
|
--input-back: #161616;
|
|
--input-color: #294797;
|
|
--input-back: rgb(158, 158, 158);
|
|
--input-color: #fbec48;
|
|
--meta-color: rgb(53, 53, 53);
|
|
}
|
|
|
|
html {
|
|
background-color: var(--background-color);
|
|
color: var(--text-color);
|
|
line-height: 1.6em;
|
|
}
|
|
body{
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
.content {
|
|
max-width: var(--max-layout-width);
|
|
margin: 3rem auto 1rem;
|
|
padding: 0 24px;
|
|
word-wrap: break-word;
|
|
min-height: calc(100vh - 10rem - 1px);
|
|
}
|
|
@media only screen and (max-width:1000px) {
|
|
.content{
|
|
max-width: var(--normal-layout-width);
|
|
}
|
|
}
|
|
@media only screen and (max-width:600px) {
|
|
.content{
|
|
max-width: var(--medium-layout-width);
|
|
}
|
|
}
|
|
@media only screen and (max-width:300px) {
|
|
.content{
|
|
max-width: var(--small-layout-width);
|
|
}
|
|
}
|
|
@media all and (min-width:640px) {
|
|
html {
|
|
font-size: 16.5px;
|
|
}
|
|
}
|
|
|
|
@media all and (min-width:720px) {
|
|
html {
|
|
font-size: 17px;
|
|
}
|
|
}
|
|
|
|
@media all and (min-width:960px) {
|
|
html {
|
|
font-size: 18px;
|
|
}
|
|
}
|