-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
2091846
commit c21a2f9
Showing
15 changed files
with
11,442 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,4 @@ | ||
shamefully-hoist=true | ||
shamefully-hoist=true | ||
always-auth=true | ||
//npm.greensock.com/:_authToken=16fa9441-3df7-431c-b385-c54779b8ed45 | ||
@gsap:registry=https://npm.greensock.com |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,107 @@ | ||
<script setup lang="ts"> | ||
// import { myriad } from "@myriadjs/core"; | ||
// myriad({ | ||
// foreground: "#00008b", | ||
// background: "#ffffff", | ||
// accents: ["#ff9400"], | ||
// custom: { | ||
// link: '#0000ff', | ||
// }, | ||
// }, { | ||
// readability: 4, | ||
// }).attach() | ||
</script> | ||
|
||
<template> | ||
<Layout> | ||
<NuxtPage /> | ||
</Layout> | ||
</template> | ||
|
||
<style lang="scss"> | ||
@import './css'; | ||
body { | ||
background: var(--background-10); | ||
color: var(--foreground); | ||
} | ||
.containerx { | ||
display: flex; | ||
gap: var(--space-s); | ||
flex-direction: column; | ||
border-radius: var(--radius); | ||
//padding: var(--space-xl); | ||
background: var(--background); | ||
margin-bottom: var(--space-xl); | ||
} | ||
html { | ||
--elements-backdrop-background: var(--background) !important; | ||
--docus-header-title-color-static: var(--background-10) !important; | ||
--docus-body-color: var(--background-20) !important; | ||
--docus-body-backgroundColor: var(--background) !important; | ||
--typography-body-backgroundColor: var(--background) !important; | ||
--typography-body-color: var(--foreground) !important; | ||
---13e-button-primary: var(--accent) !important; | ||
---uk-p-button-secondary: var(--accent) !important; | ||
--elements-text-primary-color-static: var(--foreground) !important; | ||
--elements-border-primary-static: var(--background-10) !important; | ||
--color-primary-400: var(--accent) !important; | ||
} | ||
h1 { | ||
font-size: 32px; | ||
font-weight: bold; | ||
line-height: 0.8; | ||
} | ||
p { | ||
max-width: 75ch; | ||
} | ||
h1, | ||
h2, | ||
h3, | ||
h4, | ||
p, | ||
a, | ||
a .title, | ||
button, | ||
body { | ||
color: var(--foreground) !important; | ||
} | ||
a.active { | ||
color: var(--accent) !important; | ||
} | ||
.button-link { | ||
color: var(--accent-contrast) !important; | ||
background-color: var(--accent) !important; | ||
} | ||
.terminal { | ||
color: var(--foreground) !important; | ||
background-color: var(--background) !important; | ||
border: 1px solid var(--background-10) !important; | ||
} | ||
.terminal .header { | ||
background-color: var(--background-10) !important; | ||
border-bottom: 1px solid var(--background-10) !important; | ||
} | ||
.terminal .prompt { | ||
background-color: var(--background-20) !important; | ||
color: var(--foreground) !important; | ||
} | ||
.terminal .copied { | ||
background-color: var(--background-10) !important; | ||
color: var(--foreground) !important; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
<script setup lang="ts"> | ||
const { config } = useDocus() | ||
useHead({ | ||
titleTemplate: config.value.titleTemplate, | ||
meta: [{ name: 'twitter:card', content: 'summary_large_image' }] | ||
}) | ||
useContentHead(config.value as any) | ||
</script> | ||
|
||
<template> | ||
<div class="app-layout"> | ||
<AppLoadingBar /> | ||
<main> | ||
<slot /> | ||
</main> | ||
<AppFooter /> | ||
</div> | ||
</template> | ||
|
||
<style scoped> | ||
.logo { | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
gap: var(--space); | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
<script lang="ts" setup></script> | ||
|
||
<template> | ||
<svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250.04 244.17"> | ||
<circle class="main-circle" cx="122.08" cy="122.08" r="109.08" /> | ||
<circle class="moon-circle" cx="203.31" cy="52.19" r="46.72" /> | ||
</svg> | ||
</template> | ||
|
||
<style scoped> | ||
#logo .main-circle { | ||
fill: none; | ||
stroke: var(--foreground); | ||
stroke-miterlimit: 2; | ||
stroke-width: 26px; | ||
} | ||
#logo .moon-circle { | ||
fill: var(--foreground); | ||
stroke-width: 0px; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,128 @@ | ||
<script lang="ts" setup></script> | ||
<script lang="ts" setup> | ||
import { gsap } from 'gsap' | ||
import { ScrollTrigger } from 'gsap/ScrollTrigger' | ||
gsap.registerPlugin(ScrollTrigger) | ||
const hero = ref<HTMLElement>() | ||
const logo = ref<HTMLElement>() | ||
const circle = ref<HTMLElement>() | ||
const content = ref<HTMLElement>() | ||
onMounted(() => { | ||
if (!process.client) return | ||
if (!hero.value) return | ||
gsap.to(hero.value, { | ||
y: 400, | ||
scrollTrigger: { | ||
trigger: hero.value, | ||
start: 'top top', | ||
end: 'bottom top', | ||
scrub: true | ||
} | ||
}) | ||
if (!logo.value) return | ||
gsap.to(logo.value, { | ||
rotate: 360, | ||
width: '80rem', | ||
scrollTrigger: { | ||
trigger: hero.value, | ||
start: 'top top', | ||
end: 'bottom top', | ||
scrub: true | ||
} | ||
}) | ||
if (!circle.value) return | ||
gsap.to(circle.value, { | ||
y: 400, | ||
scrollTrigger: { | ||
trigger: hero.value, | ||
start: 'top top', | ||
end: 'bottom top', | ||
scrub: true | ||
} | ||
}) | ||
if (!content.value) return | ||
gsap.to(content.value, { | ||
y: -700, | ||
scrollTrigger: { | ||
trigger: hero.value, | ||
start: 'top top', | ||
end: 'bottom top', | ||
scrub: true | ||
} | ||
}) | ||
}) | ||
</script> | ||
|
||
<template> | ||
<div> | ||
<ProseH1>Umbra</ProseH1> | ||
<ProseP> Umbra is a design system for building modern websites and applications. </ProseP> | ||
<div ref="circle" class="circle" /> | ||
<div ref="hero" class="hero"> | ||
<div ref="logo" class="umbra-logo"> | ||
<Logo /> | ||
</div> | ||
<div ref="content" class="content"> | ||
<ProseH1>Umbra</ProseH1> | ||
<ProseP>A theme management library to rule them all</ProseP> | ||
<ProseP> | ||
Makes it easy to modify and manage your theme. Switch between themes. Change theme. | ||
Automatic dark/light mode. Monitor theme accessibility with the cutting edge standards of | ||
APCA. Perfect parity with radix-colors. | ||
</ProseP> | ||
<ProseP> | ||
Start simple and scale theme complexity infinitely without any friction. You can decide to | ||
theme every element on your site differently at a moments notice without any need to | ||
reorganize anything at all. Just plug and play. Scale to infinity. | ||
</ProseP> | ||
<ProseP> | ||
Boss-man randomly wants to be able to dynamically change the color of that one card? Done. | ||
Need more extreme variant in theming customisations? Then use a color alias layer that lets | ||
you get as complex as you want. | ||
</ProseP> | ||
<ProseP> | ||
Or keep it all super simple, umbra lets you manage it all from a single source and very | ||
quickly. Change a color and watch the other colors adjust themselves to your change instead | ||
of having to manually shift everything every time you need to change something. | ||
</ProseP> | ||
<ProseP> | ||
It's more than just a theme generator, its a theme manager. The generation part is just the | ||
backdrop that makes adjustments quick and easy to do. You can can manually dictate | ||
everything yourself if and when you need to. | ||
</ProseP> | ||
<ProseP> | ||
Start simple, get as complex as you want, scale infinitely. And if you decide you no longer | ||
want Umbra, removing it is as easy as copying the output and pasting it yourself. You are | ||
never locked into this library. This way Umbra will always be a safe bet for the future. | ||
</ProseP> | ||
</div> | ||
</div> | ||
</template> | ||
|
||
<style scoped></style> | ||
<style scoped> | ||
.umbra-logo { | ||
width: 8rem; | ||
} | ||
.circle { | ||
position: absolute; | ||
left: 0px; | ||
top: -87vw; | ||
height: 100vw; | ||
width: 100vw; | ||
background: var(--background); | ||
border-radius: 60rem; | ||
box-shadow: 0px 100px 160px 27px var(--background); | ||
} | ||
.hero { | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
flex-direction: column; | ||
text-align: center; | ||
padding-bottom: 12rem; | ||
height: 100vh; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,73 @@ | ||
:root { | ||
--block-size: 3em; | ||
--block-inner-size: calc(var(--block-size) - var(--space-s)); | ||
|
||
--border-size: 1px; | ||
--border-color: var(--foreground); | ||
--border-style: solid; | ||
--border: | ||
var(--border-size) | ||
var(--border-style) | ||
var(--border-color); | ||
} | ||
|
||
.page { | ||
margin: auto; | ||
max-width: calc(100vw - var(--space-xl)); | ||
width: 2400px; | ||
transition: background .4s ease-in-out; | ||
|
||
@media (max-width: 500px) { | ||
max-width: calc(100vw); | ||
} | ||
|
||
@media (max-width: 2000px) { | ||
width: 1300px; | ||
} | ||
} | ||
|
||
.block { | ||
display: flex; | ||
align-items: center; | ||
height: var(--block-size); | ||
padding: 0px var(--space-s); | ||
} | ||
|
||
.rounded { | ||
border-radius: var(--radius); | ||
} | ||
|
||
.border { | ||
border: var(--border); | ||
border-radius: var(--radius); | ||
} | ||
|
||
.panel { | ||
border-radius: var(--radius); | ||
padding: var(--space-m); | ||
background-color: var(--background-10); | ||
} | ||
|
||
.compact-panel { | ||
border-radius: var(--radius); | ||
padding: var(--space-s); | ||
background-color: var(--background-10); | ||
} | ||
|
||
.post-flex { | ||
display: flex; | ||
gap: var(--space-s); | ||
flex-direction: column; | ||
justify-content: center; | ||
align-items: center; | ||
} | ||
|
||
.color-flip { | ||
filter: invert(90); | ||
img, .img { | ||
filter: invert(1); | ||
&::after { | ||
filter: invert(90); | ||
} | ||
} | ||
} |
Oops, something went wrong.