aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/lib/Landing.svelte10
-rw-r--r--src/lib/LandingHero.svelte6
-rw-r--r--src/lib/Schedule/Days.svelte8
-rw-r--r--src/lib/User/BadgeWall/BadgePreview.svelte6
-rw-r--r--src/routes/+layout.svelte4
-rw-r--r--src/routes/+page.svelte6
-rw-r--r--src/routes/girls/+page.svelte12
-rw-r--r--src/routes/schedule/+page.svelte6
-rw-r--r--src/routes/settings/+page.svelte6
-rw-r--r--src/styles/_breakpoints.scss13
-rw-r--r--vite.config.ts1
11 files changed, 55 insertions, 23 deletions
diff --git a/src/lib/Landing.svelte b/src/lib/Landing.svelte
index bca1554c..4a6fa3d7 100644
--- a/src/lib/Landing.svelte
+++ b/src/lib/Landing.svelte
@@ -279,7 +279,9 @@ $effect(() => {
</div>
{/if}
-<style>
+<style lang="scss">
+ @use "breakpoints" as *;
+
.landing {
display: flex;
flex-direction: column;
@@ -518,7 +520,7 @@ $effect(() => {
}
}
- @media (max-width: 1000px) {
+ @media (max-width: $bp-lg) {
.tools-and-demo {
grid-template-columns: 1fr 1fr;
}
@@ -529,7 +531,7 @@ $effect(() => {
}
}
- @media (max-width: 800px) {
+ @media (max-width: $bp-md) {
.section-row,
.section-row.reverse {
flex-direction: column;
@@ -564,7 +566,7 @@ $effect(() => {
}
}
- @media (max-width: 500px) {
+ @media (max-width: $bp-sm) {
.tools-and-demo {
grid-template-columns: 1fr;
}
diff --git a/src/lib/LandingHero.svelte b/src/lib/LandingHero.svelte
index 66729335..bec9d1f4 100644
--- a/src/lib/LandingHero.svelte
+++ b/src/lib/LandingHero.svelte
@@ -51,7 +51,9 @@ const scrollPastHero = () => {
</button>
</section>
-<style>
+<style lang="scss">
+ @use "breakpoints" as *;
+
.hero {
min-height: calc(100dvh - 8rem);
display: flex;
@@ -172,7 +174,7 @@ const scrollPastHero = () => {
}
}
- @media (max-width: 600px) {
+ @media (max-width: $bp-sm) {
.hero {
min-height: calc(100vh - 6rem);
padding: 1.5rem;
diff --git a/src/lib/Schedule/Days.svelte b/src/lib/Schedule/Days.svelte
index ec36be5c..9ecf76b9 100644
--- a/src/lib/Schedule/Days.svelte
+++ b/src/lib/Schedule/Days.svelte
@@ -218,7 +218,9 @@ const episode = (media: Media, weekday: string) => {
<RateLimitedError type="Media lists" loginSessionError={false} card list={false} />
{/await}
-<style>
+<style lang="scss">
+ @use "breakpoints" as *;
+
.countdown {
white-space: nowrap;
float: right;
@@ -237,7 +239,7 @@ const episode = (media: Media, weekday: string) => {
page-break-inside: avoid;
}
- @media (max-width: 800px) {
+ @media (max-width: $bp-md) {
.cover-title-element {
display: none;
}
@@ -247,7 +249,7 @@ const episode = (media: Media, weekday: string) => {
}
}
- @media (max-width: 1600px) {
+ @media (max-width: $bp-2xl) {
.cover-title-element {
display: none;
}
diff --git a/src/lib/User/BadgeWall/BadgePreview.svelte b/src/lib/User/BadgeWall/BadgePreview.svelte
index e651a2aa..104a53da 100644
--- a/src/lib/User/BadgeWall/BadgePreview.svelte
+++ b/src/lib/User/BadgeWall/BadgePreview.svelte
@@ -218,7 +218,9 @@ const onClick = (event: MouseEvent) => {
</div>
{/if}
-<style>
+<style lang="scss">
+ @use "breakpoints" as *;
+
:global(.badge-preview img) {
border-radius: 8px;
max-height: 50vh;
@@ -239,7 +241,7 @@ const onClick = (event: MouseEvent) => {
gap: 1rem;
}
- @media (max-width: 768px) {
+ @media (max-width: $bp-md) {
.badge-preview {
flex-direction: column;
}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 460afcce..c0bf86e9 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -361,6 +361,8 @@ $: {
{/if}
<style lang="scss">
+ @use "breakpoints" as *;
+
.header {
font-family:
'DM Sans',
@@ -458,7 +460,7 @@ $: {
display: none;
}
- @media (max-width: 800px) {
+ @media (max-width: $bp-md) {
.header {
position: fixed;
top: 1.25rem;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ad3971d8..218bc8d5 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -331,7 +331,9 @@ onDestroy(() => {
</div>
{/if}
-<style>
+<style lang="scss">
+ @use "breakpoints" as *;
+
.balanced-list-flow {
display: grid;
grid-template-columns: repeat(var(--balanced-list-columns), minmax(0, 1fr));
@@ -355,7 +357,7 @@ onDestroy(() => {
margin: 0;
}
- @media (max-width: 800px) {
+ @media (max-width: $bp-md) {
.balanced-list-flow {
grid-template-columns: 1fr;
}
diff --git a/src/routes/girls/+page.svelte b/src/routes/girls/+page.svelte
index 88f06460..bbe57ac9 100644
--- a/src/routes/girls/+page.svelte
+++ b/src/routes/girls/+page.svelte
@@ -92,7 +92,9 @@ import "$styles/girls.scss";
{/await}
</details>
-<style>
+<style lang="scss">
+ @use "breakpoints" as *;
+
img {
border-radius: 8px;
width: 25vh;
@@ -102,25 +104,25 @@ import "$styles/girls.scss";
columns: 6;
}
- @media (max-width: 1280px) {
+ @media (max-width: $bp-xl) {
.languages ul {
columns: 5;
}
}
- @media (max-width: 1024px) {
+ @media (max-width: $bp-lg) {
.languages ul {
columns: 4;
}
}
- @media (max-width: 768px) {
+ @media (max-width: $bp-md) {
.languages ul {
columns: 3;
}
}
- @media (max-width: 512px) {
+ @media (max-width: $bp-sm) {
.languages ul {
columns: 2;
}
diff --git a/src/routes/schedule/+page.svelte b/src/routes/schedule/+page.svelte
index a1674c8f..139f333e 100644
--- a/src/routes/schedule/+page.svelte
+++ b/src/routes/schedule/+page.svelte
@@ -85,14 +85,16 @@ onMount(async () => {
{/await}
{/if}
-<style>
+<style lang="scss">
+ @use "breakpoints" as *;
+
.schedule-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(35%, 1fr));
gap: 0.5em;
}
- @media (max-width: 800px) {
+ @media (max-width: $bp-md) {
.schedule-container {
grid-template-columns: 1fr !important;
}
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index c93f4dc9..054a126b 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -94,7 +94,9 @@ export let data: PageData;
<Category title={$locale().settings.attributions.title} open={false}><Attributions /></Category>
{/if}
-<style>
+<style lang="scss">
+ @use "breakpoints" as *;
+
.small-categories {
display: grid;
grid-template-columns: 1fr 1fr;
@@ -102,7 +104,7 @@ export let data: PageData;
align-items: start;
}
- @media (max-width: 600px) {
+ @media (max-width: $bp-sm) {
.small-categories {
grid-template-columns: 1fr;
}
diff --git a/src/styles/_breakpoints.scss b/src/styles/_breakpoints.scss
new file mode 100644
index 00000000..ab7d33aa
--- /dev/null
+++ b/src/styles/_breakpoints.scss
@@ -0,0 +1,13 @@
+// Canonical viewport breakpoints. Always max-width queries.
+//
+// $bp-sm : phones (collapses 500, 512, 600)
+// $bp-md : small tablets, narrow (collapses 768, 800)
+// $bp-lg : laptops (collapses 1000, 1024)
+// $bp-xl : standard desktops
+// $bp-2xl : wide / external monitors
+
+$bp-sm: 600px;
+$bp-md: 800px;
+$bp-lg: 1024px;
+$bp-xl: 1280px;
+$bp-2xl: 1600px;
diff --git a/vite.config.ts b/vite.config.ts
index a9790a35..8c76be4e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -21,6 +21,7 @@ export default defineConfig({
preprocessorOptions: {
scss: {
api: "modern-compiler",
+ loadPaths: ["src/styles"],
},
},
},
generated by cgit v1.2.3 (git 2.25.1) at 2026-05-19 16:45:35 +0000