src/components/ThemeModal.astro

@@ -64,16 +64,15 @@ import TextBox from "./TextBox.astro";
 <script>
     var lessLoaded = false
 
-    class ThemingOption<T> {
+    class ThemingOption {
         input: HTMLInputElement | undefined
-        value: T;
         onchange:
-            (opt: ThemingOption<T>, upd: boolean) => any =
+            (opt: ThemingOption, upd: boolean) => any =
             (_opt, _upd) => {}
 
         constructor (
             inputId: string,
-            onchange: (opt: ThemingOption<T>, upd: boolean) => any
+            onchange: (opt: ThemingOption, upd: boolean) => any
         ) {
             this.input = document.getElementById(inputId) as HTMLInputElement
             this.onchange = onchange
@@ -104,15 +103,6 @@ import TextBox from "./TextBox.astro";
         }
     }
 
-    /** Converts any object to number.
-     *  Returns the default value passed to `def` parameter
-     *  if `Number(val)` returns `NaN`.
-     */
-    const toNum = (val: any, def: number) => {
-        const res = Number(val)
-        return isNaN(res) ? def : res
-    }
-
     const colorRegex = /#?([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})/
     /** Parses color-like string and
      *  returns the color in the general format.
@@ -124,12 +114,11 @@ import TextBox from "./TextBox.astro";
         return (val.match(colorRegex) || [])[1]
     }
     
-    new ThemingOption<boolean>(
+    new ThemingOption(
         'dark',
         (opt, upd) => {
             if (upd) {
                 const state = opt.input.checked
-                opt.value = state
                 localStorage.setItem('dc09_dark', state ? '1' : '0')
                 return opt.onchange(opt, false)
             }
@@ -143,81 +132,70 @@ import TextBox from "./TextBox.astro";
                     media.matches
                 )
             )
-            opt.value = state
             opt.input.checked = state
             document.body.dataset.dark = state ? '1' : '0'
         }
     )
 
-    const purebgOpt = new ThemingOption<boolean>(
+    const purebgOpt = new ThemingOption(
         'purebg',  // pure background
         (opt, upd) => {
             if (upd) {
                 const state = opt.input.checked
-                opt.value = state
                 localStorage.setItem('dc09_purebg', state ? '1' : '0')
                 reloadTheme()
                 return opt.onchange(opt, false)
             }
 
-            const value = toBool(localStorage.getItem('dc09_purebg'))
+            opt.input.checked = toBool(localStorage.getItem('dc09_purebg'))
-            opt.value = value
-            opt.input.checked = value
         }
     )
 
-    const accentOpt = new ThemingOption<string>(
+    const accentOpt = new ThemingOption(
         'accent',
         (opt, upd) => {
             if (upd) {
                 if (!opt.input.validity.valid) return
                 const color = toColor(opt.input.value)
                 if (!color) return
-                opt.value = color
                 localStorage.setItem('dc09_accent', color)
                 reloadTheme()
                 return
             }
 
-            const color = toColor(localStorage.getItem('dc09_accent')) || '6570d6'
+            const color = localStorage.getItem('dc09_accent') || '6570d6'
-            opt.value = color
             opt.input.value = color
         }
     )
 
-    const bdrsOpt = new ThemingOption<number>(
+    const bdrsOpt = new ThemingOption(
         'bdrs',  // border-radius, as in Emmet
         (opt, upd) => {
             if (upd) {
-                const valueStr = opt.input.value
+                const value = opt.input.value
-                const value = Number(opt.input.value)
+                localStorage.setItem('dc09_bdrs', value)
-                if (isNaN(value)) return;
-                opt.value = value
-                localStorage.setItem('dc09_bdrs', valueStr)
                 reloadTheme()
                 return
             }
 
-            const value = toNum(localStorage.getItem('dc09_bdrs'), 2)
+            let value = Number(localStorage.getItem('dc09_bdrs'))
-            opt.value = value
+            value = isNaN(value) ? 2 : value
             opt.input.value = String(value)
             opt.input.dispatchEvent(new Event('updatedByJavascript'))
         }
     )
 
     const colorsSection = document.getElementById('custom-colors')
-    new ThemingOption<boolean>(
+    new ThemingOption(
         'custom-theme',
         (opt, upd) => {
             if (upd) {
                 const state = opt.input.checked
-                opt.value = state
                 localStorage.setItem('dc09_custom', state ? '1' : '0')
                 return opt.onchange(opt, false)
             }
 
             const state = toBool(localStorage.getItem('dc09_custom'))
-            opt.value = state
             opt.input.checked = state
             colorsSection.dataset.show = state ? '1' : '0'
 
@@ -247,9 +225,9 @@ import TextBox from "./TextBox.astro";
     }
 
     function reloadTheme() {
-        const accent = '#' + accentOpt.value
+        const accent = '#' + toColor(accentOpt.input.value)
-        const bdrs = bdrsOpt.value
+        const bdrs = Number(bdrsOpt.input.value)
-        const purebg = purebgOpt.value
+        const purebg = purebgOpt.input.checked
         eval('less').modifyVars({
             accent: accent,
             bdrs: `${bdrs}rem`,

src/layouts/BlogLayout.astro

@@ -6,21 +6,16 @@ import MenuItem from "../components/MenuItem.astro";
 export interface Props {
     title: string;
     description: string;
-    article?: boolean;
 }
 
-const { title, description, article = false } = Astro.props;
+const { title, description } = Astro.props;
 ---
 
 <Layout title={"Blog | " + title} description={description}>
     <slot name="metadata" slot="metadata" />
     <Menu>
-        {
+        <MenuItem name="Home" icon="&#xf104;" link="/" />
-            !article ?
+        <MenuItem name="Articles" icon="&#xf015;" link="/blog" />
-            <MenuItem name="Home" icon="&#xf104;" link="/" />
-            <MenuItem name="Articles" icon="&#xf1ea;" link="/blog" /> :
-            <MenuItem name="Articles" icon="&#xf104;" link="/blog" />
-        }
         <MenuItem name="Shorts" icon="&#xf0e7;" link="/blog/shorts" />
         <MenuItem name="Random" icon="&#xf522;" link="/blog/random" />
         <MenuItem name="Search" icon="&#xf002;" link="/blog/search" />

src/layouts/Layout.astro

@@ -34,7 +34,7 @@ const { title, description } = Astro.props;
 		padding: 0;
 
 		box-sizing: border-box;
-		padding: 0 @body-padding;
+		padding: 0 0.5rem;
 
 		background: var(--bg);
 		color: var(--fg);
@@ -46,12 +46,8 @@ const { title, description } = Astro.props;
 
 	main  {
 		margin: auto;
-		padding: @main-padding;
+		padding: 0.25rem;
 		max-width: @max-width;
-		/*
-		width: 100%;
-		overflow-x: hidden;
-		*/
 	}
 
 	article {

src/pages/blog/[slug].astro

@@ -26,7 +26,7 @@ const {
 const locale = 'ru-RU';
 ---
 
-<BlogLayout title={title} description={description} article={true}>
+<BlogLayout title={title} description={description}>
     <Fragment slot="metadata">
         <meta property="og:type" content="article" />
         <meta property="og:title" content={title} />
@@ -50,8 +50,6 @@ const locale = 'ru-RU';
 </BlogLayout>
 
 <style lang="less" is:global>
-    @import "/src/styles/max_width.less";
-
     article {
         & > h1:first-of-type {
             display: none;
@@ -85,9 +83,6 @@ const locale = 'ru-RU';
     }
 
     pre {
-        max-width: calc(100vw - @body-padding * 2 - @main-padding * 2) !important;
-        box-sizing: border-box;
-
         padding: 1rem;
         border-radius: var(--bdrs);
 

src/styles/max_width.less

@@ -1,3 +1 @@
 @max-width: 800px;
-@body-padding: 0.5rem;
-@main-padding: 0.25rem;