-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactor: Separate common components and styles into base templates a…
…nd shared static files - Extracted navbar, footer, and support icon into partial templates for reuse across pages. - Created `base.html` to serve as the foundation for all pages. - Moved common styles (e.g., navbar, footer, buttons, fonts, theme toggles) into `shared.css`.
- Loading branch information
1 parent
79b8cb0
commit 2400bab
Showing
9 changed files
with
290 additions
and
298 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,133 @@ | ||
| /* Light Theme */ | ||
| .light-theme { | ||
| --bg-color: #F7FBFC; | ||
| --text-color: #1B262C; | ||
| --primary-color: #769FCD; | ||
| --secondary-color: #D6E6F2; | ||
| --link-color: #1B262C; /* Default link color for light theme */ | ||
| --dropdown-bg: #ffffff; /* Light theme dropdown background */ | ||
| --dropdown-text-color: #1B262C; /* Light theme dropdown text color */ | ||
| } | ||
|
|
||
| /* Dark Theme */ | ||
| .dark-theme { | ||
| --bg-color: #1B262C; | ||
| --text-color: #F7FBFC; | ||
| --primary-color: #3282B8; | ||
| --secondary-color: #0F4C75; | ||
| --link-color: #F7FBFC; /* Ensure link color is visible in dark mode */ | ||
| --dropdown-bg: #2C3E50; /* Dark theme dropdown background */ | ||
| --dropdown-text-color: #F7FBFC; /* Dark theme dropdown text color */ | ||
| } | ||
|
|
||
| body { | ||
| background-color: var(--bg-color); | ||
| color: var(--text-color); | ||
| font-family: 'Open Sans', sans-serif; | ||
| } | ||
|
|
||
| h1, h2, h3, h4, h5, h6 { | ||
| font-family: 'Montserrat', sans-serif; | ||
| } | ||
|
|
||
| /* Navbar */ | ||
| .navbar { | ||
| background-color: var(--secondary-color); | ||
| padding: 0.5rem 1rem; | ||
| } | ||
|
|
||
| .navbar .nav-link, | ||
| .navbar .dropdown-toggle { | ||
| color: var(--link-color); | ||
| } | ||
|
|
||
| .navbar .nav-link:hover, | ||
| .navbar .dropdown-toggle:hover { | ||
| color: var(--primary-color); | ||
| } | ||
|
|
||
| .navbar .navbar-nav { | ||
| align-items: center; | ||
| } | ||
|
|
||
| /* Fix Spacing between Buttons */ | ||
| .navbar .btn { | ||
| margin-left: 0.5rem; | ||
| } | ||
|
|
||
| /* Dropdown Menu Styles */ | ||
| .navbar .dropdown-menu { | ||
| background-color: var(--dropdown-bg); | ||
| color: var(--dropdown-text-color); | ||
| } | ||
|
|
||
| .navbar .dropdown-item { | ||
| color: var(--dropdown-text-color); | ||
| } | ||
|
|
||
| .navbar .dropdown-item:hover { | ||
| background-color: var(--primary-color); | ||
| color: var(--text-color); | ||
| } | ||
|
|
||
| .btn-primary { | ||
| background-color: var(--primary-color); | ||
| border: none; | ||
| } | ||
|
|
||
| .btn-secondary { | ||
| background-color: var(--secondary-color); | ||
| border: none; | ||
| } | ||
|
|
||
| /* Style for the profile picture icon */ | ||
| .profile-picture { | ||
| width: 40px; | ||
| height: 40px; | ||
| border-radius: 50%; | ||
| object-fit: cover; | ||
| transition: transform 0.3s ease; | ||
| } | ||
|
|
||
| /* Hover effect for the profile picture */ | ||
| .profile-icon:hover .profile-picture { | ||
| transform: scale(1.1); /* Slightly enlarges the profile picture on hover */ | ||
| } | ||
|
|
||
| /* Footer */ | ||
| .footer { | ||
| background-color: var(--text-color); | ||
| color: var(--bg-color); | ||
| } | ||
|
|
||
| .footer a { | ||
| color: var(--bg-color); | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .footer a:hover { | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
| /* Custom Dropdown Submenu Behavior */ | ||
| .dropdown-submenu:hover > .dropdown-menu { | ||
| display: block; | ||
| } | ||
|
|
||
| .dropdown-submenu .dropdown-menu { | ||
| margin-top: -1px; /* Align submenus properly */ | ||
| left: 100%; | ||
| margin-left: 0; | ||
| } | ||
|
|
||
| /* Support Icon Animation */ | ||
| #supportIcon button { | ||
| background-color: var(--primary-color); | ||
| color: var(--text-color); | ||
| animation: float 3s infinite; | ||
| } | ||
|
|
||
| @keyframes float { | ||
| 0%, 100% { transform: translateY(0); } | ||
| 50% { transform: translateY(-10px); } | ||
| } |
File renamed without changes
1 change: 1 addition & 0 deletions
1
Django-Shop/static/home/js/script.js → Django-Shop/static/shared/js/script.js
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,39 @@ | ||
| {% load static %} | ||
|
|
||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>{% block title %}Django Shop{% endblock %}</title> | ||
| <meta name="description" content="{% block description %}Django Shop{% endblock %}"> | ||
| {% block extra_meta %}{% endblock %} | ||
| <link rel="icon" href="{% static 'shared/images/icon.png' %}" type="image/png"> | ||
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet"> | ||
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> | ||
| <link rel="stylesheet" href="{% static 'shared/css/styles.css' %}"> | ||
| <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet"> | ||
| {% block extra_styles %}{% endblock %} | ||
| </head> | ||
|
|
||
| <body class="light-theme"> | ||
| <header> | ||
| {% include 'partials/navbar.html' %} | ||
| </header> | ||
|
|
||
| <main class="container my-5"> | ||
| {% block content %}{% endblock %} | ||
| </main> | ||
|
|
||
| <footer> | ||
| {% include 'partials/footer.html' %} | ||
| </footer> | ||
|
|
||
| <!-- Support Icon --> | ||
| {% include 'partials/support.html' %} | ||
|
|
||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> | ||
| <script src="{% static 'shared/js/script.js' %}"></script> | ||
| {% block extra_js %}{% endblock %} | ||
| </body> | ||
| </html> |
Oops, something went wrong.
2400babThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Reminder for future self: This was satisfying.