-
Notifications
You must be signed in to change notification settings - Fork 274
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1492 from shraddhha/main
Added an arrow to redirect to home in each resource page.
- Loading branch information
Showing
1 changed file
with
42 additions
and
36 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,12 +2,15 @@ | |
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <link rel="stylesheet" href="cursorAnimation.css"> | ||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]" defer></script> | ||
| <link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet"> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>README Renderer</title> | ||
|
|
||
| <link rel="stylesheet" | ||
| href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/4.0.0/github-markdown.min.css"> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/4.0.0/github-markdown.min.css"> | ||
| <style> | ||
| .markdown-body { | ||
| box-sizing: border-box; | ||
|
|
@@ -16,30 +19,30 @@ | |
| margin: 0 auto; | ||
| padding: 45px; | ||
| } | ||
|
|
||
| nav { | ||
| background-color: white !important; | ||
| color: black !important; | ||
| } | ||
|
|
||
| .dark-mode nav { | ||
| background-color: black !important; | ||
| color: white !important; | ||
| } | ||
|
|
||
| /* Container for aligning items to the right */ | ||
|
|
||
| .right-corner { | ||
| display: flex; | ||
| align-items: center; | ||
| margin-left: auto; | ||
| /* Pushes the content to the right */ | ||
| } | ||
|
|
||
| /* Dark mode toggle switch styles */ | ||
|
|
||
| .slider { | ||
| display: none; | ||
| } | ||
|
|
||
| .slider-label { | ||
| display: flex; | ||
| align-items: center; | ||
|
|
@@ -53,7 +56,7 @@ | |
| position: relative; | ||
| transition: background-color 0.5s; | ||
| } | ||
|
|
||
| .slider-circle { | ||
| width: 10px; | ||
| height: 10px; | ||
|
|
@@ -64,18 +67,18 @@ | |
| top: 1px; | ||
| left: 2px; | ||
| } | ||
|
|
||
| .slider:checked+.slider-label .slider-circle { | ||
| transform: translateX(1.3rem); | ||
| background: #000000; | ||
| /* Sun color */ | ||
| } | ||
|
|
||
| .slider:checked+.slider-label { | ||
| background: #515151; | ||
| /* Dark mode background */ | ||
| } | ||
|
|
||
| .slider-circle::before { | ||
| position: absolute; | ||
| top: 50%; | ||
|
|
@@ -85,20 +88,19 @@ | |
| font-size: 16px; | ||
| /* Adjust the font size for the icons */ | ||
| } | ||
|
|
||
| .slider:checked+.slider-label .slider-circle::before { | ||
| content: '🌙'; | ||
| /* Moon icon */ | ||
| transform: translate(-50%, -50%); | ||
| } | ||
|
|
||
| .slider+.slider-label .slider-circle::before { | ||
| content: '☀️'; | ||
| /* Sun icon */ | ||
| transform: translate(-50%, -50%); | ||
| } | ||
|
|
||
|
|
||
|
|
||
| #progressBar { | ||
| position: fixed; | ||
| top: 0; | ||
|
|
@@ -108,23 +110,22 @@ | |
| background-color: #288cff; | ||
| z-index: 99; | ||
| border-radius: 20px; | ||
|
|
||
| } | ||
|
|
||
| /* Back-to-top */ | ||
|
|
||
| footer { | ||
| position: relative; | ||
| padding: 50px 0; | ||
| } | ||
|
|
||
| #back-to-top-container { | ||
| position: fixed; | ||
| bottom: 30px; | ||
| right: 30px; | ||
| cursor: pointer; | ||
| z-index: 1000; | ||
| } | ||
|
|
||
| .circle1 { | ||
| background-color: #fff; | ||
| border-radius: 50%; | ||
|
|
@@ -133,34 +134,41 @@ | |
| align-items: center; | ||
| transition: background-color 0.3s; | ||
| } | ||
|
|
||
| #back-to-top { | ||
| width: 40px; | ||
| height: 40px; | ||
| fill: currentColor; | ||
| transition: fill 0.3s; | ||
| } | ||
|
|
||
| #back-to-top:hover { | ||
| fill: rgb(83, 79, 79); | ||
| transform: scale(1.06); | ||
| transition: all .2s ease-in-out; | ||
| } | ||
|
|
||
|
|
||
| .home-link { | ||
| position: absolute; | ||
| top: 25px; | ||
| left: 35px; | ||
| font-size: 30px; | ||
| color: #111210; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .dark-mode .circle1 { | ||
| background-color: #000000; | ||
| } | ||
|
|
||
| .dark-mode #back-to-top:hover { | ||
| fill: rgb(173, 168, 168); | ||
| transform: scale(1.06); | ||
| transition: all .2s ease-in-out; | ||
| } | ||
|
|
||
| /* .dark-mode svg path{ | ||
| fill: rgb(255, 255, 255); | ||
| } */ | ||
|
|
||
| /* .dark-mode svg path:hover { | ||
| fill: rgb(139, 71, 236); | ||
| } */ | ||
|
|
@@ -175,7 +183,7 @@ | |
| <!-- Progress Bar --> | ||
| <div id="progressBar"></div> | ||
| <script> | ||
| window.onscroll = function () { | ||
| window.onscroll = function() { | ||
| var winScroll = document.body.scrollTop || document.documentElement.scrollTop; | ||
| var height = document.documentElement.scrollHeight - document.documentElement.clientHeight; | ||
| var scrolled = (winScroll / height) * 100; | ||
|
|
@@ -185,15 +193,14 @@ | |
|
|
||
| <div id="back-to-top-container"> | ||
| <div class="circle1"> | ||
| <svg id="back-to-top" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" | ||
| class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16"> | ||
| <svg id="back-to-top" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16"> | ||
| <path | ||
| d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z" /> | ||
| </svg> | ||
| </div> | ||
|
|
||
| <script> | ||
| document.addEventListener("DOMContentLoaded", function () { | ||
| document.addEventListener("DOMContentLoaded", function() { | ||
| const backToTopButton = document.getElementById('back-to-top-container'); | ||
|
|
||
| function checkButtonVisibility() { | ||
|
|
@@ -207,21 +214,22 @@ | |
| window.addEventListener('scroll', checkButtonVisibility); | ||
| window.addEventListener('resize', checkButtonVisibility); | ||
|
|
||
| backToTopButton.addEventListener('click', function () { | ||
| backToTopButton.addEventListener('click', function() { | ||
| window.scrollTo({ | ||
| top: 0, | ||
| behavior: 'smooth' | ||
| }); | ||
| }); | ||
| checkButtonVisibility(); | ||
| }); | ||
|
|
||
| </script> | ||
| </div> | ||
| </div> | ||
|
|
||
| <nav | ||
| class="content-display-nav dark-mode sticky top-0 z-50 py-3 backdrop-blur-lg border-b border-neutral-700/80 text-black"> | ||
| <nav class="content-display-nav dark-mode sticky top-0 z-50 py-3 backdrop-blur-lg border-b border-neutral-700/80 text-black"> | ||
| <div class="col-md-10"> | ||
| <a href="index.html" class="home-link"><i class="fas fa-arrow-left"> </i></a> | ||
| </div> | ||
| <div class="container px-4 py-0 border-none mx-auto relative lg:text-sm"> | ||
| <div class="flex justify-between mt-4 items-center"> | ||
| <div class="flex items-center flex-shrink-0"> | ||
|
|
@@ -233,8 +241,7 @@ | |
| <div class="flex items-center ml-auto"> | ||
| <!-- Dark mode toggle icon --> | ||
| <input type="checkbox" id="slider" class="slider hidden" onclick="toggleDarkMode()"> | ||
| <label for="slider" | ||
| class="slider-label bg-gray-300 dark:bg-gray-700 w-16 h-8 flex items-center rounded-full p-1 cursor-pointer transition duration-500"> | ||
| <label for="slider" class="slider-label bg-gray-300 dark:bg-gray-700 w-16 h-8 flex items-center rounded-full p-1 cursor-pointer transition duration-500"> | ||
| <div | ||
| class="slider-circle bg-white w-6 h-6 rounded-full shadow-md transform transition duration-500"> | ||
| </div> | ||
|
|
@@ -290,7 +297,6 @@ <h1 id="project-title">project title</h1> | |
| document.getElementById('readme-content').innerHTML = marked.parse(readmeContent); | ||
|
|
||
| // Toggle navbar script | ||
|
|
||
| </script> | ||
| </body> | ||
|
|
||
|
|
||