Skip to content

Commit

Permalink
refactor: color-schemes post
Browse files Browse the repository at this point in the history
  • Loading branch information
@FjellOverflow
FjellOverflow committed Oct 24, 2024
1 parent 961fdf8 commit 5ae1c59
Showing 1 changed file with 16 additions and 27 deletions.
43 changes: 16 additions & 27 deletions src/content/posts/color-schemes.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,11 @@ import monoDarkProjects from 'src/assets/screenshots/mono-dark-projects.png';
import monoLightLanding from 'src/assets/screenshots/mono-light-landing.png';
import monoLightProjects from 'src/assets/screenshots/mono-light-projects.png';

<div class="flex flex-col gap-4">
<div class="flex justify-center gap-4 max-w-full">
<Image class="my-0 w-[48%]" src={monoDarkLanding} alt="Nordlys landing page in dark mode with mono color scheme" data-img-embed />
<Image class="my-0 w-[48%]" src={monoLightLanding} alt="Nordlys landing page in light mode with mono color scheme" data-img-embed />
</div>
<div class="flex justify-center gap-4 max-w-full">
<Image class="my-0 w-[48%]" src={monoDarkProjects} alt="Nordlys projects page in dark mode with mono color scheme" />
<Image class="my-0 w-[48%]" src={monoLightProjects} alt="Nordlys projects page in light mode with mono color scheme" data-img-embed />
</div>
<div class="grid grid-cols-2 gap-4">
<Image class="my-0" src={monoDarkLanding} alt="Nordlys landing page in dark mode with mono color scheme" data-img-embed />
<Image class="my-0" src={monoLightLanding} alt="Nordlys landing page in light mode with mono color scheme" data-img-embed />
<Image class="my-0" src={monoDarkProjects} alt="Nordlys projects page in dark mode with mono color scheme" data-img-embed />
<Image class="my-0" src={monoLightProjects} alt="Nordlys projects page in light mode with mono color scheme" data-img-embed />
</div>

### Nord
Expand All @@ -42,17 +38,14 @@ import nordDarkProjects from 'src/assets/screenshots/nord-dark-projects.png';
import nordLightLanding from 'src/assets/screenshots/nord-light-landing.png';
import nordLightProjects from 'src/assets/screenshots/nord-light-projects.png';

<div class="flex flex-col gap-4">
<div class="flex justify-center gap-4 max-w-full">
<Image class="my-0 w-[48%]" src={nordDarkLanding} alt="Nordlys landing page in dark mode with nord color scheme" data-img-embed />
<Image class="my-0 w-[48%]" src={nordLightLanding} alt="Nordlys landing page in light mode with nord color scheme" data-img-embed />
</div>
<div class="flex justify-center gap-4 max-w-full">
<Image class="my-0 w-[48%]" src={nordDarkProjects} alt="Nordlys projects page in dark mode with nord color scheme" data-img-embed />
<Image class="my-0 w-[48%]" src={nordLightProjects} alt="Nordlys projects page in light mode with nord color scheme" data-img-embed />
</div>
<div class="grid grid-cols-2 gap-4">
<Image class="my-0" src={nordDarkLanding} alt="Nordlys landing page in dark mode with nord color scheme" data-img-embed />
<Image class="my-0" src={nordLightLanding} alt="Nordlys landing page in light mode with nord color scheme" data-img-embed />
<Image class="my-0" src={nordDarkProjects} alt="Nordlys projects page in dark mode with nord color scheme" data-img-embed />
<Image class="my-0" src={nordLightProjects} alt="Nordlys projects page in light mode with nord color scheme" data-img-embed />
</div>


### Aurora

The `scheme-aurora` color scheme resembles glowingly green northern lights against a dark grey night sky.
Expand All @@ -62,15 +55,11 @@ import auroraDarkProjects from 'src/assets/screenshots/aurora-dark-projects.png'
import auroraLightLanding from 'src/assets/screenshots/aurora-light-landing.png';
import auroraLightProjects from 'src/assets/screenshots/aurora-light-projects.png';

<div class="flex flex-col gap-4">
<div class="flex justify-center gap-4 max-w-full">
<Image class="my-0 w-[48%]" src={auroraDarkLanding} alt="Nordlys landing page in dark mode with aurora color scheme" data-img-embed />
<Image class="my-0 w-[48%]" src={auroraLightLanding} alt="Nordlys landing page in light mode with aurora color scheme" data-img-embed />
</div>
<div class="flex justify-center gap-4 max-w-full">
<Image class="my-0 w-[48%]" src={auroraDarkProjects} alt="Nordlys projects page in dark mode with aurora color scheme" data-img-embed />
<Image class="my-0 w-[48%]" src={auroraLightProjects} alt="Nordlys projects page in light mode with aurora color scheme" data-img-embed />
</div>
<div class="grid grid-cols-2 gap-4">
<Image class="my-0" src={auroraDarkLanding} alt="Nordlys landing page in dark mode with aurora color scheme" data-img-embed />
<Image class="my-0" src={auroraLightLanding} alt="Nordlys landing page in light mode with aurora color scheme" data-img-embed />
<Image class="my-0" src={auroraDarkProjects} alt="Nordlys projects page in dark mode with aurora color scheme" data-img-embed />
<Image class="my-0" src={auroraLightProjects} alt="Nordlys projects page in light mode with aurora color scheme" data-img-embed />
</div>

## Adding a New Scheme
Expand Down

0 comments on commit 5ae1c59

Please sign in to comment.