-
Notifications
You must be signed in to change notification settings - Fork 269
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add dark theme to the entire website (#903)
<!-- ISSUE & PR TITLE SHOULD BE SAME--> ## Description the project earlier was having a dark theme that was applied to just the navbar of only the index.html, i added it to each and every part of every html page in the project ## Related Issues #574 #595 #746 #759 #814 #815 #816 ## Type of PR <!-- Mention PR Type according to the issue in brackets below and check the below box --> * [x] feature: Adding a dark theme to the entire project ## Screenshots / videos (if applicable)       <!--Attach any relevant screenshots or videos demonstrating the changes--> ## Checklist <!-- [X] - put a cross/X inside [] to check the box --> - [X] I have gone through the [contributing guide](https://github.com/Anjaliavv51/Retro) - [X] I have updated my branch and synced it with project `main` branch before making this PR - [X] I have performed a self-review of my code - [X] I have tested the changes thoroughly before submitting this pull request. - [X] I have provided relevant issue numbers, screenshots, and videos after making the changes. - [x] I have commented my code, particularly in hard-to-understand areas. ## Additional context: <!--Include any additional information or context that might be helpful for reviewers.-->
- Loading branch information
Showing
27 changed files
with
706 additions
and
268 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
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 |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| body, | ||
| html { | ||
| height: 100%; | ||
| font-family: 'Arial', sans-serif; | ||
| } | ||
|
|
||
| .container { | ||
| background-image: url('../images/RETRO.png'); | ||
| background-size: cover; | ||
| background-position: center; | ||
| height: 100%; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| text-align: center; | ||
| position: relative; | ||
| /* Ensure container can position children absolutely */ | ||
| } | ||
|
|
||
| .explore-btn { | ||
| margin-left: 35%; | ||
| margin-top: 20px; | ||
| padding: 15px 30px; | ||
| font-size: 1.6rem; | ||
| color: rgb(115, 45, 45); | ||
| background-color: #ff6347; | ||
| border: none; | ||
| border-radius: 15px; | ||
| cursor: pointer; | ||
| transition: all 0.3s ease-in-out; | ||
| animation: pulse 1.5s infinite; | ||
| font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; | ||
| } | ||
|
|
||
| .explore-btn:hover { | ||
| background-color: #ff4500; | ||
| transform: scale(1.1); | ||
| } | ||
|
|
||
| @keyframes pulse { | ||
| 0% { | ||
| transform: scale(1); | ||
| } | ||
|
|
||
| 50% { | ||
| transform: scale(1.05); | ||
| } | ||
|
|
||
| 100% { | ||
| transform: scale(1); | ||
| } | ||
| } | ||
|
|
||
| /* SVG Styles */ | ||
| svg { | ||
| margin-left: 35%; | ||
| font-family: Algerian; | ||
| width: 100%; | ||
| height: auto; | ||
| /* Maintain aspect ratio */ | ||
| max-width: 600px; | ||
| /* Limit size */ | ||
| } | ||
|
|
||
| svg text { | ||
| animation: stroke 5s infinite alternate; | ||
| stroke-width: 2; | ||
| stroke: #582f0e; | ||
| font-size: 100px; | ||
| } | ||
|
|
||
| @keyframes stroke { | ||
| 0% { | ||
| fill: rgba(72, 138, 204, 0); | ||
| stroke: #582f0e; | ||
| stroke-dashoffset: 25%; | ||
| stroke-dasharray: 0 50%; | ||
| stroke-width: 2; | ||
| } | ||
|
|
||
| 70% { | ||
| fill: rgba(72, 138, 204, 0); | ||
| stroke: rgb(253, 137, 137); | ||
| } | ||
|
|
||
| 80% { | ||
| fill: rgba(72, 138, 204, 0); | ||
| stroke: #582f0e; | ||
| stroke-width: 3; | ||
| } | ||
|
|
||
| 100% { | ||
| fill: #582f0e; | ||
| stroke: rgb(0, 0, 0); | ||
| stroke-dashoffset: -25%; | ||
| stroke-dasharray: 50% 0; | ||
| stroke-width: 0; | ||
| } | ||
| } | ||
|
|
||
| @media screen and (max-width: 1095.54px) { | ||
| svg text { | ||
| font-size: 100px; | ||
| /* Adjust font size for smaller screens */ | ||
|
|
||
| } | ||
| } | ||
|
|
||
| .small-text { | ||
| font-size: 1.5rem; | ||
| /* Smaller font size for "Welcome to" */ | ||
| color: rgb(136, 9, 9); | ||
| text-transform: uppercase; | ||
| text-decoration-thickness: 50px; | ||
| font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; | ||
| display: block; | ||
| margin-top: 70px; | ||
| margin-left: 35%; | ||
| } |
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
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
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
Oops, something went wrong.