broke colors and layout into separate css files so layout can load faster
This commit is contained in:
Pagwin
parent
131f2e2d0f
commit
f6c2394327
4 changed files with 65 additions and 46 deletions
|
|
@ -44,9 +44,6 @@ body.light{
|
|||
body {
|
||||
background: var(--bg-color);
|
||||
color: var(--normal-text);
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
font-family: Georgia, serif;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
|
|
@ -55,52 +52,16 @@ body {
|
|||
|
||||
a {
|
||||
color: var(--link-unclicked);
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: var(--link-clicked);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#header {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
gap: 0.5em;
|
||||
align-items: center;
|
||||
background: var(--header-bg);
|
||||
width: 100%;
|
||||
font-size: 24px;
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
|
||||
#content {
|
||||
display: block;
|
||||
margin: 1em;
|
||||
padding: 1em;
|
||||
/* needed due to flex*/
|
||||
width: 100%;
|
||||
max-width: 960px;
|
||||
border: 0.5em solid var(--content-border-color);
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
#content-outer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
pre {
|
||||
min-height: 2em;
|
||||
max-width: calc(100% - 2em);
|
||||
width: fit-content;
|
||||
overflow:scroll;
|
||||
/*background: #444;*/
|
||||
border-radius: 0.5em;
|
||||
/*border: 0.2em solid red;*/
|
||||
padding: 0.5em;
|
||||
}
|
||||
51
static/css/layout.css
Normal file
51
static/css/layout.css
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
body {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
font-family: Georgia, serif;
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#header {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
gap: 0.5em;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
font-size: 24px;
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
|
||||
#content {
|
||||
display: block;
|
||||
margin: 1em;
|
||||
padding: 1em;
|
||||
/* needed due to flex*/
|
||||
width: 100%;
|
||||
max-width: 960px;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
#content-outer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
pre {
|
||||
min-height: 2em;
|
||||
max-width: calc(100% - 2em);
|
||||
width: fit-content;
|
||||
overflow:scroll;
|
||||
/*background: #444;*/
|
||||
border-radius: 0.5em;
|
||||
/*border: 0.2em solid red;*/
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
// this script is intentionally not a module so it'll block loading the document until we set color mode
|
||||
|
||||
// shamelessly stolen from https://www.joshwcomeau.com/react/dark-mode/
|
||||
function getInitialColorMode() {
|
||||
export function getInitialColorMode() {
|
||||
const persistedColorPreference =
|
||||
window.localStorage.getItem('color-mode');
|
||||
const hasPersistedPreference =
|
||||
|
|
@ -25,7 +25,11 @@ function getInitialColorMode() {
|
|||
// color themes, let's default to 'light'.
|
||||
return 'light';
|
||||
}
|
||||
function setMode(mode){
|
||||
export function setMode(mode, options){
|
||||
if(options == undefined){
|
||||
options = {};
|
||||
}
|
||||
const {store} = options;
|
||||
if(document.body.classList.contains("light")){
|
||||
document.body.classList.replace("light", mode);
|
||||
}
|
||||
|
|
@ -35,10 +39,12 @@ function setMode(mode){
|
|||
else {
|
||||
document.body.classList.add(color_mode);
|
||||
}
|
||||
if(store == undefined || store){
|
||||
localStorage.setItem("color-mode", mode);
|
||||
}
|
||||
}
|
||||
// repeats set code but who cares, the logic is different
|
||||
function toggleMode(){
|
||||
export function toggleMode(){
|
||||
let mode;
|
||||
if(document.body.classList.contains("light")){
|
||||
document.body.classList.replace("light", "dark");
|
||||
|
|
@ -56,7 +62,7 @@ function toggleMode(){
|
|||
|
||||
// start grabbing the css in the background
|
||||
const bg_css = (async ()=>{
|
||||
const css_txt = fetch("/static/css/default.css").then(res=>res.text());
|
||||
const css_txt = fetch("/static/css/colors.css").then(res=>res.text());
|
||||
const css = new CSSStyleSheet();
|
||||
await css.replace(await css_txt);
|
||||
return css;
|
||||
|
|
@ -64,7 +70,7 @@ const bg_css = (async ()=>{
|
|||
|
||||
// set color mode
|
||||
const color_mode = getInitialColorMode();
|
||||
setMode(color_mode);
|
||||
setMode(color_mode, {store:false});
|
||||
|
||||
// now that color mode is set lets go actually set the css
|
||||
document.adoptedStyleSheets.push(await bg_css);
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{{title}}} · Pagwin's website</title>
|
||||
<link rel="preload" type="text/css" href="/static/css/default.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/layout.css" />
|
||||
<link rel="preload" type="text/css" href="/static/css/colors.css" />
|
||||
<link rel="alternate" type="application/rss+xml" title="RSS" href="https://pagwin.xyz/index.xml">
|
||||
<script type="module" src="/static/js/code_highlighting.mjs"></script>
|
||||
</head>
|
||||
|
|
|
|||
Loading…
Reference in a new issue