Skip to content

Commit c5df9ad

Browse files
XecadesXecades
committed
style: refine color style, migrate to stylus
1 parent 758cdd4 commit c5df9ad

25 files changed

+702
-807
lines changed

‎docs/index.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
title: 笔记
3+
displayTitle: Xecades Notes
34
---
45

56
:v{5rem}

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<link rel="icon" href="/favicon.ico" />
77
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
88
<title>Xecades</title>
9-
<link rel="stylesheet" href="./src/assets/css/global.css">
9+
<link rel="stylesheet" href="./src/assets/css/main.styl">
1010
</head>
1111

1212
<body>

‎package-lock.json‎

Lines changed: 113 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,8 @@
4949
"@vue/tsconfig": "^0.7.0",
5050
"autoprefixer": "^10.4.20",
5151
"npm-run-all2": "^7.0.2",
52+
"stylus": "^0.64.0",
53+
"stylus-loader": "^8.1.1",
5254
"tsx": "^4.19.2",
5355
"typescript": "~5.6.3",
5456
"vite": "^5.4.11",

‎src/App.vue‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<script setup lang="ts">
2-
import { ref, watch } from "vue";
2+
import { ref } from "vue";
33
import { useRoute } from "vue-router";
44
import { get_leftbar_status } from "@/assets/ts/leftbar";
5-
import { get_rightbar_status, ScrollListener } from "@/assets/ts/rightbar";
5+
import { get_rightbar_status } from "@/assets/ts/rightbar";
66
import { assertType, LEFTBAR_STATUS, RIGHTBAR_STATUS } from "@/assets/ts/types";
77
import router from "@/router";
88
@@ -35,9 +35,8 @@ const in_view: Ref<number | null> = ref(null);
3535
</div>
3636
</template>
3737

38-
<style scoped>
39-
#main {
40-
width: 100vw;
41-
display: flex;
42-
}
38+
<style scoped lang="stylus">
39+
#main
40+
width 100vw
41+
display flex
4342
</style>

‎src/assets/css/global.css‎

Lines changed: 0 additions & 94 deletions
This file was deleted.

‎src/assets/css/global.styl‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
// Mixins
2+
$qryDark = "prefers-color-scheme: dark";
3+
$qrySmallscreen = "only screen and (max-width: 748px)";
4+
5+
media-var($query, $name, $var1, $var2)
6+
{$name}: $var1;
7+
@media $query
8+
{$name}: $var2;
9+
10+
dual($name, $normal, $small)
11+
media-var($qrySmallscreen, $name, $normal, $small);
12+
13+
scheme($name, $light, $dark)
14+
media-var($qryDark, $name, $light, $dark);
15+
16+
dualr($name, $normal, $small)
17+
*
18+
dual($name, $normal, $small);
19+
20+
schemer($name, $light, $dark)
21+
*
22+
scheme($name, $light, $dark);
23+
24+
// Fonts
25+
$font-family = "Libertinus Serif", "Georgia", "Noto Serif SC", serif;
26+
$monospace = "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
27+
28+
// Colors
29+
$theme-color = #60a5fa;
30+
$text-color = #181818;
31+
$background-color = #fefefe;

‎src/assets/css/main.styl‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
@import "https://fonts.loli.net/css2?family=Noto+Serif+SC:wght@200..900&display=swap";
2+
@import "https://fonts.cdnfonts.com/css/libertinus-serif";
3+
@import "./global.styl";
4+
5+
// Overlay Scrollbar Theme
6+
.os-theme-dark .os-scrollbar-handle
7+
scheme("--os-handle-bg", alpha(black, 0.44), alpha(white, 0.44));
8+
scheme("--os-handle-bg-hover", alpha(black, 0.55), alpha(white, 0.55));
9+
scheme("--os-handle-bg-active", alpha(black, 0.66), alpha(white, 0.66));
10+
11+
// Global Fonts
12+
body
13+
font-family: $font-family;
14+
color: $text-color;
15+
16+
// Tap / Selection / Outline Effects
17+
*
18+
-webkit-tap-highlight-color: transparent;
19+
20+
*::selection
21+
background-color: lighten($theme-color, 75%);
22+
23+
body
24+
outline: none;
25+
26+
// Background Color
27+
body
28+
background-color: $background-color;
29+
30+
// Scrollbar Flickering Prevention
31+
html
32+
padding-right: calc(100% - 100vw);
33+
overflow-x: hidden;
34+
35+
// Prevent Scrollbar Flickering
36+
#app
37+
width: 100vw;
38+
39+
// Animation
40+
@keyframes shake-x
41+
0%, 100%
42+
transform: translateX(2px);
43+
50%
44+
transform: translateX(0);

src/assets/css/markdown.css renamed to src/assets/css/markdown.styl

File renamed without changes.

0 commit comments

Comments
 (0)