css: change colors to catppuccin mocha and latte
Signed-off-by: Amneesh Singh <natto@weirdnatto.in>
This commit is contained in:
parent
ea9ec55590
commit
0708a4c522
GPG Key ID:
95949BD4B853F559
|
|
@ -3,12 +3,13 @@ title: Contact
|
|||
---
|
||||
|
||||
* Email
|
||||
Fastest way to get to me
|
||||
- [[mailto:natto@weirdnatto.in][natto at weirdnatto dot com]]
|
||||
- [[mailto:singh.amneesh1784@gmail.com][singh dot amneesh1784 at gmail dot com]]
|
||||
- [[mailto:natto1784@protonmail.com][natto1784 at protonmail dot com]]
|
||||
|
||||
* IRC Nicks
|
||||
Though, I'll probably be AFK
|
||||
I'll probably be AFK
|
||||
- natto
|
||||
- natto17
|
||||
|
||||
|
|
|
|||
113
css/default.css
113
css/default.css
|
|
@ -92,30 +92,69 @@
|
|||
}
|
||||
|
||||
:root {
|
||||
--yellow: #fcdb03;
|
||||
--orange: #fc9403;
|
||||
--red: #ff2600;
|
||||
--magenta: #d33682;
|
||||
--violet: #6c71c4;
|
||||
--blue: #3e8ef0;
|
||||
--cyan: #2aa198;
|
||||
--green: #327841;
|
||||
--fg0: #9c9c9c;
|
||||
--fg1: #828181;
|
||||
--fg2: #5e5e5e;
|
||||
--fg3: #403f3f;
|
||||
--fg4: #262626;
|
||||
--fg5: #000000;
|
||||
--bg0: #ffffff ;
|
||||
--bg1: #e6e6e6;
|
||||
--dark: #000000;
|
||||
--light: #ffffff;
|
||||
--rosewater: #dc8a78;
|
||||
--flamingo: #dd7878;
|
||||
--pink: #ea76cb;
|
||||
--mauve: #8839ef;
|
||||
--red: #d20f39;
|
||||
--maroon: #e64553;
|
||||
--peach: #fe640b;
|
||||
--yellow: #df8e1d;
|
||||
--green: #40a02b;
|
||||
--teal: #179299;
|
||||
--sky: #04a5e5;
|
||||
--sapphire: #209fb5;
|
||||
--blue: #1e66f5;
|
||||
--lavender: #7287fd;
|
||||
--text: #4c4f69;
|
||||
--subtext1: #5c5f77;
|
||||
--subtext0: #6c6f85;
|
||||
--overlay2: #7c7f93;
|
||||
--overlay1: #8c8fa1;
|
||||
--overlay0: #9ca0b0;
|
||||
--surface2: #acb0be;
|
||||
--surface1: #bcc0cc;
|
||||
--surface0: #ccd0da;
|
||||
--crust: #dce0e8;
|
||||
--mantle: #e6e9ef;
|
||||
--base: #eff1f5;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--rosewater: #f5e0dc;
|
||||
--flamingo: #f2cdcd;
|
||||
--pink: #f5c2e7;
|
||||
--mauve: #cba6f7;
|
||||
--red: #f38ba8;
|
||||
--maroon: #eba0ac;
|
||||
--peach: #fab387;
|
||||
--yellow: #f9e2af;
|
||||
--green: #a6e3a1;
|
||||
--teal: #94e2d5;
|
||||
--sky: #89dceb;
|
||||
--sapphire: #74c7ec;
|
||||
--sky: #89b4fa;
|
||||
--lavender: #b4befe;
|
||||
--text: #cdd6f4;
|
||||
--subtext1: #bac2de;
|
||||
--subtext0: #a6adc8;
|
||||
--overlay2: #9399b2;
|
||||
--overlay1: #7f849c;
|
||||
--overlay0: #6c7086;
|
||||
--surface2: #585b70;
|
||||
--surface1: #45475a;
|
||||
--surface0: #313244;
|
||||
--base: #1e1e2e;
|
||||
--mantle: #181825;
|
||||
--crust: #11111b;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
background-color: var(--bg0);
|
||||
color: var(--fg2);
|
||||
background-color: var(--base);
|
||||
color: var(--subtext0);
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -125,7 +164,7 @@ body {
|
|||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
color: var(--fg3);
|
||||
color: var(--overlay2);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
|
|
@ -134,17 +173,17 @@ h1, h2, h3, h4, h5, h6 {
|
|||
}
|
||||
|
||||
header {
|
||||
border-bottom: 0.2rem solid var(--magenta);
|
||||
border-bottom: 0.2rem solid var(--pink);
|
||||
margin: 4.2rem 0;
|
||||
}
|
||||
|
||||
main a, footer a {
|
||||
color: var(--blue);
|
||||
color: var(--sky);
|
||||
}
|
||||
|
||||
main a:hover, footer a:hover{
|
||||
color: var(--light);
|
||||
background: var(--blue);
|
||||
color: var(--base);
|
||||
background: var(--sky);
|
||||
}
|
||||
|
||||
.subdomains li a:hover {
|
||||
|
|
@ -171,22 +210,22 @@ nav {
|
|||
nav a {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
color: var(--cyan);
|
||||
color: var(--sapphire);
|
||||
text-transform: uppercase;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
background: var(--cyan);
|
||||
color: var(--bg0);
|
||||
background: var(--sapphire);
|
||||
color: var(--base);
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 3rem;
|
||||
padding: 1.2rem 0;
|
||||
border-top: 0.2rem solid var(--magenta);
|
||||
border-top: 0.2rem solid var(--pink);
|
||||
font-size: 1.2rem;
|
||||
color: var(--fg0);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
@ -199,13 +238,13 @@ h2 {
|
|||
|
||||
.post-title {
|
||||
text-align: center;
|
||||
color: var(--fg5) !important;
|
||||
color: var(--subtext1);
|
||||
}
|
||||
|
||||
article .post-header {
|
||||
font-size: 1.4rem;
|
||||
font-style: italic;
|
||||
color: var(--fg0);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.nattopages {
|
||||
|
|
@ -217,7 +256,7 @@ article .post-header {
|
|||
font-weight: bold;
|
||||
font-family: "Monoid";
|
||||
font-size: 3rem;
|
||||
color: var(--fg3);
|
||||
color: var(--overlay2);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -235,20 +274,20 @@ article > section {
|
|||
}
|
||||
|
||||
.verbatim {
|
||||
background: var(--bg1);
|
||||
background: var(--mantle);
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: 'Monoid', monospace;
|
||||
padding: 2rem;
|
||||
border-radius: 1rem;
|
||||
border-left: 0.5rem solid var(--cyan);
|
||||
background: var(--bg1);
|
||||
border-left: 0.5rem solid var(--sapphire);
|
||||
background: var(--mantle);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.toc {
|
||||
background: var(--bg1);
|
||||
background: var(--mantle);
|
||||
border-radius: 1rem;
|
||||
float: none;
|
||||
width: max-content;
|
||||
|
|
|
|||
|
|
@ -1,30 +1,30 @@
|
|||
pre code { color: var(--fg2); }
|
||||
pre code { color: var(--subtext0); }
|
||||
code span.kw { color: var(--green); } /* Keyword */
|
||||
code span.dt { color: var(--yellow); } /* DataType */
|
||||
code span.dv { color: var(--cyan); } /* DecVal */
|
||||
code span.bn { color: var(--cyan); } /* BaseN */
|
||||
code span.fl { color: var(--cyan); } /* Float */
|
||||
code span.ch { color: var(--cyan); } /* Char */
|
||||
code span.st { color: var(--cyan); } /* String */
|
||||
code span.co { color: var(--fg0); font-style: italic; } /* Comment */
|
||||
code span.ot { color: var(--blue); } /* Other */
|
||||
code span.al { color: var(--red); } /* Alert */
|
||||
code span.fu { color: var(--blue); } /* Function */
|
||||
code span.cn { color: var(--cyan); } /* Constant */
|
||||
code span.sc { color: var(--red); } /* SpecialChar */
|
||||
code span.vs { color: var(--fg2); } /* VerbatimString */
|
||||
code span.ss { color: var(--red); } /* SpecialString */
|
||||
code span.im { color: var(--fg2); } /* Import */
|
||||
code span.va { color: var(--blue); } /* Variable */
|
||||
code span.dv { color: var(--sapphire); } /* DecVal */
|
||||
code span.bn { color: var(--sapphire); } /* BaseN */
|
||||
code span.fl { color: var(--sapphire); } /* Float */
|
||||
code span.ch { color: var(--sapphire); } /* Char */
|
||||
code span.st { color: var(--sapphire); } /* String */
|
||||
code span.co { color: var(--text); font-style: italic; } /* Comment */
|
||||
code span.ot { color: var(--sky); } /* Other */
|
||||
code span.al { color: var(--maroon); } /* Alert */
|
||||
code span.fu { color: var(--sky); } /* Function */
|
||||
code span.cn { color: var(--sapphire); } /* Constant */
|
||||
code span.sc { color: var(--maroon); } /* SpecialChar */
|
||||
code span.vs { color: var(--subtext0); } /* VerbatimString */
|
||||
code span.ss { color: var(--maroon); } /* SpecialString */
|
||||
code span.im { color: var(--subtext0); } /* Import */
|
||||
code span.va { color: var(--sky); } /* Variable */
|
||||
code span.cf { color: var(--green); } /* ControlFlow */
|
||||
code span.op { color: var(--green); } /* Operator */
|
||||
code span.bu { color: var(--fg2); } /* BuiltIn */
|
||||
code span.ex { color: var(--fg2); } /* Extension */
|
||||
code span.pp { color: var(--orange); } /* Preprocessor */
|
||||
code span.at { color: var(--fg2); } /* Attribute */
|
||||
code span.er { color: var(--red); } /* Error */
|
||||
code span.wa { color: var(--orange); font-style: italic; } /* Warning */
|
||||
code span.do { color: var(--fg0); font-style: italic; } /* Documentation */
|
||||
code span.an { color: var(--fg0); font-style: italic; } /* Annotation */
|
||||
code span.cv { color: var(--fg0); font-style: italic; } /* CommentVar */
|
||||
code span.in { color: var(--fg0); font-weight:normal; font-style: normal; } /* Information */
|
||||
code span.bu { color: var(--subtext0); } /* BuiltIn */
|
||||
code span.ex { color: var(--subtext0); } /* Extension */
|
||||
code span.pp { color: var(--peach); } /* Preprocessor */
|
||||
code span.at { color: var(--subtext0); } /* Attribute */
|
||||
code span.er { color: var(--maroon); } /* Error */
|
||||
code span.wa { color: var(--peach); font-style: italic; } /* Warning */
|
||||
code span.do { color: var(--text); font-style: italic; } /* Documentation */
|
||||
code span.an { color: var(--text); font-style: italic; } /* Annotation */
|
||||
code span.cv { color: var(--text); font-style: italic; } /* CommentVar */
|
||||
code span.in { color: var(--text); font-weight:normal; font-style: normal; } /* Information */
|
||||
|
|
|
|||
|
|
@ -2,6 +2,5 @@
|
|||
title: Home
|
||||
home: true
|
||||
---
|
||||
<h2>Welcome</h2>
|
||||
$partial("templates/post-preview-list.html")$
|
||||
<p>Find more in the <a href="/archive.html">archives</a>.</p>
|
||||
<h2><b>Welcome<b></h2>
|
||||
Hello, I post stuff here. Check the <a href="/archive.html">archive</a>.
|
||||
|
|
|
|||
Loading…
Reference in New Issue