Skip to content

Commit ad39092

Browse files
livensmi1elivensmi1e
committed
remove fa and add some music
1 parent 424ad19 commit ad39092

File tree

16 files changed

+130
-107
lines changed

16 files changed

+130
-107
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
Blog website I write in free time.
1+
Blog website I and ChatGPT write in free time :)

‎public/country-roads-john-denver.mp3‎

3.59 MB
Binary file not shown.

‎src/components/Footer.astro‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,17 @@
33
<div class="footer__social">
44
<span>
55
<a href="https://github.com/livensmi1e/space"
6-
><i class="fa-brands fa-github-alt"></i></a
6+
>/github</a
77
>
88
</span>
99
<span>
1010
<a href="https://placetohidee.blogspot.com/">
11-
<i class="fa-brands fa-blogger"></i>
11+
/blogger
1212
</a>
1313
</span>
1414
<span>
1515
<a href="https://www.instagram.com/_qb.livensmi1e/"
16-
><i class="fa-brands fa-instagram"></i></a
16+
>/instagram</a
1717
>
1818
</span>
1919
</div>
@@ -27,20 +27,11 @@
2727
padding: var(--spacing-lg) 0;
2828
}
2929

30-
.footer__text {
31-
font-size: 1.1rem;
32-
}
33-
3430
.footer__social {
3531
display: flex;
3632
align-items: center;
3733
justify-content: space-between;
3834
gap: var(--spacing-md);
39-
font-size: var(--font-xl);
40-
}
41-
42-
.footer__social a i:hover {
43-
color: var(--color-accent);
4435
}
4536
</style>
4637

‎src/components/Header.astro‎

Lines changed: 12 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,15 @@
22
<div class="header__top">
33
<a class="logo" href={import.meta.env.BASE_URL}>livensmi1e</a>
44
<button class="hamburger" type="button">
5-
<i class="fa-solid fa-bars"></i>
6-
<i class="fa-solid fa-xmark"></i>
5+
<span class="burger">/open-menu</span>
6+
<span class="cancel">/cancel</span>
77
</button>
88
</div>
99

1010
<ul class="navbar">
11-
<li><a class="navbar__link" href={`${import.meta.env.BASE_URL}/writings/`}>Writings</a></li>
12-
<li><a class="navbar__link" href={`${import.meta.env.BASE_URL}/photos/`}>Photos</a></li>
13-
<li><a class="navbar__link" href={`${import.meta.env.BASE_URL}/others/`}>Others</a></li>
14-
<li class="navbar__icon theme-toggle">
15-
<i class="fa-solid fa-moon"></i>
16-
<i class="fa-solid fa-sun"></i>
17-
</li>
11+
<li><a class="navbar__link" href={`${import.meta.env.BASE_URL}/writings/`}>/writings</a></li>
12+
<li><a class="navbar__link" href={`${import.meta.env.BASE_URL}/photos/`}>/photos</a></li>
13+
<li><a class="navbar__link" href={`${import.meta.env.BASE_URL}/misc/`}>/misc</a></li>
1814
</ul>
1915
</header>
2016

@@ -63,52 +59,28 @@
6359
color: var(--color-accent);
6460
}
6561

