progress

.src/css/light/header.css

@@ -25,3 +25,15 @@
   html {
     font-family: 'sary_soft_semiboldregular';
   }
+
+  #error-msg {
+    color: #bababa;
+    position: absolute;
+    left: 200px;
+    right: 120px;
+    bottom: 0;
+    border: 3px #bababa solid;
+    border-radius: 3px;
+    padding-left: 20px;
+    display: flex;
+  }

.src/css/light/topnav.css

@@ -13,7 +13,6 @@
     background-color: #333;
     font-family: 'sary_soft_semiboldregular';
     z-index: 9999999;
-    top: 0;
   }
   .navbar a, button {
     float: left;
@@ -204,3 +203,28 @@
   .navbar:hover .expandonhover {
     width: 230px;
   }
+
+  #website-under-construction {
+    background-color: orange;
+    color: #333333;
+    width: auto;
+    height: 50px;
+    display: inline-block;
+    width: 240px;
+    transition: width 0.5s;
+    -webkit-transition: width 0.5s;
+    overflow: hidden;
+    background-image: url(/.src/assets/warning-symbolic-dark.png);
+    background-size: 30px 30px;
+    background-repeat: no-repeat;
+    background-position: left center;
+    background-position-x: 10px;
+  }
+
+  @media screen and (max-width: 1021px) {
+    .navbar:hover #website-under-construction {
+      width: 50px;
+    }
+}
+
+  

header.html

@@ -1,7 +1,7 @@
 <base target="_parent">
 <header>
-    <link id="style-topnav" rel="stylesheet" href=".src/css/topnav.css">
-    <link id="style-header" rel="stylesheet" href=".src/css/header.css">
+    <link id="style-topnav" rel="stylesheet" href=".src/css/light/topnav.css">
+    <link id="style-header" rel="stylesheet" href=".src/css/light/header.css">
 
     <div class="navbar">
         <a href="" style="padding: 3px;padding-bottom: 0px;"><img src="/.src/assets/logos/logo_icon.png" height="39px"></a>
@@ -55,16 +55,21 @@
       </div>
       <a href="/about/">About</a>
       <a href="/contact/">Contact</a>
-      <a style="background-color: orange;color: #333333;" href="/construction/"><img style="padding-top: 5px;" src="/.src/assets/warning-symbolic-dark.png" height="17px"> Website under construction</a>
+      <a id="website-under-construction" href="/construction/"><div style="width: 220px;"><p style="margin-top: 2px;margin-left:25px;">Website under construction</p></div></a>
       <div class="expandonhover">
         <a href="/account/" ><img src="/.src/assets/account.png" height="18px"></a>
         <a id="floatinright" href="/signup/" >Sign Up</a>
         <a id="floatinright" href="/login/" >Login</a>
       </div>
       <a style="float: right;" onclick="toggleDarkMode();"><img src="/.src/assets/dark-mode.png" height="18px"></a>
-  
-      <div id="header">
-        
+    </div>
+    <div id="error-msg">
+      <div style="width: 15%;">
+        <img src=".src/assets/warning-symbolic.png" width="75px">
+      </div>
+      <div style="align-self: stretch;" onselectstart="return false">
+        <p>See this message? This means that You are either using a browser that doesn't properly support this website or a Browser extension is modifiying this content (e.g. Dark Reader), try disabling it. Either way, You're missing out on content.</p>
       </div>
     </div>
+    
   </header>

index.html

@@ -68,7 +68,6 @@
       <a style="float: right;" onclick="toggleDarkMode();"><img src="dark-mode.png" height="18px"></a>
   
       <div id="header">
-        <h1>DBPJP</h1>
       </div>
     </div>
     <div id="error-msg">

local_server.sh

@@ -0,0 +1,4 @@
+#!/bin/sh
+
+# start a local server in the root of this repository at localhost:8000
+python -m http.server

navbar-scroll.html

@@ -0,0 +1,35 @@
+<style>
+    #triangle-topleft {
+      position: absolute;
+      top: 0;
+      width: 1px;
+      height: 1px;
+      border-top: 200px solid #2e4e4e;
+      border-right: 100px solid transparent;
+      transition: 0.1s;
+      z-index: -1;
+    }
+
+    #triangle-topleft:hover {
+      border-top: 100px solid #003052;
+      border-right: 50px solid transparent;
+    }
+
+    #triangle-topleft2 {
+      width: 0;
+      height: 0;
+      border-top: 50px solid red;
+      border-right: 300px solid transparent;
+      transition: 0.1s;
+    }
+
+
+    body {
+      margin: 0%;
+    }
+</style>
+
+<body>
+    <div id="triangle-topleft2"></div>
+    <div id="triangle-topleft"></div>
+</body>