tabby/vue-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

improved blog post component

Browse source
This commit is contained in:
Tabby 2025-04-05 19:01:47 +11:00
parent a40d30ea1c
commit dfe3a8c1fa
8 changed files with 272 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

76
assets/css/main.scss
View file

@ -4,7 +4,7 @@
@import url('https://fonts.googleapis.com/css2?family=Baloo+Chettan+2:wght@400..800&display=swap');
:root {
--bg: #2b182b;
--bg: #351d3a;
--fg: white;
--accent: #e17ff5;
@ -13,31 +13,37 @@
--max-width: 70rem;
}
html {
scroll-behavior: smooth;
}
body {
body{
background-color: var(--bg);
color: var(--fg);
display: flex;
flex-direction: column;
// font-family: Comfortaa;
font-family: "Baloo Chettan 2";
height: 100dvh;
overflow-x: hidden;
overflow-y: scroll;
width: 100dvw;
transition-property: background-color, color;
transition-duration: 250ms;
}
@media (prefers-color-scheme: light) {
body {
background-color: var(--fg);
color: var(--bg);
}
}
// html {
// scroll-behavior: smooth;
// }
// body {
// background-color: var(--bg);
// color: var(--fg);
// display: flex;
// flex-direction: column;
// // font-family: Comfortaa;
// font-family: "Baloo Chettan 2";
// height: 100dvh;
// overflow-x: hidden;
// overflow-y: scroll;
// width: 100dvw;
// transition-property: background-color, color;
// transition-duration: 250ms;
// }
// @media (prefers-color-scheme: light) {
// body {
// background-color: var(--fg);
// color: var(--bg);
// }
// }
a {
color: var(--accent);
transition-duration: 200ms;
@ -47,20 +53,20 @@ a {
}
}
::-webkit-scrollbar {
width: 5px;
}
// ::-webkit-scrollbar {
// width: 5px;
// }
::-webkit-scrollbar-track {
background-color: var(--accent-dark);
border-radius: 10px;
}
// ::-webkit-scrollbar-track {
// background-color: var(--accent-dark);
// border-radius: 10px;
// }
::-webkit-scrollbar-thumb {
background: white;
border-radius: 10px;
// ::-webkit-scrollbar-thumb {
// background: white;
// border-radius: 10px;
&:hover {
background: var(--accent);
}
}
// &:hover {
// background: var(--accent);
// }
// }