Skip to content

Commit

Permalink
more fabric color
Browse files Browse the repository at this point in the history
  • Loading branch information
@mjtpena
mjtpena committed Sep 8, 2024
1 parent 7109d9a commit 6858e19
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 69 deletions.
64 changes: 32 additions & 32 deletions src/components/GlobalStyles.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,60 +43,60 @@ color_set(colors)
if length(value) > 1
{key}: oklch_fallback(value[1])

rainbow-light = linear-gradient(to right, oklch(0.80 0.10 0), oklch(0.80 0.10 30), oklch(0.80 0.10 60), oklch(0.80 0.10 90), oklch(0.80 0.10 120), oklch(0.80 0.10 150), oklch(0.80 0.10 180), oklch(0.80 0.10 210), oklch(0.80 0.10 240), oklch(0.80 0.10 270), oklch(0.80 0.10 300), oklch(0.80 0.10 330), oklch(0.80 0.10 360))
rainbow-dark = linear-gradient(to right, oklch(0.70 0.10 0), oklch(0.70 0.10 30), oklch(0.70 0.10 60), oklch(0.70 0.10 90), oklch(0.70 0.10 120), oklch(0.70 0.10 150), oklch(0.70 0.10 180), oklch(0.70 0.10 210), oklch(0.70 0.10 240), oklch(0.70 0.10 270), oklch(0.70 0.10 300), oklch(0.70 0.10 330), oklch(0.70 0.10 360))
rainbow-light = linear-gradient(to right, oklch(0.80 0.10 120), oklch(0.80 0.10 150), oklch(0.80 0.10 180), oklch(0.80 0.10 210), oklch(0.80 0.10 240))
rainbow-dark = linear-gradient(to right, oklch(0.70 0.10 120), oklch(0.70 0.10 150), oklch(0.70 0.10 180), oklch(0.70 0.10 210), oklch(0.70 0.10 240))

:root
--radius-large 1rem
--radius-large 0.5rem

--banner-height-home 65vh
--banner-height 35vh

--content-delay 150ms

