initial commit
This commit is contained in:
parent
46328a92a8
commit
c449f9d9ac
12 changed files with 457 additions and 4 deletions
22
templates/article.html
Normal file
22
templates/article.html
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title> {title} </title>
|
||||
<link rel="stylesheet" href="/stylesheet.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
{nav}
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
{main}
|
||||
</main>
|
||||
<footer>
|
||||
{footer}
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
13
templates/footer.html
Normal file
13
templates/footer.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
Contact me:<br/>
|
||||
Sharkey <a href = "https://catwithaclari.net/@Chloe">@Chloe@catwithaclari.net</a> •
|
||||
Email <a href = "mailto:chloe@catwitaclari.net">chloe@catwithaclari.net</a><br/>
|
||||
<a href="https://blog.catwithaclari.net/"><img src="/button.png" alt="A pink-purple-blue gradient with the text ChloeCat written in a fancy script font"/></a>
|
||||
<a id="w3chtml" href="https://validator.w3.org/nu/?doc=https%3A%2F%2Fblog.catwithaclari.net%2F"><img src="https://www.w3.org/Icons/valid-html401.png" alt="WC3 HTML 4.01 Validated"/></a>
|
||||
<a id="w3ccss" href="https://jigsaw.w3.org/css-validator/validator?uri=https%253A%252F%252Fblog.catwithaclari.net"><img src="https://www.w3.org/Icons/valid-css.png" alt="W3C CSS Validated"/></a>
|
||||
<script>
|
||||
href = document.location;
|
||||
w3chtml = document.getElementById("w3chtml");
|
||||
w3ccss = document.getElementById("w3ccss");
|
||||
w3chtml.href = "https://validator.w3.org/nu/?doc=" + href;
|
||||
w3ccss.href = "https://jigsaw.w3.org/css-validator/validator?uri=" + href;
|
||||
</script>
|
||||
23
templates/main.html
Normal file
23
templates/main.html
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title> {title} </title>
|
||||
<link rel="stylesheet" href="/stylesheet.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
{nav}
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<h1>Welcome to {title}!</h1>
|
||||
{toc}
|
||||
</main>
|
||||
<footer>
|
||||
{footer}
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
19
templates/navbar.html
Normal file
19
templates/navbar.html
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<div class = "logo"> <a href = "https://blog.catwithaclari.net">ChloeCat</a> </div><div class = sep> | </div>
|
||||
<div class="theme-switch">
|
||||
<button id="theme-toggle" accesskey="t" title="(Alt + T)">
|
||||
<svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
|
||||
</svg>
|
||||
<svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="5"></circle>
|
||||
<line x1="12" y1="1" x2="12" y2="3"></line>
|
||||
<line x1="12" y1="21" x2="12" y2="23"></line>
|
||||
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
|
||||
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
|
||||
<line x1="1" y1="12" x2="3" y2="12"></line>
|
||||
<line x1="21" y1="12" x2="23" y2="12"></line>
|
||||
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
|
||||
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
134
templates/stylesheet.css
Executable file
134
templates/stylesheet.css
Executable file
|
|
@ -0,0 +1,134 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Comfortaa:wght@300..700&display=swap');
|
||||
|
||||
:root {
|
||||
--bg-color: rgb(39, 08, 46);
|
||||
--fg-color: rgb(255, 186, 255);
|
||||
}
|
||||
|
||||
#sun {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--fg-color: rgb(39, 08, 46);
|
||||
--bg-color: rgb(255, 186, 255);
|
||||
}
|
||||
|
||||
#moon {
|
||||
display: none;
|
||||
}
|
||||
#sun {
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.theme-switch button {
|
||||
background: none;
|
||||
border: none;
|
||||
vertical-align: center;
|
||||
}
|
||||
|
||||
svg {
|
||||
stroke: var(--fg-color);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--fg-color);
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: lch(from var(--fg-color) calc(l - 20) c h);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg-color);
|
||||
color: var(--fg-color);
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
font-size: 150%;
|
||||
align-items: center;
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
color: var(--fg-color);
|
||||
border: solid lch(from var(--bg-color) calc(l + 15) c h);
|
||||
border-radius: 10px;
|
||||
background-color: lch(from var(--bg-color) calc(l + 10) c h);
|
||||
font-family: 'Caveat', sans-serif;
|
||||
}
|
||||
|
||||
.logo a {
|
||||
text-decoration: none;
|
||||
margin: 15px;
|
||||
}
|
||||
.logo a:visited{
|
||||
color: var(--fg-color);
|
||||
}
|
||||
|
||||
.sep {
|
||||
font-size: 175%;
|
||||
font-family: 'Fira Code', 'Noto Sans Mono', monospace;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.theme-switch {
|
||||
margin-right: 25px
|
||||
}
|
||||
|
||||
article{
|
||||
border: solid lch(from var(--bg-color) calc(l + 8) c h);
|
||||
border-radius: 15px;
|
||||
margin: 10px;
|
||||
background-color: lch(from var(--bg-color) calc(l + 5) c h);
|
||||
}
|
||||
|
||||
article h2{
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 300%;
|
||||
}
|
||||
|
||||
hr {
|
||||
max-width: 720px;
|
||||
margin-left: 0px;
|
||||
margin-right: 20%;
|
||||
color: var(--fg-color)
|
||||
}
|
||||
|
||||
h3 .date {
|
||||
font-size: 80%
|
||||
}
|
||||
|
||||
main {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
font-family: 'Comfortaa', 'Noto Sans', sans-serif;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: "Fira Code", monospace;
|
||||
border: solid lch(from var(--bg-color) calc(l + 15) c h);
|
||||
border-radius: 5px;
|
||||
background-color: lch(from var(--bg-color) calc(l + 5) c h);
|
||||
}
|
||||
|
||||
main * {
|
||||
max-width: 720px;
|
||||
justify-content: left;
|
||||
}
|
||||
|
||||
footer {
|
||||
justify-self: center;
|
||||
text-align: center;
|
||||
font-size: 75%;
|
||||
margin-top: 25px;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue