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

Improved styling and naming scheme.

Browse Source
This commit is contained in:
Harrison Deng 2022-01-16 01:29:30 -06:00
parent 6c05cbba7b
commit c7f95a14c3
6 changed files with 49 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.vue
View File

@ -5,7 +5,7 @@
<a <a
class="navbar-brand" class="navbar-brand"
href="/" href="/"
>RES</a> >Reslate ES</a>
<button <button
class="navbar-toggler" class="navbar-toggler"
type="button" type="button"
@ -37,7 +37,7 @@
</router-link> </router-link>
<router-link <router-link
class="nav-link" class="nav-link"
:to="{name: 'remcs'}" :to="{name: 'resmcs'}"
active-class="active" active-class="active"
> >
Minecraft Minecraft

2
src/main.js
View File

@ -5,7 +5,7 @@ import { createApp } from "vue";
import { router } from "./router/router"; import { router } from "./router/router";
document.body.classList.add("theme-light"); document.body.classList.add("theme-dark");
const app = createApp(App); const app = createApp(App);
app.use(router); app.use(router);

44
src/pages/OverviewInfo.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="sections"> <div class="pages">
<div class="section"> <div class="page">
<div class="panels"> <div class="panels">
<div <div
id="steam" id="steam"
@ -26,7 +26,7 @@
</div> </div>
<div <div
id="about" id="about"
class="section" class="page"
> >
<div class="contained-title"> <div class="contained-title">
<h1>What is this?</h1> <h1>What is this?</h1>
@ -38,30 +38,40 @@
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/themer"; @use "@/styles/themer";
@use "sass:color";
#steam { #steam {
background-size: cover; @include themer.themed {
background-image: radial-gradient(circle at center, rgba(0,0,0,0.55) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0,0,0,1) 100%), url("@/assets/images/controller.png"); $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");
.contained-title { .contained-title {
color: white; color: white;
}
} }
} }
#minecraft { #minecraft {
background-size: cover; @include themer.themed {
background-image: radial-gradient(circle at center, rgba(0,0,0,0.25) 0%, rgba(0, 0, 0, 0.10) 60%, rgba(0,0,0,1) 100%), url("@/assets/images/minecraft.png"); $gradient-color: themer.color-of("main");
background-size: cover;
.contained-title { 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");
color: white;
.contained-title {
color: white;
}
} }
} }
#about { #about {
background-size: cover; @include themer.themed {
background-image: radial-gradient(circle at center, rgba(0,0,0,0.55) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0,0,0,1) 100%), url("@/assets/images/about.png"); $gradient-color: themer.color-of("main");
.contained-title { background-size: cover;
color: white; 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");
.contained-title {
color: white;
}
} }
} }
</style> </style>

4
src/router/routes.js
View File

@ -9,8 +9,8 @@ export const routes = [
component: OverviewInfo, component: OverviewInfo,
}, },
{ {
path: "/remcs", path: "/resmcs",
name: "remcs", name: "resmcs",
component: MinecraftServer, component: MinecraftServer,
}, },
{ {

18
src/styles/_variables.scss
View File

@ -1,13 +1,13 @@
$themes: ( $themes: (
"light": ( "dark": (
"background": #ebf0ef, "background": #2c093b,
"navbar": #fef6ff, "navbar": #623d99,
"navbar-brand": #8a2be2, "navbar-brand": #fcfcff,
"navbar-link": #684eff, "navbar-link": #fcf0ff,
"navbar-active": #3f28c0, "navbar-active": #00c9a9,
"main": #8a2be2, "main": #501b69,
"footer": #e2762b, "footer": #15061d,
"text": #1a1a1a, "text": #cfcfff,
"special": #94e22b, "special": #94e22b,
"muted": #797a7e, "muted": #797a7e,
), ),

12
src/styles/global.scss
View File

@ -6,15 +6,18 @@
header > nav { header > nav {
@extend .navbar; @extend .navbar;
@extend .navbar-expand-lg; @extend .navbar-expand-lg;
@extend .border-bottom;
position: fixed !important; position: fixed !important;
top: 0px; top: 0px;
left: 0px; left: 0px;
right: 0px; right: 0px;
border-bottom-style: solid;
border-bottom-width: 1px;
@include themer.themed { @include themer.themed {
background-color: themer.color-of("navbar"); 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 { .navbar-brand {
@ -41,12 +44,12 @@ header > nav {
} }
} }
.sections { .pages {
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
flex-direction: column; flex-direction: column;
.section { .page {
min-height: 100%; min-height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -91,5 +94,6 @@ main {
flex-grow: 1; flex-grow: 1;
@include themer.themed { @include themer.themed {
color: themer.color-of("text"); color: themer.color-of("text");
background-color: themer.color-of("background");
} }
} }