Last active
August 13, 2024 13:17
-
-
Save alienlebarge/ed852ce6b9ddb36098f814cf917a10c6 to your computer and use it in GitHub Desktop.
Custom Workflowy 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
/** | |
* alb's Workflowy style | |
* More info: https://workflowy.com/s/albs-workflowy-style/WmvlNzBwLb6IAkLc | |
* | |
* TODO: Make comments and chapters easier to read | |
*/ | |
:root { | |
/* red */ | |
--color-red-shade-1: hsl(8.36, 99.84%, 98.32%); | |
--color-red-shade-2: hsl(8.16, 99.91%, 92.38%); | |
--color-red-shade-3: hsl(359.7, 100%, 63.73%); | |
--color-red-shade-4: hsl(348.63, 99.98%, 44%); | |
--color-red-shade-5: hsl(350.67, 99.96%, 25.69%); | |
--color-red-shade-6: hsl(357.65, 99.99%, 16.18%); | |
/* orange */ | |
--color-orange-shade-1: hsl(17.05, 99.76%, 98.01%); | |
--color-orange-shade-2: hsl(17.3, 99.97%, 90.92%); | |
--color-orange-shade-3: hsl(18.2, 99.99%, 49.52%); | |
--color-orange-shade-4: hsl(17.68, 99.98%, 40.12%); | |
--color-orange-shade-5: hsl(17.02, 99.98%, 23.02%); | |
--color-orange-shade-6: hsl(20.77, 99.94%, 12.58%); | |
/* yellow */ | |
--color-yellow-shade-1: hsl(46, 99.99%, 94.95%); | |
--color-yellow-shade-2: hsl(51.81, 100%, 62.08%); | |
--color-yellow-shade-3: hsl(53.34, 99.93%, 30.68%); | |
--color-yellow-shade-4: hsl(53.2, 99.99%, 24.58%); | |
--color-yellow-shade-5: hsl(52.64, 99.98%, 13.72%); | |
--color-yellow-shade-6: hsl(51.45, 99.93%, 8.1%); | |
/* green */ | |
--color-green-shade-1: hsl(109.97, 99.98%, 92.62%); | |
--color-green-shade-2: hsl(117.73, 100%, 71.17%); | |
--color-green-shade-3: hsl(131.49, 99.86%, 31.77%); | |
--color-green-shade-4: hsl(130.54, 99.9%, 25.48%); | |
--color-green-shade-5: hsl(126.84, 99.95%, 14.25%); | |
--color-green-shade-6: hsl(110.87, 99.97%, 7.84%); | |
/* teal */ | |
--color-teal-shade-1: hsl(167.47, 100%, 92.17%); | |
--color-teal-shade-2: hsl(173.64, 99.94%, 49.99%); | |
--color-teal-shade-3: hsl(173.43, 99.95%, 30.9%); | |
--color-teal-shade-4: hsl(173.28, 99.82%, 24.24%); | |
--color-teal-shade-5: hsl(172.72, 99.88%, 13.34%); | |
--color-teal-shade-6: hsl(171.81, 99.98%, 7.68%); | |
/* sky */ | |
--color-sky-shade-1: hsl(196.72, 99.94%, 94.54%); | |
--color-sky-shade-2: hsl(195.99, 99.97%, 84.14%); | |
--color-sky-shade-3: hsl(190.84, 99.77%, 35.38%); | |
--color-sky-shade-4: hsl(191.03, 99.95%, 28.22%); | |
--color-sky-shade-5: hsl(191.83, 99.82%, 15.53%); | |
--color-sky-shade-6: hsl(193.54, 99.91%, 7.91%); | |
/* blue */ | |
--color-blue-shade-1: hsl(224.63, 99.87%, 97%); | |
--color-blue-shade-2: hsl(223.56, 99.9%, 91.61%); | |
--color-blue-shade-3: hsl(207.29, 99.89%, 49.39%); | |
--color-blue-shade-4: hsl(207.65, 99.86%, 39.64%); | |
--color-blue-shade-5: hsl(209.15, 99.94%, 21.47%); | |
--color-blue-shade-6: hsl(212.22, 99.94%, 11.14%); | |
/* purple */ | |
--color-purple-shade-1: hsl(288.22, 99.8%, 97.75%); | |
--color-purple-shade-2: hsl(287.36, 99.93%, 92.48%); | |
--color-purple-shade-3: hsl(284.08, 100%, 65.71%); | |
--color-purple-shade-4: hsl(284.55, 77.53%, 50.42%); | |
--color-purple-shade-5: hsl(285.23, 99.99%, 26.48%); | |
--color-purple-shade-6: hsl(284.23, 99.98%, 15.4%); | |
/* pink */ | |
--color-pink-shade-1: hsl(332.82, 99.54%, 98.48%); | |
--color-pink-shade-2: hsl(331.79, 99.98%, 93.07%); | |
--color-pink-shade-3: hsl(322.24, 100%, 59.31%); | |
--color-pink-shade-4: hsl(319.09, 99.94%, 41.2%); | |
--color-pink-shade-5: hsl(319.97, 99.95%, 23.72%); | |
--color-pink-shade-6: hsl(321.26, 99.94%, 14.63%); | |
/* grey */ | |
--color-gray-shade-1: hsl(0deg 0% 96% / 100%); | |
--color-gray-shade-2: hsl(0deg 0% 89% / 100%); | |
--color-gray-shade-3: hsl(0deg 0% 55% / 100%); | |
--color-gray-shade-4: hsl(0deg 0% 44% / 100%); | |
--color-gray-shade-5: hsl(0deg 0% 24% / 100%); | |
--color-gray-shade-6: hsl(0deg 0% 13% / 100%); | |
/* primary */ | |
--color-primary-shade-1: hsl(154.47deg 99.98% 92.65% / 100%); | |
--color-primary-shade-2: hsl(161.94deg 100% 62.84% / 100%); | |
--color-primary-shade-3: hsl(165.15deg 99.85% 31.18% / 100%); | |
--color-primary-shade-4: hsl(164.85deg 99.87% 25% / 100%); | |
--color-primary-shade-5: hsl(163.67deg 99.87% 13.96% / 100%); | |
--color-primary-shade-6: hsl(161.53deg 99.95% 7.77% / 100%); | |
/* states */ | |
--color-focus: hsl(51.81deg 100% 62.08% / 100%); | |
} | |
/* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,18,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ | |
:root { | |
/* Step -2: 11.1111px → 11.52px */ | |
--step--2: clamp(0.6944rem, 0.6856rem + 0.0444vw, 0.72rem); | |
/* Step -1: 13.3333px → 14.4px */ | |
--step--1: clamp(0.8333rem, 0.8101rem + 0.1159vw, 0.9rem); | |
/* Step 0: 16px → 18px */ | |
--step-0: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem); | |
/* Step 1: 19.2px → 22.5px */ | |
--step-1: clamp(1.2rem, 1.1283rem + 0.3587vw, 1.4063rem); | |
/* Step 2: 23.04px → 28.125px */ | |
--step-2: clamp(1.44rem, 1.3295rem + 0.5527vw, 1.7578rem); | |
/* Step 3: 27.648px → 35.1563px */ | |
--step-3: clamp(1.728rem, 1.5648rem + 0.8161vw, 2.1973rem); | |
/* Step 4: 33.1776px → 43.9453px */ | |
--step-4: clamp(2.0736rem, 1.8395rem + 1.1704vw, 2.7466rem); | |
/* Step 5: 39.8131px → 54.9316px */ | |
--step-5: clamp(2.4883rem, 2.1597rem + 1.6433vw, 3.4332rem); | |
} | |
/* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1240,18,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ | |
:root { | |
/* Space 3xs: 4px → 5px */ | |
--space-3xs: clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem); | |
/* Space 2xs: 8px → 9px */ | |
--space-2xs: clamp(0.5rem, 0.4783rem + 0.1087vw, 0.5625rem); | |
/* Space xs: 12px → 14px */ | |
--space-xs: clamp(0.75rem, 0.7065rem + 0.2174vw, 0.875rem); | |
/* Space s: 16px → 18px */ | |
--space-s: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem); | |
/* Space m: 24px → 27px */ | |
--space-m: clamp(1.5rem, 1.4348rem + 0.3261vw, 1.6875rem); | |
/* Space l: 32px → 36px */ | |
--space-l: clamp(2rem, 1.913rem + 0.4348vw, 2.25rem); | |
/* Space xl: 48px → 54px */ | |
--space-xl: clamp(3rem, 2.8696rem + 0.6522vw, 3.375rem); | |
/* Space 2xl: 64px → 72px */ | |
--space-2xl: clamp(4rem, 3.8261rem + 0.8696vw, 4.5rem); | |
/* Space 3xl: 96px → 108px */ | |
--space-3xl: clamp(6rem, 5.7391rem + 1.3043vw, 6.75rem); | |
/* One-up pairs */ | |
/* Space 3xs-2xs: 4px → 9px */ | |
--space-3xs-2xs: clamp(0.25rem, 0.1413rem + 0.5435vw, 0.5625rem); | |
/* Space 2xs-xs: 8px → 14px */ | |
--space-2xs-xs: clamp(0.5rem, 0.3696rem + 0.6522vw, 0.875rem); | |
/* Space xs-s: 12px → 18px */ | |
--space-xs-s: clamp(0.75rem, 0.6196rem + 0.6522vw, 1.125rem); | |
/* Space s-m: 16px → 27px */ | |
--space-s-m: clamp(1rem, 0.7609rem + 1.1957vw, 1.6875rem); | |
/* Space m-l: 24px → 36px */ | |
--space-m-l: clamp(1.5rem, 1.2391rem + 1.3043vw, 2.25rem); | |
/* Space l-xl: 32px → 54px */ | |
--space-l-xl: clamp(2rem, 1.5217rem + 2.3913vw, 3.375rem); | |
/* Space xl-2xl: 48px → 72px */ | |
--space-xl-2xl: clamp(3rem, 2.4783rem + 2.6087vw, 4.5rem); | |
/* Space 2xl-3xl: 64px → 108px */ | |
--space-2xl-3xl: clamp(4rem, 3.0435rem + 4.7826vw, 6.75rem); | |
/* Custom pairs */ | |
/* Space s-l: 16px → 36px */ | |
--space-s-l: clamp(1rem, 0.5652rem + 2.1739vw, 2.25rem); | |
} | |
/* Typography */ | |
body { | |
font-family: "AT Name Mono Variable", "MD IO", "Andale Mono", Menlo, monospace !important; | |
font-size: var(--step-0) !important; | |
font-weight: 300 !important; | |
font-variation-settings: "wght" 300 !important; | |
} | |
.content { | |
line-height: 1.3 !important; | |
} | |
/* Page title (when zooming into a bullet)*/ | |
._1specsd { | |
font-size: var(--step-2) !important; | |
font-weight: 800 !important; | |
font-variation-settings: "wght" 800 !important; | |
} | |
/* Heading 1 */ | |
.project.root > .children .header1 > .name { | |
font-size: var(--step-2) !important; | |
font-weight: 700 !important; | |
font-variation-settings: "wght" 700 !important; | |
} | |
/* Heading 2 */ | |
.project.root > .children .header2 > .name { | |
font-size: var(--step-1) !important; | |
font-weight: 500 !important; | |
font-variation-settings: "wght" 500 !important; | |
} | |
/* Notation */ | |
.children ._34lzwp { | |
font-size: var(--step--1) !important; | |
} | |
.notes ._ex0l5t {} | |
.children ._1pwh8c9 { | |
padding-block-start: var(--space-3xs) !important; | |
} | |
._ia86ct { | |
margin-block-start: var(--space-3xs-2xs) !important; | |
} | |
/* Breadcrumb in backlink */ | |
._xgi3ay { | |
max-width: none !important; | |
} | |
/* left menu */ | |
.left-bar-section-item { | |
margin-top: var(--space-3xs) !important; | |
font-size: var(--step--1) !important; | |
} | |
body, | |
.page, | |
.pageContainer, | |
.header, | |
.boardColumn, | |
.help-button, | |
.leftBar > div { | |
background: var(--color-gray-shade-6) !important; | |
color: var(--color-gray-shade-2) !important; | |
} | |
.leftBar * { | |
color: var(--color-gray-shade-2) !important; | |
} | |
i, | |
b { | |
color: var(--color-gray-shade-1) !important; | |
} | |
.boardCard { | |
background: var(--color-gray-shade-5) !important; | |
border-color: var(--color-gray-shade-4) var(--color-gray-shade-4) var(--color-gray-shade-4) var(--color-gray-shade-3) !important; | |
} | |
a.contentLink { | |
color: var(--color-primary-shade-2) !important; | |
} | |
.contentLink, | |
.contentTagText { | |
text-underline-offset: .15em !important; | |
} | |
.contentTag { | |
color: var(--color-gray-shade-2) !important; | |
} | |
/* Done items */ | |
.done .innerContentContainer, | |
.done .monolith-pill .content-wrapper { | |
color: var(--color-gray-shade-2) !important; | |
} | |
/* Date's pill background */ | |
.monolith-pill .content-wrapper { | |
background-color: var(--color-gray-shade-4) !important; | |
} | |
/* colors */ | |
/* red */ | |
.c-red { | |
color: var(--color-red-shade-3) !important; | |
text-decoration-color: var(--color-red-shade-3) !important; | |
} | |
.bc-red { | |
background-color: var(--color-red-shade-4) !important; | |
} | |
/* orange */ | |
.c-orange { | |
color: var(--color-orange-shade-3) !important; | |
text-decoration-color: var(--color-orange-shade-3) !important; | |
} | |
.bc-orange { | |
background-color: var(--color-orange-shade-4) !important; | |
} | |
/* yellow */ | |
.c-yellow { | |
color: var(--color-yellow-shade-3) !important; | |
text-decoration-color: var(--color-yellow-shade-3) !important; | |
} | |
.bc-yellow { | |
background-color: var(--color-yellow-shade-4) !important; | |
} | |
/* green */ | |
.c-green { | |
color: var(--color-green-shade-3) !important; | |
text-decoration-color: var(--color-green-shade-3) !important; | |
} | |
.bc-green { | |
background-color: var(--color-green-shade-4) !important; | |
} | |
/* teal */ | |
.c-teal { | |
color: var(--color-teal-shade-3) !important; | |
text-decoration-color: var(--color-teal-shade-3) !important; | |
} | |
.bc-teal { | |
background-color: var(--color-teal-shade-4) !important; | |
} | |
/* sky */ | |
.c-sky { | |
color: var(--color-sky-shade-3) !important; | |
text-decoration-color: var(--color-sky-shade-3) !important; | |
} | |
.bc-sky { | |
background-color: var(--color-sky-shade-4) !important; | |
} | |
/* blue */ | |
.c-blue { | |
color: var(--color-blue-shade-3) !important; | |
text-decoration-color: var(--color-blue-shade-3) !important; | |
} | |
.bc-blue { | |
background-color: var(--color-blue-shade-4) !important; | |
} | |
/* purple */ | |
.c-purple { | |
color: var(--color-purple-shade-3) !important; | |
text-decoration-color: var(--color-purple-shade-3) !important; | |
} | |
.bc-purple { | |
background-color: var(--color-purple-shade-4) !important; | |
} | |
/* pink */ | |
.c-pink { | |
color: var(--color-pink-shade-3) !important; | |
text-decoration-color: var(--color-pink-shade-3) !important; | |
} | |
.bc-pink { | |
background-color: var(--color-pink-shade-4) !important; | |
} | |
/* grey */ | |
.c-grey { | |
color: var(--color-grey-shade-3) !important; | |
text-decoration-color: var(--color-grey-shade-3) !important; | |
} | |
.bc-grey { | |
background-color: var(--color-grey-shade-4) !important; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment