diff options
Diffstat (limited to '')
| -rw-r--r-- | index.html | 446 |
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> + © 2025—<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>∞</noscript> Ideas Never Cease, LLC d/b/a dsgn. All Rights Reserved. + </p> + + <p>Last updated 2026.06.05</p> + </div> + </footer> + </body> +</html> |