summaryrefslogtreecommitdiff
diff options
from:
to:
context:
space:
mode:
Diffstat
-rw-r--r--static/input.css46
-rw-r--r--static/output.css45
-rw-r--r--views/layouts/blog-page.html10
3 files changed, 84 insertions, 17 deletions
diff --git a/static/input.css b/static/input.css
index c105d8f..e1dd950 100644
--- a/static/input.css
+++ b/static/input.css
@@ -124,13 +124,21 @@
background-size: 10vw;
}
+body:has(.lg-container:not([class~="lg-inline"])) .desktop-sidebar-custom {
+ display: none !important;
+}
+
.mobile-topbar-custom {
width: 90vw;
- height: 10vh;
- background-size: 20vh;
+ height: 8%;
+ background-size: 16vh;
margin-left: 5vw;
}
+body:has(.lg-container:not([class~="lg-inline"])) .mobile-topbar-custom {
+ display: none !important;
+}
+
.logo-custom {
width: 3.5vw;
height: 20vw;
@@ -314,10 +322,18 @@
.lg-backdrop {
background-color: var(--background-light-color);
+ opacity: 0.8 !important;
+}
+
+.lg-container:not([class~="lg-inline"]) .lg-outer {
+ width: 80%;
+ height: 80%;
+ margin: 10%;
}
.lg-thumb-outer {
background-color: var(--background-light-color) !important;
+ opacity: 0.8 !important;
}
.lg-prev {
@@ -338,6 +354,19 @@
height: 1vmax;
}
+.lg-container:not([class~="lg-inline"]) .lg-counter {
+ font-size: 2vmax;
+ height: 2vmax;
+}
+
+.lg-content {
+ top: 3vmax !important;
+}
+
+.lg-container:not([class~="lg-inline"]) .lg-content {
+ top: 4vmax !important;
+}
+
.lg-toolbar .lg-icon {
padding: 0 0.7vmax;
font-size: 1.5vmax !important;
@@ -346,6 +375,11 @@
color: var(--main-dark-color);
}
+.lg-container:not([class~="lg-inline"]) .lg-toolbar .lg-icon {
+ font-size: 3vmax !important;
+ height: 3vmax;
+}
+
.lg-toolbar .lg-icon:hover {
color: var(--main-medium-color);
}
@@ -431,16 +465,16 @@
}
.nav-icon-custom {
- font-size: 6vh !important;
+ font-size: 5vh !important;
-webkit-text-stroke: 0.1vh var(--sidebar-stroke-color);
- width: 10vh;
- height: 10vh;
+ width: 8vh;
+ height: 8vh;
align-content: center;
text-align: center;
}
.nav-icon-custom:hover {
- font-size: 8vh;
+ font-size: 7vh;
}
.bg-pattern-body {
diff --git a/static/output.css b/static/output.css
index d020762..da5e51b 100644
--- a/static/output.css
+++ b/static/output.css
@@ -181,6 +181,9 @@
.relative {
position: relative;
}
+ .sticky {
+ position: sticky;
+ }
.z-0 {
z-index: 0;
}
@@ -241,6 +244,9 @@
.flex {
display: flex;
}
+ .h-\[92vh\] {
+ height: 92vh;
+ }
.h-auto {
height: auto;
}
@@ -511,12 +517,18 @@
width: 5vw;
background-size: 10vw;
}
+body:has(.lg-container:not([class~="lg-inline"])) .desktop-sidebar-custom {
+ display: none !important;
+}
.mobile-topbar-custom {
width: 90vw;
- height: 10vh;
- background-size: 20vh;
+ height: 8%;
+ background-size: 16vh;
margin-left: 5vw;
}
+body:has(.lg-container:not([class~="lg-inline"])) .mobile-topbar-custom {
+ display: none !important;
+}
.logo-custom {
width: 3.5vw;
height: 20vw;
@@ -656,9 +668,16 @@
}
.lg-backdrop {
background-color: var(--background-light-color);
+ opacity: 0.8 !important;
+}
+.lg-container:not([class~="lg-inline"]) .lg-outer {
+ width: 80%;
+ height: 80%;
+ margin: 10%;
}
.lg-thumb-outer {
background-color: var(--background-light-color) !important;
+ opacity: 0.8 !important;
}
.lg-prev {
background-color: var(--background-light-color);
@@ -675,6 +694,16 @@
padding-top: 0;
height: 1vmax;
}
+.lg-container:not([class~="lg-inline"]) .lg-counter {
+ font-size: 2vmax;
+ height: 2vmax;
+}
+.lg-content {
+ top: 3vmax !important;
+}
+.lg-container:not([class~="lg-inline"]) .lg-content {
+ top: 4vmax !important;
+}
.lg-toolbar .lg-icon {
padding: 0 0.7vmax;
font-size: 1.5vmax !important;
@@ -682,6 +711,10 @@
width: auto;
color: var(--main-dark-color);
}
+.lg-container:not([class~="lg-inline"]) .lg-toolbar .lg-icon {
+ font-size: 3vmax !important;
+ height: 3vmax;
+}
.lg-toolbar .lg-icon:hover {
color: var(--main-medium-color);
}
@@ -748,15 +781,15 @@
display: none;
}
.nav-icon-custom {
- font-size: 6vh !important;
+ font-size: 5vh !important;
-webkit-text-stroke: 0.1vh var(--sidebar-stroke-color);
- width: 10vh;
- height: 10vh;
+ width: 8vh;
+ height: 8vh;
align-content: center;
text-align: center;
}
.nav-icon-custom:hover {
- font-size: 8vh;
+ font-size: 7vh;
}
.bg-pattern-body {
background-size: 10vh;
diff --git a/views/layouts/blog-page.html b/views/layouts/blog-page.html
index 1ceea4a..427f33e 100644
--- a/views/layouts/blog-page.html
+++ b/views/layouts/blog-page.html
@@ -24,7 +24,7 @@
</style>
</head>
-<body data-theme="olive" class="font-spectral text-main-dark overflow-hidden bg-interlocked-hexagons h-screen flex">
+<body data-theme="night" class="font-spectral text-main-dark overflow-hidden bg-interlocked-hexagons h-screen flex">
<script>
function switchTheme(theme) {
@@ -40,11 +40,11 @@
document.body.setAttribute('data-theme', theme);
}
- const savedTheme = localStorage.getItem('theme') || 'olive';
+ const savedTheme = localStorage.getItem('theme') || 'night';
switchTheme(savedTheme);
</script>
- <div class="desktop-sidebar-custom fixed bg-squares-and-triangles bg-repeat flex-col items-center shadow-2xl z-20 h-screen desktop">
+ <div class="desktop-sidebar-custom sticky bg-squares-and-triangles bg-repeat flex-col items-center shadow-2xl z-20 h-screen desktop">
<div class="logo-custom text-sidebar font-patua font-extrabold text-center relative z-20">
saya.today
</div>
@@ -56,7 +56,7 @@
</div>
</div>
- <div class="bg-background-dark z-10 h-screen desktop" style="padding-left: 5vw;">
+ <div class="bg-background-dark z-10 h-screen desktop">
<div class="border-left-custom bg-background-dark"></div>
<div class="content-square flex flex-col bg-background-dark relative mt-vmin1-6 mx-vmin1-6">
@@ -104,7 +104,7 @@
</div>
</div>
- <div class="bg-background-dark flex-row z-10 w-vw90 h-vh90 mobile" style="margin-left: 5vw; margin-top: 10vh;">
+ <div class="bg-background-dark flex-row z-10 w-vw90 h-[92vh] mobile" style="margin-left: 5vw; margin-top: 8vh;">
<div class="border-left-custom bg-background-dark"></div>
<div class="content-square flex flex-col bg-background-dark relative mt-vmin1-6 mx-vmin1-6">
generated by cgitext v1.3.1+13 (git 2.54.0) at 2026-08-20 17:20:37 +0000