Misc improvements

StackTipsLab · Jan 3, 2024 · eb306a9 · eb306a9
1 parent b99ba2e
commit eb306a9
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 38 deletions.
diff --git a/bloggy/templates/pages/home.html b/bloggy/templates/pages/home.html
@@ -5,16 +5,16 @@
     {% block content %}
         {% load static %}
         <section id="homeIntroSection" class="container homeIntro">
-            <div class="hero jumbotron py-4 px-3 py-lg-5 text-center">
+            <div class="hero jumbotron py-lg-5 py-4 px-3 text-center">
                 <div class="container">
-                    <h1 class="display-1 px-lg-5">
-                        Developer Friendly Way to Learn <span class="text-gradient text-primary">Programming.</span>
+                    <h1 class="display-1 px-lg-5 fw-bold">
+                        Developer Friendly Way to Learn <span class="text-gradient text-primary">Programming..</span>
                     </h1>
                     <p class="lead px-lg-5 py-2 fw-700" style="max-width: 900px;margin: 0 auto">
                         StackTips brings developer-friendly ways to learn programming. With courses, articles, and
                         how-to guides, we aim to teach in the ways developers learn best.
                     </p>
-                    <a class="btn btn-primary btn-lg mt-4 ms-2" href="{% url 'login' %}?next={{ request.path }}">Create
+                    <a class="btn btn-primary btn-lg mt-3" href="{% url 'login' %}?next={{ request.path }}">Create
                         free account!</a>
                 </div>
             </div>

diff --git a/bloggy/templates/partials/header.html b/bloggy/templates/partials/header.html
@@ -4,9 +4,9 @@
          id="main-navbar">
         <div class="container">
             <div class="navbar-header">
-                <div class="navbar-brand">
+                <div class="navbar-brand pt-0">
                     <a href="{% url 'index' %}">
-                        <img src="{% static 'media/full-logo-light.png' %}" alt="StackTips"
+                        <img src="{% static 'media/full-logo.png' %}" alt="StackTips"
                              width="auto" height="34" class="d-inline-block align-text-top navbar-brand-logo">
                     </a>
                 </div>
@@ -46,8 +46,8 @@
                     </form>
 
                     <div class="d-flex d-lg-none my-4">
-                        <a href="{% url 'login' %}" class="btn btn-secondary me-3 w-50">Login</a>
-                        <a href="{% url 'register' %}" class="btn btn-secondary w-50">Register</a>
+                        <a href="{% url 'login' %}" class="btn btn-primary me-3 w-50">Login</a>
+                        <a href="{% url 'register' %}" class="btn btn-primary w-50">Register</a>
                     </div>
                 </div>
             </div>
@@ -92,7 +92,7 @@
                 {% else %}
                     <ul class="navbar-nav d-none d-md-block">
                         <li class="nav-item">
-                            <a class="nav-link btn-signin" id="loginCta"
+                            <a class="nav-link btn-primary" id="loginCta"
                                href="{% url 'login' %}?next={{ request.path }}">Sign in</a>
                         </li>
                     </ul>

diff --git a/bloggy_frontend/sass/content/_darkMode.scss b/bloggy_frontend/sass/content/_darkMode.scss
@@ -12,8 +12,12 @@
   --default-card-bg: #fff;
   --course-card-bg: #fff;
   --heading-link-color: #0F172AFF;
-  --main-navbar-color: #068bea;
-  --main-navbar-dark-color: #067fd7;
+  //--main-navbar-color: #068bea;
+  //--main-navbar-dark-color: #067fd7;
+
+  --main-navbar-color: rgba(255, 255, 255, .6);;
+  --main-navbar-dark-color: #ffffff;
+
   --feed-card-bg: #ffffff;//var(--bs-body-bg);
   --breadcrumb-bg: #eceff4f2; //#e9ecef;
   --breadcrumb-text-color: #343a40;

