summaryrefslogtreecommitdiffhomepage
path: root/cloud/app/src/routes/index.css
diff options
context:
space:
mode:
authorFrank <[email protected]>2025-09-18 01:32:40 -0400
committerFrank <[email protected]>2025-09-18 01:32:40 -0400
commitfc4f281408c56ab12db571a470456212a479edf5 (patch)
tree309d23b0c497bc61af6f8e650a6036fa41d7cbdb /cloud/app/src/routes/index.css
parentf8c4f713a5b48892899d0ac195c3470ab7ef764c (diff)
downloadopencode-fc4f281408c56ab12db571a470456212a479edf5.tar.gz
opencode-fc4f281408c56ab12db571a470456212a479edf5.zip
wip: zen
Diffstat (limited to 'cloud/app/src/routes/index.css')
-rw-r--r--cloud/app/src/routes/index.css504
1 files changed, 0 insertions, 504 deletions
diff --git a/cloud/app/src/routes/index.css b/cloud/app/src/routes/index.css
deleted file mode 100644
index fe95bb7ea..000000000
--- a/cloud/app/src/routes/index.css
+++ /dev/null
@@ -1,504 +0,0 @@
-[data-page="home"] {
- --color-text: hsl(224, 10%, 10%);
- --color-text-secondary: hsl(224, 7%, 46%);
- --color-text-dimmed: hsl(224, 6%, 63%);
- --color-text-inverted: hsl(0, 0%, 100%);
-
- --color-border: hsl(224, 6%, 77%);
-}
-
-[data-page="home"] {
- @media (prefers-color-scheme: dark) {
- --color-text: hsl(0, 0%, 100%);
- --color-text-secondary: hsl(224, 6%, 66%);
- --color-text-dimmed: hsl(224, 7%, 46%);
- --color-text-inverted: hsl(224, 10%, 10%);
-
- --color-border: hsl(224, 6%, 36%);
- }
-}
-
-[data-page="home"] {
- --padding: 3rem;
- --vertical-padding: 1.5rem;
- --heading-font-size: 1.375rem;
-
- @media (max-width: 30rem) {
- --padding: 1rem;
- --vertical-padding: 0.75rem;
- --heading-font-size: 1rem;
- }
-
- display: flex;
- gap: var(--vertical-padding);
- flex-direction: column;
- font-family: var(--font-mono);
- color: var(--color-text);
- padding: calc(var(--padding) + 1rem);
-
- a {
- color: var(--color-text);
- text-decoration: underline;
- text-underline-offset: var(--space-0-75);
- text-decoration-thickness: 1px;
- }
-
- [data-component="content"] {
- max-width: 67.5rem;
- margin: 0 auto;
- border: 1px solid var(--color-border);
- }
-
- [data-component="top"] {
- padding: calc(var(--padding) * 1.5) var(--padding) var(--padding);
- position: relative;
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: calc(var(--vertical-padding) / 2);
-
- img {
- height: auto;
- width: clamp(200px, 85vw, 552px);
- }
-
- [data-slot="logo dark"] {
- display: none;
- }
-
- @media (prefers-color-scheme: dark) {
- [data-slot="logo light"] {
- display: none;
- }
- [data-slot="logo dark"] {
- display: block;
- }
- }
-
- [data-slot="title"] {
- line-height: 1.25;
- font-weight: 500;
- text-align: center;
- font-size: var(--heading-font-size);
- color: var(--color-text-secondary);
- text-transform: uppercase;
- }
-
- [data-slot="login"] {
- position: absolute;
- top: 0;
- right: 0;
- border-width: 0 0 1px 1px;
- border-style: solid;
- border-color: var(--color-border);
- background-color: var(--color-bg);
-
- @media (max-width: 30rem) {
- display: none;
- }
-
- a {
- display: block;
- padding: 0.5rem 1rem calc(0.5rem + 4px);
- }
- }
- }
-
- [data-component="cta"] {
- border-top: 1px solid var(--color-border);
- display: flex;
-
- & > div + div {
- border-left: 1px solid var(--color-border);
- }
-
- [data-slot="left"] {
- flex: 0 0 auto;
- text-align: center;
- line-height: 1.4;
- padding: var(--vertical-padding) 2rem;
- text-transform: uppercase;
- font-size: 1.125rem;
-
- @media (max-width: 30rem) {
- font-size: 1rem;
- padding-bottom: calc(var(--vertical-padding) + 4px);
- }
-
- @media (max-width: 30rem) {
- padding-left: 0.5rem;
- padding-right: 0.5rem;
- }
- }
-
- [data-slot="center"] {
- display: none;
-
- @media (max-width: 30rem) {
- display: block;
- flex: 1;
- text-align: center;
- padding: var(--vertical-padding) 0.5rem;
- border-top: 1px solid var(--color-border);
- border-left: none;
- }
- }
-
- [data-slot="right"] {
- flex: 1;
- padding: var(--vertical-padding) 1rem;
- }
-
- @media (max-width: 50rem) {
- flex-direction: column;
-
- [data-slot="right"] {
- border-left: none;
- border-top: 1px solid var(--color-border);
- }
- }
-
- [data-slot="command"] {
- all: unset;
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: pointer;
- color: var(--color-text-secondary);
- font-size: 1.125rem;
- font-family: var(--font-mono);
- gap: var(--space-2);
- width: 100%;
-
- & > span {
- @media (max-width: 24rem) {
- font-size: 0.875rem;
- }
- @media (max-width: 56rem) {
- [data-slot="protocol"] {
- display: none;
- }
- }
- @media (max-width: 38rem) {
- text-align: center;
- span:first-child {
- display: block;
- }
- }
- }
- }
-
- [data-slot="highlight"] {
- color: var(--color-text);
- font-weight: 500;
- }
- }
-
- [data-component="features"] {
- border-top: 1px solid var(--color-border);
- padding: var(--padding);
-
- [data-slot="list"] {
- padding-left: var(--space-4);
- margin: 0;
- list-style: disc;
-
- li {
- margin-bottom: var(--space-4);
- line-height: 1.6;
-
- strong {
- text-transform: uppercase;
- font-weight: 600;
- }
-
- label {
- line-height: 1;
- text-transform: uppercase;
- font-size: 0.75rem;
- letter-spacing: 0.03125rem;
- background: var(--color-border);
- padding: 0.125rem 0.375rem;
- color: var(--color-text-inverted);
- }
- }
-
- li:last-child {
- margin-bottom: 0;
- }
- }
- }
-
- [data-component="install"] {
- border-top: 1px solid var(--color-border);
- display: grid;
- grid-template-columns: 1fr 1fr;
- grid-template-rows: 1fr 1fr;
-
- @media (max-width: 40rem) {
- grid-template-columns: 1fr;
- grid-template-rows: auto;
- }
- }
-
- [data-component="method"] {
- display: flex;
- padding: calc(var(--vertical-padding) / 2) calc(var(--padding) / 2) calc(var(--vertical-padding) / 2 + 0.125rem);
- flex-direction: column;
- text-align: left;
- gap: var(--space-2-5);
-
- @media (max-width: 30rem) {
- gap: 0.3125rem;
- }
-
- @media (max-width: 40rem) {
- text-align: left;
- }
-
- &:nth-child(2) {
- border-left: 1px solid var(--color-border);
-
- @media (max-width: 40rem) {
- border-left: none;
- border-top: 1px solid var(--color-border);
- }
- }
-
- &:nth-child(3) {
- border-top: 1px solid var(--color-border);
- }
-
- &:nth-child(4) {
- border-top: 1px solid var(--color-border);
- border-left: 1px solid var(--color-border);
-
- @media (max-width: 40rem) {
- border-left: none;
- }
- }
-
- [data-component="title"] {
- letter-spacing: -0.03125rem;
- text-transform: uppercase;
- font-weight: normal;
- font-size: 1rem;
- flex-shrink: 0;
- color: var(--color-text-dimmed);
-
- @media (max-width: 30rem) {
- font-size: 0.75rem;
- }
- }
-
- [data-slot="button"] {
- all: unset;
- cursor: pointer;
- display: flex;
- align-items: center;
- color: var(--color-text-secondary);
- gap: var(--space-2-5);
- font-size: 1rem;
-
- @media (max-width: 24rem) {
- font-size: 0.875rem;
- }
-
- strong {
- color: var(--color-text);
- font-weight: 500;
- }
-
- @media (max-width: 40rem) {
- justify-content: flex-start;
- }
-
- @media (max-width: 30rem) {
- justify-content: center;
- }
- }
- }
-
- [data-component="screenshots"] {
- border-top: 1px solid var(--color-border);
-
- figure {
- flex: 1;
- display: flex;
- flex-direction: column;
- gap: calc(var(--padding) / 4);
- padding: calc(var(--padding) / 2);
- border-width: 0;
- border-style: solid;
- border-color: var(--color-border);
- min-height: 0;
- overflow: hidden;
-
- & > div,
- figcaption {
- display: flex;
- align-items: center;
- }
-
- & > div {
- flex: 1;
- min-height: 0;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- a {
- display: flex;
- flex: 1;
- min-height: 0;
- align-items: center;
- justify-content: center;
- width: 100%;
- height: 100%;
- }
-
- figcaption {
- letter-spacing: -0.03125rem;
- text-transform: uppercase;
- color: var(--color-text-dimmed);
- flex-shrink: 0;
-
- @media (max-width: 30rem) {
- font-size: 0.75rem;
- }
- }
- }
-
- & > [data-slot="left"] figure {
- height: var(--images-height);
- box-sizing: border-box;
- }
-
- & > [data-slot="right"] figure {
- height: calc(var(--images-height) / 2);
- box-sizing: border-box;
- }
-
- & > [data-slot="left"] img {
- width: 100%;
- height: 100%;
- min-width: 0;
- object-fit: contain;
- }
-
- & > [data-slot="right"] img {
- width: 100%;
- height: calc(100% - 2rem);
- object-fit: contain;
- display: block;
- }
-
- @media (max-width: 30rem) {
- & {
- --images-height: auto;
- grid-template-columns: 1fr;
- grid-template-rows: auto auto;
- }
-
- & > [data-slot="left"] {
- grid-row: 1;
- grid-column: 1;
- }
-
- & > [data-slot="right"] {
- grid-row: 2;
- grid-column: 1;
- border-left: none;
- border-top: 1px solid var(--color-border);
-
- & > [data-slot="row1"],
- & > [data-slot="row2"] {
- height: auto;
- }
- }
-
- & > [data-slot="left"] figure,
- & > [data-slot="right"] figure {
- height: auto;
- }
-
- & > [data-slot="left"] img,
- & > [data-slot="right"] img {
- width: 100%;
- height: auto;
- max-height: none;
- }
- }
- }
-
- [data-component="copy-status"] {
- @media (max-width: 38rem) {
- display: none;
- }
-
- [data-slot="copy"] {
- display: block;
- width: var(--space-4);
- height: var(--space-4);
- color: var(--color-text-dimmed);
-
- [data-copied] & {
- display: none;
- }
- }
-
- [data-slot="check"] {
- display: none;
- width: var(--space-4);
- height: var(--space-4);
- color: var(--color-text);
-
- [data-copied] & {
- display: block;
- }
- }
- }
-
- [data-component="footer"] {
- border-top: 1px solid var(--color-border);
- display: flex;
- flex-direction: row;
-
- [data-slot="cell"] {
- flex: 1;
- text-align: center;
- text-transform: uppercase;
- padding: var(--vertical-padding) 0.5rem;
- }
-
- [data-slot="cell"] + [data-slot="cell"] {
- border-left: 1px solid var(--color-border);
- }
-
- /* Mobile: third column on its own row */
- @media (max-width: 30rem) {
- flex-wrap: wrap;
-
- [data-slot="cell"]:nth-child(1),
- [data-slot="cell"]:nth-child(2) {
- flex: 1;
- }
-
- [data-slot="cell"]:nth-child(3) {
- flex: 1 0 100%;
- border-left: none;
- border-top: 1px solid var(--color-border);
- }
- }
- }
-
- [data-component="legal"] {
- color: var(--color-text-dimmed);
- text-align: center;
-
- a {
- color: var(--color-text-dimmed);
- }
- }
-}