This commit is contained in:
krahets 2024-01-22 22:58:46 +08:00
parent 7d5ef43f87
commit 93503edace
6 changed files with 62 additions and 28 deletions

Binary file not shown.

View file

@ -277,22 +277,24 @@ body {
} }
a:hover .hero-on-hover { a:hover .hero-on-hover {
filter: brightness(1.2) saturate(1.1); filter: brightness(1.15) saturate(1.1) drop-shadow(0 0 0.5rem rgba(255, 255, 255, 0.2));
transform: scale(1.03); transform: scale(1.03);
} }
a:hover .hero-caption { a:hover .hero-caption {
color: var(--md-typeset-btn-color); color: var(--md-typeset-btn-color);
font-weight: bold;
} }
/* device */ /* device */
.device-on-hover { .device-on-hover {
width: auto; width: auto;
position: absolute; position: absolute;
transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
} }
.device-on-hover:hover { .device-on-hover:hover {
filter: drop-shadow(0 0 0.2rem rgba(0, 0, 0, 0.15));
transform: scale(1.03); transform: scale(1.03);
} }
@ -328,6 +330,10 @@ a:hover .hero-caption {
margin: 0 auto; margin: 0 auto;
} }
.endor-text {
width: 50%;
}
.intro-quote { .intro-quote {
color: var(--md-accent-fg-color); color: var(--md-accent-fg-color);
font-weight: bold; font-weight: bold;
@ -336,27 +342,29 @@ a:hover .hero-caption {
/* contributors table */ /* contributors table */
.profile-div { .profile-div {
display: flex; display: flex;
flex-wrap: wrap; /* 当空间不足时换行 */ flex-wrap: wrap;
justify-content: center; /* 居中对齐子元素 */ justify-content: center;
max-width: 1080px; /* 或其他最大宽度 */ max-width: 720px;
margin: 1em auto; margin: 1em auto;
} }
.profile-cell { .profile-cell {
flex: 1; /* 每个单元格均分空间 */ flex: 1; /* 每个单元格均分空间 */
flex-basis: 15%; flex-basis: 15%;
margin: 1em 0.5em; /* 为了清晰间隔,可以根据需要调整 */ margin: 1em 0.5em;
text-align: center; /* 文本居中 */ text-align: center;
} }
.profile-img { .profile-img {
width: 5em; width: 5em;
border-radius: 50%; border-radius: 50%;
margin-bottom: 0.2em; margin-bottom: 0.5em;
} }
.contrib-image { .giscus-container {
width: 45%; width: 50em;
max-width: 100%;
margin: 0 auto;
} }
/* Hide table of contents */ /* Hide table of contents */
@ -382,6 +390,11 @@ a:hover .hero-caption {
margin: 0 auto; margin: 0 auto;
} }
.endor-text {
width: auto;
margin: 0 auto;
}
.intro-image { .intro-image {
width: 100%; /* 占满屏幕宽度 */ width: 100%; /* 占满屏幕宽度 */
order: 1; order: 1;
@ -392,6 +405,9 @@ a:hover .hero-caption {
width: 100%; width: 100%;
} }
.profile-div {
max-width: 500px;
}
.profile-cell { .profile-cell {
flex-basis: 25%; flex-basis: 25%;
} }

View file

@ -85,7 +85,7 @@
<header class="md-header md-header--shadow" data-md-component="header" data-md-color-scheme="slate" data-md-color-primary="grey" style="background-color: var(--md-default-bg-color); color: var(--md-default-fg-color);" data-md-color-scheme="slate" data-md-color-primary="grey" style="background-color: var(--md-default-bg-color); color: var(--md-default-fg-color);"> <header class="md-header md-header--shadow" data-md-component="header" data-md-color-scheme="slate" data-md-color-primary="grey" style="background-color: var(--md-default-bg-color); color: var(--md-default-fg-color);">
<nav class="md-header__inner md-grid" aria-label="页眉"> <nav class="md-header__inner md-grid" aria-label="页眉">
<a href="." title="Hello 算法" class="md-header__button md-logo" aria-label="Hello 算法" data-md-component="logo"> <a href="." title="Hello 算法" class="md-header__button md-logo" aria-label="Hello 算法" data-md-component="logo">
@ -181,7 +181,7 @@
<input type="text" class="md-search__input" name="query" aria-label="搜索" placeholder="搜索" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required> <input type="text" class="md-search__input" name="query" aria-label="搜索" placeholder="搜索" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search"> <label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="var(--md-default-fg-color)" fill="var(--md-default-fg-color)" d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="var(--md-default-fg-color)" d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
</label> </label>
@ -368,7 +368,7 @@
<section data-md-color-scheme="slate" class="home-div"> <section data-md-color-scheme="slate" class="home-div">
<div class="section-content"> <div class="section-content">
<div style="margin-top: 2em; margin-bottom: 1em;"> <div style="margin-top: 2em; margin-bottom: 1em;">
<img src="index.assets/hello_algo_header.png" style="width: 100%; max-width: 750px;"> <img src="index.assets/hello_algo_header.png" style="width: 100%; max-width: 39em;">
</div> </div>
<div style="margin: 0.5em auto;"> <div style="margin: 0.5em auto;">
<img src="https://img.shields.io/badge/Python-snow?logo=python&logoColor=3776AB"> <img src="https://img.shields.io/badge/Python-snow?logo=python&logoColor=3776AB">
@ -400,7 +400,7 @@
<img class="device-on-hover" src="assets/hero/pdf_ipad.png" style="height: 100%; left: 60%; bottom: 0%;"> <img class="device-on-hover" src="assets/hero/pdf_ipad.png" style="height: 100%; left: 60%; bottom: 0%;">
<img class="device-on-hover" src="assets/hero/web_iphone.png" style="height: 57.27%; left: 2%; bottom: 0%;"> <img class="device-on-hover" src="assets/hero/web_iphone.png" style="height: 57.27%; left: 2%; bottom: 0%;">
</div> </div>
<p style="margin-top: 2em;">提供网页版和 PDF 版,兼容 PC、平板手机,随时随地阅读</p> <p style="margin-top: 2em;">提供网页版和 PDF 版,兼容 PC、平板手机,随时随地阅读</p>
</div> </div>
</section> </section>
@ -409,11 +409,11 @@
<div class="section-content"> <div class="section-content">
<h3 style="text-align: center; margin: 1em auto;">推荐语</h3> <h3 style="text-align: center; margin: 1em auto;">推荐语</h3>
<div class="intro-container" style="margin-bottom: 1em;"> <div class="intro-container" style="margin-bottom: 1em;">
<div class="intro-text"> <div class="intro-text endor-text">
<p style="margin-bottom: 0;">“一本通俗易懂的数据结构与算法入门书,引导读者手脑并用地学习,强烈推荐算法初学者阅读。”</p> <p style="margin-bottom: 0;">“一本通俗易懂的数据结构与算法入门书,引导读者手脑并用地学习,强烈推荐算法初学者阅读。”</p>
<p style="font-weight: bold;">—— 邓俊辉,清华大学计算机系教授</p> <p style="font-weight: bold;">—— 邓俊辉,清华大学计算机系教授</p>
</div> </div>
<div class="intro-text"> <div class="intro-text endor-text">
<p style="margin-bottom: 0;">“如果我当年学数据结构与算法的时候有《Hello 算法》,学起来应该会简单 10 倍!”</p> <p style="margin-bottom: 0;">“如果我当年学数据结构与算法的时候有《Hello 算法》,学起来应该会简单 10 倍!”</p>
<p style="font-weight: bold;">—— 李沐,亚马逊资深首席科学家</p> <p style="font-weight: bold;">—— 李沐,亚马逊资深首席科学家</p>
</div> </div>
@ -572,7 +572,7 @@
<h3>贡献者</h3> <h3>贡献者</h3>
<p>本书在开源社区 130 多位贡献者的共同努力下不断完善,感谢他们付出的时间与精力!</p> <p>本书在开源社区 130 多位贡献者的共同努力下不断完善,感谢他们付出的时间与精力!</p>
<a href="https://github.com/krahets/hello-algo/graphs/contributors"> <a href="https://github.com/krahets/hello-algo/graphs/contributors">
<img src="https://contrib.rocks/image?repo=krahets/hello-algo" style="width: 100%; max-width: 830px;"> <img src="https://contrib.rocks/image?repo=krahets/hello-algo" style="width: 100%; max-width: 38.5em;">
</a> </a>
</div> </div>
</div> </div>
@ -3780,6 +3780,7 @@ aria-label="页脚"
<h5 align="center" id="__comments">欢迎在评论区留下你的见解、问题或建议</h5> <h5 align="center" id="__comments">欢迎在评论区留下你的见解、问题或建议</h5>
<section class="giscus-container">
<!-- Insert generated snippet here --> <!-- Insert generated snippet here -->
<script <script
src="https://giscus.app/client.js" src="https://giscus.app/client.js"
@ -3798,6 +3799,7 @@ aria-label="页脚"
async async
> >
</script> </script>
</section>
<!-- Synchronize Giscus theme with palette --> <!-- Synchronize Giscus theme with palette -->
<script> <script>
var giscus = document.querySelector("script[src*=giscus]") var giscus = document.querySelector("script[src*=giscus]")

File diff suppressed because one or more lines are too long

Binary file not shown.

View file

@ -277,22 +277,24 @@ body {
} }
a:hover .hero-on-hover { a:hover .hero-on-hover {
filter: brightness(1.2) saturate(1.1); filter: brightness(1.15) saturate(1.1) drop-shadow(0 0 0.5rem rgba(255, 255, 255, 0.2));
transform: scale(1.03); transform: scale(1.03);
} }
a:hover .hero-caption { a:hover .hero-caption {
color: var(--md-typeset-btn-color); color: var(--md-typeset-btn-color);
font-weight: bold;
} }
/* device */ /* device */
.device-on-hover { .device-on-hover {
width: auto; width: auto;
position: absolute; position: absolute;
transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
} }
.device-on-hover:hover { .device-on-hover:hover {
filter: drop-shadow(0 0 0.2rem rgba(0, 0, 0, 0.15));
transform: scale(1.03); transform: scale(1.03);
} }
@ -328,6 +330,10 @@ a:hover .hero-caption {
margin: 0 auto; margin: 0 auto;
} }
.endor-text {
width: 50%;
}
.intro-quote { .intro-quote {
color: var(--md-accent-fg-color); color: var(--md-accent-fg-color);
font-weight: bold; font-weight: bold;
@ -336,27 +342,29 @@ a:hover .hero-caption {
/* contributors table */ /* contributors table */
.profile-div { .profile-div {
display: flex; display: flex;
flex-wrap: wrap; /* 当空间不足时换行 */ flex-wrap: wrap;
justify-content: center; /* 居中对齐子元素 */ justify-content: center;
max-width: 1080px; /* 或其他最大宽度 */ max-width: 720px;
margin: 1em auto; margin: 1em auto;
} }
.profile-cell { .profile-cell {
flex: 1; /* 每个单元格均分空间 */ flex: 1; /* 每个单元格均分空间 */
flex-basis: 15%; flex-basis: 15%;
margin: 1em 0.5em; /* 为了清晰间隔,可以根据需要调整 */ margin: 1em 0.5em;
text-align: center; /* 文本居中 */ text-align: center;
} }
.profile-img { .profile-img {
width: 5em; width: 5em;
border-radius: 50%; border-radius: 50%;
margin-bottom: 0.2em; margin-bottom: 0.5em;
} }
.contrib-image { .giscus-container {
width: 45%; width: 50em;
max-width: 100%;
margin: 0 auto;
} }
/* Hide table of contents */ /* Hide table of contents */
@ -382,6 +390,11 @@ a:hover .hero-caption {
margin: 0 auto; margin: 0 auto;
} }
.endor-text {
width: auto;
margin: 0 auto;
}
.intro-image { .intro-image {
width: 100%; /* 占满屏幕宽度 */ width: 100%; /* 占满屏幕宽度 */
order: 1; order: 1;
@ -392,6 +405,9 @@ a:hover .hero-caption {
width: 100%; width: 100%;
} }
.profile-div {
max-width: 500px;
}
.profile-cell { .profile-cell {
flex-basis: 25%; flex-basis: 25%;
} }