color_set({
--primary: oklch(0.70 0.14 var(--hue)) oklch(0.75 0.14 var(--hue))
--page-bg: oklch(0.95 0.01 var(--hue)) oklch(0.16 0.014 var(--hue))
--card-bg: white oklch(0.23 0.015 var(--hue))
--primary: oklch(0.55 0.15 150) oklch(0.65 0.15 150)
--page-bg: oklch(0.98 0.01 150) oklch(0.16 0.02 150)
--card-bg: white oklch(0.23 0.02 150)

--btn-content: oklch(0.55 0.12 var(--hue)) oklch(0.75 0.1 var(--hue))
--btn-content: oklch(0.40 0.15 150) oklch(0.75 0.12 150)

--btn-regular-bg: oklch(0.95 0.025 var(--hue)) oklch(0.33 0.035 var(--hue))
--btn-regular-bg-hover: oklch(0.9 0.05 var(--hue)) oklch(0.38 0.04 var(--hue))
--btn-regular-bg-active: oklch(0.85 0.08 var(--hue)) oklch(0.43 0.045 var(--hue))
--btn-regular-bg: oklch(0.92 0.03 150) oklch(0.33 0.04 150)
--btn-regular-bg-hover: oklch(0.87 0.05 150) oklch(0.38 0.05 150)
--btn-regular-bg-active: oklch(0.82 0.08 150) oklch(0.43 0.06 150)

--btn-plain-bg-hover: oklch(0.95 0.025 var(--hue)) oklch(0.30 0.035 var(--hue))
--btn-plain-bg-active: oklch(0.98 0.01 var(--hue)) oklch(0.27 0.025 var(--hue))
--btn-plain-bg-hover: oklch(0.92 0.03 150) oklch(0.30 0.04 150)
--btn-plain-bg-active: oklch(0.95 0.02 150) oklch(0.27 0.03 150)

--btn-card-bg-hover: oklch(0.98 0.005 var(--hue)) oklch(0.3 0.03 var(--hue))
--btn-card-bg-active: oklch(0.9 0.03 var(--hue)) oklch(0.35 0.035 var(--hue))
--btn-card-bg-hover: oklch(0.95 0.01 150) oklch(0.3 0.04 150)
--btn-card-bg-active: oklch(0.87 0.04 150) oklch(0.35 0.05 150)

--enter-btn-bg: var(--btn-regular-bg)
--enter-btn-bg-hover: var(--btn-regular-bg-hover)
--enter-btn-bg-active: var(--btn-regular-bg-active)

--deep-text: oklch(0.25 0.02 var(--hue))
--deep-text: oklch(0.25 0.03 150)

--title-active: oklch(0.6 0.1 var(--hue))
--title-active: oklch(0.5 0.12 150)

--line-divider: black(0.08) white(0.08)
--line-divider: black(0.1) white(0.1)

--line-color: black(0.1) white(0.1)
--meta-divider: black(0.2) white(0.2)
--line-color: black(0.12) white(0.12)
--meta-divider: black(0.22) white(0.22)

--inline-code-bg: var(--btn-regular-bg)
--inline-code-color: var(--btn-content)
--selection-bg: oklch(0.90 0.05 var(--hue)) oklch(0.40 0.08 var(--hue))
--codeblock-selection: oklch(0.40 0.08 var(--hue))
--codeblock-bg: oklch(0.2 0.015 var(--hue)) oklch(0.17 0.015 var(--hue))
--selection-bg: oklch(0.87 0.06 150) oklch(0.40 0.09 150)
--codeblock-selection: oklch(0.40 0.09 150)
--codeblock-bg: oklch(0.2 0.02 150) oklch(0.17 0.02 150)

--license-block-bg: black(0.03) var(--codeblock-bg)
--license-block-bg: black(0.04) var(--codeblock-bg)

--link-underline: oklch(0.93 0.04 var(--hue)) oklch(0.40 0.08 var(--hue))
--link-hover: oklch(0.95 0.025 var(--hue)) oklch(0.40 0.08 var(--hue))
--link-active: oklch(0.90 0.05 var(--hue)) oklch(0.35 0.07 var(--hue))
--link-underline: oklch(0.90 0.05 150) oklch(0.40 0.09 150)
--link-hover: oklch(0.92 0.03 150) oklch(0.40 0.09 150)
--link-active: oklch(0.87 0.06 150) oklch(0.35 0.08 150)

--float-panel-bg: white oklch(0.19 0.015 var(--hue))
--float-panel-bg: white oklch(0.19 0.02 150)

--scrollbar-bg-light: black(0.4)
--scrollbar-bg-hover-light: black(0.5)
Expand All @@ -115,11 +115,11 @@ color_set({
--display-light-icon: 1 0
--display-dark-icon: 0 1

--admonitions-color-tip: oklch(0.7 0.14 180) oklch(0.75 0.14 180)
--admonitions-color-note: oklch(0.7 0.14 250) oklch(0.75 0.14 250)
--admonitions-color-important: oklch(0.7 0.14 310) oklch(0.75 0.14 310)
--admonitions-color-warning: oklch(0.7 0.14 60) oklch(0.75 0.14 60)
--admonitions-color-caution: oklch(0.6 0.2 25) oklch(0.65 0.2 25)
--admonitions-color-tip: oklch(0.65 0.15 150) oklch(0.70 0.15 150)
--admonitions-color-note: oklch(0.65 0.15 210) oklch(0.70 0.15 210)
--admonitions-color-important: oklch(0.65 0.15 270) oklch(0.70 0.15 270)
--admonitions-color-warning: oklch(0.65 0.15 90) oklch(0.70 0.15 90)
--admonitions-color-caution: oklch(0.55 0.22 45) oklch(0.60 0.22 45)
})


Expand Down
61 changes: 25 additions & 36 deletions src/config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,29 +7,25 @@ import type {
import { LinkPreset } from './types/config'

export const siteConfig: SiteConfig = {
title: 'Fuwari',
subtitle: 'Demo Site',
lang: 'en', // 'en', 'zh_CN', 'zh_TW', 'ja', 'ko'
title: 'Fabric Developer',
subtitle: 'Microsoft Fabric Resources for Developers',
lang: 'en',
themeColor: {
hue: 250, // Default hue for the theme color, from 0 to 360. e.g. red: 0, teal: 200, cyan: 250, pink: 345
fixed: false, // Hide the theme color picker for visitors
hue: 260,
fixed: false,
},
banner: {
enable: false,
src: 'assets/images/demo-banner.png', // Relative to the /src directory. Relative to the /public directory if it starts with '/'
position: 'center', // Equivalent to object-position, defaults center
enable: false, // Keeping this disabled until you have a banner image
src: 'assets/images/demo-banner.png', // Keeping the original reference
position: 'center',
credit: {
enable: false, // Display the credit text of the banner image
text: '', // Credit text to be displayed
url: '' // (Optional) URL link to the original artwork or artist's page
enable: false,
text: '',
url: ''
}
},
favicon: [ // Leave this array empty to use the default favicon
// {
// src: '/favicon/icon.png', // Path of the favicon, relative to the /public directory
// theme: 'light', // (Optional) Either 'light' or 'dark', set only if you have different favicons for light and dark mode
// sizes: '32x32', // (Optional) Size of the favicon, set only if you have favicons of different sizes
// }
favicon: [
// Keeping this empty until you have a custom favicon
]
}

Expand All @@ -40,39 +36,32 @@ export const navBarConfig: NavBarConfig = {
LinkPreset.About,
{
name: 'GitHub',
url: 'https://github.com/saicaca/fuwari', // Internal links should not include the base path, as it is automatically added
external: true, // Show an external link icon and will open in a new tab
url: 'https://github.com/mjtpena/fabricdeveloper',
external: true,
},
],
}

export const profileConfig: ProfileConfig = {
avatar: 'assets/images/demo-avatar.png', // Relative to the /src directory. Relative to the /public directory if it starts with '/'
name: 'Lorem Ipsum',
bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
avatar: 'assets/images/demo-avatar.png', // Keeping the original reference
name: 'Fabric Developer',
bio: 'Empowering developers with Microsoft Fabric insights and resources',
links: [
{
name: 'Twitter',
icon: 'fa6-brands:twitter', // Visit https://icones.js.org/ for icon codes
// You will need to install the corresponding icon set if it's not already included
// `pnpm add @iconify-json/<icon-set-name>`
url: 'https://twitter.com',
},
{
name: 'Steam',
icon: 'fa6-brands:steam',
url: 'https://store.steampowered.com',
name: 'LinkedIn',
icon: 'fa6-brands:linkedin',
url: 'https://www.linkedin.com/company/fabricdeveloper', // Replace with actual LinkedIn account
},
{
name: 'GitHub',
icon: 'fa6-brands:github',
url: 'https://github.com/saicaca/fuwari',
url: 'https://github.com/mjtpena/fabricdeveloper',
},
],
}

export const licenseConfig: LicenseConfig = {
enable: true,
name: 'CC BY-NC-SA 4.0',
url: 'https://creativecommons.org/licenses/by-nc-sa/4.0/',
}
name: 'MIT License',
url: 'https://opensource.org/licenses/MIT',
}
Loading

0 comments on commit 6858e19

Please sign in to comment.