Skip to content
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

Jump to bottom

Improved HTML Structure for Better Accessibility and Maintainability #1434

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Improved HTML Structure for Better Accessibility and Maintainability #1434

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
83 changes: 30 additions & 53 deletions en/docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,110 +1,87 @@
<!--Section: hero -->
<!-- Section: hero -->
<section data-md-color-scheme="slate" data-md-color-primary="grey" class="home-div"
style="height: min(100vh, 120vw); position: relative; margin-top:-2.4rem; padding: 0; overflow: hidden;">
<!-- hero image -->
<img src="../assets/hero/universe_bg.png" class="hero-bg" alt="">
style="height: min(100vh, 120vw); position: relative; margin-top: -2.4rem; padding: 0; overflow: hidden;">
<!-- Hero image -->
<img src="../assets/hero/universe_bg.png" class="hero-bg" alt="Universe background">
<div class="hero-div">
<img src="../assets/hero/ground.png" alt=""
style="position: absolute; width: auto; height: 26.445%; left: 28.211%; top: 54.145%;">
<img src="../assets/hero/links.png" alt=""
style="position: absolute; width: auto; height: 78.751%; left: 10.545%; top: 7.326%;">
<img src="../assets/hero/ground.png" alt="Ground" style="position: absolute; width: auto; height: 26.445%; left: 28.211%; top: 54.145%;">
<img src="../assets/hero/links.png" alt="Links" 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%;">
<img src="../assets/hero/astronaut.png" alt="Astronaut" style="height: 46.673%; left: 35.413%; top: 24.343%;">
<span style="left: 52.744%; top: 22.319%;">Encounter with Algorithms</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%;">
<img src="../assets/hero/chapter_computational_complexity.png" alt="Computational Complexity" style="height: 12.347%; left: 36.267%; top: 37.653%;">
<span style="left: 40.244%; top: 33.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%;">
<img src="../assets/hero/chapter_array_and_linkedlist.png" alt="Array and Linked List" style="height: 22.242%; left: 73.242%; top: 52.481%;">
<span style="left: 90.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%;">
<img src="../assets/hero/chapter_stack_and_queue.png" alt="Stack and Queue" style="height: 14.302%; left: 62.646%; top: 77.875%;">
<span style="left: 80.071%; top: 88.25%;">Stack and queue</span>
</a>
<a href="chapter_hashing/">
<img src="../assets/hero/chapter_hashing.png" alt="" style="height: 15.266%; left: 63.281%; top: 27.933%;">
<img src="../assets/hero/chapter_hashing.png" alt="Hashing" style="height: 15.266%; left: 63.281%; top: 27.933%;">
<span style="left: 68.862%; top: 46.292%;">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%;">
<img src="../assets/hero/chapter_tree.png" alt="Tree" style="height: 19.615%; left: 80.137%; top: 26.678%;">
<span style="left: 96.159%; top: 44.8%;">Tree</span>
</a>
<a href="chapter_heap/">
<img src="../assets/hero/chapter_heap.png" alt="" style="height: 10.566%; left: 77.226%; top: 11.559%;">
<img src="../assets/hero/chapter_heap.png" alt="Heap" style="height: 10.566%; left: 77.226%; top: 11.559%;">
<span style="left: 88.103%; top: 15.422%;">Heap</span>
</a>
<a href="chapter_graph/">
<img src="../assets/hero/chapter_graph.png" alt="" style="height: 16.112%; left: 51.854%; top: 5.575%;">
<img src="../assets/hero/chapter_graph.png" alt="Graph" style="height: 16.112%; left: 51.854%; top: 5.575%;">
<span style="left: 71.195%; top: 6.503%;">Graph</span>
</a>
<a href="chapter_searching/">
<img src="../assets/hero/chapter_searching.png" alt="" style="height: 15.149%; left: 18.185%; top: 16.404%;">
<img src="../assets/hero/chapter_searching.png" alt="Searching" style="height: 15.149%; left: 18.185%; top: 16.404%;">
<span style="left: 14.556%; top: 20.876%;">Searching</span>
</a>
<a href="chapter_sorting/">
<img src="../assets/hero/chapter_sorting.png" alt="" style="height: 9.574%; left: 25.409%; top: 40.747%;">
<img src="../assets/hero/chapter_sorting.png" alt="Sorting" style="height: 9.574%; left: 25.409%; top: 40.747%;">
<span style="left: 28.805%; top: 53.808%;">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%;">
<img src="../assets/hero/chapter_divide_and_conquer.png" alt="Divide and Conquer" style="height: 18.681%; left: 32.721%; top: 4.816%;">
<span style="left: 29.42%; top: 6.679%;">Divide and conquer</span>
</a>
<a href="chapter_backtracking/">
<img src="../assets/hero/chapter_backtracking.png" alt="" style="height: 17.338%; left: 4.875%; top: 32.925%;">
<img src="../assets/hero/chapter_backtracking.png" alt="Backtracking" style="height: 17.338%; left: 4.875%; top: 32.925%;">
<span style="left: 4.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%;">
<img src="../assets/hero/chapter_dynamic_programming.png" alt="Dynamic Programming" style="height: 15.47%; left: 9.406%; top: 57.472%;">
<span style="left: 8.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%;">
<img src="../assets/hero/chapter_greedy.png" alt="Greedy" style="height: 14.127%; left: 23.132%; top: 75.803%;">
<span style="left: 21.619%; top: 86.85%;">Greedy</span>
</a>
</div>

