feat: dark theme, font icons
courtesy of https://github.com/tailwindlabs/heroicons
This commit is contained in:
efim
parent
0f30e1fc41
commit
51319b036b
|
|
@ -584,10 +584,6 @@ video {
|
|||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.h-60 {
|
||||
height: 15rem;
|
||||
}
|
||||
|
||||
.h-9 {
|
||||
height: 2.25rem;
|
||||
}
|
||||
|
|
@ -596,17 +592,45 @@ video {
|
|||
height: 350px;
|
||||
}
|
||||
|
||||
.h-full {
|
||||
height: 100%;
|
||||
.h-fit {
|
||||
height: -moz-fit-content;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.h-screen {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.h-fit {
|
||||
height: -moz-fit-content;
|
||||
height: fit-content;
|
||||
.h-6 {
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.h-8 {
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.h-full {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.h-10 {
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.h-3 {
|
||||
height: 0.75rem;
|
||||
}
|
||||
|
||||
.h-4 {
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.h-7 {
|
||||
height: 1.75rem;
|
||||
}
|
||||
|
||||
.h-16 {
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
.max-h-60 {
|
||||
|
|
@ -637,12 +661,20 @@ video {
|
|||
width: 275px;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.w-screen {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
.w-8 {
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.w-12 {
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
.max-w-screen-xl {
|
||||
|
|
@ -687,18 +719,10 @@ video {
|
|||
place-content: center;
|
||||
}
|
||||
|
||||
.content-center {
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
|
@ -772,6 +796,11 @@ video {
|
|||
border-width: 1px;
|
||||
}
|
||||
|
||||
.border-yellow-400 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(250 204 21 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.bg-very-light-gray {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: hsl(0 0% 98% / var(--tw-bg-opacity));
|
||||
|
|
@ -782,11 +811,6 @@ video {
|
|||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-red-200 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(254 202 202 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.p-8 {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
|
@ -826,6 +850,11 @@ video {
|
|||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.px-12 {
|
||||
padding-left: 3rem;
|
||||
padding-right: 3rem;
|
||||
}
|
||||
|
||||
.pb-10 {
|
||||
padding-bottom: 2.5rem;
|
||||
}
|
||||
|
|
@ -856,6 +885,21 @@ video {
|
|||
font-weight: 700;
|
||||
}
|
||||
|
||||
.text-white {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-gray-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-black {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(0 0 0 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.shadow-lg {
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
|
|
@ -929,23 +973,46 @@ html {
|
|||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
:is(.dark .dark\:border-dark-blue) {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: hsl(209 23% 22% / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
:is(.dark .dark\:bg-dark-blue) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: hsl(209 23% 22% / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
:is(.dark .dark\:bg-dark-gray) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: hsl(0 0% 52% / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
:is(.dark .dark\:bg-very-dark-blue) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: hsl(207 26% 17% / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
:is(.dark .dark\:text-white) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
:is(.dark .dark\:placeholder\:text-white)::-moz-placeholder {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
:is(.dark .dark\:placeholder\:text-white)::placeholder {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.md\:col-span-full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.md\:row-span-full {
|
||||
grid-row: 1 / -1;
|
||||
}
|
||||
|
||||
.md\:row-end-\[-1\] {
|
||||
grid-row-end: -1;
|
||||
}
|
||||
|
||||
.md\:row-end-3 {
|
||||
grid-row-end: 3;
|
||||
}
|
||||
|
||||
.md\:flex {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -958,12 +1025,8 @@ html {
|
|||
height: 8rem;
|
||||
}
|
||||
|
||||
.md\:h-full {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.md\:h-screen {
|
||||
height: 100vh;
|
||||
.md\:h-48 {
|
||||
height: 12rem;
|
||||
}
|
||||
|
||||
.md\:h-max {
|
||||
|
|
@ -971,99 +1034,55 @@ html {
|
|||
height: max-content;
|
||||
}
|
||||
|
||||
.md\:h-3\/5 {
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.md\:h-\[375px\] {
|
||||
height: 375px;
|
||||
}
|
||||
|
||||
.md\:h-60 {
|
||||
height: 15rem;
|
||||
}
|
||||
|
||||
.md\:h-48 {
|
||||
height: 12rem;
|
||||
}
|
||||
|
||||
.md\:h-\[400px\] {
|
||||
height: 400px;
|
||||
.md\:h-16 {
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
.md\:w-1\/4 {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.md\:w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.md\:w-\[375px\] {
|
||||
width: 375px;
|
||||
}
|
||||
|
||||
.md\:w-\[450px\] {
|
||||
width: 450px;
|
||||
}
|
||||
|
||||
.md\:w-\[455px\] {
|
||||
width: 455px;
|
||||
}
|
||||
|
||||
.md\:w-9\/12 {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.md\:w-10\/12 {
|
||||
width: 83.333333%;
|
||||
}
|
||||
|
||||
.md\:w-11\/12 {
|
||||
width: 91.666667%;
|
||||
}
|
||||
|
||||
.md\:w-32 {
|
||||
width: 8rem;
|
||||
}
|
||||
|
||||
.md\:grid-cols-\[repeat\(auto-fill\2c _275px\)\] {
|
||||
grid-template-columns: repeat(auto-fill, 275px);
|
||||
.md\:w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.md\:grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.md\:flex-row {
|
||||
flex-direction: row;
|
||||
.md\:grid-cols-\[repeat\(auto-fill\2c _275px\)\] {
|
||||
grid-template-columns: repeat(auto-fill, 275px);
|
||||
}
|
||||
|
||||
.md\:flex-col {
|
||||
flex-direction: column;
|
||||
.md\:flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.md\:items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.md\:justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.md\:justify-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.md\:gap-y-10 {
|
||||
row-gap: 2.5rem;
|
||||
}
|
||||
|
||||
.md\:gap-x-2 {
|
||||
-moz-column-gap: 0.5rem;
|
||||
column-gap: 0.5rem;
|
||||
}
|
||||
|
||||
.md\:gap-y-10 {
|
||||
row-gap: 2.5rem;
|
||||
}
|
||||
|
||||
.md\:place-self-center {
|
||||
place-self: center;
|
||||
}
|
||||
|
|
@ -1073,18 +1092,14 @@ html {
|
|||
padding-right: 5rem;
|
||||
}
|
||||
|
||||
.md\:py-10 {
|
||||
padding-top: 2.5rem;
|
||||
padding-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.md\:py-1 {
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.md\:pr-1 {
|
||||
padding-right: 0.25rem;
|
||||
.md\:py-10 {
|
||||
padding-top: 2.5rem;
|
||||
padding-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.md\:pr-2 {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,10 @@
|
|||
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
||||
<!-- Place favicon.ico in the root directory -->
|
||||
</head>
|
||||
<body class="bg-very-light-gray h-screen flex flex-col" hx-boost="true">
|
||||
<body
|
||||
class="bg-very-light-gray h-screen flex flex-col dark:bg-very-dark-blue dark:text-white"
|
||||
hx-boost="true"
|
||||
>
|
||||
<!--[if lt IE 8]>
|
||||
<p class="browserupgrade">
|
||||
You are using an <strong>outdated</strong> browser. Please
|
||||
|
|
@ -21,24 +24,37 @@
|
|||
your experience.
|
||||
</p>
|
||||
<![endif]-->
|
||||
<header
|
||||
class="w-screen bg-white h-20 flex flex-row shadow-md place-content-center"
|
||||
th:replace="~{index :: header}"
|
||||
>
|
||||
<header th:replace="~{index :: header}">
|
||||
<div
|
||||
class="flex-1 max-w-screen-xl h-20 flex flex-row justify-between items-center px-4"
|
||||
>
|
||||
<a th:href="@{~/}" href="index.html"
|
||||
><h1 class="grow font-bold md:text-2xl">Where in the world?</h1>
|
||||
</a>
|
||||
<div class="flex flex-row gap-x-2">
|
||||
<img
|
||||
src="../public/icons/half-moon-shape-svgrepo-com.svg"
|
||||
class="w-4"
|
||||
alt=""
|
||||
/>
|
||||
<button class="flex flex-row gap-x-2">
|
||||
<svg
|
||||
class="text-black dark:text-white h-6"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M21.7519 15.0019C20.597 15.4839 19.3296 15.75 18 15.75C12.6152 15.75 8.25 11.3848 8.25 5.99999C8.25 4.67039 8.51614 3.40296 8.99806 2.24805C5.47566 3.71785 3 7.19481 3 11.25C3 16.6348 7.36522 21 12.75 21C16.8052 21 20.2821 18.5243 21.7519 15.0019Z"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<p>Dark Mode</p>
|
||||
</div>
|
||||
</button>
|
||||
<script type="text/javascript">
|
||||
document
|
||||
.getElementById("toggleDarkMode")
|
||||
.addEventListener("click", function () {
|
||||
document.documentElement.classList.toggle("dark");
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</header>
|
||||
<nav
|
||||
|
|
@ -46,13 +62,30 @@
|
|||
>
|
||||
<a href="index.html" th:href="@{~/}" class="h-fit">
|
||||
<div
|
||||
class="h-9 w-28 bg-white drop-shadow-[0_0_3px_rgba(0,0,0,0.5)] text-md rounded px-5 py-2 flex flex-row gap-x-3 place-content-center"
|
||||
class="h-9 w-28 bg-white drop-shadow-[0_0_3px_rgba(0,0,0,0.5)] text-md rounded px-5 py-2 flex flex-row gap-x-3 place-content-center dark:bg-dark-blue"
|
||||
>
|
||||
<img
|
||||
src="../public/icons/back-svgrepo-com.svg"
|
||||
class="w-4 h-5"
|
||||
alt=""
|
||||
/>
|
||||
<!-- Back icon -->
|
||||
<svg
|
||||
class="text-black dark:text-white h-full"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M10.5 19.5L3 12M3 12L10.5 4.5M3 12H21"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<!-- <img
|
||||
src="../public/icons/back-svgrepo-com.svg"
|
||||
class="w-4 h-5"
|
||||
alt=""
|
||||
/> -->
|
||||
<p>Back</p>
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -131,7 +164,7 @@
|
|||
<div class="grid grid-cols-3 gap-2">
|
||||
<a
|
||||
href="/"
|
||||
class="text-center min-h-9 bg-white drop-shadow text-md rounded px-5 py-2 md:w-32 md:py-1"
|
||||
class="text-center min-h-9 bg-white drop-shadow text-md rounded px-5 py-2 md:w-32 md:py-1 dark:bg-dark-blue"
|
||||
th:each="border : ${borderCountries}"
|
||||
th:text="${border}"
|
||||
th:href="@{~/country(countryName=${border})}"
|
||||
|
|
|
|||
|
|
@ -12,7 +12,10 @@
|
|||
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
||||
<!-- Place favicon.ico in the root directory -->
|
||||
</head>
|
||||
<body class="bg-very-light-gray h-screen flex flex-col" hx-boost="true">
|
||||
<body
|
||||
class="bg-very-light-gray h-screen flex flex-col dark:bg-very-dark-blue dark:text-white"
|
||||
hx-boost="true"
|
||||
>
|
||||
<!--[if lt IE 8]>
|
||||
<p class="browserupgrade">
|
||||
You are using an <strong>outdated</strong> browser. Please
|
||||
|
|
@ -21,7 +24,7 @@
|
|||
</p>
|
||||
<![endif]-->
|
||||
<header
|
||||
class="w-screen bg-white h-20 flex flex-row shadow-md place-content-center flex-none"
|
||||
class="w-screen bg-white h-20 flex flex-row shadow-md place-content-center flex-none dark:bg-dark-blue"
|
||||
>
|
||||
<div
|
||||
class="flex-1 max-w-screen-xl h-20 flex flex-row justify-between items-center px-4"
|
||||
|
|
@ -29,14 +32,30 @@
|
|||
<a th:href="@{~/}" href="index.html"
|
||||
><h1 class="grow font-bold md:text-2xl">Where in the world?</h1>
|
||||
</a>
|
||||
<div class="flex flex-row gap-x-2">
|
||||
<img
|
||||
src="../public/icons/half-moon-shape-svgrepo-com.svg"
|
||||
class="w-4"
|
||||
alt=""
|
||||
/>
|
||||
<button id="toggleDarkMode" class="flex flex-row gap-x-2">
|
||||
<svg
|
||||
class="text-black dark:text-white h-6"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M21.7519 15.0019C20.597 15.4839 19.3296 15.75 18 15.75C12.6152 15.75 8.25 11.3848 8.25 5.99999C8.25 4.67039 8.51614 3.40296 8.99806 2.24805C5.47566 3.71785 3 7.19481 3 11.25C3 16.6348 7.36522 21 12.75 21C16.8052 21 20.2821 18.5243 21.7519 15.0019Z"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<p>Dark Mode</p>
|
||||
</div>
|
||||
</button>
|
||||
<script type="text/javascript">
|
||||
document
|
||||
.getElementById("toggleDarkMode")
|
||||
.addEventListener("click", function () {
|
||||
document.documentElement.classList.toggle("dark");
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</header>
|
||||
<nav
|
||||
|
|
@ -51,16 +70,25 @@
|
|||
hx-push-url="true"
|
||||
class="md:w-1/4"
|
||||
>
|
||||
<div class="flex flex-row bg-white shadow-md h-14 rounded-lg md:w-full">
|
||||
<div
|
||||
class="flex flex-row items-center bg-white shadow-md h-14 md:h-16 rounded-lg md:w-full dark:bg-dark-blue"
|
||||
>
|
||||
<!-- <p class="w-16 grid place-content-center">IC</p> -->
|
||||
<img
|
||||
src="../public/icons/search-svgrepo-com.svg"
|
||||
th:src="@{~/public/icons/search-svgrepo-com.svg}"
|
||||
class="w-6 mx-5"
|
||||
alt=""
|
||||
/>
|
||||
<svg
|
||||
class="text-black dark:text-white h-6 px-7"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M9 3.5C5.96243 3.5 3.5 5.96243 3.5 9C3.5 12.0376 5.96243 14.5 9 14.5C10.519 14.5 11.893 13.8852 12.8891 12.8891C13.8852 11.893 14.5 10.519 14.5 9C14.5 5.96243 12.0376 3.5 9 3.5ZM2 9C2 5.13401 5.13401 2 9 2C12.866 2 16 5.13401 16 9C16 10.6625 15.4197 12.1906 14.4517 13.3911L17.7803 16.7197C18.0732 17.0126 18.0732 17.4874 17.7803 17.7803C17.4874 18.0732 17.0126 18.0732 16.7197 17.7803L13.3911 14.4517C12.1906 15.4197 10.6625 16 9 16C5.13401 16 2 12.866 2 9Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
<input
|
||||
class="appearance-none flex-grow focus:outline-none mr-2"
|
||||
class="appearance-none flex-grow focus:outline-none mr-2 dark:bg-dark-blue dark:placeholder:text-white"
|
||||
type="text"
|
||||
id="country-name-input"
|
||||
name="countryName"
|
||||
|
|
@ -79,7 +107,7 @@
|
|||
<form>
|
||||
<select
|
||||
name="region"
|
||||
class="block w-62 mt-1 h-12 w-64 bg-white shadow-lg rounded-md shadow-sm focus:outline-none px-7"
|
||||
class="block w-62 mt-1 h-14 md:h-16 w-64 bg-white shadow-lg rounded-md shadow-sm focus:outline-none px-7 dark:bg-dark-blue"
|
||||
hx-get="/countries-cards"
|
||||
hx-target="#countries-main-list"
|
||||
>
|
||||
|
|
@ -116,7 +144,7 @@
|
|||
th:each="country : ${countriesList}"
|
||||
id="germany"
|
||||
th:id="${country.alpha3Code}"
|
||||
class="bg-white h-[350px] w-[275px] border flex flex-col rounded-lg shadow-lg"
|
||||
class="bg-white h-[350px] w-[275px] flex flex-col rounded-lg shadow-lg dark:bg-dark-blue"
|
||||
>
|
||||
<a
|
||||
href="country.html"
|
||||
|
|
@ -165,7 +193,7 @@
|
|||
|
||||
<article
|
||||
id="usa"
|
||||
class="bg-white h-[350px] w-[275px] border flex flex-col rounded-lg shadow-lg"
|
||||
class="bg-white h-[350px] w-[275px] flex flex-col rounded-lg shadow-lg dark:bg-dark-blue"
|
||||
th:remove="all"
|
||||
>
|
||||
<img
|
||||
|
|
@ -194,7 +222,7 @@
|
|||
|
||||
<article
|
||||
id="Brazil"
|
||||
class="bg-white h-[350px] w-[275px] border flex flex-col rounded-lg shadow-lg"
|
||||
class="bg-white h-[350px] w-[275px] flex flex-col rounded-lg shadow-lg dark:bg-dark-blue"
|
||||
th:remove="all"
|
||||
>
|
||||
<img
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ["./src/main/resources/**/*.html"],
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
'dark-gray': 'hsl(0, 0%, 52%)',
|
||||
'very-light-gray': 'hsl(0, 0%, 98%)',
|
||||
'dark-gray': 'hsl(0, 0%, 52%)', // light mode input
|
||||
'very-light-gray': 'hsl(0, 0%, 98%)', // light mode bg
|
||||
'dark-blue': 'hsl(209, 23%, 22%)', // dark mode elements
|
||||
'very-dark-blue': 'hsl(207, 26%, 17%)', // dark mode bg
|
||||
},
|
||||
fontFamily: {
|
||||
'sans': ['NunitoSans', 'sans-serif'],
|
||||
|
|
|
|||
Loading…
Reference in New Issue