portrait

Author: motdotla

_includes/components/footer.html

@@ -3,7 +3,9 @@
     <p class="design-list-title">{{ site.data.footer.title }}</p>
     <p class="footer-cloud">
       {%- for link in site.data.footer.links %}
+      {%- unless link.theme_toggle and page.force_light %}
       <span class="footer-item">{% if link.theme_toggle %}<button type="button" class="design-link" data-radar-theme-toggle>{{ link.label }}</button>{% else %}<a class="design-link" href="{{ link.href }}"{% if link.external %} target="_blank" rel="noopener noreferrer"{% endif %}>{{ link.label }}</a>{% endif %}{% unless forloop.last %}<span class="footer-sep" aria-hidden="true">&nbsp;·</span>{% endunless %}</span>
+      {%- endunless %}
       {%- endfor %}
     </p>
   </div>

_includes/components/radar-nav.html

@@ -60,8 +60,10 @@
         {% capture nav_search_trigger %}<a href="/search" class="radar-nav-search" aria-label="Search - type /">{% include components/design-kbd.html key="/" %}</a>{% endcapture %}
         {% include components/design-tooltip.html text="Search - type /" position="bottom-end" content=nav_search_trigger %}
 
-        {% capture nav_theme_trigger %}<button type="button" class="radar-nav-theme" data-radar-theme-toggle aria-label="Modes - type M">{% include components/design-kbd.html key="M" %}</button>{% endcapture %}
-        {% include components/design-tooltip.html text="Modes - type M" position="bottom-end" content=nav_theme_trigger %}
+        {% unless page.force_light %}
+          {% capture nav_theme_trigger %}<button type="button" class="radar-nav-theme" data-radar-theme-toggle aria-label="Modes - type M">{% include components/design-kbd.html key="M" %}</button>{% endcapture %}
+          {% include components/design-tooltip.html text="Modes - type M" position="bottom-end" content=nav_theme_trigger %}
+        {% endunless %}
 
         {% capture nav_github_trigger %}<a href="https://github.com/dotenvx/dotenvx" target="_blank" rel="noopener noreferrer" class="radar-nav-icon" aria-label="Star on GitHub - 5.7k" data-umami-event="GitHub repository link"><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a>{% endcapture %}
         {% include components/design-tooltip.html text="Star on GitHub - 5.7k" position="bottom-end" content=nav_github_trigger %}

_includes/layouts/radar-theme.html

