improve projects page

assets/_responsive.scss

@@ -1,6 +1,12 @@
 $desktop-min-breakpoint: 640px;
 $mobile-max-breakpoint: $desktop-min-breakpoint - 1px;
 
+@mixin mobile {
+  @media only screen and (max-width: $mobile-max-breakpoint) {
+    @content
+  }
+}
+
 @mixin desktop {
   @media only screen and (min-width: 640px) {
     @content

assets/global.scss

@@ -13,7 +13,11 @@ body {
   font-size: 16px;
 
   background-color: $c-background;
-  color: $c-text
+  color: $c-text;
+}
+
+::selection {
+  background-color: rgba(255, 255, 255, 0.1);
 }
 
 *,

components/CodingProject.vue

@@ -1,21 +1,24 @@
 <template>
   <div class="project">
-    <span class="title">{{ title }}</span>
-    <div class="links">
-      <div v-for="(link, index) in links" :key="link.name" class="link">
-        <a
-          :href="link.to"
-          rel="noopener"
-          target="_blank"
-        >
-          {{ link.name }}
-        </a>
-        <div v-if="index + 1 < links.length" class="space"></div>
+    <span class="type">{{ type }}</span>
+    <div class="padded">
+      <span class="title">{{ title }}</span>
+      <div class="links">
+        <div v-for="(link, index) in links" :key="link.name" class="link">
+          <a
+            :href="link.to"
+            rel="noopener"
+            target="_blank"
+          >
+            {{ link.name }}
+          </a>
+          <div v-if="index + 1 < links.length" class="space"></div>
+        </div>
       </div>
+      <p class="description">
+        <slot></slot>
+      </p>
     </div>
-    <p class="description">
-      <slot></slot>
-    </p>
   </div>
 </template>
 
@@ -28,7 +31,8 @@
         required: true
       },
       npm: String,
-      github: String
+      github: String,
+      type: String
     },
     computed: {
       links() {
@@ -56,19 +60,37 @@
 
 <style scoped lang="scss">
   @import "~@/assets/_colors";
+  @import "~@/assets/_responsive";
 
   .project {
     margin: 20px;
     height: fit-content;
     text-align: center;
-    padding: 20px;
     border: 1px solid darken($c-background, 2);
     border-radius: 5px;
     width: 400px;
 
+    .type {
+      margin: 20px 0 5px;
+      display: inline-block;
+      font-size: 14px;
+      font-family: monospace;
+      width: 100%;
+      text-align: center;
+      background-color: darken($c-background, 2);
+    }
+
+    .padded {
+      padding: 0 20px 20px 20px;
+    }
+
     .title {
       display: block;
-      font-size: 60px;
+      font-size: 30px;
+
+      @include desktop {
+        font-size: 40px;
+      }
     }
 
     .links {
@@ -98,5 +120,10 @@
     .description {
       font-size: 18px;
     }
+
+    transition: box-shadow 0.3s ease;
+    &:hover {
+      box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2);
+    }
   }
 </style>

layouts/secondLevel.vue

@@ -1,6 +1,8 @@
 <template>
   <div id="layout">
-    <nuxt-link class="button" to="/"></nuxt-link>
+    <div class="top-bar">
+      <nuxt-link class="button" to="/">Back</nuxt-link>
+    </div>
     <div class="content">
       <nuxt/>
     </div>
@@ -19,37 +21,47 @@
   @import "~@/assets/_mixins";
 
   #layout {
-    .button {
-      &::before {
-        content: "";
-        display: inline-block;
-        margin-right: -5px;
-        @include arrow(12px, -90deg, white);
+    .top-bar {
+      @include mobile {
+        background-color: darken($c-background, 1);
+        width: 100%;
+        position: sticky;
+        top: 0;
+        right: 0;
       }
 
-      &:hover {
-        &::before {
-          border-color: $c-background;
+      .button {
+        @include mobile {
+          margin: 10px 10px;
         }
-      }
 
-      position: fixed;
-      top: 10px;
-      left: 10px;
+        @include desktop {
+          position: fixed;
+          top: 40px;
+          left: 40px;
+        }
 
-      @include desktop {
-        position: fixed;
-        top: 5vh;
-        left: 10vw;
+        &::before {
+          content: "";
+          display: inline-block;
+          margin-right: 5px;
+          @include arrow(12px, -90deg, white);
+        }
+
+        &:hover {
+          &::before {
+            border-color: $c-background;
+          }
+        }
       }
     }
 
     .content {
       width: 100%;
-      padding: 65px 10px 0;
+      padding: 0 10px;
 
       @include desktop {
-        width: 50%;
+        width: 70vw;
         margin: 0 auto;
         padding-top: 20px;
       }

pages/projects.vue

@@ -5,21 +5,31 @@
         title="pzl"
         npm="@ctexxx/pzl"
         github="ctexxx/pzl"
+        type="Node.js library"
       >
-        A tiny zero-configuration console logger
+        Pretty zero-configuration console logger.
       </CodingProject>
       <CodingProject
         title="shxrt"
         github="ctexxx/shxrt"
+        type="Node.js script"
       >
         <p>
-          A URL shortener service intended to be used with <a href="https://now.sh">now</a> and
-          <a href="https://graph.cool">graph.cool</a>.
+          URL shortener service intended to be used with <a href="https://now.sh">now</a> and
+          <a href="https://graph.cool">GraphCool</a>.
         </p>
         <p>
           Powering <a href="https://go.ctexxx.dev">go.ctexxx.dev</a>.
         </p>
       </CodingProject>
+      <CodingProject
+        title="singleinstancelock"
+        npm="singleinstancelock"
+        github="ctexxx/singleinstancelock"
+        type="Node.js library"
+      >
+        Allow only one instance of your script at a time.
+      </CodingProject>
     </div>
   </main>
 </template>
@@ -36,8 +46,8 @@
 <style scoped lang="scss">
   .projects {
     display: flex;
-    justify-content: space-evenly;
-    align-items: center;
+    justify-content: flex-start;
+    align-items: flex-start;
     align-content: flex-start;
     flex-wrap: wrap;
   }