66-
.navbar__icon {
67-
font-size: var(--font-lg);
68-
display: flex;
69-
justify-content: center;
70-
align-items: center;
71-
}
72-
73-
.navbar__icon:hover {
74-
color: var(--color-accent);
75-
}
76-
77-
.navbar__link,
78-
.navbar__icon {
62+
.navbar__link {
7963
padding: 0 var(--spacing-sm);
8064
}
8165

82-
.theme-toggle i {
83-
display: none;
84-
}
85-
86-
[data-theme="dark"] .navbar__icon .fa-sun {
87-
display: inline;
88-
}
89-
90-
[data-theme="light"] .navbar__icon .fa-moon {
91-
display: inline;
92-
}
93-
9466
.hamburger {
95-
font-size: var(--spacing-lg);
67+
font-size: var(--spacing-md);
9668
background: none;
9769
border: none;
9870
cursor: pointer;
9971
display: block;
100-
color: var(--color-text);
72+
font-family: "Railway";
10173
}
10274

103-
.hamburger .fa-xmark {
75+
.hamburger .cancel {
10476
display: none;
10577
}
10678

107-
.hamburger.active .fa-bars {
79+
.hamburger.active .burger {
10880
display: none;
10981
}
11082

111-
.hamburger.active .fa-xmark {
83+
.hamburger.active .cancel {
11284
display: inline;
11385
}
11486

@@ -130,8 +102,7 @@
130102
gap: var(--spacing-xl);
131103
}
132104

133-
.navbar__link,
134-
.navbar__icon {
105+
.navbar__link {
135106
padding: 0;
136107
}
137108

@@ -146,6 +117,5 @@
146117
</style>
147118

148119
<script>
149-
import "../scripts/theme-toggle.js";
150120
import "../scripts/menu-toggle.js";
151121
</script>

‎src/components/Hero.astro‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,23 @@
1414
</p>
1515
<p class="quote__author">&mdash; Truman</p>
1616
</div>
17+
<div class="hero__music">
18+
<button class="music__btn" id="playBtn" aria-label="Play">></button>
19+
<input
20+
type="range"
21+
id="progress"
22+
value="0"
23+
step="0.1"
24+
min="0"
25+
class="music__progress"
26+
/>
27+
<span class="music__time">
28+
<span id="current">0</span>
29+
<span class="music__divider">/</span>
30+
<span id="duration">0</span>
31+
</span>
32+
<audio id="audio" src={`${import.meta.env.BASE_URL}/country-roads-john-denver.mp3`}></audio>
33+
</div>
1734
</section>
1835

1936
<style>
@@ -71,4 +88,53 @@
7188
font-size: var(--font-md);
7289
}
7390
}
91+
92+
.hero__music {
93+
margin-top: var(--spacing-md);
94+
display: flex;
95+
align-items: center;
96+
gap: var(--spacing-sm);
97+
justify-content: center;
98+
width: 100%;
99+
max-width: var(--width-tablet);
100+
margin-inline: auto;
101+
}
102+
103+
.music__btn {
104+
width: 34px;
105+
height: 34px;
106+
background: transparent;
107+
border: 1px solid var(--color-text);
108+
cursor: pointer;
109+
}
110+
111+
.music__progress {
112+
flex: 1;
113+
height: 5px;
114+
appearance: none;
115+
background: var(--color-code);
116+
border-radius: 999px;
117+
cursor: pointer;
118+
}
119+
120+
.music__progress::-webkit-slider-thumb {
121+
appearance: none;
122+
width: 12px;
123+
height: 12px;
124+
background: var(--color-text);
125+
border-radius: 50%;
126+
border: none;
127+
}
128+
129+
.music__progress::-moz-range-thumb {
130+
width: 12px;
131+
height: 12px;
132+
background: var(--color-text);
133+
border-radius: 50%;
134+
border: none;
135+
}
74136
</style>
137+
138+
<script>
139+
import "../scripts/music-player.js";
140+
</script>

‎src/components/Paginator.astro‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ const nextPage =
1717
href={prevPage}
1818
class=`paginator__nav ${currentPage <= 1 ? "paginator__nav--disable" : ""}`
1919
>
20-
<i class="fa-solid fa-arrow-left"></i>
2120
<span>Prev</span>
2221
</a>
2322
<span>{currentPage} / {totalPages}</span>
@@ -26,7 +25,6 @@ const nextPage =
2625
class=`paginator__nav ${currentPage >= totalPages ? "paginator__nav--disable" : ""}`
2726
>
2827
<span>Next</span>
29-
<i class="fa-solid fa-arrow-right"></i>
3028
</a>
3129
</section>
3230

‎src/components/PostPreview.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const { title, date, desc, slug, time } = Astro.props;
1818
{desc}
1919
</p>
2020
<p class="rm__link">
21-
<a href={`${import.meta.env.BASE_URL}/writings/${slug}`}>Read more</a>
21+
<a href={`${import.meta.env.BASE_URL}/writings/${slug}`}>Read?</a>
2222
</p>
2323
</article>
2424

src/content/others.md renamed to src/content/misc.md

File renamed without changes.

‎src/layouts/Base.astro‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,6 @@ import Footer from "../components/Footer.astro";
1414
<link rel="icon" type="image/jpg" href={`${import.meta.env.BASE_URL}/favicon.JPG`} />
1515
<meta name="generator" content={Astro.generator} />
1616
<title>Readme</title>
17-
<link
18-
rel="stylesheet"
19-
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
20-
integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
21-
crossorigin="anonymous"
22-
referrerpolicy="no-referrer"
23-
/>
2417
<link
2518
rel="stylesheet"
2619
href="https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.css"
@@ -48,7 +41,6 @@ import Footer from "../components/Footer.astro";
4841
font-size: 1rem;
4942
line-height: 1.5;
5043
color: var(--color-text);
51-
// letter-spacing: 0.02rem;
5244
background-color: var(--color-background);
5345
}
5446
</style>

‎src/layouts/Post.astro‎

Lines changed: 1 addition & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,6 @@ import BaseLayout from "./Base.astro";
33
import Markdown from "../components/Markdown.astro";
44
import Comment from "../components/Comment.tsx";
55
6-
const notes = {
7-
"info": {
8-
"text": "Info",
9-
"icon": `<i class="fa-solid fa-circle-info"></i>`
10-
},
11-
"warning": {
12-
"text": "Warning",
13-
"icon": `<i class="fa-solid fa-triangle-exclamation"></i>`
14-
},
15-
"important": {
16-
"text": "Important",
17-
"icon": `<i class="fa-regular fa-lightbulb"></i>`
18-
}
19-
}
20-
216
const { meta } = Astro.props;
227
---
238

@@ -63,24 +48,4 @@ const { meta } = Astro.props;
6348
.markdown__desc {
6449
margin-bottom: var(--spacing-lg);
6550
}
66-
</style>
67-
68-
<script define:vars={{notes}}>
69-
const blockquotes = document.querySelectorAll("blockquote p");
70-
blockquotes.forEach(blockquote => {
71-
const content = blockquote.textContent?.trim();
72-
const match = content?.match(/^\[(info|warning|important)\]\s*(.*)/);
73-
if (match){
74-
const type = match[1];
75-
const content = match[2];
76-
const note= notes[type];
77-
const iconSpan = document.createElement("span");
78-
blockquote?.parentElement?.classList?.add(type);
79-
iconSpan.classList.add("quote__icon");
80-
iconSpan.innerHTML = note.icon + " " + note.text;
81-
blockquote.textContent = content;
82-
blockquote.prepend(iconSpan);
83-
84-
}
85-
});
86-
</script>
51+
</style>

0 commit comments

Comments
 (0)