inherentlee/andie
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

palette ref page

Browse Source
This commit is contained in:
Lee Cattarin
2026-01-27 13:42:34 -08:00
parent 11aa5b9d64
commit 018b0ef31d
2 changed files with 85 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
assets/styles/palette.css Normal file
View File

@ -0,0 +1,44 @@
.color {
border: solid var(--color-text);
border-radius: 0 2rem 0 2rem;
width: 50%;
margin: 1rem auto;
text-align: center;
padding: .5rem;
font-weight: 900;
}
@media (max-width: 1050px) {
.color {
width: 70%;
}
}
@media (max-width: 650px) {
.color {
width: 100%;
}
}
#dark { background-color: var(--color-dark); }
#light { background-color: var(--color-light); }
#purple-dark { background-color: var(--color-purple-dark); }
#purple-light { background-color: var(--color-purple-light); }
#pink-dark { background-color: var(--color-pink-dark); }
#pink-light { background-color: var(--color-pink-light); }
#orange-dark { background-color: var(--color-orange-dark); }
#orange-light { background-color: var(--color-orange-light); }
#dark,
#purple-dark,
#pink-dark,
#orange-dark {
color: var(--color-light);
}
#light,
#purple-light,
#pink-light,
#orange-light {
color: var(--color-dark);
}

41
palette/index.html Normal file
View File

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>{{title}}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<!-- Meta -->
<!-- <link rel="icon" type="image/x-icon" href="/favicon.ico"> -->
<link rel="canonical" href="/" />
<meta name="description" content="{{description}}" />
<meta name="robots" content="index,follow" />
<meta property="og:title" content="{{title}}" />
<meta property="og:type" content="article" />
<meta property="og:url" content="/" />
<meta property="og:description" content="{{description}}" />
<!-- <meta property="og:image" content="/assets/img/logo.jpg" />
<meta property="og:image:alt" content="block print in black and orange of a rufous hummingbird in flight with tail flared. the hummingbird holds a banner that reads 'become ungovernable.'" /> -->
<!-- CSS -->
<link rel="stylesheet" href="/assets/styles/main.css">
<link rel="stylesheet" href="/assets/styles/palette.css">
</head>
<body>
<header>
<nav>
</nav>
</header>
<main id="main">
<h1>Site palette</h1>
<p class="color" id="dark">#130024</p>
<p class="color" id="light">#ffdff3</p>
<p class="color" id="purple-dark">#570d93</p>
<p class="color" id="purple-light">#b675ec</p>
<p class="color" id="pink-dark">#8f0d66</p>
<p class="color" id="pink-light">#e771c2</p>
<p class="color" id="orange-dark">#ba4f1d</p>
<p class="color" id="orange-light">#e88a5c</p>
</main>
</body>
</html>