enderman.ch/index
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adaptive layout improved

Browse Source
This commit is contained in:
endermanch
2023-11-19 17:12:13 +03:00
parent f16d54aa46
commit 432010e656
11 changed files with 119 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/styles/list-types.css
+22
View File
@@ -0,0 +1,22 @@
@charset "UTF-8";
@counter-style do {
system: cyclic;
symbols: "💻" "📌" "👻" "📷";
suffix: " ";
}
@counter-style enjoy {
system: cyclic;
symbols: "💻" "📌" "👻" "📷" "♟" "⛄";
suffix: " ";
}
.list-style-type-none {
list-style-type: none;
}
.list-style-type-do {
list-style-type: do;
}
.list-style-type-enjoy {
list-style-type: enjoy;
}
/*# sourceMappingURL=list-types.css.map */
assets/styles/list-types.css.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["list-types.scss"],"names":[],"mappings":";AAAA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAIA;EACE;;AAGF;EACE;;AAGF;EACE","file":"list-types.css"}
assets/styles/list-types.scss
+25
View File
@@ -0,0 +1,25 @@
@counter-style do {
system: fixed;
symbols: "\1F4BB" "\1F4CC" "\1F47B" "\1F4F7";
suffix: " ";
}
@counter-style enjoy {
system: fixed;
symbols: "\2728" "\1F4A1" "\1F4D5" "\1F30D" "\2615" "\26C4";
suffix: " ";
}
.list-style-type {
&-none {
list-style-type: none;
}
&-do {
list-style-type: do;
}
&-enjoy {
list-style-type: enjoy;
}
}
assets/styles/main.css
+36 -14
View File
@@ -15570,6 +15570,26 @@ textarea.form-control-lg {
filter: blur(1em);
}
@counter-style do {
system: fixed;
symbols: "💻" "📌" "👻" "📷";
suffix: " ";
}
@counter-style enjoy {
system: fixed;
symbols: "✨" "💡" "📕" "🌍" "☕" "⛄";
suffix: " ";
}
.list-style-type-none {
list-style-type: none;
}
.list-style-type-do {
list-style-type: do;
}
.list-style-type-enjoy {
list-style-type: enjoy;
}
:root {
--animate-duration: 1s;
--animate-delay: 0.75s;
@@ -15581,6 +15601,8 @@ html {
}
body {
display: flex;
flex-direction: column;
background-color: rgb(6, 25, 28);
background-image: url("~/assets/images/sky.png");
background-attachment: fixed;
@@ -15595,7 +15617,7 @@ body {
}
#ender-app {
height: 100%;
flex: 1;
image-rendering: auto;
}
@@ -15604,10 +15626,6 @@ body {
color: inherit;
}
.list-style-type-none {
list-style-type: none;
}
.text-align-center {
text-align: center;
}
@@ -15634,7 +15652,7 @@ body {
.dimensions {
width: 100%;
height: 100%;
min-height: 100%;
}
.link, .link-hi {
@@ -15664,7 +15682,6 @@ body {
.scrollbar {
min-height: 128px;
transition: --scrollbar 0.15s ease;
scrollbar-gutter: stable;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.15) rgba(0, 0, 0, 0.3);
}
@@ -15684,11 +15701,7 @@ body {
background-color: var(--scrollbar);
}
.fade-mask {
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgb(0, 0, 0) 5%, rgb(0, 0, 0) 95%, rgba(0, 0, 0, 0));
}
@media (prefers-color-scheme: light) {
@media (prefers-color-scheme: dark) {
body {
color: black;
}
@@ -15703,7 +15716,7 @@ body {
background-color: rgba(255, 255, 255, 0.3);
}
.background {
background-color: rgba(255, 255, 255, 0.75);
background-color: rgba(255, 255, 255, 0.8);
}
.link:hover, .link-hi:hover {
color: royalblue;
@@ -15719,11 +15732,20 @@ body {
}
}
@media (min-width: 601px) {
#ender-app {
height: 100%;
}
.scrollbar {
scrollbar-gutter: stable;
}
.dimensions {
width: 80%;
height: auto;
min-height: auto;
max-height: 90%;
}
.fade-mask {
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgb(0, 0, 0) 5%, rgb(0, 0, 0) 95%, rgba(0, 0, 0, 0));
}
.rounded-card {
border-radius: 1em;
}
assets/styles/main.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/styles/main.scss
+21 -15
View File
@@ -15,6 +15,7 @@ $grid-breakpoints: (
@import '../../node_modules/bootstrap/scss/bootstrap';
@import '../../node_modules/animate.css/animate';
@import 'transitions';
@import 'list-types';
// CSS Variables.
:root {
@@ -30,6 +31,9 @@ html {
// The body element.
body {
display: flex;
flex-direction: column;
background-color: rgb(6, 25, 28);
background-image: url('~/assets/images/sky.png');
@@ -49,8 +53,7 @@ body {
// Entry point (Vue mount).
#ender-app {
height: 100%;
flex: 1;
image-rendering: auto;
}
@@ -60,10 +63,6 @@ body {
color: inherit;
}
.list-style-type-none {
list-style-type: none;
}
.text-align-center {
text-align: center;
}
@@ -91,7 +90,7 @@ body {
.dimensions {
width: 100%;
height: 100%;
min-height: 100%;
}
.link {
@@ -133,7 +132,6 @@ body {
transition: --scrollbar 0.15s ease;
scrollbar-gutter: stable;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.15) rgba(0, 0, 0, 0.3);
@@ -157,11 +155,7 @@ body {
}
}
.fade-mask {
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0));
}
@media (prefers-color-scheme: light) {
@media (prefers-color-scheme: dark) {
body {
color: black;
}
@@ -180,7 +174,7 @@ body {
}
.background {
background-color: rgba(255, 255, 255, 0.75);
background-color: rgba(255, 255, 255, 0.8);
}
.link {
@@ -209,13 +203,25 @@ body {
// Dynamic classes.
@include media-breakpoint-up(sm) {
#ender-app {
height: 100%;
}
.scrollbar {
scrollbar-gutter: stable;
}
.dimensions {
width: 80%;
height: auto;
min-height: auto;
max-height: 90%;
}
.fade-mask {
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0));
}
.rounded-card {
border-radius: 1em;
}