blog.grace.moe

commit f129cd3f001613a7251a0bd140172173b952b03d
parent 0a1682d310961441c61c843be78fff3d60129194
Author: gracefu <81774659+gracefuu@users.noreply.github.com>
Date:   Thu,  1 May 2025 17:53:49 +0800

Make width toggleable between ~70 cpl to ~100 cpl

Diffstat:
M
content/posts/b.smd
 | 
6
++++++
M
layouts/templates/base.shtml
 | 
69
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-

2 files changed, 74 insertions(+), 1 deletion(-)
diff --git a/content/posts/b.smd b/content/posts/b.smd
@@ -23,6 +23,12 @@ I submitted an extended abstract to the POPL 2025 Student Research competition, 
 
 **Update 2025-01-23**: I'm honoured to receive the Gold prize ($500) and advance to the ACM SRC Grand Finals! Thank you for our discussions during the poster session and for listening to my talk!
 
+```=html
+<p class="full-bleed">
+I submitted an extended abstract to the POPL 2025 Student Research competition, which has been accepted into the poster presentation stage. See you at POPL 2025!
+</p>
+```
+
 ```
 code
 ```
diff --git a/layouts/templates/base.shtml b/layouts/templates/base.shtml
@@ -37,6 +37,19 @@ p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; hyphens: auto; }
 p { text-wrap: pretty; }
 h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
 #content { isolation: isolate; }
+
+/* Reset pointer events cause it messes up hitboxes */
+* { pointer-events: none; }
+:is(
+h1, h2, h3, h4, h5, h6,
+blockquote, aside, details,
+p, ul, ol, menu, dl, pre, [href]),
+:is(
+h1, h2, h3, h4, h5, h6,
+blockquote, aside, details,
+p, ul, ol, menu, dl, pre, [href]) * {
+  pointer-events: auto;
+}
     </style>
 
     <style>
@@ -45,6 +58,9 @@ h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
   --viewport-width: min(100vw, 600px);
   --viewport-padding: 15px;
   --content-width: calc(var(--viewport-width) - 2 * var(--viewport-padding));
+  --wide-viewport-width: min(100vw, 900px);
+  --wide-content-width: calc(var(--wide-viewport-width) - 2 * var(--viewport-padding));
+  --full-bleed-width: calc(100vw - 2 * var(--viewport-padding));
   --rem: 14pt;
 }
     </style>
@@ -72,9 +88,54 @@ p, ul, ol, menu, dl, pre {
 
 /* 2 ways to limit: limit-children and limit-self */
 .limit-self,
-.limit-children > *:not(.full-bleed) {
+.limit-children > * {
   width: var(--content-width);
   margin-inline: auto;
+  transition: all .3s cubic-bezier(0, 0, 0, 1);
+}
+.limit-children > .full-bleed {
+  width: var(--full-bleed-width);
+}
+padding-toggle:has(> padding-side > details[open]):has(> padding-side > details:not([open]))
+> padding-main .limit-children > *:not(.full-bleed),
+padding-toggle:has(> padding-side > details[open]):has(> padding-side > details:not([open]))
+> padding-main .limit-self {
+  width: var(--wide-content-width);
+}
+
+padding-toggle {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  width: 100%;
+}
+padding-main {
+  pointer-events: none;
+  width: 100%;
+}
+padding-side {
+  display: block;
+  width: 0;
+}
+padding-side ~ padding-side {
+  direction: rtl;
+}
+padding-side > details {
+  height: 100%;
+  width: calc(max(var(--viewport-padding), 50vw - var(--content-width) / 2 - var(--viewport-padding)));
+  transition: all .3s cubic-bezier(0, 0, 0, 1);
+}
+padding-toggle:has(> padding-side > details[open]):has(> padding-side > details:not([open]))
+> padding-side > details {
+  width: calc(max(var(--viewport-padding), 50vw - var(--wide-content-width) / 2 - var(--viewport-padding)));
+}
+padding-side > details > summary {
+  display: block;
+  height: 100%;
+  border-radius: var(--viewport-padding);
+}
+padding-side > details > summary:hover {
+  background: rgba(128, 0, 0, 2%);
 }
     </style>
 
@@ -268,9 +329,15 @@ ul, ol, dl, menu {
         </nav>
         <hr id="base-header-rule">
       </header>
+      <padding-toggle>
+      <padding-side><details><summary></summary></details></padding-side>
+      <padding-main>
       <div id="content">
         <super>
       </div>
+      </padding-main>
+      <padding-side><details><summary></summary></details></padding-side>
+      </padding-toggle>
       <footer id="base-footer" class="limit-children">
         <hr id="base-footer-rule">
         <p id="base-no-cookie">This <a href="//git.grace.moe/blog.grace.moe/log.html">site</a> uses no cookies. ❌🍪</p>