Skip to content

Better-than-not fixes. #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
LingLambda merged 6 commits into from
Apr 11, 2025
Merged

Better-than-not fixes. #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6537758
fix: refactor navbar display logic
Keritial Apr 10, 2025
b823462
fix: let footer line break when appropriate
Keritial Apr 10, 2025
a595756
fix: let friends line break
Keritial Apr 10, 2025
595e226
fix: refactor navbar highlighting logic
Keritial Apr 10, 2025
ef3c4a7
fix: let navbar scrollable
Keritial Apr 10, 2025
81462f9
build: introduce normalize.css
Keritial Apr 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions src/components/HeadMenu.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,8 @@

<script is:inline>
const updateSelected = () => {
let rawPathname = window.location.pathname;
const regex = /^\/([^\/]+)(?:\/|$)/;
let pathname = rawPathname.match(regex)?.[1]; //获取第一个捕获组
pathname = !pathname ? "index" : pathname;
let pathname = location.pathname.split("/")[1];
pathname ||= "index";
const e = document.getElementById(pathname);
if (!e) {
return;
Expand All @@ -37,6 +35,9 @@
justify-content: space-around;
height: 3.5rem;
width: 38rem;
max-width: 100dvw;
overflow-x: auto;
overflow-y: hidden;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(4px);
border: 1px solid rgba(0, 0, 0, 0.2); /* 添加黑色的边框，宽度为 2px */
Expand All @@ -53,6 +54,7 @@
transition:
background-color 0.2s ease-in-out,
color 0.2s ease-in-out;
flex-shrink: 0;
}

.menu > a:hover {
Expand Down
38 changes: 23 additions & 15 deletions src/layouts/BaseLayout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ const { description, keywords ,selected} = Astro.props;
<meta name="description" content={description} />
<meta name="keywords" content={keywords} />
<meta name="author" content="LingLambda" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Ling的小窝</title>
</head>
<body>
Expand Down Expand Up @@ -45,27 +46,28 @@ const { description, keywords ,selected} = Astro.props;
</html>

<script>
let lastScrollTop = 0;
window.addEventListener("scroll", () => {
const menu = document.getElementById("menu");
if (!menu || !(menu instanceof HTMLElement)) {
return;
}
const scrollTop = window.scrollY;
menu.style.top = scrollTop > lastScrollTop ? "-5.5rem" : "0.2rem";
lastScrollTop = scrollTop;
});
const menu = document.getElementById("menu");
if (menu instanceof HTMLElement) {
let lastScrollTop = 0;
addEventListener("scroll", () => {
const scrollTop = window.scrollY;
menu.style.top = scrollTop > lastScrollTop ? "-5.5rem" : "0.2rem";
lastScrollTop = scrollTop;
}, { passive: true });
}
</script>

<style>
* {
box-sizing: border-box; /* 确保所有元素的宽高包含 padding 和 border */
}

html {
background-color: rgb(250, 252, 254);
/* scrollbar-gutter: stable; */ /* 防止滚动条导致页面宽度不一致 */
overflow-y: scroll; /*总是显示滚动条*/
}

html,
body {
margin: 0;
Expand All @@ -76,13 +78,14 @@ const { description, keywords ,selected} = Astro.props;

#menu {
top: 0.2rem;
position: fixed;
position: sticky;
transition: top 0.2s ease-in-out;
padding: 2rem
margin: 2rem;
}

#container {
height: 100%;
height: fit-content;
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
Expand All @@ -101,20 +104,20 @@ const { description, keywords ,selected} = Astro.props;

main {
flex-grow: 1; /* 使 main 占据剩余空间 */
margin-top: 8rem;
}

footer {
margin-top: 2.1rem;
border-top: 1px solid rgb(227, 232, 247); 顶部边框线
height: auto; /* 让 footer 根据内容自适应高度 */
width: 100%;
background-color: rgb(247, 247, 249);;
background-color: rgb(247, 247, 249);
color: #808080;
display: flex;
flex-direction: row;
justify-content: center;
padding: 1rem;
flex-wrap: wrap;
}

footer > * {
Expand All @@ -124,7 +127,12 @@ const { description, keywords ,selected} = Astro.props;
h1 {
font-size: 2rem;
}

img {
max-width: 36rem;
}

section {
padding: 8%;
}
</style>
6 changes: 4 additions & 2 deletions src/layouts/FriendsLayout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@ import BaseLayout from "./BaseLayout.astro";

<style>
#cards {
display: grid;
grid: auto-flow auto / repeat(2, auto);
/* display: grid;
grid: auto-flow auto / repeat(2, auto); */
display: flex;
flex-wrap: wrap;
}
</style>