design work. explained in the note.
This commit is contained in:
parent
0980adb6e5
commit
bbe5ba99b3
13
_notes/2024-09-12-kx.md
Normal file
13
_notes/2024-09-12-kx.md
Normal file
|
@ -0,0 +1,13 @@
|
|||
---
|
||||
layout: default
|
||||
title: Note
|
||||
date: "2024-09-12 12:02"
|
||||
---
|
||||
|
||||
pushed some buttons on this site. The color theme is now based on [Everforest](https://github.com/sainnhe/everforest), the theme I use on my desktop everwhere. It's just the perfect fit this time.
|
||||
|
||||
I've also switched the typeface to [Berkely Mono](https://berkeleygraphics.com/typefaces/berkeley-mono/). Which I want to switch to on the desktop as well. But that needs some nix sourcery to figure out.
|
||||
|
||||
You might see remainders in [the CSS](/assets/new.css) that I tested [Departure Mono](https://www.departuremono.com/). But that too much on its own. Even for me. I left it for now, I wnat to see how it looks like on headings and code blocks only.
|
||||
|
||||
Now only that logo needs some adaption.
|
BIN
assets/fonts/BerkeleyMono-Regular.otf
Normal file
BIN
assets/fonts/BerkeleyMono-Regular.otf
Normal file
Binary file not shown.
BIN
assets/fonts/BerkeleyMono-Regular.ttf
Normal file
BIN
assets/fonts/BerkeleyMono-Regular.ttf
Normal file
Binary file not shown.
BIN
assets/fonts/BerkeleyMono-Regular.woff
Normal file
BIN
assets/fonts/BerkeleyMono-Regular.woff
Normal file
Binary file not shown.
BIN
assets/fonts/BerkeleyMono-Regular.woff2
Normal file
BIN
assets/fonts/BerkeleyMono-Regular.woff2
Normal file
Binary file not shown.
BIN
assets/fonts/DepartureMono-Regular.otf
Normal file
BIN
assets/fonts/DepartureMono-Regular.otf
Normal file
Binary file not shown.
BIN
assets/fonts/DepartureMono-Regular.woff
Normal file
BIN
assets/fonts/DepartureMono-Regular.woff
Normal file
Binary file not shown.
BIN
assets/fonts/DepartureMono-Regular.woff2
Normal file
BIN
assets/fonts/DepartureMono-Regular.woff2
Normal file
Binary file not shown.
|
@ -2,45 +2,62 @@
|
|||
---
|
||||
|
||||
:root {
|
||||
/* Light Mode */
|
||||
--backgroundColor: #EFF1F5; /* froth */
|
||||
--textColor: #4C4F69; /* text */
|
||||
--secondaryTextColor: #565A6E; /* overlay2 */
|
||||
--mutedTextColor: #727585; /* overlay1 */
|
||||
--subtleBackgroundColor: #E6E9EF; /* surface2 */
|
||||
--heartedBackgroundColor: #F5E0DC; /* peach */
|
||||
--selectionBackgroundColor: #A6E3A1; /* green */
|
||||
--linkColor: #89B4FA; /* blue */
|
||||
--borderColor: #D9E0EE; /* crust */
|
||||
--hrColor: #ABAEC6; /* mantle */
|
||||
--activeColor: #F28FAD; /* pink */
|
||||
--langBackgroundColor: #DCE0EA; /* surface1 */
|
||||
/* Light Mode - Everforest Theme */
|
||||
--backgroundColor: #fdf6e3; /* background */
|
||||
--textColor: #5c6a72; /* foreground */
|
||||
--secondaryTextColor: #7c8377; /* gray2 */
|
||||
--mutedTextColor: #9da9a0; /* gray1 */
|
||||
--subtleBackgroundColor: #f3ece5; /* surface */
|
||||
--heartedBackgroundColor: #e67e80; /* red */
|
||||
--selectionBackgroundColor: #a7c080; /* green */
|
||||
--linkColor: #7fbbb3; /* aqua */
|
||||
--borderColor: #dfc7a1; /* light yellow */
|
||||
--hrColor: #a9b1a1; /* gray3 */
|
||||
--activeColor: #d699b6; /* pink */
|
||||
--langBackgroundColor: #eee8d5; /* surface1 */
|
||||
--langShadowColor: transparent;
|
||||
--logoColor: #B8C0E0; /* lavender */
|
||||
--photoBackground: #E9ECF2; /* surface0 */
|
||||
--logoColor: #a7c080; /* green */
|
||||
--photoBackground: #e9e8d5; /* surface0 */
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
/* Dark Mode */
|
||||
--backgroundColor: #1E1E2E; /* base */
|
||||
--textColor: #CDD6F4; /* text */
|
||||
--secondaryTextColor: #A6ADC8; /* overlay2 */
|
||||
--mutedTextColor: #88909F; /* overlay1 */
|
||||
--subtleBackgroundColor: #313244; /* surface2 */
|
||||
--heartedBackgroundColor: #913C3C; /* red */
|
||||
--selectionBackgroundColor: #223249; /* blue darker */
|
||||
--linkColor: #89B4FA; /* blue */
|
||||
--borderColor: #414559; /* crust */
|
||||
--hrColor: #4C4F69; /* mantle */
|
||||
--activeColor: #ABE9B3; /* green */
|
||||
--langBackgroundColor: #2A2A3C; /* surface1 */
|
||||
/* Dark Mode - Everforest Theme */
|
||||
--backgroundColor: #2b3339; /* background */
|
||||
--textColor: #d3c6aa; /* foreground */
|
||||
--secondaryTextColor: #a7c080; /* green */
|
||||
--mutedTextColor: #868d80; /* gray2 */
|
||||
--subtleBackgroundColor: #404a51; /* surface */
|
||||
--heartedBackgroundColor: #e67e80; /* red */
|
||||
--selectionBackgroundColor: #3a494e; /* dark green */
|
||||
--linkColor: #83c092; /* aqua */
|
||||
--borderColor: #454e58; /* dark yellow */
|
||||
--hrColor: #5c6a72; /* gray3 */
|
||||
--activeColor: #d699b6; /* pink */
|
||||
--langBackgroundColor: #323c41; /* surface1 */
|
||||
--langShadowColor: #00000033;
|
||||
--logoColor: #6E6C7E; /* lavender darker */
|
||||
--photoBackground: #24273A; /* surface0 */
|
||||
--logoColor: #83c092; /* green */
|
||||
--photoBackground: #2f383e; /* surface0 */
|
||||
}
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Departure Mono";
|
||||
src: url('fonts/DepartureMono-Regular.eot');
|
||||
src: url('fonts/DepartureMono-Regular.eot') format('embedded-opentype'),
|
||||
url('fonts/DepartureMono-Regular.woff2') format('woff2'),
|
||||
url('fonts/DepartureMono-Regular.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Berkeley Mono";
|
||||
src: url('fonts/BerkeleyMono-Regular.otf');
|
||||
src: url('fonts/BerkeleyMono-Regular.otf') format('opentype'),
|
||||
url('fonts/BerkeleyMono-Regular.woff') format('woff'),
|
||||
url('fonts/BerkeleyMono-Regular.woff2') format('woff2'),
|
||||
url('fonts/BerkeleyMono-Regular.ttf') format('truetype');
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--backgroundColor);
|
||||
color: var(--textColor);
|
||||
|
@ -52,7 +69,7 @@ body {
|
|||
}
|
||||
|
||||
body, kbd {
|
||||
font-family: system-ui, sans-serif;
|
||||
font-family: "Berkeley Mono", system-ui, sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
|
@ -80,11 +97,12 @@ footer {
|
|||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, .font {
|
||||
font-family: 'Readex Pro', sans-serif;
|
||||
font-family: 'Berkeley Mono', sans-serif;
|
||||
}
|
||||
|
||||
.plain {
|
||||
font-family: system-ui, sans-serif
|
||||
// font-family: system-ui, sans-serif
|
||||
font-family: 'Berkeley Mono', sans-serif;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
|
@ -256,7 +274,8 @@ hr {
|
|||
}
|
||||
|
||||
article {
|
||||
font-family: system-ui, sans-serif;
|
||||
//font-family: system-ui, sans-serif;
|
||||
font-family: 'Berkeley Mono', sans-serif;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue