UI improvements and responsiveness update

singhayushh · Jul 5, 2021 · 06f0fef · 06f0fef
1 parent 332c228
commit 06f0fef
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 19 deletions.
diff --git a/views/components/footer.ejs b/views/components/footer.ejs
@@ -47,12 +47,12 @@
                 </a>
               </li>
               <li>
-                <a href="https://instagram.com/_singhayushh/">
+                <a href="https://instagram.com/ayush.sheesh/">
                     <ion-icon name="logo-instagram"></ion-icon>
                 </a>
               </li>
               <li>
-                <a href="https://facebook.com/singhayushhh">
+                <a href="https://facebook.com/fa.ayush">
                     <ion-icon name="logo-facebook"></ion-icon>
                 </a>
               </li>
@@ -69,8 +69,8 @@
             </ul>
           </div>
         <div class="footnote">
-            <p class="sm">
-                Website designed and built by <a href="https://github.com/singhayushh" target="_blank">@singhayushh</a>
+            <p class="sm ">
+                Website designed and built by <a href="https://github.com/singhayushh" target="_blank" class="blue">@singhayushh</a>
             </p>
         </div>
     </footer>

diff --git a/views/css/queries.css b/views/css/queries.css
@@ -4,6 +4,13 @@
 
 @media screen and (min-device-width: 890px), screen and (min-width: 890px) {
 
+  :root {
+    --heading-size: 3rem;
+    --logo-size: 2rem;
+    --subheading-size: 1.5rem;
+    --padding-horizontal: 2.5rem;
+  }
+
   main {
     margin-top: 6rem;
   }
@@ -138,6 +145,22 @@
     display: flex;
   }
 
+  .img-wrapper {
+    width: 90%;
+  }
+
+  .profile-header {
+      margin: 0rem;
+  }
+
+  .profile-header h2 {
+    width: max-content;
+  }
+
+  .profile-header a {
+    display: block;
+  }
+
 }
 
 @media screen and (min-device-width: 768px), screen and (min-width: 768px) {

diff --git a/views/css/style.css b/views/css/style.css
@@ -9,12 +9,12 @@
 }
 
 :root {
-    --heading-size: 3rem;
-    --logo-size: 2rem;
-    --subheading-size: 1.5rem;
+    --heading-size: 1.75rem;
+    --logo-size: 1.5rem;
+    --subheading-size: 1.25rem;
     --font-size: 1rem;
     --padding-vertical: 3.5rem;
-    --padding-horizontal: 2.5rem;
+    --padding-horizontal: 1.5rem;
     --margin: 1rem;
     --bg-primary: #FFFFFF;
     --bg-secondary: #FFFCF7;
@@ -190,7 +190,7 @@ section {
 }
 
 .blue {
-    color: var(--blue);
+    color: var(--blue) !important;
 }
 
 .blue-bg {
@@ -293,6 +293,8 @@ form ::placeholder {
 }
 
 .input-info {
+    display: inline-block;
+    width: 100%;
     font-size: 0.875rem;
     color: #9e9ea7;
     margin-bottom: var(--margin);
@@ -304,6 +306,10 @@ label {
     font-weight: 700;
 }
 
+.visual {
+    order: -1;
+}
+
 .visual img {
     width: 100%;
 }
@@ -440,6 +446,7 @@ main {
     position: relative;
     left: 50%;
     transform: translateX(-50%);
+    margin-bottom: var(--margin);
 }
 
 #landing img {
@@ -468,14 +475,30 @@ main {
 
 .img-wrapper {
     border-radius: 8px;
-    width: 90%;
+    width: 50%;
     overflow: hidden;
 }
 
 .img-wrapper img {
     width: 100%;
 }
 
+.profile-header {
+    margin: calc(2 * var(--margin)) 0rem;
+}
+
+.hide.btn {
+    margin-top: calc(2 * var(--margin));
+}
+
+.profile-header a {
+    display: none;
+}
+
+.profile-header h2 {
+    width: 100%;
+}
+
 .profile-footer .icon-set {
     position: relative;
     float: left;
@@ -742,4 +765,11 @@ footer li {
 
   .tr {
     border-bottom: 1px solid rgba(0, 0, 0, 0.03);
-  }
+  }
+
+  /* 404 Page */
+
+#pg404 img {
+    height: 80vh;
+    width: auto;
+}
diff --git a/views/home.ejs b/views/home.ejs
@@ -12,7 +12,7 @@
                     Register Now
                 </a>
             </div>
-            <div class="row span-1-of-1">
+            <div class="row span-1-of-1 visual">
                 <img src="/img/p1.png" alt="">
             </div>
         </div>

diff --git a/views/profile.ejs b/views/profile.ejs
@@ -34,9 +34,12 @@
                     </div>
                     <div class="icon-set">
                         <ion-icon name="mail-outline"></ion-icon>
-                        <span><%= user.email %></span>
+                        <a href="mailto:<%= user.email %>"><%= user.email %></a>
                     </div>
                 </div>
+                <% if (self) { %> 
+                    <a href="/profile/edit" class="btn cta hide">Edit Profile</a>
+                <% } %>
             </div>
         </div>
     </div>
@@ -50,19 +53,19 @@
                 <p>
                     <div class="icon-set">
                         <ion-icon name="logo-instagram"></ion-icon>
-                        <span><%= user.instagram %></span>
+                        <a href="https://instagram.com/<%= user.instagram %>/" target="_blank"><%= user.instagram %></a>
                     </div>
                     <div class="icon-set">
                         <ion-icon name="logo-facebook"></ion-icon>
-                        <span><%= user.facebook %></span>
+                        <a href="https://facebook.com/<%= user.facebook %>/" target="_blank"><%= user.facebook %></a>
                     </div>
                     <div class="icon-set">
                         <ion-icon name="logo-twitter"></ion-icon>
-                        <span><%= user.twitter %></span>
+                        <a href="https://twitter.com/<%= user.twitter %>/" target="_blank"><%= user.twitter %></a>
                     </div>
                     <div class="icon-set">
                         <ion-icon name="logo-linkedin"></ion-icon>
-                        <span><%= user.linkedin %></span>
+                        <a href="https://linkedin.com/in/<%= user.linkedin %>/" target="_blank"><%= user.linkedin %></a>
                     </div>
                 </p>
                 <h3>School</h3>
@@ -82,11 +85,11 @@
                 <p>
                     <div class="icon-set">
                         <ion-icon name="earth-outline"></ion-icon>
-                        <span><%= user.website %></span>
+                        <a href="<%= user.website %>" target="_blank"><%= user.website %></a>
                     </div>
                     <div class="icon-set">
                         <ion-icon name="logo-linkedin"></ion-icon>
-                        <span><%= user.linkedin %></span>
+                        <a href="https://linkedin.com/in/<%= user.linkedin %>/" target="_blank"><%= user.linkedin %></a>
                     </div>
                 </p>
             </div>

diff --git a/views/register.ejs b/views/register.ejs
@@ -19,6 +19,7 @@
                                 Name
                             </label>
                             <input type="text" name="name" id="name" required>
+                            <div class="input-info">Format: Siddhant Dudheria</div>
                         </div>
                         <div class="form-item">
                             <label for="school_id">