sec nav + stream lining

README.md

@@ -1 +1,2 @@
-# 0life-web
+# 0life-web
+- [ ] nav-flag aby se menil podle toho na cem jsem

css/life.css

@@ -1,6 +1,6 @@
 /* NAV */
 
-.nav > #life {
+.nav > #nav-life {
   background-color: rgb(var(--primary-rgb));
   border-color: rgb(var(--secondary-rgb));
   flex-grow: 4;
@@ -9,7 +9,7 @@
   font-size: 140%;
 }
 
-.nav > #life:hover {
+.nav > #nav-life:hover {
   flex-grow: 5;
   width: 100%;
 }

css/main.css

@@ -1,4 +1,8 @@
-:root {
+html {
+  scroll-behavior: smooth;
+ }
+
+ :root {
   --background-rgb: 0 0 0;
   --secondary-background-rgb: 60 60 60;
 
@@ -77,7 +81,57 @@ body {
   width: 100%;
 }
 
+/* Bottom secret nav */ 
 
+.secret-nav {
+  position: fixed;
+  left: 0px;
+  right: auto;
+  bottom: 0px;
+  height: 40px;
+  width: 30%;
+  z-index: 7;
+  display: flex;
+  justify-content: flex-start;
+}
+
+.secret-nav > .sec-nav {
+  background-color: rgb(var(--detail-rgb));
+  border-color: rgb(var(--detail-rgb));
+  border-top-left-radius: 15px;
+  border-top-right-radius: 15px;
+  border-width: 5px;
+  border-style:solid;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  color: black;
+  text-decoration: none;
+  width: 70%;
+  font-family: "Source Code Pro", monospace;
+  font-size: fill;
+
+  width: 40px;
+  margin-left: 10px;
+
+  transition: 
+    border-color 0.3s,
+    border-width 0.3s, 
+    border-right-width 0.3s,
+    font-size 0.3s,
+    width 0.3s;
+}
+
+
+.secret-nav > .sec-nav:hover {
+  border-color: rgb(var(--secondary-rgb)); 
+  border-width: 10px;
+  border-bottom-width: 0px;
+  font-size: 140%;
+  width: 40px;
+}
 
 /* Content */
 
@@ -189,3 +243,4 @@ body {
   letter-spacing: 0.3rem;
   text-decoration: none;
 }
+

index.html

@@ -19,19 +19,29 @@
 
 <div class="nav">
   <a class="nav-gap"></a>
-  <a href="index.html" class="nav-flag" id="life">0-LIFE</a>
+  <a href="#life" class="nav-flag" id="nav-life">0-LIFE</a>
   <a class="nav-gap"></a>
-  <a href="reborn.html" class="nav-flag" id="reborn">Reborn</a>
+  <a href="https://youtu.be/dQw4w9WgXcQ" class="nav-flag" id="nav-reborn">Reborn</a>
   <a class="nav-gap"></a>
-  <a href="terminal.html" class="nav-flag" id="terminal">Terminal</a>
+  <a href="#terminal" class="nav-flag" id="nav-terminal">Terminal</a>
   <a class="nav-gap"></a>
-  <a href="doc.html" class="nav-flag" id="doc">Docs</a>
+  <a href="#Doc" class="nav-flag" id="nav-doc">Docs</a>
   <a class="nav-gap"></a>
-  <a href="interview.html" class="nav-flag" id="interview">Interview</a>
+  <a href="#inter" class="nav-flag" id="nav-interview">Interview</a>
   <a class="nav-gap"></a>
-  <a href="login.html" class="nav-flag" id="login">Login</a>
+  <a href="#login" class="nav-flag" id="nav-login">Login</a>
 </div>
 
+<!-- Bottom secret nav -->
+
+<div class="secret-nav">
+  <a class="sec-nav" href="" id="sec-1">1</a>
+  <a class="sec-nav" href="" id="sec-2">2</a>
+  <a class="sec-nav" href="" id="sec-3">3</a>
+
+</div>
+
+
 
 <!-- CONTENT OF WEB -->