From fe22956d5dbdeb2b80a9e56b46abe2be9f2bfcdb Mon Sep 17 00:00:00 2001 From: Lizzy Hunt Date: Tue, 26 Mar 2024 16:00:05 -0600 Subject: initial commit --- static/css/blinky.css | 9 +++++++ static/css/colors.css | 13 ++++++++++ static/css/styles.css | 44 ++++++++++++++++++--------------- static/font/comicsans.ttf | Bin 0 -> 135484 bytes static/img/favicon.svg | 1 + static/img/stars.gif | Bin 0 -> 6364 bytes static/js/components/themeSwitcher.js | 27 ++++++++++++++++++++ static/js/require.js | 5 ++++ static/js/script.js | 3 ++- static/js/util/setThemeBeforeRender.js | 6 +++++ 10 files changed, 87 insertions(+), 21 deletions(-) create mode 100644 static/css/blinky.css create mode 100644 static/css/colors.css create mode 100644 static/font/comicsans.ttf create mode 100644 static/img/favicon.svg create mode 100644 static/img/stars.gif create mode 100644 static/js/components/themeSwitcher.js create mode 100644 static/js/require.js create mode 100644 static/js/util/setThemeBeforeRender.js (limited to 'static') diff --git a/static/css/blinky.css b/static/css/blinky.css new file mode 100644 index 0000000..8bd636e --- /dev/null +++ b/static/css/blinky.css @@ -0,0 +1,9 @@ +.blinky { + animation: blinker 1s step-start infinite; +} + +@keyframes blinker { + 50% { + opacity: 0; + } +} diff --git a/static/css/colors.css b/static/css/colors.css new file mode 100644 index 0000000..159a142 --- /dev/null +++ b/static/css/colors.css @@ -0,0 +1,13 @@ +:root { + --background-color: #f4e8e9; + --text-color: #333; + --link-color: #d291bc; + --container-bg: #fff7f8; +} + +[data-theme="DARK"] { + --background-color: #333; + --text-color: #f4e8e9; + --link-color: #b86b77; + --container-bg: #424242; +} diff --git a/static/css/styles.css b/static/css/styles.css index 3b2f447..f62b32e 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -1,25 +1,23 @@ -:root { - /* Light theme colors */ - --background-color: #F4E8E9; /* Soft pink background */ - --text-color: #333; /* Dark text for contrast */ - --link-color: #D291BC; /* Retro pink for links */ - --container-bg: #FFF7F8; /* Very light pink for containers */ +@import "/static/css/colors.css"; +@import "/static/css/blinky.css"; + +@font-face { + font-family: "ComicSans"; + src: url("/static/font/comicsans.ttf"); } -.dark-mode { - /* Dark theme colors */ - --background-color: #333; /* Dark background */ - --text-color: #F4E8E9; /* Light text for contrast */ - --link-color: #B86B77; /* Soft pink for links */ - --container-bg: #424242; /* Darker shade for containers */ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + color: var(--text-color); } body { - font-family: 'ComicSans', sans-serif; + font-family: "ComicSans", sans-serif; background-color: var(--background-color); - color: var(--text-color); - padding: 20px; - text-align: center; + background-image: url("/static/img/stars.gif"); + min-height: 100vh; } a { @@ -33,10 +31,16 @@ a:hover { } .container { - max-width: 600px; + max-width: 1600px; margin: auto; + margin-top: 1rem; background-color: var(--container-bg); - padding: 20px; - border-radius: 8px; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + padding: 1rem; +} + +hr { + border: 0; + border-top: 1px solid var(--text-color); + + margin: 20px 0; } diff --git a/static/font/comicsans.ttf b/static/font/comicsans.ttf new file mode 100644 index 0000000..831e3d8 Binary files /dev/null and b/static/font/comicsans.ttf differ diff --git a/static/img/favicon.svg b/static/img/favicon.svg new file mode 100644 index 0000000..8451def --- /dev/null +++ b/static/img/favicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/stars.gif b/static/img/stars.gif new file mode 100644 index 0000000..91f82dd Binary files /dev/null and b/static/img/stars.gif differ diff --git a/static/js/components/themeSwitcher.js b/static/js/components/themeSwitcher.js new file mode 100644 index 0000000..5f6d927 --- /dev/null +++ b/static/js/components/themeSwitcher.js @@ -0,0 +1,27 @@ +const THEMES = { + DARK: "DARK", + LIGHT: "LIGHT", +}; + +const flipFlopTheme = (theme) => + THEMES[theme] === THEMES.DARK ? THEMES.LIGHT : THEMES.DARK; + +const themePickerText = { + DARK: "light mode.", + LIGHT: "dark mode.", +}; + +const themeSwitcher = document.getElementById("theme-switcher"); + +const setTheme = (theme) => { + themeSwitcher.textContent = `${themePickerText[theme]}`; + + document.documentElement.setAttribute("data-theme", theme); + localStorage.setItem("theme", theme); +}; + +themeSwitcher.addEventListener("click", () => + setTheme(flipFlopTheme(document.documentElement.getAttribute("data-theme"))), +); + +setTheme(localStorage.getItem("theme") ?? THEMES.LIGHT); diff --git a/static/js/require.js b/static/js/require.js new file mode 100644 index 0000000..a4203f0 --- /dev/null +++ b/static/js/require.js @@ -0,0 +1,5 @@ +/** vim: et:ts=4:sw=4:sts=4 + * @license RequireJS 2.3.6 Copyright jQuery Foundation and other contributors. + * Released under MIT license, https://github.com/requirejs/requirejs/blob/master/LICENSE + */ +var requirejs,require,define;!function(global,setTimeout){var req,s,head,baseElement,dataMain,src,interactiveScript,currentlyAddingScript,mainScript,subPath,version="2.3.6",commentRegExp=/\/\*[\s\S]*?\*\/|([^:"'=]|^)\/\/.*$/gm,cjsRequireRegExp=/[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g,jsSuffixRegExp=/\.js$/,currDirRegExp=/^\.\//,op=Object.prototype,ostring=op.toString,hasOwn=op.hasOwnProperty,isBrowser=!("undefined"==typeof window||"undefined"==typeof navigator||!window.document),isWebWorker=!isBrowser&&"undefined"!=typeof importScripts,readyRegExp=isBrowser&&"PLAYSTATION 3"===navigator.platform?/^complete$/:/^(complete|loaded)$/,defContextName="_",isOpera="undefined"!=typeof opera&&"[object Opera]"===opera.toString(),contexts={},cfg={},globalDefQueue=[],useInteractive=!1;function commentReplace(e,t){return t||""}function isFunction(e){return"[object Function]"===ostring.call(e)}function isArray(e){return"[object Array]"===ostring.call(e)}function each(e,t){var i;if(e)for(i=0;i