Rewrite to TailwindCSS, enhance the DOM, uninstall Vuetify, improve styles
This commit is contained in:
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 536 KiB |
@@ -1 +0,0 @@
|
||||
@layer base, vuetify, overrides
|
||||
@@ -31,5 +31,9 @@
|
||||
|
||||
&-faq {
|
||||
list-style-type: faq;
|
||||
|
||||
> li:nth-child(2n):not(:last-child) {
|
||||
@apply mb-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+138
-166
@@ -3,6 +3,14 @@
|
||||
// Modules.
|
||||
@use 'transitions';
|
||||
@use 'lists';
|
||||
@tailwind utilities;
|
||||
|
||||
@font-face {
|
||||
font-family: Enchant;
|
||||
src:
|
||||
url("~/assets/fonts/enchant/enchant.woff") format('woff'),
|
||||
url("~/assets/fonts/enchant/enchant.woff2") format('woff2')
|
||||
}
|
||||
|
||||
// CSS Variables.
|
||||
:root {
|
||||
@@ -11,10 +19,47 @@
|
||||
--animate-repeat: 1;
|
||||
}
|
||||
|
||||
@-moz-document url-prefix() {
|
||||
html {
|
||||
min-height: 128px;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgb(255 255 255 / 15%) rgb(0 0 0 / 20%);
|
||||
|
||||
&.light {
|
||||
scrollbar-color: rgb(0 0 0 / 15%) rgb(255 255 255 / 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// The HTML page.
|
||||
html {
|
||||
height: 100%;
|
||||
font-size: 14px;
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
border-radius: 8px;
|
||||
background-color: rgb(0 0 0 / 20%);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 8px;
|
||||
background-color: rgb(255 255 255 / 15%);
|
||||
}
|
||||
|
||||
&.light {
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: rgb(255 255 255 / 15%);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 8px;
|
||||
background-color: rgb(0 0 0 / 30%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// The body element.
|
||||
@@ -69,8 +114,12 @@ h6 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
a {
|
||||
@apply text-inherit no-underline transition-all;
|
||||
@apply no-underline transition-all;
|
||||
|
||||
color: cornflowerblue;
|
||||
|
||||
@@ -79,34 +128,41 @@ a {
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
// Entry point (Vue mount).
|
||||
#ender-app {
|
||||
flex: 1 1 0;
|
||||
image-rendering: auto;
|
||||
}
|
||||
|
||||
// Helper classes that don't exist in Bootstrap.
|
||||
.inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.center {
|
||||
center {
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.nobr {
|
||||
white-space: nowrap;
|
||||
:not(nav) > ul {
|
||||
list-style-type: disc;
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
:is(section, article, aside).page {
|
||||
:is(div, p):not(:last-child) {
|
||||
@apply mb-4;
|
||||
}
|
||||
|
||||
:is(h1, h2, h3, h4, h5, h6):not(:last-child) {
|
||||
@apply mb-2;
|
||||
}
|
||||
|
||||
:is(ul, ol):not(:last-child) {
|
||||
@apply mb-4;
|
||||
}
|
||||
}
|
||||
|
||||
iconify-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Entry point (Vue mount).
|
||||
#ender-app {
|
||||
flex: 1 0 auto;
|
||||
image-rendering: auto;
|
||||
}
|
||||
|
||||
// Helper classes that don't exist in Bootstrap.
|
||||
.overlay {
|
||||
grid-area: 1 / 1;
|
||||
}
|
||||
@@ -119,57 +175,59 @@ ul {
|
||||
}
|
||||
}
|
||||
|
||||
.no-decoration {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
ruby {
|
||||
ruby-position: under;
|
||||
|
||||
ruby {
|
||||
ruby-position: over;
|
||||
}
|
||||
}
|
||||
|
||||
.text-align-center {
|
||||
text-align: center;
|
||||
rt {
|
||||
ruby-align: space-around;
|
||||
}
|
||||
|
||||
|
||||
.font-small {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.grid-cols-3 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.display-sm {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.alex {
|
||||
font-family: Alexandria, sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.pre-wrap {
|
||||
white-space: pre-wrap;
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
.h-animated {
|
||||
transition: max-height 0.3s ease;
|
||||
}
|
||||
|
||||
.p-animated {
|
||||
transition: padding 0.3s ease;
|
||||
.transition-ease {
|
||||
@extend %transition;
|
||||
}
|
||||
|
||||
// Query-overridable classes.
|
||||
.background {
|
||||
background-color: rgb(0 0 0 / 50%);
|
||||
}
|
||||
|
||||
.dimensions {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.accent {
|
||||
color: white;
|
||||
.accent-background {
|
||||
background-color: rgb(0 0 0 / 50%);
|
||||
}
|
||||
|
||||
.accent-overlay-background {
|
||||
background-color: rgb(0 0 0 / 90%);
|
||||
}
|
||||
|
||||
@responsive {
|
||||
.accent-text {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.link-dark {
|
||||
@apply text-inherit no-underline transition-all;
|
||||
|
||||
color: cornflowerblue;
|
||||
|
||||
&:hover {
|
||||
color: royalblue;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-mask {
|
||||
mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%) 5%, rgb(0 0 0 / 100%) 95%, rgb(0 0 0 / 0%));
|
||||
}
|
||||
}
|
||||
|
||||
.dialog {
|
||||
@@ -212,16 +270,8 @@ ul {
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
.link {
|
||||
&-hi-force-dark {
|
||||
@apply text-inherit no-underline transition-all;
|
||||
|
||||
color: cornflowerblue;
|
||||
|
||||
&:hover {
|
||||
color: royalblue;
|
||||
}
|
||||
}
|
||||
.parallax {
|
||||
transition: all 0.6942s ease-in;
|
||||
}
|
||||
|
||||
.accent-gradient {
|
||||
@@ -233,53 +283,26 @@ ul {
|
||||
);
|
||||
}
|
||||
|
||||
.scrollbar {
|
||||
min-height: 128px;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgb(255 255 255 / 15%) rgb(0 0 0 / 20%);
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
border-radius: 8px;
|
||||
background-color: rgb(0 0 0 / 20%);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 8px;
|
||||
background-color: rgb(255 255 255 / 15%);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-button {
|
||||
color: white;
|
||||
}
|
||||
.accent-text-shadow {
|
||||
text-shadow: black 2px 3px 4px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:where(html.light) {
|
||||
body {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.scrollbar {
|
||||
scrollbar-color: rgb(0 0 0 / 20%) rgb(255 255 255 / 20%);
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: rgb(255 255 255 / 20%);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 8px;
|
||||
background-color: rgb(0 0 0 / 20%);
|
||||
}
|
||||
}
|
||||
|
||||
.background {
|
||||
.accent-background {
|
||||
background-color: rgb(255 255 255 / 80%);
|
||||
}
|
||||
|
||||
.accent-overlay-background {
|
||||
background-color: rgb(255 255 255 / 90%);
|
||||
}
|
||||
|
||||
a {
|
||||
@apply no-underline transition-all;
|
||||
|
||||
color: royalblue;
|
||||
|
||||
&:hover {
|
||||
@@ -287,7 +310,7 @@ ul {
|
||||
}
|
||||
}
|
||||
|
||||
.accent {
|
||||
.accent-text {
|
||||
color: black;
|
||||
}
|
||||
|
||||
@@ -299,20 +322,14 @@ ul {
|
||||
rgb(0 0 0 / 0%)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.floaty {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
margin: auto;
|
||||
.accent-text-shadow {
|
||||
text-shadow: white 1px 2px 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.post {
|
||||
scroll-snap-type: both mandatory;
|
||||
scroll-snap-type: y mandatory;
|
||||
scroll-snap-stop: normal;
|
||||
|
||||
&::after {
|
||||
@@ -337,19 +354,10 @@ ul {
|
||||
}
|
||||
|
||||
&-pocket {
|
||||
position: absolute;
|
||||
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
text-transform: uppercase;
|
||||
background-color: rgb(153 153 255 / 10%);
|
||||
|
||||
border-left: 1px solid rgb(153 153 255 / 60%);
|
||||
border-top: 1px solid rgb(153 153 255 / 60%);
|
||||
|
||||
border-top-left-radius: var(--bs-border-radius-xl);
|
||||
border-bottom-right-radius: var(--bs-border-radius-xl);
|
||||
}
|
||||
|
||||
&-thumb {
|
||||
@@ -377,45 +385,16 @@ ul {
|
||||
}
|
||||
|
||||
&-preamble {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
|
||||
position: relative;
|
||||
|
||||
width: 100%;
|
||||
min-height: 400px;
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
|
||||
border-radius: 1em;
|
||||
|
||||
scroll-snap-align: end;
|
||||
|
||||
text-shadow: black 1px 1px 7px;
|
||||
|
||||
iconify-icon {
|
||||
filter: drop-shadow(1px 2px 3px rgb(0 0 0 / 100%));
|
||||
}
|
||||
|
||||
&-control {
|
||||
position: absolute;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&-share {
|
||||
position: absolute;
|
||||
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
@@ -550,6 +529,13 @@ ul {
|
||||
}
|
||||
|
||||
// Dynamic classes.
|
||||
@screen lm {
|
||||
.dimensions {
|
||||
width: 100% !important;
|
||||
min-height: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@screen sm {
|
||||
html {
|
||||
font-size: 16px;
|
||||
@@ -557,9 +543,7 @@ ul {
|
||||
|
||||
#ender-app {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.scrollbar {
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
@@ -569,18 +553,6 @@ ul {
|
||||
max-height: 90%;
|
||||
}
|
||||
|
||||
.fade-mask-sm {
|
||||
mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%) 5%, rgb(0 0 0 / 100%) 95%, rgb(0 0 0 / 0%));
|
||||
}
|
||||
|
||||
.rounded-1-sm {
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
.display-sm {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.animate__animated-sm {
|
||||
animation-duration: var(--animate-duration);
|
||||
animation-fill-mode: both;
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
@forward 'vuetify/settings' with (
|
||||
$utilities: false,
|
||||
$color-pack: false,
|
||||
$reset: false,
|
||||
$layers: true,
|
||||
);
|
||||
Reference in New Issue
Block a user