finished navbar

sdfiokpskiopdf · Apr 19, 2021 · ad1d5bc · ad1d5bc
1 parent 1dd8fbc
commit ad1d5bc
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 10 deletions.
diff --git a/__pycache__/backend.cpython-39.pyc b/__pycache__/backend.cpython-39.pyc
diff --git a/main.py b/main.py
@@ -26,6 +26,14 @@ def home():
         pass
     else:
         return render_template("index.html")
+
+@app.route("/about")
+def about():
+    return "about"
+
+@app.route("/contact")
+def contact():
+    return "contact"
 
 if __name__ == "__main__":
     app.run(debug=True, host="0.0.0.0")

diff --git a/static/base.css b/static/base.css
@@ -63,7 +63,8 @@ main {
 }
 
 .link-text {
-  display: none;
+  transition: opacity 200ms ease-out;
+  opacity: 0;
   margin-left: 1rem;
 }
 
@@ -81,25 +82,30 @@ main {
   transition: var(--transition-speed);
 }
 
+.logo {
+  width: 100%;
+}
+
 .logo .nav-link{
   font-weight: bold;
   text-transform: uppercase;
   margin-bottom: 1rem;
   text-align: center;
   color: var(--main-text-color);
   background: var(--red);
-  font-size: 0.5rem;
+  font-size: 1.5rem;
   letter-spacing: 0.3ch;
-  width: 100%;
   filter: grayscale(0%) opacity(1);
 }
 
 .logo svg {
+  position: absolute;
   transform: rotate(0deg);
   transition: transform 200ms;
 }
 
 .navbar:hover .logo svg {
+  position: static;
   transform: rotate(-360deg)
 }
 
@@ -138,6 +144,6 @@ main {
   }
 
   .navbar:hover .link-text {
-    display: block;
+    opacity: 1;
   }
 }
diff --git a/templates/base.html b/templates/base.html
@@ -14,31 +14,31 @@
         <ul class="navbar-nav">
           <li class="logo">
             <a href="#" class="nav-link">
-              <span class="link-text">Youtube Video Downloader</span>
+              <span class="link-text">Ytbuddy</span>
               <svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="cloud-download-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" class="svg-inline--fa fa-cloud-download-alt fa-w-20 fa-3x"><g class="fa-group"><path fill="currentColor" d="M537.6 226.6A96.11 96.11 0 0 0 448 96a95.51 95.51 0 0 0-53.3 16.2A160 160 0 0 0 96 192c0 2.7.1 5.4.2 8.1A144 144 0 0 0 144 480h368a128 128 0 0 0 25.6-253.4zm-132.9 88.7L299.3 420.7a16.06 16.06 0 0 1-22.6 0L171.3 315.3c-10.1-10.1-2.9-27.3 11.3-27.3H248V176a16 16 0 0 1 16-16h48a16 16 0 0 1 16 16v112h65.4c14.2 0 21.4 17.2 11.3 27.3z" class="fa-secondary"></path><path fill="currentColor" d="M404.7 315.3L299.3 420.7a16.06 16.06 0 0 1-22.6 0L171.3 315.3c-10.1-10.1-2.9-27.3 11.3-27.3H248V176a16 16 0 0 1 16-16h48a16 16 0 0 1 16 16v112h65.4c14.2 0 21.4 17.2 11.3 27.3z" class="fa-primary" id="logo-primary"></path></g></svg>
             </a>
           </li>
 
           <li class="nav-item">
-            <a href="#" class="nav-link">
+            <a href="{{ url_for('home') }}" class="nav-link">
               <svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="home" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="svg-inline--fa fa-home fa-w-18 fa-3x"><g class="fa-group"><path fill="currentColor" d="M336 463.59V368a16 16 0 0 0-16-16h-64a16 16 0 0 0-16 16v95.71a16 16 0 0 1-15.92 16L112 480a16 16 0 0 1-16-16V300.06l184.39-151.85a12.19 12.19 0 0 1 15.3 0L480 300v164a16 16 0 0 1-16 16l-112-.31a16 16 0 0 1-16-16.1z" class="fa-secondary"></path><path fill="currentColor" d="M573.32 268.35l-25.5 31a12 12 0 0 1-16.9 1.65L295.69 107.21a12.19 12.19 0 0 0-15.3 0L45.17 301a12 12 0 0 1-16.89-1.65l-25.5-31a12 12 0 0 1 1.61-16.89L257.49 43a48 48 0 0 1 61 0L408 116.61V44a12 12 0 0 1 12-12h56a12 12 0 0 1 12 12v138.51l83.6 68.91a12 12 0 0 1 1.72 16.93z" class="fa-primary"></path></g></svg>
               <span class="link-text">Home</span>
             </a>
           </li>
           <li class="nav-item">
