This commit is contained in:
krahets
2024-02-07 21:39:10 +08:00
parent bc5bda35b5
commit 8e99645360
3 changed files with 81 additions and 52 deletions

View File

@@ -155,27 +155,47 @@ hide:
<!-- Section: reading -->
<section data-md-color-scheme="default" data-md-color-primary="white" class="home-div">
<div class="section-content">
<div style="height: min(37vh, 33vw); width: min(75vh, 75vw); position: relative; margin: 0.5em auto;">
<div class="reading-media">
<!-- devices -->
<!-- book height = 250 mm -->
<!-- mac height = 248.1 mm -->
<!-- ipad height = 280.6mm -->
<!-- iphone height = 160.7mm -->
<img class="device-on-hover" src="assets/hero/web_mac.png" style="height: 88.42%; left: 5%; bottom: 5%;">
<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%;">
</div>
<p style="margin: 2em auto;">提供网页版和 PDF 版,兼容 PC、平板和手机随时随地阅读</p>
<div class="text-button-container">
<a href="https://github.com/krahets/hello-algo/releases">
<div class="text-button">
<span>下载 PDF</span>
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z" />
</svg>
<!-- iphone height = 160.7mm -->
<div class="media-block">
<div style="height: 8.17%;"></div>
<img class="device-on-hover" style="height: 66.83%;" src="assets/hero/cover_render.png">
<div class="text-button" style="color: var(--md-accent-fg-color);">
<span>纸质书<br>(即将发布)</span>
</div>
</a>
</div>
<div class="media-block">
<a href="/chapter_preface/">
<div style="height: 4.34%;"></div>
<img class="device-on-hover" style="height: 66.31%;" src="assets/hero/web_mac_iphone.png">
<div style="height: 4.34%;"></div>
<div class="text-button">
<span>在线阅读</span>
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z" />
</svg>
</div>
</a>
</div>
<div class="media-block">
<a href="https://github.com/krahets/hello-algo/releases">
<img class="device-on-hover" style="height: 75%;" src="assets/hero/pdf_ipad.png">
<div class="text-button">
<span>下载 PDF</span>
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z" />
</svg>
</div>
</a>
</div>
</div>
</div>
</section>