diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 197 |
1 files changed, 110 insertions, 87 deletions
@@ -4,6 +4,101 @@ <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"> <link rel="icon" type="image/png" href="/favicon.png"> + <style id="splashscreen"> + #webpack-hot-middleware-clientOverlay { + z-index: 9999999999999999999999999999; + } + + #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-container { + align-items: center; + } + + #mascot-container { + display: flex; + align-items: flex-end; + justify-content: center; + } + + #mascot:not(.orz) { + margin-bottom: 2em + object-position: 2.5em 0; + } + + #mascot-temp.orz { + margin-bottom: 2em + object-position: 2.5em 0; + } + + #mascot, + #mascot-temp { + width: calc(10em * var(--scale)); + height: calc(8em * var(--scale)); + object-fit: contain; + object-position: bottom; + } + + #throbber { + display: grid; + width: calc(5em * 0.5 * var(--scale)); + height: calc(8em * 0.5 * var(--scale)); + 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"; + } + + .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 { + line-height: 2; + width: 100%; + text-align: center; + } + </style> <style id="pleroma-eager-styles" type="text/css"></style> <style id="pleroma-lazy-styles" type="text/css"></style> <!--server-generated-meta--> @@ -11,95 +106,23 @@ <body style="margin: 0; padding: 0"> <noscript>To use Pleroma, please enable JavaScript.</noscript> <!-- putting styles here to avoid having to wait for styles to load up --> - <div id="splash" style=" - width: 100vw; - height: 100vh; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - background: #0f161e; - font-family: sans-serif; - color: #b9b9ba; - position: absolute; - z-index: 999999; - " - > - <img - style=" - width: 30vh; - margin-top: 1vh; - margin-bottom: 0.5vh; - " - src="/static/pleromatan_apology_fox.png" - /> - <div - id="throbber" - style=' - --logoChunkSize: 2vh; - display: grid; - margin-top: 2.5vh; - margin-bottom: 0.5vh; - width: 30vw; - grid-template-rows: repeat(8, var(--logoChunkSize)); - grid-template-columns: repeat(5, var(--logoChunkSize)); - 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"; - width: auto; - ' - > - <div - style=" - background-color: #e2b188; - grid-area: P; - border-top-left-radius: calc(var(--logoChunkSize) / 2); - box-shadow: 0.1vh 0.1vh 1vh 0 #e2b188; - " - > + <div id="splash"> + <div id="splash-container"> + <div id="mascot-container"> + <div id="throbber"> + <div class="chunk" id="chunk-P"> + </div> + <div class="chunk" id="chunk-L"> + </div> + <div class="chunk" id="chunk-E"> + </div> + </div> + <img id="mascot" src="/static/pleromatan_apology_fox.png"> </div> - <div - style=" - width: 100%; - height: 100%; - background-color: #e2b188; - grid-area: L; - border-bottom-right-radius: calc(var(--logoChunkSize) / 2); - box-shadow: 0.1vh 0.1vh 1vh 0 #e2b188; - " - > + <div id="status" class="css-ok"> + <!-- (｡>﹏<) --> + <span class="initial-text">(｡>﹏<)</span> </div> - <div - style=" - width: 100%; - height: 100%; - background-color: #e2b188; - grid-area: E; - border-bottom-right-radius: calc(var(--logoChunkSize) / 2); - box-shadow: 0.1vh 0.1vh 1vh 0 #e2b188; - " - > - </div> - </div> - <div - id="status" - class="css-ok" - style=" - margin-top: 3.5vh; - height: 4vh; - line-height: 4vh; - font-size: 4vh; - width: 100%; - text-align: center; - " - > - <!-- (｡>﹏<) --> - <span class="initial-text">(｡>﹏<)</span> </div> </div> <div id="app" class="hidden"></div> |