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
Download Patch File Download Diff File Expand all files Collapse all files

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>