initial commitHEAD primary

author: netop://ウィビ <paul@webb.page> 2026-06-05 10:25:53 -0700
committer: netop://ウィビ <paul@webb.page> 2026-06-05 10:25:53 -0700
commit: cdef21682a88497317f746a333f6201c40d7666f (patch)
tree: a5cbb94c7f4719b6dcb652aaf820d89cd9df5bb1 /index.html
download: dsgn-cdef21682a88497317f746a333f6201c40d7666f.tar.gz
dsgn-cdef21682a88497317f746a333f6201c40d7666f.zip
1 files changed, 446 insertions, 0 deletions
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..4c63b50
--- /dev/null
+++ b/index.html
@@ -0,0 +1,446 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="author" content="Paul Anthony Webb"/>
+    <meta name="description" content="Digital Architechs for Ideas Never Cease and select clients"/>
+    <meta name="fediverse:creator" content="@netopwibby@social.coop"/>
+    <meta name="title" content="Design Services for the Good Natured"/>
+    <meta name="theme-color" content="oklch(25.11% 0.006 258.36)"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
+    <meta name="viewport-fit" content="cover"/>
+
+    <meta name="apple-mobile-web-app-title" content="Design Services for the Good Natured"/>
+    <meta name="application-name" content="Design Services for the Good Natured"/>
+    <meta name="msapplication-TileColor" content="oklch(25.11% 0.006 258.36)"/>
+    <meta name="msapplication-TileImage" content="/assets/apple-touch-icon.png"/>
+    <meta name="theme-color" content="oklch(25.11% 0.006 258.36)"/>
+
+    <meta property="og:image" content="/assets/og-image.png"/>
+    <meta property="og:image:height" content="720"/>
+    <meta property="og:image:width" content="1280"/>
+    <meta property="og:locale" content="en_US"/>
+    <meta property="og:type" content="website"/>
+    <meta property="og:url" content="https://inc.sh"/>
+
+    <title>Design Services for the Good Natured</title>
+
+    <link rel="icon" href="/assets/favicon.svg" type="image/svg+xml"/>
+    <link rel="mask-icon" href="/assets/favicon.svg" color="#010000"/>
+    <link rel="shortcut icon" href="/assets/favicon.ico"/>
+    <link rel="stylesheet" href="https://uchu.style/uchu.css"/>
+    <link rel="stylesheet" href="./assets/style/type.css"/>
+    <link rel="stylesheet" href="./assets/style/root.css"/>
+
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0; padding: 0;
+        box-sizing: inherit;
+      }
+
+      :root {
+        --line-height: calc(var(--font-size) * 1.5);
+      }
+
+      @media (max-width: 700px) {
+        :root {
+          --line-height: calc(var(--font-size) * 2);
+        }
+      }
+
+      html {
+        box-sizing: border-box;
+      }
+
+      body {
+        background-color: var(--uchu-yang);
+        display: flex;
+        flex-direction: column;
+        font-family: var(--font-mono);
+        font-size: 12px;
+        letter-spacing: -0.05rem;
+        line-height: var(--line-height);
+        min-height: 100vh;
+      }
+
+      .undershirt {
+        margin-left: auto;
+        margin-right: auto;
+        max-width: 800px;
+        width: 100%;
+      }
+
+      @media (max-width: 900px) {
+        .undershirt {
+          padding-left: 2rem;
+          padding-right: 2rem;
+        }
+      }
+
+      main {
+        color: var(--uchu-yin);
+        flex: 1;
+      }
+
+      a {
+        color: inherit;
+        font-weight: 600;
+      }
+
+      p + p {
+        margin-top: 0.5rem;
+      }
+
+      /*——— header */
+
+      header {
+        background-color: var(--uchu-yin-9);
+        color: var(--uchu-yang);
+        margin-bottom: 1rem;
+        padding-bottom: 0.5rem;
+        padding-top: 3rem;
+        text-transform: uppercase;
+      }
+
+      header h1 {
+        font-size: 1.5rem;
+        font-weight: 400;
+
+        span {
+          opacity: 0.3;
+        }
+      }
+
+      .smallcaps {
+        top: -2px; right: -2px;
+
+        border: 1px solid var(--uchu-yin);
+        border-radius: 0.5rem;
+        font-size: 0.8rem;
+        letter-spacing: 0.05rem;
+        line-height: 0;
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+        position: relative;
+        text-transform: uppercase;
+      }
+
+      /*——— intro */
+
+      .intro {
+        font-size: 1.25rem;
+        padding-bottom: 5rem;
+      }
+
+      /*——— sections */
+
+      .development,
+      .manifesto,
+      .research,
+      footer {
+        font-size: 1rem;
+        position: relative;
+        text-transform: uppercase;
+      }
+
+      .content {
+        flex: 1;
+        text-transform: none;
+        width: 100%;
+
+        h3 {
+          display: inline-block;
+          font-size: inherit;
+          margin-bottom: 1rem;
+        }
+
+        figure {
+          margin-top: 1rem;
+          width: 100%;
+
+          img {
+            width: 100%;
+          }
+        }
+
+        p {
+          line-height: 1.33;
+
+          span {
+            user-select: none;
+
+            &:not(.title) {
+              opacity: 0.15;
+            }
+
+            &.title {
+              opacity: 0.3;
+            }
+          }
+        }
+
+        .title {
+          margin-right: 1rem;
+          text-transform: uppercase;
+          white-space: pre;
+
+          @media (max-width: 600px) {
+            display: block;
+          }
+        }
+
+        li {
+          position: relative;
+        }
+
+        li p:first-of-type {
+          padding-top: 1rem;
+        }
+
+        li:not(:last-of-type) {
+          margin-bottom: 2rem;
+          padding-bottom: 2.5rem;
+
+          &::after {
+            width: 100%; height: 1px;
+            bottom: -1px; left: 0;
+
+            background-color: var(--uchu-yin-3);
+            content: "";
+            opacity: 0.3;
+            position: absolute;
+          }
+        }
+      }
+
+      .development::before,
+      .manifesto::before,
+      .research::before {
+        width: 100%; height: 1px;
+        top: 0; left: 0;
+
+        background-color: var(--uchu-yin-3);
+        content: "";
+        opacity: 0.3;
+        position: absolute;
+      }
+
+      section:last-of-type::after {
+        width: 100%; height: 1px;
+        bottom: 0; left: 0;
+
+        background-color: var(--uchu-yin-3);
+        content: "";
+        opacity: 0.3;
+        position: absolute;
+      }
+
+      /*——— rows */
+
+      .row {
+        padding-bottom: 0.5rem;
+        padding-top: 0.5rem;
+      }
+
+      @media (min-width: 701px) {
+        .row {
+          display: flex;
+          flex-direction: row;
+        }
+      }
+
+      @media (max-width: 700px) {
+        .row {
+          padding-bottom: 1.5rem;
+          padding-top: 1.5rem;
+        }
+      }
+
+      /*——— row content */
+
+      .row > p {
+        width: 200px;
+      }
+
+      @media (max-width: 700px) {
+        .row > p {
+          opacity: 0.3;
+        }
+      }
+
+      /*——— row lists */
+
+      .row ol,
+      .row ul {
+        list-style-type: none;
+      }
+
+      @media (max-width: 700px) {
+        .row ol,
+        .row ul {
+          padding-top: 0.25rem;
+        }
+      }
+
+      .row ol {
+        counter-reset: item;
+      }
+
+      .row ol li::before {
+        content: counter(item, decimal-leading-zero) ". ";
+        counter-increment: item;
+      }
+
+      @media (min-width: 701px) {
+        .row ul li {
+          cursor: default;
+        }
+      }
+
+      .row ol li:not(:first-of-type),
+      .row ul li:not(:first-of-type) {
+        padding-top: 0.5rem;
+      }
+
+      @media (min-width: 701px) {
+        .row ul li:not(:hover) span {
+          opacity: 0;
+        }
+      }
+
+      @media (max-width: 700px) {
+        .row ul li span {
+          opacity: 0.3;
+        }
+      }
+
+      /*——— footer */
+
+      footer {
+        color: var(--uchu-yin);
+        padding-bottom: 2rem;
+        padding-top: 5rem;
+        position: relative;
+      }
+    </style>
+  </head>
+
+  <body>
+    <header>
+      <div class="undershirt">
+        <h1>design services <span>for the</span> good natured.</h1>
+      </div>
+    </header>
+
+    <main>
+      <section class="intro">
+        <div class="undershirt">
+          <p>Digital Architechs for Ideas Never Cease</p>
+          <p><span class="smallcaps">and</span> <em>select clients</em></p>
+        </div>
+      </section>
+
+      <section class="development">
+        <div class="undershirt">
+          <div class="row">
+            <p>Mission</p>
+
+            <div class="content">
+              <p>At dsgn., we believe that design is not just about looks. What you <em>feel</em> and <em>experience</em> can and <strong>should</strong> be considered as well.</p>
+              <p>The Web is the great equalizer for ideas. One can easily get their own ideas realized and launched.</p>
+              <p>We exist to assist in this incredible process.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="research">
+        <div class="undershirt">
+          <div class="row">
+            <p>Contact</p>
+
+            <div class="content">
+              <a href="mailto:dsgn@inc.sh?subject=Let's work together">dsgn@inc.sh</a> |
+              <a href="https://tally.so/r/w4l7V5" target="_blank">client intake questionaire</a>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="manifesto">
+        <div class="undershirt">
+          <div class="row">
+            <p>Work</p>
+
+            <ol class="content">
+              <li>
+                <p><span class="title">Client</span> ChronVer</p>
+                <p><span class="title">Focus </span> Developer Tooling</p>
+                <p><span class="title">Tasks </span> Art Direction <span>/</span> Web Design <span>/</span> Web Development</p>
+                <p><span class="title">URL   </span> <a href="https://chronver.org?ref=dsgn.inc.sh">chronver.org</a></p>
+
+                <figure>
+                  <img src="/assets/work/chronver.jpeg"/>
+                </figure>
+              </li>
+
+              <li>
+                <p><span class="title">Client</span> Dap</p>
+                <p><span class="title">Focus </span> Blockchain</p>
+                <p><span class="title">Tasks </span> Art Direction <span>/</span> Web Design <span>/</span> Web Development</p>
+                <p><span class="title">URL   </span> <a href="https://dap.sh?ref=dsgn.inc.sh">dap.sh</a></p>
+
+                <figure>
+                  <img src="/assets/work/dap.jpeg"/>
+                </figure>
+              </li>
+
+              <li>
+                <p><span class="title">Client</span> uchū</p>
+                <p><span class="title">Focus </span> Designer Tooling <span>/</span> Developer Tooling</p>
+                <p><span class="title">Tasks </span> Art Direction <span>/</span> Web Design <span>/</span> Web Development</p>
+                <p><span class="title">URL   </span> <a href="https://uchu.style?ref=dsgn.inc.sh">uchu.style</a></p>
+
+                <figure>
+                  <img src="/assets/work/uchu.jpeg"/>
+                </figure>
+              </li>
+
+              <li>
+                <p><span class="title">Client</span> Nickel</p>
+                <p><span class="title">Focus </span> Video Hosting</p>
+                <p><span class="title">Tasks </span> Art Direction <span>/</span> Web Design <span>/</span> Web Development</p>
+                <p><span class="title">URL   </span> <a href="https://nickel.video?ref=dsgn.inc.sh">nickel.video</a></p>
+
+                <figure>
+                  <img src="/assets/work/nickel.jpeg"/>
+                </figure>
+              </li>
+            </ol>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <footer>
+      <div class="undershirt">
+        <p>
+          &copy; 2025&mdash;<script>
+            (() => {
+              const x = document.getElementsByTagName("script");
+              const y = x[x.length - 1];
+              const z = document.createTextNode((new Date()).getFullYear());
+
+              y.parentNode.insertBefore(z, y);
+            })();
+          </script><noscript>&infin;</noscript> Ideas Never Cease, LLC d/b/a dsgn. All Rights Reserved.
+        </p>
+
+        <p>Last updated 2026.06.05</p>
+      </div>
+    </footer>
+  </body>
+</html>
author	netop://ウィビ <paul@webb.page>	2026-06-05 10:25:53 -0700
committer	netop://ウィビ <paul@webb.page>	2026-06-05 10:25:53 -0700
commit	cdef21682a88497317f746a333f6201c40d7666f (patch)
tree	a5cbb94c7f4719b6dcb652aaf820d89cd9df5bb1 /index.html
download	dsgn-cdef21682a88497317f746a333f6201c40d7666f.tar.gz dsgn-cdef21682a88497317f746a333f6201c40d7666f.zip