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,5 +1,7 @@
 <template>
   <div class="project">
+    <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">
@@ -17,6 +19,7 @@
         <slot></slot>
       </p>
     </div>
+  </div>
 </template>
 
 <script>
@@ -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,11 +21,30 @@
   @import "~@/assets/_mixins";
 
   #layout {
+    .top-bar {
+      @include mobile {
+        background-color: darken($c-background, 1);
+        width: 100%;
+        position: sticky;
+        top: 0;
+        right: 0;
+      }
+
       .button {
+        @include mobile {
+          margin: 10px 10px;
+        }
+
+        @include desktop {
+          position: fixed;
+          top: 40px;
+          left: 40px;
+        }
+
         &::before {
           content: "";
           display: inline-block;
-        margin-right: -5px;
+          margin-right: 5px;
           @include arrow(12px, -90deg, white);
         }
 
@@ -32,24 +53,15 @@
             border-color: $c-background;
           }
         }
-
-      position: fixed;
-      top: 10px;
-      left: 10px;
-
-      @include desktop {
-        position: fixed;
-        top: 5vh;
-        left: 10vw;
       }
     }
 
     .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
+          URL shortener service intended to be used with <a href="https://now.sh">now</a> and
-          <a href="https://graph.cool">graph.cool</a>.
+          <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;
+    justify-content: flex-start;
-    align-items: center;
+    align-items: flex-start;
     align-content: flex-start;
     flex-wrap: wrap;
   }