diff --git a/index.html b/index.html
index 86d15971b..c2d338006 100644
--- a/index.html
+++ b/index.html
@@ -10,135 +10,13 @@
-
-
-
-
+
+
+
+
-
+
diff --git a/public/static/empty.css b/public/static/empty.css
new file mode 100644
index 000000000..3dfa88151
--- /dev/null
+++ b/public/static/empty.css
@@ -0,0 +1 @@
+// nothing here //
diff --git a/public/static/splash.css b/public/static/splash.css
new file mode 100644
index 000000000..32d1e95c7
--- /dev/null
+++ b/public/static/splash.css
@@ -0,0 +1,121 @@
+#splash {
+ --scale: 1;
+ width: 100vw;
+ height: 100vh;
+ display: grid;
+ grid-template-rows: auto;
+ grid-template-columns: auto;
+ align-content: center;
+ align-items: center;
+ justify-content: center;
+ justify-items: center;
+ flex-direction: column;
+ background: #0f161e;
+ font-family: sans-serif;
+ color: #b9b9ba;
+ position: absolute;
+ z-index: 9999;
+ font-size: calc(1vw + 1vh + 1vmin);
+}
+
+#splash-credit {
+ position: absolute;
+ font-size: 14px;
+ bottom: 16px;
+ right: 16px;
+}
+
+#splash-container {
+ align-items: center;
+}
+
+#mascot-container {
+ display: flex;
+ align-items: flex-end;
+ justify-content: center;
+ perspective: 60em;
+ perspective-origin: 0 -15em;
+ transform-style: preserve-3d;
+}
+
+#mascot {
+ width: calc(10em * var(--scale));
+ height: calc(10em * var(--scale));
+ object-fit: contain;
+ object-position: bottom;
+ transform: translateZ(-2em);
+}
+
+#throbber {
+ display: grid;
+ width: calc(5em * 0.5 * var(--scale));
+ height: calc(8em * 0.5 * var(--scale));
+ margin-left: 4.1em;
+ z-index: 2;
+ grid-template-rows: repeat(8, 1fr);
+ grid-template-columns: repeat(5, 1fr);
+ grid-template-areas: "P P . L L"
+ "P P . L L"
+ "P P . L L"
+ "P P . L L"
+ "P P . . ."
+ "P P . . ."
+ "P P . E E"
+ "P P . E E";
+
+ --logoChunkSize: calc(2em * 0.5 * var(--scale))
+}
+
+.chunk {
+ background-color: #e2b188;
+ box-shadow: 0.01em 0.01em 0.1em 0 #e2b188;
+}
+
+#chunk-P {
+ grid-area: P;
+ border-top-left-radius: calc(var(--logoChunkSize) / 2);
+}
+
+#chunk-L {
+ grid-area: L;
+ border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
+}
+
+#chunk-E {
+ grid-area: E;
+ border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
+}
+
+#status {
+ margin-top: 1em;
+ line-height: 2;
+ width: 100%;
+ text-align: center;
+}
+
+#statusError {
+ display: none;
+ margin-top: 1em;
+ font-size: calc(1vw + 1vh + 1vmin);
+ line-height: 2;
+ width: 100%;
+ text-align: center;
+}
+
+#statusStack {
+ display: none;
+ margin-top: 1em;
+ font-size: calc((1vw + 1vh + 1vmin) / 2.5);
+ width: calc(100vw - 5em);
+ padding: 1em;
+ text-overflow: ellipsis;
+ overflow-x: hidden;
+ text-align: left;
+ line-height: 2;
+}
+
+@media (prefers-reduced-motion) {
+ #throbber {
+ animation: none !important;
+ }
+}
diff --git a/src/App.scss b/src/App.scss
index 704d51cea..4a7caa73a 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -2,6 +2,8 @@
/* stylelint-disable no-descending-specificity */
@use "panel";
+@import '@fortawesome/fontawesome-svg-core/styles.css';
+
:root {
--status-margin: 0.75em;
--post-line-height: 1.4;
@@ -30,6 +32,7 @@ body {
font-family: sans-serif;
font-family: var(--font);
margin: 0;
+ padding: 0;
color: var(--text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index ef4a6f5c4..3d85db3aa 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -234,20 +234,14 @@ export const applyConfig = (input) => {
return
}
- const head = document.head
-
const rules = Object
.entries(config)
.filter(([, v]) => v)
.map(([k, v]) => `--${k}: ${v}`).join(';')
- document.getElementById('style-config')?.remove()
const styleEl = document.getElementById('theme-holder')
- styleEl.id = 'style-config'
- head.appendChild(styleEl)
const styleSheet = styleEl.sheet
- styleSheet.toString()
styleSheet.insertRule(`:root { ${rules} }`, 'index-max')
// TODO find a way to make this not apply to theme previews