71 lines
1.3 KiB
CSS
71 lines
1.3 KiB
CSS
@import url('./themes.css');
|
|
@import url('./utils.css');
|
|
|
|
html {
|
|
background-color: var(--prj-bg);
|
|
color: var(--prj-text);
|
|
|
|
/* Update font size based on screen width, source: https://matthewjamestaylor.com/responsive-font-size */
|
|
font-size: calc(15px + 0.390625vw);
|
|
}
|
|
|
|
body {
|
|
max-width: 95vw; /* leave some space in the end by default */
|
|
margin: auto;
|
|
padding: 15px 0;
|
|
}
|
|
|
|
section:not(:first-child) {
|
|
margin-top: var(--prj-spacing-4);
|
|
}
|
|
|
|
/* Main content fix width, taken from Tailwind: https://tailwindcss.com/docs/container#using-the-container */
|
|
|
|
@media screen and (min-width: 640px) {
|
|
body {
|
|
min-width: 640px;
|
|
}
|
|
}
|
|
@media screen and (min-width: 768px) {
|
|
body {
|
|
min-width: 768px;
|
|
}
|
|
}
|
|
@media screen and (min-width: 1024px) {
|
|
body {
|
|
min-width: 1024px;
|
|
}
|
|
}
|
|
@media screen and (min-width: 1280px) {
|
|
body {
|
|
min-width: 1280px;
|
|
}
|
|
}
|
|
@media screen and (min-width: 1536px) {
|
|
body {
|
|
max-width: 1536px;
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: var(--prj-link-text);
|
|
}
|
|
|
|
ul {
|
|
/* Make the marker position is inside the container */
|
|
list-style-position: inside;
|
|
margin: 0;
|
|
}
|
|
|
|
li:not(:last-child) {
|
|
margin-bottom: var(--prj-spacing-1);
|
|
}
|
|
|
|
.btn {
|
|
padding: var(--prj-spacing-1);
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: var(--prj--primary-bg);
|
|
color: var(--prj--primary-text);
|
|
}
|