-
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.
* add halloween version Add Halloween version of Fart.css library. * trigger halloween version on url search param * run `deno fmt` * define halloween colors
- Loading branch information
1 parent
76e4a19
commit 72fd299
Showing
9 changed files
with
344 additions
and
275 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,5 +1,5 @@ | ||
| @import "fonts.css"; | ||
| @import "root.css"; | ||
| @import "keyframes.css"; | ||
| @import "misc.css"; | ||
| @import "semantics.css"; | ||
| @import "fonts.css"; | ||
| @import "root.css"; | ||
| @import "keyframes.css"; | ||
| @import "misc.css"; | ||
| @import "semantics.css"; |
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 @@ | ||
| @import url("https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100..900;1,100..900&display=swap"); | ||
| @import url("https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100..900;1,100..900&display=swap"); |
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,21 @@ | ||
| :root { | ||
| --fart-purple: #800080; | ||
| --fart-dark-purple: #660066; | ||
| --fart-lighter-dark-purple: #8f008f; | ||
| --fart-darker-dark-purple: #550055; | ||
|
|
||
| --fart-orange: #ff7f00; | ||
| --fart-orange-transparent: #ff7f0055; | ||
|
|
||
| /* Overwrite the green colors with purple. */ | ||
| --fart-dark-green: var(--fart-dark-purple); | ||
| --fart-lighter-dark-green: var(--fart-lighter-dark-purple); | ||
| --fart-darker-dark-green: var(--fart-darker-dark-purple); | ||
|
|
||
| /* Overwrite the pink colors with orange. */ | ||
| --fart-pink: var(--fart-orange); | ||
| --fart-pink-transparent: var(--fart-orange-transparent); | ||
|
|
||
| /* Overwrite the sparkle text with a spooky sparkle. */ | ||
| --fart-sparkle-text: "🦇"; | ||
| } |
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,23 @@ | ||
| /** | ||
| * checkHalloweenWeek checks if the date is within the week of Halloween. | ||
| */ | ||
| export function checkHalloweenWeek(date: Date = new Date()): boolean { | ||
| const month = date.getMonth(); | ||
| const day = date.getDate(); | ||
| return month === 9 && day >= 25 && day <= 31; | ||
| } | ||
|
|
||
| /** | ||
| * appendHalloweenCSS appends an import to the Halloween version file if it's | ||
| * the week of Halloween. | ||
| */ | ||
| export function appendHalloweenCSS( | ||
| css: string, | ||
| isHalloweenWeek: boolean = checkHalloweenWeek(), | ||
| ): string { | ||
| if (isHalloweenWeek) { | ||
| return css + `@import "halloween.css"\n`; | ||
| } | ||
|
|
||
| return css; | ||
| } |
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
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,74 +1,74 @@ | ||
| .fart-section { | ||
| max-width: 64ch; | ||
| word-wrap: break-word; | ||
| margin: 6rem auto; | ||
|
|
||
| @media (max-width: 800px) { | ||
| padding: 0 1rem; | ||
| } | ||
| } | ||
|
|
||
| .fart-header { | ||
| font-family: "Overpass", sans-serif; | ||
| font-size: 1.5rem; | ||
| font-weight: 700; | ||
| } | ||
|
|
||
| .fart-inline { | ||
| display: grid; | ||
| grid-template-rows: 1fr; | ||
| grid-auto-flow: column; | ||
| gap: 2px; | ||
| } | ||
|
|
||
| .fart-button { | ||
| background-color: var(--fart-darker-dark-green); | ||
| color: var(--fart-green); | ||
| border: 1px solid var(--fart-green); | ||
| border-radius: 5px; | ||
| padding: 0.25rem 0.5rem; | ||
| text-decoration: none; | ||
| transition: background-color 0.3s; | ||
| } | ||
|
|
||
| .fart-button:hover { | ||
| background-color: var(--fart-lighter-dark-green); | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
| .fart-topics { | ||
| margin-top: auto; | ||
| } | ||
|
|
||
| .fart-topic { | ||
| word-break: keep-all; | ||
| padding: 0.25rem 0.5rem; | ||
| border-radius: 5px; | ||
| background-color: var(--fart-lighter-dark-green); | ||
| color: var(--fart-green); | ||
| border-radius: 2rem; | ||
| display: inline-block; | ||
| margin: 2px; | ||
| } | ||
|
|
||
| .fart-logo { | ||
| position: absolute; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .fart-logo:hover { | ||
| animation: fart-shake 560ms ease-in-out; | ||
| } | ||
|
|
||
| .fart-sparkle::before, | ||
| .fart-sparkle::after { | ||
| content: "✨"; | ||
| } | ||
|
|
||
| .fart-sparkle-before::before { | ||
| content: "✨"; | ||
| } | ||
|
|
||
| .fart-sparkle-after:after { | ||
| content: "✨"; | ||
| } | ||
| .fart-section { | ||
| max-width: 64ch; | ||
| word-wrap: break-word; | ||
| margin: 6rem auto; | ||
|
|
||
| @media (max-width: 800px) { | ||
| padding: 0 1rem; | ||
| } | ||
| } | ||
|
|
||
| .fart-header { | ||
| font-family: "Overpass", sans-serif; | ||
| font-size: 1.5rem; | ||
| font-weight: 700; | ||
| } | ||
|
|
||
| .fart-inline { | ||
| display: grid; | ||
| grid-template-rows: 1fr; | ||
| grid-auto-flow: column; | ||
| gap: 2px; | ||
| } | ||
|
|
||
| .fart-button { | ||
| background-color: var(--fart-darker-dark-green); | ||
| color: var(--fart-green); | ||
| border: 1px solid var(--fart-green); | ||
| border-radius: 5px; | ||
| padding: 0.25rem 0.5rem; | ||
| text-decoration: none; | ||
| transition: background-color 0.3s; | ||
| } | ||
|
|
||
| .fart-button:hover { | ||
| background-color: var(--fart-lighter-dark-green); | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
| .fart-topics { | ||
| margin-top: auto; | ||
| } | ||
|
|
||
| .fart-topic { | ||
| word-break: keep-all; | ||
| padding: 0.25rem 0.5rem; | ||
| border-radius: 5px; | ||
| background-color: var(--fart-lighter-dark-green); | ||
| color: var(--fart-green); | ||
| border-radius: 2rem; | ||
| display: inline-block; | ||
| margin: 2px; | ||
| } | ||
|
|
||
| .fart-logo { | ||
| position: absolute; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .fart-logo:hover { | ||
| animation: fart-shake 560ms ease-in-out; | ||
| } | ||
|
|
||
| .fart-sparkle::before, | ||
| .fart-sparkle::after { | ||
| content: var(--fart-sparkle-text); | ||
| } | ||
|
|
||
| .fart-sparkle-before::before { | ||
| content: var(--fart-sparkle-text); | ||
| } | ||
|
|
||
| .fart-sparkle-after:after { | ||
| content: var(--fart-sparkle-text); | ||
| } |
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,11 +1,13 @@ | ||
| :root { | ||
| --fart-green: #c3ef3c; | ||
| --fart-dark-green: #004021; | ||
| --fart-lighter-dark-green: #005b31; | ||
| --fart-darker-dark-green: #002d17; | ||
|
|
||
| --fart-pink: #db7093; | ||
| --fart-pink-transparent: #db709384; | ||
| --fart-white: #ddd; | ||
| --fart-off-white: #aaa; | ||
| } | ||
| :root { | ||
| --fart-green: #c3ef3c; | ||
| --fart-dark-green: #004021; | ||
| --fart-lighter-dark-green: #005b31; | ||
| --fart-darker-dark-green: #002d17; | ||
|
|
||
| --fart-pink: #db7093; | ||
| --fart-pink-transparent: #db709384; | ||
| --fart-white: #ddd; | ||
| --fart-off-white: #aaa; | ||
|
|
||
| --fart-sparkle-text: "✨"; | ||
| } |
Oops, something went wrong.