-            <a href="#" class="nav-link">
+            <a href="{{ url_for('about') }}" class="nav-link">
               <svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="info-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-info-circle fa-w-16 fa-3x"><g class="fa-group"><path fill="currentColor" d="M256 8C119 8 8 119.08 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 110a42 42 0 1 1-42 42 42 42 0 0 1 42-42zm56 254a12 12 0 0 1-12 12h-88a12 12 0 0 1-12-12v-24a12 12 0 0 1 12-12h12v-64h-12a12 12 0 0 1-12-12v-24a12 12 0 0 1 12-12h64a12 12 0 0 1 12 12v100h12a12 12 0 0 1 12 12z" class="fa-secondary"></path><path fill="currentColor" d="M256 202a42 42 0 1 0-42-42 42 42 0 0 0 42 42zm44 134h-12V236a12 12 0 0 0-12-12h-64a12 12 0 0 0-12 12v24a12 12 0 0 0 12 12h12v64h-12a12 12 0 0 0-12 12v24a12 12 0 0 0 12 12h88a12 12 0 0 0 12-12v-24a12 12 0 0 0-12-12z" class="fa-primary" id="info-primary"></path></g></svg>
               <span class="link-text">About</span>
             </a>
           </li>
           <li class="nav-item">
-            <a href="#" class="nav-link">
+            <a href="https://github.com/pot-noodle-python/youtube-video-downloader" class="nav-link">
               <svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="code-merge" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" class="svg-inline--fa fa-code-merge fa-w-12 fa-3x"><g class="fa-group"><path fill="currentColor" d="M227.06 293.9A199.9 199.9 0 0 1 104 225.83v129.84a80.31 80.31 0 0 0-48 0V156.33a80.24 80.24 0 0 0 58.73-4.24 152.51 152.51 0 0 0 113.78 93.41 80 80 0 0 0-1.45 48.4z" class="fa-secondary"></path><path fill="currentColor" d="M80 0a80 80 0 1 0 80 80A80 80 0 0 0 80 0zm0 96a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm0 256a80 80 0 1 0 80 80 80 80 0 0 0-80-80zm0 96a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm224-256a80 80 0 1 0 80 80 80 80 0 0 0-80-80zm0 96a16 16 0 1 1 16-16 16 16 0 0 1-16 16z" class="fa-primary"></path></g></svg>
               <span class="link-text">Github</span>
             </a>
           </li>
           <li class="nav-item">
-            <a href="#" class="nav-link">
+            <a href="{{ url_for('contact') }}" class="nav-link">
               <svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="envelope" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-envelope fa-w-16 fa-3x"><g class="fa-group"><path fill="currentColor" d="M256.47 352h-.94c-30.1 0-60.41-23.42-82.54-40.52C169.39 308.7 24.77 202.7 0 183.33V400a48 48 0 0 0 48 48h416a48 48 0 0 0 48-48V183.36c-24.46 19.17-169.4 125.34-173 128.12-22.12 17.1-52.43 40.52-82.53 40.52zM464 64H48a48 48 0 0 0-48 48v19a24.08 24.08 0 0 0 9.2 18.9c30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4 23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7A23.93 23.93 0 0 0 512 131v-19a48 48 0 0 0-48-48z" class="fa-secondary"></path><path fill="currentColor" d="M512 131v52.36c-24.46 19.17-169.4 125.34-173 128.12-22.12 17.1-52.43 40.52-82.53 40.52h-.94c-30.1 0-60.41-23.42-82.54-40.52C169.39 308.7 24.77 202.7 0 183.33V131a24.08 24.08 0 0 0 9.2 18.9c30.6 23.9 40.7 32.4 173.4 128.7 16.69 12.12 49.75 41.4 72.93 41.4h.94c23.18 0 56.24-29.28 72.93-41.4 132.7-96.3 142.8-104.7 173.4-128.7A23.93 23.93 0 0 0 512 131z" class="fa-primary" id="contact-primary"></path></g></svg>
               <span class="link-text">Contact</span>
             </a>

diff --git a/templates/index.html b/templates/index.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% block title %}Youtube Video Downloader{% endblock %}
+{% block title %}YT Buddy{% endblock %}
 {%block head %}
 <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='index.css')}}">
 {% endblock %}