initial commitHEADprimary

16 files changed, 479 insertions, 0 deletions

diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..d20ac7a
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,21 @@
+# EditorConfig configuration for netop://ウエハ's projects
+# http://editorconfig.org
+
+# Top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file, utf-8 charset
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+# Match diffs, avoid to trim trailing whitespace
+[*.{diff,patch}]
+trim_trailing_whitespace = false
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..11c8d63
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+# Files
+.DS_Store
+Thumbs.db
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..1d729b7
--- /dev/null
+++ b/README.md
@@ -0,0 +1,9 @@
+# homepage
+
+> Homepage of Ideas Never Cease
+
+
+
+It's just HTML, CSS, and a lil' JavaScript that degrades gracefully.
+
+To the point, that's it.
diff --git a/assets/apple-touch-icon.png b/assets/apple-touch-icon.png
new file mode 100644
index 0000000..3f97c2a
--- /dev/null
+++ b/assets/apple-touch-icon.png
diff --git a/assets/favicon.ico b/assets/favicon.ico
new file mode 100644
index 0000000..7bf9cea
--- /dev/null
+++ b/assets/favicon.ico
diff --git a/assets/favicon.svg b/assets/favicon.svg
new file mode 100644
index 0000000..feefbac
--- /dev/null
+++ b/assets/favicon.svg
@@ -0,0 +1 @@
+<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m29.856 55.488c-14.112 0-25.344-11.52-25.344-25.632s11.232-25.344 25.344-25.344 25.632 11.232 25.632 25.344-11.52 25.632-25.632 25.632z" transform="scale(0.266667)"/></svg>
diff --git a/assets/img/sky-a.jpg b/assets/img/sky-a.jpg
new file mode 100644
index 0000000..a2936c0
--- /dev/null
+++ b/assets/img/sky-a.jpg
diff --git a/assets/img/sky-b.jpg b/assets/img/sky-b.jpg
new file mode 100644
index 0000000..e32ac6a
--- /dev/null
+++ b/assets/img/sky-b.jpg
diff --git a/assets/og-image.png b/assets/og-image.png
new file mode 100644
index 0000000..c86ce75
--- /dev/null
+++ b/assets/og-image.png
diff --git a/assets/style/root.css b/assets/style/root.css
new file mode 100644
index 0000000..28b325d
--- /dev/null
+++ b/assets/style/root.css
@@ -0,0 +1,38 @@
+:root {
+  --background-color: var(--uchu-gray-1);
+  --base-grid-color1: oklch(var(--uchu-blue-3-raw) / 30%);
+  --base-grid-color2: oklch(var(--uchu-purple-3-raw) / 30%);
+  --baseline: calc(var(--line-height) / 2);
+  --block-spacing-bottom: var(--line-height);
+  --block-spacing-top: 0;
+  --column-gap: calc(var(--line-height) * 2);
+  --display-scale: 1;
+  --font-mono: "inc mono";
+  --font-sans: null;
+  --font-serif: null;
+  --font-size: 12px;
+  --foreground-color: oklch(var(--uchu-yin-raw) / 80%);
+  --h1-size: 2.8rem;
+  --h2-size: 2.2rem;
+  --h3-size: 1.4rem;
+  --h4-size: 1.1rem;
+  --hr-thickness: 2px;
+  --line-height: calc(var(--font-size) * 1.5);
+  --pixel: 1px;
+  --row-gap: var(--line-height);
+
+  @media only screen and (min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
+    --display-scale: 2;
+    --pixel: 0.5px;
+  }
+
+  @media only screen and (min-device-pixel-ratio: 2.5), only screen and (min-resolution: 2.5dppx) {
+    --display-scale: 3;
+    --pixel: 0.34px;
+  }
+
+  @media only screen and (min-device-pixel-ratio: 3.5), only screen and (min-resolution: 3.5dppx) {
+    --display-scale: 4;
+    --pixel: 0.25px;
+  }
+}
diff --git a/assets/style/type.css b/assets/style/type.css
new file mode 100644
index 0000000..2096864
--- /dev/null
+++ b/assets/style/type.css
@@ -0,0 +1,31 @@
+@font-face {
+  font-display: swap;
+  font-family: "inc mono";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../type/400.woff2") format("woff2");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "inc mono";
+  font-style: italic;
+  font-weight: 400;
+  src: url("../type/400i.woff2") format("woff2");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "inc mono";
+  font-style: normal;
+  font-weight: 600;
+  src: url("../type/600.woff2") format("woff2");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "inc mono";
+  font-style: italic;
+  font-weight: 600;
+  src: url("../type/600i.woff2") format("woff2");
+}
diff --git a/assets/type/400.woff2 b/assets/type/400.woff2
new file mode 100644
index 0000000..ffafed3
--- /dev/null
+++ b/assets/type/400.woff2
diff --git a/assets/type/400i.woff2 b/assets/type/400i.woff2
new file mode 100644
index 0000000..527be83
--- /dev/null
+++ b/assets/type/400i.woff2
diff --git a/assets/type/600.woff2 b/assets/type/600.woff2
new file mode 100644
index 0000000..57a7053
--- /dev/null
+++ b/assets/type/600.woff2
diff --git a/assets/type/600i.woff2 b/assets/type/600i.woff2
new file mode 100644
index 0000000..5a12834
--- /dev/null
+++ b/assets/type/600i.woff2
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..1613b21
--- /dev/null
+++ b/index.html
@@ -0,0 +1,376 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <!-- 01101001 01101110 01100011 -->
+    <meta charset="utf-8"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="author" content="Paul Anthony Webb"/>
+    <meta name="description" content="Research & Development Haus × Technical Atelier via Paul Anthony Webb"/>
+    <meta name="fediverse:creator" content="@netopwibby@social.coop"/>
+    <meta name="keywords" content="!nc, ideas, inc, never cease"/>
+    <meta name="title" content="Ideas Never Cease"/>
+    <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="Ideas Never Cease"/>
+    <meta name="application-name" content="Ideas Never Cease"/>
+    <meta name="msapplication-TileColor" content="oklch(25.11% 0.006 258.36)"/>
+    <meta name="msapplication-TileImage" content="/assets/apple-touch-icon.png"/>
+    <meta name="socii:site" content="inc"/>
+    <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>Ideas Never Cease ∙ Research &amp; Development Haus &times; Technical Atelier</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/color_expanded.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-yin);
+        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-yang);
+        flex: 1;
+      }
+
+      a {
+        color: inherit;
+        font-weight: 600;
+      }
+
+      p + p {
+        margin-top: 0.5rem;
+      }
+
+      /*——— header */
+
+      header {
+        background-color: var(--uchu-gray-1);
+        margin-bottom: 1rem;
+        padding-bottom: 0.5rem;
+        padding-top: 3rem;
+        text-transform: uppercase;
+      }
+
+      header h1 {
+        font-size: 1.5rem;
+        font-weight: 400;
+      }
+
+      .smallcaps {
+        top: -2px; right: -2px;
+
+        border: 1px solid var(--uchu-gray-1);
+        border-radius: 0.5rem;
+        font-size: 0.8rem;
+        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;
+      }
+
+      .development::before,
+      .manifesto::before,
+      .research::before {
+        width: 100%; height: 1px;
+        top: 0; left: 0;
+
+        background-color: var(--uchu-gray-1);
+        content: "";
+        opacity: 0.3;
+        position: absolute;
+      }
+
+      section:last-of-type::after {
+        width: 100%; height: 1px;
+        bottom: 0; left: 0;
+
+        background-color: var(--uchu-gray-1);
+        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-yang);
+        padding-bottom: 2rem;
+        padding-top: 5rem;
+        position: relative;
+      }
+
+      /*——— background */
+
+      .poster {
+        top: 0; left: 0;
+        bottom: 0; right: 0;
+
+        /* photo taken by Paul Anthony Webb in Santa Cruz, California (2024)*/
+        background-image: url("./assets/img/sky-a.jpg");
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        filter: blur(0.5rem);
+        position: fixed;
+        transform: scale(1.1);
+        z-index: -1;
+
+        &::before {
+          top: 0; left: 0;
+          bottom: 0; right: 0;
+
+          background-color: var(--uchu-yin);
+          content: "";
+          filter: opacity(0.25);
+          position: absolute;
+        }
+      }
+    </style>
+  </head>
+
+  <body>
+    <header>
+      <div class="undershirt">
+        <h1>Ideas Never Cease</h1>
+      </div>
+    </header>
+
+    <main>
+      <section class="intro">
+        <div class="undershirt">
+          <p>Research &amp; Development Haus &times; Technical Atelier</p>
+          <p><span class="smallcaps">via</span> <a href="https://webb.page?ref=inc.sh">Paul Anthony Webb</a></p>
+        </div>
+      </section>
+
+      <section class="development">
+        <div class="undershirt">
+          <div class="row">
+            <p>Development</p>
+
+            <ul>
+              <li>Socii <span>&middot; social network</span></li>
+            </ul>
+          </div>
+        </div>
+      </section>
+
+      <section class="research">
+        <div class="undershirt">
+          <div class="row">
+            <p>Research</p>
+
+            <ul>
+              <li>Aries <span>&middot; web browser</span></li>
+              <li>BackOffice <span>&middot; business operating system</span></li>
+              <li>Beachfront <span>&middot; domain registrar</span></li>
+              <li>Chew <span>&middot; analytics</span></li>
+              <li>Hikari <span>&middot; computing hardware</span></li>
+              <li>Neuenet <span>&middot; domain registry</span></li>
+              <li>Nickel <span>&middot; video hosting</span></li>
+              <li>Pidge <span>&middot; email</span></li>
+              <li>Queree <span>&middot; search engine</span></li>
+              <li>Sona <span>&middot; personal operating system</span></li>
+              <li>Vendo <span>&middot; e-commerce</span></li>
+              <li>WEÖM <span>&middot; lifestyle brand</span></li>
+            </ul>
+          </div>
+        </div>
+      </section>
+
+      <section class="manifesto">
+        <div class="undershirt">
+          <div class="row">
+            <p>Manifesto</p>
+            <ol>
+              <li>Sustainability over growth</li>
+              <li>Move slow &amp; build</li>
+              <li>Ethics over money</li>
+              <li>&ldquo;Impossible&rdquo; is an excuse</li>
+              <li>Purpose over everything</li>
+              <li>Accept you</li>
+              <li>Share learned wisdom</li>
+              <li>You make your reality</li>
+              <li>Use your 24</li>
+              <li>Cherish life</li>
+            </ol>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <footer>
+      <div class="undershirt">
+        <p>
+          &copy; 1988&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. All Rights Reserved.
+        </p>
+
+        <p>Last updated 2025.02.19</p>
+      </div>
+    </footer>
+
+    <aside class="poster"></aside>
+  </body>
+</html>