diff options
Diffstat (limited to 'examples/portfolio/src/styles/global.css')
| -rw-r--r-- | examples/portfolio/src/styles/global.css | 262 |
1 files changed, 262 insertions, 0 deletions
diff --git a/examples/portfolio/src/styles/global.css b/examples/portfolio/src/styles/global.css new file mode 100644 index 000000000..12d49fcfb --- /dev/null +++ b/examples/portfolio/src/styles/global.css @@ -0,0 +1,262 @@ +/* Global variables */ +:root { + /* Colors */ + --gray-0: #090b11; + --gray-50: #141925; + --gray-100: #283044; + --gray-200: #3d4663; + --gray-300: #505d84; + --gray-400: #6474a2; + --gray-500: #8490b5; + --gray-600: #a3acc8; + --gray-700: #c3cadb; + --gray-800: #e3e6ee; + --gray-900: #f3f4f7; + --gray-999-basis: 0, 0%, 100%; + --gray-999_40: hsla(var(--gray-999-basis), 0.4); + --gray-999: #ffffff; + + --accent-light: #c561f6; + --accent-regular: #7611a6; + --accent-dark: #1c0056; + --accent-overlay: hsla(280, 89%, 67%, 0.33); + --accent-subtle-overlay: var(--accent-overlay); + --accent-text-over: var(--gray-999); + + --link-color: var(--accent-regular); + + /* Gradients */ + --gradient-stop-1: var(--accent-light); + --gradient-stop-2: var(--accent-regular); + --gradient-stop-3: var(--accent-dark); + --gradient-subtle: linear-gradient(150deg, var(--gray-900) 19%, var(--gray-999) 150%); + --gradient-accent: linear-gradient( + 150deg, + var(--gradient-stop-1), + var(--gradient-stop-2), + var(--gradient-stop-3) + ); + --gradient-accent-orange: linear-gradient( + 150deg, + #ca7879, + var(--accent-regular), + var(--accent-dark) + ); + --gradient-stroke: linear-gradient(180deg, var(--gray-900), var(--gray-700)); + + /* Shadows */ + --shadow-sm: + 0px 6px 3px rgba(9, 11, 17, 0.01), 0px 4px 2px rgba(9, 11, 17, 0.01), + 0px 2px 2px rgba(9, 11, 17, 0.02), 0px 0px 1px rgba(9, 11, 17, 0.03); + --shadow-md: + 0px 28px 11px rgba(9, 11, 17, 0.01), 0px 16px 10px rgba(9, 11, 17, 0.03), + 0px 7px 7px rgba(9, 11, 17, 0.05), 0px 2px 4px rgba(9, 11, 17, 0.06); + --shadow-lg: + 0px 62px 25px rgba(9, 11, 17, 0.01), 0px 35px 21px rgba(9, 11, 17, 0.05), + 0px 16px 16px rgba(9, 11, 17, 0.1), 0px 4px 9px rgba(9, 11, 17, 0.12); + + /* Text Sizes */ + --text-sm: 0.875rem; + --text-base: 1rem; + --text-md: 1.125rem; + --text-lg: 1.25rem; + --text-xl: 1.625rem; + --text-2xl: 2.125rem; + --text-3xl: 2.625rem; + --text-4xl: 3.5rem; + --text-5xl: 4.5rem; + + /* Fonts */ + --font-system: + system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, + 'Open Sans', 'Helvetica Neue', sans-serif; + --font-body: 'Public Sans', var(--font-system); + --font-brand: Rubik, var(--font-system); + + /* Transitions */ + --theme-transition: 0.2s ease-in-out; +} + +:root.theme-dark { + --gray-0: #ffffff; + --gray-50: #f3f4f7; + --gray-100: #e3e6ee; + --gray-200: #c3cadb; + --gray-300: #a3acc8; + --gray-400: #8490b5; + --gray-500: #6474a2; + --gray-600: #505d84; + --gray-700: #3d4663; + --gray-800: #283044; + --gray-900: #141925; + --gray-999-basis: 225, 31%, 5%; + --gray-999: #090b11; + + --accent-light: #1c0056; + --accent-regular: #7611a6; + --accent-dark: #c561f6; + --accent-overlay: hsla(280, 89%, 67%, 0.33); + --accent-subtle-overlay: hsla(281, 81%, 36%, 0.33); + --accent-text-over: var(--gray-0); + + --link-color: var(--accent-dark); + + --gradient-stop-1: #4c11c6; + --gradient-subtle: linear-gradient(150deg, var(--gray-900) 19%, var(--gray-999) 81%); + --gradient-accent-orange: linear-gradient( + 150deg, + #ca7879, + var(--accent-regular), + var(--accent-light) + ); + --gradient-stroke: linear-gradient(180deg, var(--gray-600), var(--gray-800)); + + --shadow-sm: + 0px 6px 3px rgba(255, 255, 255, 0.01), 0px 4px 2px rgba(255, 255, 255, 0.01), + 0px 2px 2px rgba(255, 255, 255, 0.02), 0px 0px 1px rgba(255, 255, 255, 0.03); + --shadow-md: + 0px 28px 11px rgba(255, 255, 255, 0.01), 0px 16px 10px rgba(255, 255, 255, 0.03), + 0px 7px 7px rgba(255, 255, 255, 0.05), 0px 2px 4px rgba(255, 255, 255, 0.06); + --shadow-lg: + 0px 62px 25px rgba(255, 255, 255, 0.01), 0px 35px 21px rgba(255, 255, 255, 0.05), + 0px 16px 16px rgba(255, 255, 255, 0.1), 0px 4px 9px rgba(255, 255, 255, 0.12); +} + +html, +body { + min-height: 100%; + overflow-x: hidden; +} + +body { + background-color: var(--gray-999); + color: var(--gray-200); + font-family: var(--font-body); + -webkit-font-smoothing: antialiased; + line-height: 1.5; +} + +*, +*::after, +*::before { + box-sizing: border-box; + margin: 0; +} + +img { + max-width: 100%; + height: auto; +} + +a { + color: var(--link-color); +} + +h1, +h2, +h3, +h4, +h5 { + line-height: 1.1; + font-family: var(--font-brand); + font-weight: 600; + color: var(--gray-100); +} + +h1 { + font-size: var(--text-5xl); +} + +h2 { + font-size: var(--text-4xl); +} + +h3 { + font-size: var(--text-3xl); +} + +h4 { + font-size: var(--text-2xl); +} + +h5 { + font-size: var(--text-xl); +} + +/* Utilities */ + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + +.wrapper { + width: 100%; + max-width: 83rem; + margin-inline: auto; + padding-inline: 1.5rem; +} + +.stack { + display: flex; + flex-direction: column; +} + +.gap-2 { + gap: 0.5rem; +} +.gap-4 { + gap: 1rem; +} +.gap-8 { + gap: 2rem; +} +.gap-10 { + gap: 2.5rem; +} +.gap-15 { + gap: 3.75rem; +} +.gap-20 { + gap: 5rem; +} +.gap-30 { + gap: 7.5rem; +} +.gap-48 { + gap: 12rem; +} + +@media (min-width: 50em) { + .lg\:gap-2 { + gap: 0.5rem; + } + .lg\:gap-4 { + gap: 1rem; + } + .lg\:gap-8 { + gap: 2rem; + } + .lg\:gap-10 { + gap: 2.5rem; + } + .lg\:gap-15 { + gap: 3.75rem; + } + .lg\:gap-20 { + gap: 5rem; + } + .lg\:gap-30 { + gap: 7.5rem; + } + .lg\:gap-48 { + gap: 12rem; + } +} |