diff --git a/bloggy_frontend/sass/content/post.scss b/bloggy_frontend/sass/content/post.scss
@@ -306,17 +306,13 @@ article {
 
 .card-stack {
   border: 1px solid rgba(25, 25, 28, 0.2) !important;
-  //background: none !important;
-  border-radius: 8px !important;
   box-shadow: 2px 2px 0 -1px #fff, 2px 2px 0 0 rgba(25, 25, 28, 0.2) !important;
 }
 
 
 .feed-card {
   @extend .card;
   background: none !important;
-  //background-color: var(--feed-card-bg);
-  //background: var(--default-card-bg);
   box-shadow: none;
   padding: 0.75rem;
   transition: all 0.2s ease-in-out !important;

diff --git a/bloggy_frontend/sass/vendor/_header.scss b/bloggy_frontend/sass/vendor/_header.scss
@@ -2,22 +2,22 @@
 
   .form-control {
     padding: 5px 2rem 5px 2rem;
-    border: 1px solid var(--main-navbar-dark-color);
-    background: var(--main-navbar-dark-color);
-    color: #f8f9fa !important;
+    border: 1px solid #888888;
+    //background: var(--main-navbar-dark-color);
+    //color: #f8f9fa !important;
     border-radius: 20px;
 
     &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
-      color: var(--searchbar-text-color);
+      //color: var(--searchbar-text-color);
       opacity: 1;
     }
 
     &:-ms-input-placeholder { /* Internet Explorer 10-11 */
-      color: var(--searchbar-text-color);
+      //color: var(--searchbar-text-color);
     }
 
     &::-ms-input-placeholder { /* Microsoft Edge */
-      color: var(--searchbar-text-color);
+      //color: var(--searchbar-text-color);
     }
 
     &:hover, &:active, &:focus, &:active {
@@ -37,7 +37,7 @@
     position: absolute;
     text-align: center;
     pointer-events: none;
-    color: var(--searchbar-text-color);;
+    //color: var(--searchbar-text-color);;
     margin: 10px;
     line-height: 0.9rem;
     font-size: 20px;

diff --git a/bloggy_frontend/sass/vendor/_navbar.scss b/bloggy_frontend/sass/vendor/_navbar.scss
@@ -1,28 +1,32 @@
 @import "../customVariables";
 
 #main-navbar {
-  background: var(--main-navbar-color);
+  background-color: var(--main-navbar-color);
+  backdrop-filter: blur(10px);
 }
 
 .navbar {
   padding: 0.2rem 0 !important;
   z-index: 9999;
 
-  &.--not-top {
-    box-shadow: 0 2px 6px 2px rgb(0 106 194 / 20%);
-  }
+  //&.--not-top {
+  //box-shadow: 0 2px 6px 2px rgb(0 106 194 / 20%);
+  //}
 
 }
 
 #loginCta {
-  @extend .btn, .btn-secondary;
+  @extend .btn, .btn-primary;
   margin: 0 auto;
-  padding: 0.35rem 0.75rem !important;
+  padding: 0.6rem 0.75rem 0.5rem 0.75rem !important;
+  line-height: 1;
   height: fit-content;
+  color: #FFFFFF !important;
 
   .active,
   &:active,
   &:hover {
+    color: #FFFFFF !important;
   }
 }
 
@@ -47,15 +51,11 @@
 }
 
 .navbar-nav .nav-link {
-  //margin: auto 0;
   margin: auto 0.25rem;
-  //padding: 3px 8px !important;
-  //border-radius: 20px;
   border-radius: 3px;
-  //border-radius: 0;
-  font-weight: 400;
+  font-weight: 600;
   @extend .font-sm;
-
+  letter-spacing: -0.02rem;
 }
 
 .navbar.affix {
@@ -79,14 +79,15 @@
 
 .navbar-nav a {
   @extend .font-xs;
-  color: #f8f9fa !important;
+  color: $secondary !important;
   letter-spacing: -0.05px;
   transition: all 0.2s ease-in-out !important;
   padding: 0;
-  font-weight: 400;
+  font-weight: 500;
+  line-height: 1;
+  margin: 0;
   text-transform: uppercase;
 
-
   &.active {
     color: $primary;
   }
@@ -104,7 +105,8 @@
 
 .navbar-nav .nav-link.active,
 .navbar-nav .nav-link:hover {
-  color: #f8f9fa !important;
+  //color: #f8f9fa !important;
+  color: $secondary !important;
   transition: background-color 300ms linear, transform 0.2s;
   //background: var(--main-navbar-dark-color);
 }