neon443/neon443.github.io
1
0
Fork 0
mirror of https://github.com/neon443/neon443.github.io.git synced 2026-03-11 07:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

fixed

Browse Source 
fixed padding issues
tweaked colors for higher contrast
changed favicon.ico > main-fav.ico
addted "Tips"
added lerem ipsum waffle to test navbar
added nav bar
      "neon443"
      nav bar is also transparent
      text can be seen through it
      content is not pushed below navbar
This commit is contained in:
Nihaal Sharma
2023-05-20 19:25:50 +01:00
parent 5a9a1131c6
commit 9762f93b2b
3 changed files with 28 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
images/favicon.ico → images/main-fav.ico
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 318 B

After

Width:  |  Height:  |  Size: 318 B

10
index.html
View File

@@ -1,7 +1,7 @@
<html> <html>
<head> <head>
<title>neon443</title> <title>neon443</title>
<link rel="icon" type="image/x-icon" href="./images/favicon.ico"> <link rel="icon" type="image/x-icon" href="./images/main-fav.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css" type="text/css"> <link rel="stylesheet" href="./style.css" type="text/css">
</head> </head>
@@ -15,8 +15,14 @@
├─<a href="https://neon443.github.io/neon443.github.io/">neon443.github.io</a><br> ├─<a href="https://neon443.github.io/neon443.github.io/">neon443.github.io</a><br>
└─<a href="https://neon443.github.io/webpage-testing/">webpage-testing</a><br> └─<a href="https://neon443.github.io/webpage-testing/">webpage-testing</a><br>
├─ ├─
<br><h3>Tips:</h3><br>My site Dark Mode friendly - no more dark mode extensions needed!<br> </p><br>
<h3><b>Tips:</b></h3>
<p>
This site Dark Mode friendly - no more dark mode extensions needed!<br>
Try viewing this site on a mobile phone or resize the browser window - The page automagically fits the device's screen nicely Try viewing this site on a mobile phone or resize the browser window - The page automagically fits the device's screen nicely
</p> </p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body> </body>
</html> </html>

26
style.css
View File

@@ -7,28 +7,42 @@ b{
} }
body{ body{
background-color: #f2f2f2; background-color: #f2f2f2;
color: #333333; color: #262626;
font-family: system-ui; font-family: system-ui;
height: 100%; height: 100%;
} }
p{ p{
font-size: 20px; font-size: 20px;
padding: 20px; padding-top: 5px;
padding-bottom: 5px;
padding-left: 20px;
padding-right: 20px;
} }
h1{ h1{
font-size: 45px; font-size: 45px;
font-weight: 750; font-weight: 750;
padding: 20px; padding: 0px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 20px;
padding-right: 20px;
position: fixed;
} }
h2{ h2{
font-size: 35px; font-size: 35px;
font-weight: 300; font-weight: 300;
padding: 20px; padding-top: 5px;
padding-bottom: 5px;
padding-left: 20px;
padding-right: 20px;
} }
h3{ h3{
font-size: 25px; font-size: 25px;
font-weight: 200; font-weight: 200;
padding: 20px; padding-top: 5px;
padding-bottom: 5px;
padding-left: 20px;
padding-right: 20px;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body { body {
@@ -39,7 +53,7 @@ h3{
background-color: #191919; background-color: #191919;
} }
p{ p{
color: #AAAAAA; color: #e6e6e6;
} }
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {