-
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.
- Loading branch information
1 parent
73e16f7
commit d3ceb8f
Showing
1 changed file
with
138 additions
and
73 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 |
|---|---|---|
| @@ -1,73 +1,138 @@ | ||
| /* Basic styles for better layout */ | ||
| body { | ||
| font-family: 'Roboto', sans-serif; | ||
| margin: 0; | ||
| background-color: #f4f4f4; | ||
| color: #333; | ||
| } | ||
|
|
||
| header { | ||
| background-color: #3f51b5; | ||
| color: white; | ||
| text-align: center; | ||
| padding: 20px; | ||
| } | ||
|
|
||
| header h1 { | ||
| margin: 0; | ||
| font-size: 2.5rem; | ||
| } | ||
|
|
||
| nav { | ||
| background-color: #303f9f; | ||
| text-align: center; | ||
| padding: 10px 0; | ||
| } | ||
|
|
||
| nav ul { | ||
| list-style: none; | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| nav ul li { | ||
| display: inline; | ||
| margin-right: 20px; | ||
| } | ||
|
|
||
| nav ul li a { | ||
| color: white; | ||
| font-weight: 700; | ||
| text-decoration: none; | ||
| padding: 10px; | ||
| } | ||
|
|
||
| nav ul li a:hover { | ||
| background-color: #ff5722; | ||
| color: white; | ||
| border-radius: 5px; | ||
| } | ||
|
|
||
| main { | ||
| max-width: 1000px; | ||
| margin: 40px auto; | ||
| padding: 20px; | ||
| background: white; | ||
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | ||
| border-radius: 8px; | ||
| } | ||
|
|
||
| main img { | ||
| max-width: 100%; | ||
| height: auto; | ||
| border-radius: 8px; | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| footer { | ||
| background-color: #3f51b5; | ||
| color: white; | ||
| text-align: center; | ||
| padding: 20px; | ||
| margin-top: 40px; | ||
| } | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>{{ page.title }} - {{ site.title }}</title> | ||
|
|
||
| <!-- Link to main CSS (ensure it exists in your assets folder) --> | ||
| <link rel="stylesheet" href="{{ '/assets/main.css' | relative_url }}"> | ||
|
|
||
| <!-- Google Fonts for better typography --> | ||
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"> | ||
|
|
||
| <style> | ||
| /* Basic reset */ | ||
| body { | ||
| font-family: 'Roboto', sans-serif; | ||
| margin: 0; | ||
| padding: 0; | ||
| background-color: #f8f9fa; /* Light background for a softer look */ | ||
| color: #333; | ||
| line-height: 1.6; /* Improve readability */ | ||
| } | ||
|
|
||
| header { | ||
| background-color: #007bff; /* Brand color for header */ | ||
| color: white; | ||
| padding: 40px 0; /* More padding for a more spacious feel */ | ||
| text-align: center; | ||
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */ | ||
| } | ||
|
|
||
| header h1 { | ||
| margin: 0; | ||
| font-size: 2.5rem; | ||
| letter-spacing: 1px; /* Slight spacing for elegance */ | ||
| } | ||
|
|
||
| nav { | ||
| background-color: #0056b3; /* Darker shade for the navigation */ | ||
| text-align: center; | ||
| padding: 15px 0; | ||
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */ | ||
| } | ||
|
|
||
| nav ul { | ||
| list-style-type: none; | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| nav ul li { | ||
| display: inline; | ||
| margin-right: 30px; /* Increased spacing for better separation */ | ||
| position: relative; /* For absolute positioning of separator */ | ||
| } | ||
|
|
||
| nav ul li:not(:last-child)::after { | ||
| content: ''; /* Separator line */ | ||
| position: absolute; | ||
| right: -15px; /* Space from the text */ | ||
| top: 50%; /* Center the line vertically */ | ||
| width: 1px; /* Line width */ | ||
| height: 20px; /* Line height */ | ||
| background-color: white; /* Line color */ | ||
| transform: translateY(-50%); /* Center the line */ | ||
| } | ||
|
|
||
| nav ul li a { | ||
| text-decoration: none; | ||
| color: white; | ||
| font-weight: 500; /* Slightly lighter font weight */ | ||
| transition: color 0.3s; /* Smooth transition for hover effect */ | ||
| } | ||
|
|
||
| nav ul li a:hover { | ||
| color: #ffeb3b; /* Yellow highlight on hover */ | ||
| } | ||
|
|
||
| main { | ||
| max-width: 800px; /* Reduce max width for better focus */ | ||
| margin: 20px auto; | ||
| padding: 30px; /* Increase padding for content */ | ||
| background: white; | ||
| border-radius: 8px; /* Rounded corners for a softer look */ | ||
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Deeper shadow for emphasis */ | ||
| } | ||
|
|
||
| main img { | ||
| max-width: 100%; | ||
| height: auto; | ||
| border-radius: 8px; /* Match images with rounded corners */ | ||
| } | ||
|
|
||
| footer { | ||
| background-color: #007bff; /* Match footer with header */ | ||
| color: white; | ||
| text-align: center; | ||
| padding: 15px 0; /* Slightly reduced padding */ | ||
| margin-top: 40px; | ||
| position: relative; | ||
| bottom: 0; /* Stick footer at the bottom if content is short */ | ||
| width: 100%; /* Full width for footer */ | ||
| } | ||
|
|
||
| footer p { | ||
| margin: 0; /* Remove margin from footer text */ | ||
| font-size: 0.9rem; /* Smaller text size for footer */ | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <header> | ||
| <h1>{{ site.title }}</h1> | ||
| </header> | ||
|
|
||
| <nav> | ||
| <ul> | ||
| <li><a href="{{ '/' | relative_url }}">Home</a></li> | ||
| <li><a href="{{ '/projects' | relative_url }}">Projects</a></li> | ||
| <li><a href="{{ '/education' | relative_url }}">Education</a></li> | ||
| <li><a href="{{ '/professional' | relative_url }}">Professional</a></li> | ||
| <li><a href="{{ '/certificates' | relative_url }}">Certificates</a></li> | ||
| </ul> | ||
| </nav> | ||
|
|
||
| <main> | ||
| {{ content }} | ||
| </main> | ||
|
|
||
| <footer> | ||
| <p>© {{ site.time | date: '%Y' }} {{ site.author.name }}</p> | ||
| </footer> | ||
|
|
||
| </body> | ||
| </html> | ||
|
|