diff options
| -rw-r--r-- | .editorconfig | 21 | ||||
| -rw-r--r-- | .gitignore | 3 | ||||
| -rw-r--r-- | README.md | 9 | ||||
| -rw-r--r-- | assets/apple-touch-icon.png | bin | 0 -> 1927 bytes | |||
| -rw-r--r-- | assets/favicon.ico | bin | 0 -> 41566 bytes | |||
| -rw-r--r-- | assets/favicon.svg | 1 | ||||
| -rw-r--r-- | assets/img/sky-a.jpg | bin | 0 -> 1571925 bytes | |||
| -rw-r--r-- | assets/img/sky-b.jpg | bin | 0 -> 1480937 bytes | |||
| -rw-r--r-- | assets/og-image.png | bin | 0 -> 1217727 bytes | |||
| -rw-r--r-- | assets/style/root.css | 38 | ||||
| -rw-r--r-- | assets/style/type.css | 31 | ||||
| -rw-r--r-- | assets/type/400.woff2 | bin | 0 -> 37736 bytes | |||
| -rw-r--r-- | assets/type/400i.woff2 | bin | 0 -> 39036 bytes | |||
| -rw-r--r-- | assets/type/600.woff2 | bin | 0 -> 38600 bytes | |||
| -rw-r--r-- | assets/type/600i.woff2 | bin | 0 -> 39388 bytes | |||
| -rw-r--r-- | index.html | 376 |
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 Binary files differnew file mode 100644 index 0000000..3f97c2a --- /dev/null +++ b/assets/apple-touch-icon.png diff --git a/assets/favicon.ico b/assets/favicon.ico Binary files differnew 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 Binary files differnew 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 Binary files differnew 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 Binary files differnew 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 Binary files differnew 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 Binary files differnew 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 Binary files differnew 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 Binary files differnew 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 & Development Haus × 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 & Development Haus × 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>· social network</span></li> + </ul> + </div> + </div> + </section> + + <section class="research"> + <div class="undershirt"> + <div class="row"> + <p>Research</p> + + <ul> + <li>Aries <span>· web browser</span></li> + <li>BackOffice <span>· business operating system</span></li> + <li>Beachfront <span>· domain registrar</span></li> + <li>Chew <span>· analytics</span></li> + <li>Hikari <span>· computing hardware</span></li> + <li>Neuenet <span>· domain registry</span></li> + <li>Nickel <span>· video hosting</span></li> + <li>Pidge <span>· email</span></li> + <li>Queree <span>· search engine</span></li> + <li>Sona <span>· personal operating system</span></li> + <li>Vendo <span>· e-commerce</span></li> + <li>WEÖM <span>· 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 & build</li> + <li>Ethics over money</li> + <li>“Impossible” 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> + © 1988—<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. All Rights Reserved. + </p> + + <p>Last updated 2025.02.19</p> + </div> + </footer> + + <aside class="poster"></aside> + </body> +</html> |
