ydeng/epsilon_webui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

RSEMCS mostly complete.

Browse Source
This commit is contained in:
Harrison Deng
2022-01-17 02:46:31 -06:00
parent c7f95a14c3
commit 1909615e88
21 changed files with 400 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
package-lock.json generated
View File

@@ -9,8 +9,11 @@
"version": "1.0.0",
"license": "ISC",
"dependencies": {
"axios": "^0.24.0",
"bootstrap": "^5.1.3",
"bootstrap-icons": "^1.7.2",
"core-js": "^3.20.3",
"css.gg": "^2.0.0",
"regenerator-runtime": "^0.13.9",
"vue": "^3.2.26",
"vue-router": "^4.0.12"
},
@@ -2527,6 +2530,14 @@
"lodash": "^4.17.14"
}
},
"node_modules/axios": {
"version": "0.24.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz",
"integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==",
"dependencies": {
"follow-redirects": "^1.14.4"
}
},
"node_modules/babel-loader": {
"version": "8.2.3",
"resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.3.tgz",
@@ -2728,14 +2739,6 @@
"@popperjs/core": "^2.10.2"
}
},
"node_modules/bootstrap-icons": {
"version": "1.7.2",
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.7.2.tgz",
"integrity": "sha512-NiR2PqC73AQOPdVSu6GJfnk+hN2z6powcistXk1JgPnKuoV2FSdSl26w931Oz9HYbKCcKUSB6ncZTYJAYJl3QQ==",
"engines": {
"node": ">=10"
}
},
"node_modules/brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -3102,6 +3105,16 @@
"integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=",
"dev": true
},
"node_modules/core-js": {
"version": "3.20.3",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.20.3.tgz",
"integrity": "sha512-vVl8j8ph6tRS3B8qir40H7yw7voy17xL0piAjlbBUsH7WIfzoedL/ZOr1OV9FyZQLWXsayOJyV4tnRyXR85/ag==",
"hasInstallScript": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/core-js"
}
},
"node_modules/core-js-compat": {
"version": "3.20.2",
"resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.20.2.tgz",
@@ -3199,6 +3212,11 @@
"url": "https://github.com/sponsors/fb55"
}
},
"node_modules/css.gg": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/css.gg/-/css.gg-2.0.0.tgz",
"integrity": "sha512-8qO59kSXLbewo7xaUM4eC8328MTdGmb8atpmw6PRzeDGsZrCkAVjJzKeFDIntagl1/aCee+NG1OQtIvWAjgG/A=="
},
"node_modules/cssesc": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -4113,7 +4131,6 @@
"version": "1.14.7",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.7.tgz",
"integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==",
"dev": true,
"funding": [
{
"type": "individual",
@@ -6028,8 +6045,7 @@
"node_modules/regenerator-runtime": {
"version": "0.13.9",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
"dev": true
"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
},
"node_modules/regenerator-transform": {
"version": "0.14.5",
@@ -9445,6 +9461,14 @@
"lodash": "^4.17.14"
}
},
"axios": {
"version": "0.24.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz",
"integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==",
"requires": {
"follow-redirects": "^1.14.4"
}
},
"babel-loader": {
"version": "8.2.3",
"resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.3.tgz",
@@ -9608,11 +9632,6 @@
"integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
"requires": {}
},
"bootstrap-icons": {
"version": "1.7.2",
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.7.2.tgz",
"integrity": "sha512-NiR2PqC73AQOPdVSu6GJfnk+hN2z6powcistXk1JgPnKuoV2FSdSl26w931Oz9HYbKCcKUSB6ncZTYJAYJl3QQ=="
},
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -9911,6 +9930,11 @@
"integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=",
"dev": true
},
"core-js": {
"version": "3.20.3",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.20.3.tgz",
"integrity": "sha512-vVl8j8ph6tRS3B8qir40H7yw7voy17xL0piAjlbBUsH7WIfzoedL/ZOr1OV9FyZQLWXsayOJyV4tnRyXR85/ag=="
},
"core-js-compat": {
"version": "3.20.2",
"resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.20.2.tgz",
@@ -9981,6 +10005,11 @@
"integrity": "sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==",
"dev": true
},
"css.gg": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/css.gg/-/css.gg-2.0.0.tgz",
"integrity": "sha512-8qO59kSXLbewo7xaUM4eC8328MTdGmb8atpmw6PRzeDGsZrCkAVjJzKeFDIntagl1/aCee+NG1OQtIvWAjgG/A=="
},
"cssesc": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -10705,8 +10734,7 @@
"follow-redirects": {
"version": "1.14.7",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.7.tgz",
"integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==",
"dev": true
"integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ=="
},
"forwarded": {
"version": "0.2.0",
@@ -12121,8 +12149,7 @@
"regenerator-runtime": {
"version": "0.13.9",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
"dev": true
"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
},
"regenerator-transform": {
"version": "0.14.5",

5
package.json
View File

@@ -37,8 +37,11 @@
"webpack-merge": "^5.8.0"
},
"dependencies": {
"axios": "^0.24.0",
"bootstrap": "^5.1.3",
"bootstrap-icons": "^1.7.2",
"core-js": "^3.20.3",
"css.gg": "^2.0.0",
"regenerator-runtime": "^0.13.9",
"vue": "^3.2.26",
"vue-router": "^4.0.12"
}

99
src/App.vue
View File

@@ -1,6 +1,6 @@
<template>
<header>
<nav class="navbar">
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<a
class="navbar-brand"
@@ -9,39 +9,31 @@
<button
class="navbar-toggler"
type="button"
style="height:1.25rem"
data-bs-toggle="collapse"
data-bs-target="#navigation"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="bi bi-list" />
<i class="gg-menu" />
</button>
<div
id="navigation"
class="collapse navbar-collapse"
>
<div class="navbar-nav">
<router-link
class="nav-link"
:to="{name: 'IntroPortal'}"
active-class="active"
>
Info
</router-link>
<router-link
class="nav-link"
:to="{name: 'steam'}"
active-class="active"
>
Steam
</router-link>
<router-link
class="nav-link"
:to="{name: 'resmcs'}"
active-class="active"
>
Minecraft
</router-link>
<div
v-for="route in $router.getRoutes()"
:key="route.path"
>
<div class="navbar-nav">
<router-link
class="nav-link"
:to="route.path"
active-class="active"
>
{{ route.name }}
</router-link>
</div>
</div>
</div>
</div>
@@ -56,18 +48,67 @@
</template>
<script>
import "/node_modules/bootstrap/js/dist/collapse";
export default {
data() {
console.log(this.$router.getRoutes());
return {
greeting: "Hello World!"
};
}
};
</script>
<style>
.greeting {
color: red;
font-weight: bold;
<style lang="scss">
@use "sass:color";
@use "@/styles/themer";
@use "/node_modules/css.gg/icons/scss/menu.scss";
@import "/node_modules/bootstrap/scss/functions";
@import "/node_modules/bootstrap/scss/variables";
@import "/node_modules/bootstrap/scss/mixins";
@import "/node_modules/bootstrap/scss/utilities";
@import "/node_modules/bootstrap/scss/nav";
@import "/node_modules/bootstrap/scss/navbar";
@import "/node_modules/bootstrap/scss/transitions";
.navbar {
position: fixed !important;
top: 0px;
left: 0px;
right: 0px;
border-bottom-style: solid;
border-bottom-width: 1px;
@include themer.themed {
border-bottom-color: color.adjust(themer.color-of("navbar"), $lightness: 10%);
background-color: color.change($color: themer.color-of("navbar"), $alpha: 0.75);
}
.navbar-brand {
@extend .navbar-brand;
@include themer.themed {
color: themer.color-of("navbar-brand");
}
}
.nav-link {
@include themer.themed {
color: themer.color-of("navbar-link");
}
&.active {
@include themer.themed {
color: themer.color-of("navbar-active");
}
}
}
.navbar-toggler {
@include themer.themed {
color: color.invert(themer.color-of("navbar"), 100%);
}
}
}
</style>

0
src/assets/images/about.png → src/assets/images/generic_room.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 MiB

After

Width:  |  Height:  |  Size: 2.3 MiB

BIN
src/assets/images/minecraft/landscapes/day.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 MiB

0
src/assets/images/minecraft.png → src/assets/images/minecraft/landscapes/night.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 MiB

After

Width:  |  Height:  |  Size: 2.4 MiB

BIN
src/assets/images/minecraft/landscapes/sunset.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

BIN
src/assets/images/minecraft/textures/birch_board.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
src/assets/images/minecraft/textures/birch_plank.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
src/assets/images/minecraft/textures/board.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
src/assets/images/minecraft/textures/map.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 967 B

BIN
src/assets/images/minecraft/textures/map_center.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
src/assets/images/minecraft/textures/oak_plank.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

0
src/assets/images/controller.png → src/assets/images/steam/controller.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.2 MiB

After

Width:  |  Height:  |  Size: 8.2 MiB

5
src/main.js
View File

@@ -1,6 +1,9 @@
import "@/styles/global.scss";
import "bootstrap/dist/js/bootstrap";
import "core-js/stable";
import "regenerator-runtime/runtime";
import App from "./App.vue";
import { createApp } from "vue";
import { router } from "./router/router";

192
src/pages/MinecraftServer.vue
View File

@@ -1,15 +1,199 @@
<template>
<main>
<h1>REMCS</h1>
</main>
<div class="pages">
<div
id="introduction"
class="page"
>
<div class="title">
<h1>RSEMCS</h1>
<p>Reslate Systems - Entertainment: Minecraft Server, or RSEMCS (for brevity, of course), a the private survival Minecraft server. There is an overall objective to keep the server close to vanilla however with a few minor tweaks.</p>
</div>
<div class="content">
<h2>Status</h2>
<p>The server is currently <b>{{ online ? "online" : "offline" }}</b><span v-if="online"> with <b>{{ players.now }} players out of {{ players.max }}</b> slots currently playing. The server is running <b>{{ server.name }}</b></span><span v-else-if="lastOnline">. It was last seen online {{ LastOnlineInMin }} minutes ago</span>. This information was updated <b>{{ LastUpdateInSec }} seconds ago</b>.</p>
</div>
</div>
<div
id="about"
class="page"
>
<div class="panels">
<div
id="join"
class="panel"
>
<div class="title">
<h2>Looking to play?</h2>
</div>
<div class="content map">
<p>Assuming you are whitelisted, there's nothing to it asides from just joining the server at <code>ent.sys.reslate.xyz</code> (yup, exactly the same as this website).</p>
</div>
</div>
<div
id="basics"
class="panel"
>
<div class="board">
<div class="title">
<h2>Basics</h2>
<p>Some basics explaining the server.</p>
</div>
<div class="content">
<ul>
<li>The <b>currency</b> on the server is <b>emeralds</b>.</li>
<li>To create a <b>vault</b>, place a <b>sign</b> on any storage block</li>
<li><b>Grave Artifacts</b> can be held to produce a grave on death!</li>
<li><b>Protection Artifacts</b> can be used to protect your land and yourself!</li>
<li><b>/money help</b> will tell you how to use your money.</li>
<li><b>/ps help</b> will show you the commands for your <b>protection artifact</b>.</li>
<li><b>New recipes</b> can be found by checking your <b>recipe book</b>. Remember to check in the <b>crafting table</b>!</li>
<li><b>Infernal hostiles</b> are like minibosses! They are incredibly rare, however have equally incredible drops!</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div
id="maps"
class="page"
>
<div class="title">
<h2>Maps</h2>
<p>For all your reconnaissance needs...</p>
</div>
<iframe
ref="dynmap"
src="https:/ent.sys.reslate.xyz/resmcs/dynmap/"
class="map"
allowTransparency="true"
@load="iframeLoaded"
>
<p>Your browser does not support iframes. Visit <a href="https:/ent.sys.reslate.xyz/resmcs/dynmap/">the full dynmap page here</a></p>
</iframe>
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
online: "loading...",
motd: "loading...",
players: {
max: "loading...",
now: "loading..."
},
server: {
name: "loading...",
protocol: "loading...",
},
lastOnline: "loading...",
lastUpdate: "loading..."
};
},
computed: {
LastUpdateInSec() {
let date = new Date(this.lastUpdate * 1000);
return date.getSeconds();
},
LastOnlineInMin() {
let date = new Date(this.lastOnline * 1000);
return date.getMinutes();
}
},
async mounted() {
let results = await axios.get("https://mcapi.us/server/status?ip=ent.sys.reslate.xyz");
let info = results.data;
this.online = info.online;
this.motd = info.motd;
this.players = info.players;
this.server = info.server;
this.lastOnline = info.last_online;
this.lastUpdate = info.last_updated;
},
methods: {
},
};
</script>
<style lang="scss" scoped>
@use "@/styles/themer";
@use "sass:color";
#introduction {
@include themer.themed {
$gradient-color: themer.color-of("background");
background-image:
radial-gradient(circle at center,
color.change($color: $gradient-color, $alpha: 0.8) 0%,
color.change($color: $gradient-color, $alpha: 0.1) 60%,
color.change($color: $gradient-color, $alpha: 0.2) 100%
),
url("@/assets/images/minecraft/landscapes/day.png");
}
}
#about {
#basics {
.board {
.title, .content {
width: auto;
max-width: 35rem;
}
}
@include themer.themed {
$gradient-color: themer.color-of("background");
background-image:
radial-gradient(circle at center,
color.change($color: $gradient-color, $alpha: 0.8) 0%,
color.change($color: $gradient-color, $alpha: 0.5) 60%,
color.change($color: $gradient-color, $alpha: 0.2) 100%
),
url("@/assets/images/minecraft/textures/birch_plank.png");
}
background-repeat: repeat;
background-size: auto;
font-size: 1.25rem;
}
}
@font-face {
font-family: Pixel;
src: url("https://res.sys.reslate.xyz/dl/fonts/PublicPixel.ttf");
}
#maps {
padding-top: 4rem;
@include themer.themed {
$gradient-color: themer.color-of("background");
background-image:
linear-gradient(180deg,
color.change($color: $gradient-color, $alpha: 0.8) 0%,
color.change($color: $gradient-color, $alpha: 0.8) 100%
),
url("@/assets/images/minecraft/landscapes/sunset.png");
}
.map {
width: 95%;
flex-grow: 1;
margin-bottom: 2.5%;
background-color: transparent;
border-width: 20px;
border-image-slice:27 27 27 27;
border-image-width:20px 20px 20px 20px;
border-image-outset:0px 0px 0px 0px;
border-image-repeat:repeat repeat;
border-image-source:url("@/assets/images/minecraft/textures/map.png");
border-style:solid;
}
}
</style>

