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:
2023-05-20 19:25:50 +01:00
parent 5a9a1131c6
commit 9762f93b2b
3 changed files with 28 additions and 8 deletions

View File

Before

Width:  |  Height:  |  Size: 318 B

After

Width:  |  Height:  |  Size: 318 B

View File

@@ -1,7 +1,7 @@
<html>
<head>
<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">
<link rel="stylesheet" href="./style.css" type="text/css">
</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/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
</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>
</html>

View File

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