finishing and fine-tuning TODO NEXT : project page

src/views/Technologies.vue

@@ -15,13 +15,14 @@ const showWordpressUnderList=ref(false)
     <div class="title">
       <div class="logo">
       </div>
-      <h3><span>technos</span></h3> 
+      <h3><span>techno</span></h3> 
     </div>
     <p class="first">Technologies are just like Legos. I mean, they consist of a variety of bricks you can put together to build amazing things. Here are certain languages I feel comfortable with:</p>
     <ul>
       <li>html</li>
       <li>css / scss</li>
-      <li>js</li>
+      <li>JavaScript</li>
+      <li>SQL</li>
       <li>php</li>
     </ul>
     <p>And also some other stuff:</p>
@@ -55,6 +56,9 @@ const showWordpressUnderList=ref(false)
       background-image: url('../assets/legos_vrac_solo2.png');
       background-size: 120%;
     }
+    & > h3 > span::after{
+      content:"s"
+    }
   }
   
   & > p, & li{
@@ -75,8 +79,9 @@ const showWordpressUnderList=ref(false)
   }
   li{
     &::before{
-    margin-left: 1em;
+    //margin-left: 0em;
     margin-right: 0.5em;
+    font-size: 1em;
 	  content: "•";
 	  word-spacing: 0.5em;
 	  color: $green;    
@@ -86,24 +91,32 @@ const showWordpressUnderList=ref(false)
       transition: 0.25s;
       &::before{
         display:inline-block;
-        content:"⏵";
+        //margin-left: 0px;
+        //content:"\0023F5";
+        
+        width: 7px;
+        aspect-ratio: 1/2;
+        background-image: url('../assets/arrow-list.svg');
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: 100%;
         font-size: 0.85em;
         transform: rotate(0deg);
         transition: 0.25s;
       }
       &.open{
         &::before{
-          content:"⏵";
+          //content:"⏵";
           transform: rotate(90deg);
         }
       }
       &:hover{
-        color: $red;
+        color: $red-light;
         cursor: pointer;
       }
     }
   &.under-li{
-    margin-left: 2em;
+    margin-left: 1em;
    
     &.last{
       margin-bottom: 0.5em;
@@ -147,5 +160,10 @@ span.red{
   left: 0;    
 }
 }
+@media (width > 450px){
+  .content > .title > h3 > span::after{
+      content:"logies"
+    }
+  }
 
 </style>