42
src/pages/OverviewInfo.vue
View File

@@ -6,7 +6,7 @@
id="steam"
class="panel"
>
<div class="contained-title">
<div class="title">
<h2>Steam System</h2>
<hr>
<p>Access the RES Steam web interface for establishing connections to the game system and viewing some statistics.</p>
@@ -16,7 +16,7 @@
id="minecraft"
class="panel"
>
<div class="contained-title">
<div class="title">
<h2>Minecraft Server</h2>
<hr>
<p> Access the RES Minecraft Server web interface for interacting with a variety of game utilities and information.</p>
@@ -28,7 +28,7 @@
id="about"
class="page"
>
<div class="contained-title">
<div class="title">
<h1>What is this?</h1>
<p>This is the web interface for Reslate Entertainment Systems. This is <b>not</b> a public service and you may be on this page by mistake. Alternatively, you may be this page completely intentionally!</p>
</div>
@@ -41,9 +41,15 @@
@use "sass:color";
#steam {
@include themer.themed {
$gradient-color: themer.color-of("main");
background-size: cover;
background-image: radial-gradient(circle at center, color.change($color: $gradient-color, $alpha: 0.0) 0%, color.change($color: $gradient-color, $alpha: 0.1) 60%, color.change($color: $gradient-color, $alpha: 0.2) 100%), url("@/assets/images/controller.png");
$gradient-color: themer.color-of("background");
background-image:
radial-gradient(
circle at center,
color.change($color: $gradient-color, $alpha: 0.0) 0%,
color.change($color: $gradient-color, $alpha: 0.1) 60%,
color.change($color: $gradient-color, $alpha: 0.2) 100%
),
url("@/assets/images/steam/controller.png");
.contained-title {
color: white;
@@ -53,9 +59,15 @@
#minecraft {
@include themer.themed {
$gradient-color: themer.color-of("main");
background-size: cover;
background-image: radial-gradient(circle at center, color.change($color: $gradient-color, $alpha: 0.2) 0%, color.change($color: $gradient-color, $alpha: 0.1) 60%, color.change($color: $gradient-color, $alpha: 0.8, $lightness: 10%) 100%), url("@/assets/images/minecraft.png");
$gradient-color: themer.color-of("background");
background-image:
radial-gradient(
circle at center,
color.change($color: $gradient-color, $alpha: 0.2) 0%,
color.change($color: $gradient-color, $alpha: 0.1) 60%,
color.change($color: $gradient-color, $alpha: 0.8, $lightness: 10%) 100%
),
url("@/assets/images/minecraft/landscapes/day.png");
.contained-title {
color: white;
@@ -65,9 +77,15 @@
#about {
@include themer.themed {
$gradient-color: themer.color-of("main");
background-size: cover;
background-image: radial-gradient(circle at center, color.change($color: $gradient-color, $alpha: 0.55) 0%, color.change($color: $gradient-color, $alpha: 0.5) 60%, color.change($color: $gradient-color, $alpha: 1, $lightness: 10%) 100%), url("@/assets/images/about.png");
$gradient-color: themer.color-of("background");
background-image:
radial-gradient(
circle at center,
color.change($color: $gradient-color, $alpha: 0.55) 0%,
color.change($color: $gradient-color, $alpha: 0.5) 60%,
color.change($color: $gradient-color, $alpha: 1, $lightness: 10%) 100%
),
url("@/assets/images/generic_room.png");
.contained-title {
color: white;
}

8
src/router/routes.js
View File

@@ -5,17 +5,17 @@ import SteamServer from "@/pages/SteamServer.vue";
export const routes = [
{
path: "/",
name: "IntroPortal",
name: "Home",
component: OverviewInfo,
},
{
path: "/resmcs",
name: "resmcs",
path: "/mcs",
name: "RSEMCS",
component: MinecraftServer,
},
{
path: "/steam",
name: "steam",
name: "RSE-Steam",
component: SteamServer,
}
];

4
src/styles/_variables.scss
View File

@@ -1,13 +1,13 @@
$themes: (
"dark": (
"background": #2c093b,
"background": #531e6c,
"navbar": #623d99,
"navbar-brand": #fcfcff,
"navbar-link": #fcf0ff,
"navbar-active": #00c9a9,
"main": #501b69,
"footer": #15061d,
"text": #cfcfff,
"text": #dfdfff,
"special": #94e22b,
"muted": #797a7e,
),

103
src/styles/global.scss
View File

@@ -1,67 +1,40 @@
@use "themer";
@use "sass:color";
@use "/node_modules/bootstrap/scss/bootstrap";
@import "/node_modules/bootstrap-icons/font/bootstrap-icons.css"; // @use introduces errors. Perhaps webpack is missing a loader?
header > nav {
@extend .navbar;
@extend .navbar-expand-lg;
position: fixed !important;
top: 0px;
left: 0px;
right: 0px;
border-bottom-style: solid;
border-bottom-width: 1px;
@include themer.themed {
border-bottom-color: color.adjust(themer.color-of("navbar"), $lightness: 10%);
background-color: color.change($color: themer.color-of("navbar"), $alpha: 0.75);
}
.navbar-brand {
@include themer.themed {
color: themer.color-of("navbar-brand");
}
}
.nav-link {
@include themer.themed {
color: themer.color-of("navbar-link");
}
&.active {
@include themer.themed {
color: themer.color-of("navbar-active");
}
}
}
.navbar-toggler {
@include themer.themed {
color: color.invert(themer.color-of("navbar"), 100%);
}
}
}
@import "/node_modules/bootstrap/scss/bootstrap-utilities.scss";
@import "/node_modules/bootstrap/scss/root";
@import "/node_modules/bootstrap/scss/helpers";
@import "/node_modules/bootstrap/scss/reboot";
@import "/node_modules/bootstrap/scss/containers";
@import "/node_modules/bootstrap/scss/type";
.pages {
display: flex;
flex-grow: 1;
flex-direction: column;
.page {
min-height: 100%;
background-size: cover;
min-height: 100vh;
display: flex;
flex-direction: column;
flex-grow: 1;
align-items: center;
justify-content: center;
}
}
.contained-title {
text-align: center;
max-width: 50%;
.title {
@extend .container;
@extend .my-3;
text-align: center;
max-width: 30rem;
margin: 0px;
}
.content {
@extend .container;
@extend .my-3;
max-width: 30rem;
margin: 0px;
}
}
}
.panels {
@@ -70,6 +43,7 @@ header > nav {
flex-wrap: wrap;
width: 100%;
.panel {
background-size: cover;
display: flex;
flex-grow: 1;
flex-direction: column;
@@ -78,22 +52,25 @@ header > nav {
}
}
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
min-height: 100%;
}
main {
display: flex;
flex-direction: row;
flex-grow: 1;
min-height: 100vh;
@include themer.themed {
color: themer.color-of("text");
background-color: themer.color-of("background");
}
}
code {
padding: 2px;
padding-left: 4px;
padding-right: 4px;
@include themer.themed {
color: themer.color-of("special");
background-color: color.invert(themer.color-of("special"), 100%);
}
border-radius: 2px;
border-width: 1px;
border-style: solid;
font-size: 1.05rem;
}

10
webpack.common.js
View File

@@ -49,6 +49,16 @@ module.exports = {
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: "asset/resource",
},
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"]
}
}
}
]
},
resolve: {