This commit is contained in:
krahets
2025-01-14 19:33:29 +08:00
parent 8d3526ab74
commit c72e8b115a
3 changed files with 22 additions and 18 deletions

View File

@@ -7,15 +7,15 @@
<img src="../assets/hero/links.png" alt="" style="position: absolute; width: auto; height: 78.751%; left: 10.545%; top: 7.326%;">
<a href="chapter_introduction/">
<img src="../assets/hero/astronaut.png" alt="" style="height: 46.673%; left: 35.413%; top: 24.343%;">
<span style="left: 52.744%; top: 22.319%;">Encounter with Algorithms</span>
<span style="left: 52.744%; top: 22.319%;">Encounter with Algos</span>
</a>
<a href="chapter_computational_complexity/">
<img src="../assets/hero/chapter_computational_complexity.png" alt="" style="height: 12.347%; left: 36.267%; top: 37.653%;">
<span style="left: 40.244%; top: 33.919%;">Complexity analysis</span>
<span style="left: 36.244%; top: 34.919%;">Complexity analysis</span>
</a>
<a href="chapter_array_and_linkedlist/">
<img src="../assets/hero/chapter_array_and_linkedlist.png" alt="" style="height: 22.242%; left: 73.242%; top: 52.481%;">
<span style="left: 90.897%; top: 76.259%;">Array and linked list</span>
<span style="left: 85.897%; top: 76.259%;">Array and linked list</span>
</a>
<a href="chapter_stack_and_queue/">
<img src="../assets/hero/chapter_stack_and_queue.png" alt="" style="height: 14.302%; left: 62.646%; top: 77.875%;">
@@ -23,7 +23,7 @@
</a>
<a href="chapter_hashing/">
<img src="../assets/hero/chapter_hashing.png" alt="" style="height: 15.266%; left: 63.281%; top: 27.933%;">
<span style="left: 68.862%; top: 46.292%;">Hash table</span>
<span style="left: 68.862%; top: 45.792%;">Hash table</span>
</a>
<a href="chapter_tree/">
<img src="../assets/hero/chapter_tree.png" alt="" style="height: 19.615%; left: 80.137%; top: 26.678%;">
@@ -43,7 +43,7 @@
</a>
<a href="chapter_sorting/">
<img src="../assets/hero/chapter_sorting.png" alt="" style="height: 9.574%; left: 25.409%; top: 40.747%;">
<span style="left: 28.805%; top: 53.808%;">Sorting</span>
<span style="left: 28.805%; top: 53.308%;">Sorting</span>
</a>
<a href="chapter_divide_and_conquer/">
<img src="../assets/hero/chapter_divide_and_conquer.png" alt="" style="height: 18.681%; left: 32.721%; top: 4.816%;">
@@ -51,11 +51,11 @@
</a>
<a href="chapter_backtracking/">
<img src="../assets/hero/chapter_backtracking.png" alt="" style="height: 17.338%; left: 4.875%; top: 32.925%;">
<span style="left: 4.742%; top: 50.113%;">Backtracking</span>
<span style="left: 8.742%; top: 50.113%;">Backtracking</span>
</a>
<a href="chapter_dynamic_programming/">
<img src="../assets/hero/chapter_dynamic_programming.png" alt="" style="height: 15.47%; left: 9.406%; top: 57.472%;">
<span style="left: 8.561%; top: 75.351%;">Dynamic programming</span>
<span style="left: 14.561%; top: 75.351%;">Dynamic programming</span>
</a>
<a href="chapter_greedy/">
<img src="../assets/hero/chapter_greedy.png" alt="" style="height: 14.127%; left: 23.132%; top: 75.803%;">
@@ -65,7 +65,7 @@
<!-- heading -->
<div class="heading-div">
<img style="height: min(9vh, 12vw);" src="https://readme-typing-svg.demolab.com?font=Noto+Sans+SC&weight=400&duration=3500&pause=2000&color=21C8B8&center=true&vCenter=true&random=false&width=200&lines=Hello%2C+Algo+!" alt="" />
<img style="height: min(9vh, 12vw);" src="https://readme-typing-svg.demolab.com/?font=Noto+Sans+SC&weight=400&duration=3500&pause=2000&color=FFF&center=true&vCenter=true&random=false&width=200&lines=Hello%2C+Algo+!" alt="" />
<div style="pointer-events: auto;">
<p style="margin-top: max(-1vh, -2vw); margin-bottom: min(2vh, 3.5vw);">
Data structures and algorithms crash course with animated illustrations and off-the-shelf code
@@ -113,7 +113,7 @@
<img src="https://img.shields.io/badge/Dart-snow?logo=dart&logoColor=0175C2" alt="" />
<img src="https://img.shields.io/badge/Zig-snow?logo=zig&logoColor=F7A41D" alt="" />
</div>
<p style="margin-top: 2em;">500 animated illustrations, 14 programming languages, and 3000 community Q&As to help you quickly get started with data structures and algorithms</p>
<p style="margin-top: 2em;">500 animated illustrations, 14 programming languages, and 3000 community Q&As to help you dive into data structures and algorithms.</p>
</div>
</section>
@@ -144,7 +144,7 @@
<img class="device-on-hover" style="height: 66.31%;" src="../assets/hero/web_mac_iphone.png" alt="">
<div style="height: 4.34%;"></div>
<div class="text-button">
<span>Read online</span>
<span>Web</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<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>
@@ -155,7 +155,7 @@
<a href="https://github.com/krahets/hello-algo/releases">
<img class="device-on-hover" style="height: 75%;" src="../assets/hero/pdf_ipad.png" alt="">
<div class="text-button">
<span>Download PDF</span>
<span>PDF</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<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>
@@ -195,7 +195,7 @@
</svg>
<h3 style="margin-left: 0.5em;">Animated illustrations</h3>
</div>
<p style="margin: 0;">It's crafted for ease of understanding, ensuring a smooth learning journey.</p>
<p style="margin: 0;">Its crafted for a smooth learning experience.</p>
<p class="intro-quote">"A picture is worth a thousand words."</p>
</div>
</div>
@@ -212,7 +212,7 @@
</svg>
<h3 style="margin-left: 0.5em;">Off-the-shelf code</h3>
</div>
<p style="margin: 0;">Featuring multiple programming languages, all runnable with a single click.</p>
<p style="margin: 0;">One click to run code in multiple languages.</p>
<p class="intro-quote">"Talk is cheap. Show me the code."</p>
</div>
</div>
@@ -227,7 +227,7 @@
</svg>
<h3 style="margin-left: 0.5em;">Learning together</h3>
</div>
<p style="margin: 0;">Welcome discussions and questions with open arms.</p>
<p style="margin: 0;">Dont hesitate to ask or share your thoughts.</p>
<p class="intro-quote">"Learning by teaching."</p>
</div>
</div>

View File

@@ -305,7 +305,7 @@ body {
a:hover .device-on-hover {
filter: drop-shadow(0 0 0.2rem rgba(0, 0, 0, 0.15));
transform: scale(1.02);
transform: scale(1.01);
}
/* text button */
@@ -424,7 +424,7 @@ a:hover .text-button span {
.intro-image {
flex-shrink: 0;
flex-grow: 0;
width: 55%;
width: 50%;
border-radius: 0.5em;
box-shadow: var(--md-shadow-z2);
}
@@ -498,12 +498,16 @@ a:hover .text-button span {
}
}
/* Hide table of contents */
/* mobile devices */
@media screen and (max-width: 60em) {
.home-div {
font-size: 0.75rem;
}
.heading-div {
transform: translateX(-50%) translateY(13%);
}
.intro-container {
flex-direction: column;
}

View File

@@ -131,7 +131,7 @@
<div style="height: 8.17%;"></div>
<img class="device-on-hover" style="height: 66.83%;" src="../assets/hero/cover_render.png" alt="Cover">
<div class="text-button">
<span>紙質書(簡中)</span>
<span>紙質書</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<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>