<!-- heading -->
<!-- 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=21C8B8&center=true&vCenter=true&random=false&width=200&lines=Hello%2C+Algo+!" alt="Hello, Algo!">
<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
</p>
<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</p>
<a href="chapter_hello_algo/" class="rounded-button">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
d="M160 96a96 96 0 1 1 192 0A96 96 0 1 1 160 96zm80 152V512l-48.4-24.2c-20.9-10.4-43.5-17-66.8-19.3l-96-9.6C12.5 457.2 0 443.5 0 427V224c0-17.7 14.3-32 32-32H62.3c63.6 0 125.6 19.6 177.7 56zm32 264V248c52.1-36.4 114.1-56 177.7-56H480c17.7 0 32 14.3 32 32V427c0 16.4-12.5 30.2-28.8 31.8l-96 9.6c-23.2 2.3-45.9 8.9-66.8 19.3L272 512z" />
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path d="M160 96a96 96 0 1 1 192 0A96 96 0 1 1 160 96zm80 152V512l-48.4-24.2c-20.9-10.4-43.5-17-66.8-19.3l-96-9.6C12.5 457.2 0 443.5 0 427V224c0-17.7 14.3-32 32-32H62.3c63.6 0 125.6 19.6 177.7 56zm32 264V248c52.1-36.4 114.1-56 177.7-56H480c17.7 0 32 14.3 32 32V427c0 16.4-12.5 30.2-28.8 31.8l-96 9.6c-23.2 2.3-45.9 8.9-66.8 19.3L272 512z"/>
</svg>
<span>Dive in</span>
</a>
<a href="https://github.com/krahets/hello-algo" class="rounded-button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
<path
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z">
</path>
<a href="https://github.com/krahets/hello-algo" class="rounded-button" target="_blank" rel="noopener noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.19 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
<span>GitHub</span>
<span>Github</span>
</a>
</div>
<!-- arrow -->
<div style="text-align: center; margin-top: min(2.5vh, 3.5vw);">
<svg xmlns="http://www.w3.org/2000/svg" fill="var(--md-default-fg-color)" height="2vh"
viewBox="0 0 384 512">
<path
d="M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
</svg>
</div>
</div>
</section>

Expand Down Expand Up @@ -371,4 +348,4 @@ <h3>Contributors</h3>
</a>
</div>
</div>
</section>
</section>