Added color scheme by catppuchin, finished header
This commit is contained in:
parent
ceeabecc46
commit
e7ff8367dc
8 changed files with 152 additions and 20 deletions
|
|
@ -1,5 +1,63 @@
|
|||
$bg-color: #202020;
|
||||
|
||||
// LGBTQIA
|
||||
$pan_pink: #FF218C;
|
||||
$pan_yellow: #FFD800;
|
||||
$pan_cyan: #21B1FF;
|
||||
|
||||
// catppuchin
|
||||
//// latte
|
||||
$rosewater_latte: #dc8a78;
|
||||
$flamingo_latte: #dd7878;
|
||||
$pink_latte: #ea76cb;
|
||||
$mauve_latte: #8839ef;
|
||||
$red_latte: #d20f39;
|
||||
$maroon_latte: #e64553;
|
||||
$peach_latte: #fe640b;
|
||||
$yellow_latte: #df8e1d;
|
||||
$green_latte: #40a02b;
|
||||
$teal_latte: #179299;
|
||||
$sky_latte: #04a5e5;
|
||||
$sapphire_latte: #209fb5;
|
||||
$blue_latte: #1e66f5;
|
||||
$lavender_latte: #7287fd;
|
||||
$text_latte: #4c4f69;
|
||||
$subtext1_latte: #5c5f77;
|
||||
$subtext0_latte: #6c6f85;
|
||||
$overlay2_latte: #7c7f93;
|
||||
$overlay1_latte: #8c8fa1;
|
||||
$overlay0_latte: #9ca0b0;
|
||||
$surface2_latte: #acb0be;
|
||||
$surface1_latte: #bcc0cc;
|
||||
$surface0_latte: #ccd0da;
|
||||
$base_latte: #eff1f5;
|
||||
$mantle_latte: #e6e9ef;
|
||||
$crust_latte: #dce0e8;
|
||||
//// macchiato
|
||||
$rosewater_macchiato: #f4dbd6;
|
||||
$flamingo_macchiato: #f0c6c6;
|
||||
$pink_macchiato: #f5bde6;
|
||||
$mauve_macchiato: #c6a0f6;
|
||||
$red_macchiato: #ed8796;
|
||||
$maroon_macchiato: #ee99a0;
|
||||
$peach_macchiato: #f5a97f;
|
||||
$yellow_macchiato: #eed49f;
|
||||
$green_macchiato: #a6da95;
|
||||
$teal_macchiato: #8bd5ca;
|
||||
$sky_macchiato: #91d7e3;
|
||||
$sapphire_macchiato: #7dc4e4;
|
||||
$blue_macchiato: #8aadf4;
|
||||
$lavender_macchiato: #b7bdf8;
|
||||
$text_macchiato: #cad3f5;
|
||||
$subtext1_macchiato: #b8c0e0;
|
||||
$subtext0_macchiato: #a5adcb;
|
||||
$overlay2_macchiato: #939ab7;
|
||||
$overlay1_macchiato: #8087a2;
|
||||
$overlay0_macchiato: #6e738d;
|
||||
$surface2_macchiato: #5b6078;
|
||||
$surface1_macchiato: #494d64;
|
||||
$surface0_macchiato: #363a4f;
|
||||
$base_macchiato: #24273a;
|
||||
$mantle_macchiato: #1e2030;
|
||||
$crust_macchiato: #181926;
|
||||
|
||||
|
|
|
|||
6
assets/sass/fonts.scss
Normal file
6
assets/sass/fonts.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
@font-face {
|
||||
font-family: 'FantasqueNF';
|
||||
src: url('/fonts/FantasqueSansMonoRegularNF.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -1,21 +1,32 @@
|
|||
@import './colors.scss';
|
||||
|
||||
body {
|
||||
font-family: monospace;
|
||||
@import './fonts.scss';
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1.cli {
|
||||
.pink {
|
||||
color: $pan_pink;
|
||||
body {
|
||||
font-family: 'FantasqueNF', monospace;
|
||||
}
|
||||
|
||||
header {
|
||||
margin-top: 2.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
h1.cli {
|
||||
font-size: 2.5rem;
|
||||
.decoration {
|
||||
font-variant-ligatures: none;
|
||||
}
|
||||
.hint {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
.yellow {
|
||||
color: $pan_yellow;
|
||||
}
|
||||
.cyan {
|
||||
color: $pan_cyan;
|
||||
}
|
||||
.hint {
|
||||
font-style: italic;
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.25rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -29,3 +40,48 @@ h1.cli {
|
|||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
body {
|
||||
background: $base_latte;
|
||||
color: $text_latte;
|
||||
}
|
||||
header{
|
||||
h1.cli {
|
||||
.pink {
|
||||
color: $pink_latte;
|
||||
}
|
||||
.yellow {
|
||||
color: $yellow_latte;
|
||||
}
|
||||
.cyan {
|
||||
color: $sky_latte;
|
||||
}
|
||||
.hint {
|
||||
color: $subtext0_latte;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background: $base_macchiato;
|
||||
color: $text_macchiato;
|
||||
}
|
||||
header{
|
||||
h1.cli {
|
||||
.pink {
|
||||
color: $pink_macchiato;
|
||||
}
|
||||
.yellow {
|
||||
color: $yellow_macchiato;
|
||||
}
|
||||
.cyan {
|
||||
color: $sky_macchiato;
|
||||
}
|
||||
.hint {
|
||||
color: $subtext0_macchiato;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
---
|
||||
title: Testhomepage
|
||||
title: Homepage
|
||||
---
|
||||
Hello, I'm the homepage
|
||||
|
|
|
|||
|
|
@ -2,6 +2,9 @@ baseURL = 'http://example.org/'
|
|||
languageCode = 'en-us'
|
||||
title = 'cat-enby.club'
|
||||
|
||||
[Params]
|
||||
description = 'Services hosted by a cat for cats (=^･ω･^=) ... and any other beeings!'
|
||||
|
||||
[Params.Service.Test]
|
||||
name = 'Service 1'
|
||||
summary = ''
|
||||
|
|
|
|||
|
|
@ -7,10 +7,21 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="color-scheme" content="light dark">
|
||||
<title>{{ .Page.Title }}</title>
|
||||
<title>{{ .Site.Title }}</title>
|
||||
</head>
|
||||
<body>
|
||||
{{ block "main" . }}
|
||||
{{ end }}
|
||||
<header>
|
||||
<div class="title">
|
||||
<h1 class="cli">
|
||||
<span class="decoration"><span class="pink">=</span><span class="yellow">=</span><span class="cyan">=</span>>></span> {{ .Site.Title }}
|
||||
<span class="blink">█</span><span class="hint">~~~nyaa</span>
|
||||
</h1>
|
||||
<p class="subtitle">{{ .Site.Params.description }} </p>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
{{ block "main" . }}
|
||||
{{ end }}
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
{{ define "main" }}
|
||||
<h1 class="cli"><span class="pink">=</span><span class="yellow">=</span><span class="cyan">=</span>>> {{ .Site.Title }}<span class="blink"> █</span><span class="hint">~~~nyaa</span></h1>
|
||||
{{ .Content }}
|
||||
{{ range $.Site.Params.Service }}
|
||||
<b>{{ .name }}</b>
|
||||
|
|
|
|||
BIN
static/fonts/FantasqueSansMonoRegularNF.ttf
Normal file
BIN
static/fonts/FantasqueSansMonoRegularNF.ttf
Normal file
Binary file not shown.
Reference in a new issue