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

2
src/main.js
View File

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

44
src/pages/OverviewInfo.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="sections">
<div class="section">
<div class="pages">
<div class="page">
<div class="panels">
<div
id="steam"
@ -26,7 +26,7 @@
</div>
<div
id="about"
class="section"
class="page"
>
<div class="contained-title">
<h1>What is this?</h1>
@ -38,30 +38,40 @@
<style lang="scss" scoped>
@use "@/styles/themer";
@use "sass:color";
#steam {
background-size: cover;
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");
@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");
.contained-title {
color: white;
.contained-title {
color: white;
}
}
}
#minecraft {
background-size: cover;
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");
.contained-title {
color: white;
@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");
.contained-title {
color: white;
}
}
}
#about {
background-size: cover;
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");
.contained-title {
color: white;
@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");
.contained-title {
color: white;
}
}
}
</style>

4
src/router/routes.js
View File

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

18
src/styles/_variables.scss
View File

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

12
src/styles/global.scss
View File

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