@@ -1,6 +1,7 @@
 <script>
   (function () {
     var MODES = ['light', 'dark', 'storm']
+    var FORCE_LIGHT = {{ page.force_light | default: false | jsonify }}
 
     function cookieDomain() {
       var host = location.hostname
@@ -36,13 +37,15 @@
     }
 
     function resolveThemeMode() {
+      if (FORCE_LIGHT) return 'light'
       var stored = readThemeMode()
       var mode = MODES.indexOf(stored) !== -1 ? stored : 'storm'
       persistThemeMode(mode)
       return mode
     }
 
     function applyThemeMode(mode) {
+      if (FORCE_LIGHT) mode = 'light'
       var root = document.documentElement
       root.classList.toggle('dark', mode === 'dark' || mode === 'storm')
       root.classList.toggle('storm', mode === 'storm')
@@ -75,8 +78,9 @@
     try {
       applyThemeMode(resolveThemeMode())
     } catch (e) {
-      document.documentElement.classList.add('dark', 'storm')
+      if (FORCE_LIGHT) document.documentElement.classList.remove('dark', 'storm')
+      else document.documentElement.classList.add('dark', 'storm')
     }
   })()
 </script>
-<meta name="theme-color" content="#14171c">
+<meta name="theme-color" content="{% if page.force_light %}#e4e7e6{% else %}#14171c{% endif %}">

_layouts/radar.html

@@ -5,16 +5,16 @@
     {% include layouts/meta.html %}
     {% include layouts/analytics.html %}
   </head>
-  <body class="radar-layout">
+  <body class="radar-layout{% if page.body_class %} {{ page.body_class }}{% endif %}">
     {% include components/storm-lightning.html %}
     {% include components/radar-nav.html %}
     <main class="radar-main">
       {{ content }}
     </main>
-    {% include components/footer.html %}
-    {% include components/design-theme-control.html %}
+    {% unless page.hide_footer %}{% include components/footer.html %}{% endunless %}
+    {% unless page.force_light %}{% include components/design-theme-control.html %}{% endunless %}
     {% include components/site-search.html %}
-    <script src="{{ '/assets/js/radar-theme.js' | relative_url }}"></script>
+    {% unless page.force_light %}<script src="{{ '/assets/js/radar-theme.js' | relative_url }}"></script>{% endunless %}
     <script src="{{ '/assets/js/design-choice.js' | relative_url }}"></script>
   </body>
 </html>

assets/img/got-env-portrait.png

@@ -3,15 +3,27 @@ title: "got .env?"
 description: Ask Claude to install dotenvx and protect your project’s secrets.
 permalink: /got-env
 layout: radar
+force_light: true
+body_class: gotenv-layout
 ---
 
 <style>
   .gotenv-page {
     align-items: center;
+    aspect-ratio: 2 / 3;
+    background:
+      linear-gradient(rgba(7, 10, 12, 0.34), rgba(7, 10, 12, 0.5)),
+      url('/assets/img/got-env-portrait.png') center 28% / cover no-repeat;
+    box-sizing: border-box;
     display: flex;
-    min-height: min(48rem, calc(100vh - 8rem));
+    height: calc(100svh - 4.5rem);
+    margin-left: auto;
+    margin-right: auto;
+    max-height: 93.75rem;
+    max-width: 62.5rem;
     padding: clamp(5rem, 14vh, 10rem) 0;
     text-align: center;
+    width: auto;
   }
 
   .gotenv-inner {
@@ -20,43 +32,61 @@ layout: radar
     flex-direction: column;
     margin: 0 auto;
     max-width: 44rem;
+    transform: translateY(clamp(3rem, 7vh, 4.5rem));
     width: 100%;
   }
 
   .gotenv-title {
-    color: var(--design-ink);
+    color: #ffffff;
     font-family: var(--design-font-sans);
-    font-size: clamp(4.5rem, 15vw, 10rem);
+    font-size: 72px;
     font-weight: 400;
     letter-spacing: -0.07em;
     line-height: 0.9;
     margin: 0;
+    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.32);
+    white-space: nowrap;
   }
 
   .gotenv-lede {
-    color: var(--design-body);
+    color: rgba(255, 255, 255, 0.94);
     font-family: var(--design-font-sans);
-    font-size: clamp(1.1rem, 2.2vw, 1.4rem);
+    font-size: 16.5px;
     letter-spacing: -0.02em;
     line-height: 1.45;
     margin: 2rem 0 0;
     max-width: 29rem;
+    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.52);
   }
 
   .gotenv-action {
     margin-top: 2rem;
+    width: 100%;
   }
 
   .gotenv-action .design-btn {
-    min-width: 11rem;
+    box-sizing: border-box;
+    display: block;
+    font-size: 13.5px;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 0.95rem 1.5rem;
+    width: min(21rem, 70%);
   }
 
   .gotenv-hint {
-    color: var(--design-secondary);
+    color: rgba(255, 255, 255, 0.74);
     font-family: var(--design-font-mono);
-    font-size: var(--design-text-compact);
+    font-size: 13px;
     letter-spacing: 0.04em;
     margin: 0.85rem 0 0;
+    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.58);
+  }
+
+  @media (max-width: 640px) {
+    .gotenv-page {
+      background-position: center 20%;
+    }
   }
 </style>
 
@@ -112,7 +142,7 @@ Finish with a concise summary of files changed, commands to use, which encrypted
           label="Copy prompt"
           id="gotenv-copy-prompt"
           class="design-btn--trial"
-          data_umami_event="gotenv-copy-prompt"
+          data_umami_event="Got env copy prompt click"
         %}
       </div>
       <p class="gotenv-hint" id="gotenv-copy-status" aria-live="polite">Paste into Claude Code</p>