style

src/styles/content.scss

@@ -118,3 +118,11 @@ sib-display#member-info,
     grid-gap: 1em;
   }
 }
+
+
+// projects
+#project-profile {
+  [name="title"]{
+    
+  }
+}

src/styles/form.scss

@@ -1,6 +1,8 @@
 //button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week, datetime
 
-
+sib-form.block>form>*{
+  display: block;
+}
 sib-form{
   form{
     margin: -.5em;

src/styles/icons.scss

@@ -250,6 +250,7 @@ $icons: (
   social-steam: '\e620',
 );
 
+
 @each $name, $code in $icons {
   .icon-#{$name} {
     &:before {

src/styles/main.scss

@@ -99,7 +99,7 @@ h3 {
   flex: 1 1 0px;
 }
 
-.limiter{
+.limiter {
   display: block;
   max-width: 650px;
 }
@@ -110,21 +110,37 @@ h3 {
   flex-direction: row-reverse;
   align-items: flex-start;
   > sib-router {
+    font-family: monospace;
+    color: $color-black;
     display: block;
-    background-color: #ccc;
+    background-color: $color-grey-light2;
     sib-route {
       display: block;
+      cursor: pointer;
       > div {
         position: relative;
-        padding: 1em 2em;
-        border-bottom: 1px solid #888;
+        padding: 1.5em 3em;
+        border-bottom: 1px solid $color-grey;
+      }
+      &:hover {
+        background-color: $color-grey;
       }
       &[active] {
         font-weight: bold;
+        background-color: $color-black;
+        color: $color-yellow;
         > div:before {
-          content: '<';
-          position: absolute;
+          opacity: 1;
           transform: translateX(-150%);
+          transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        }
+      }
+      > div {
+        @include icon(arrow-left);
+        &:before {
+          position: absolute;
+          transform: translateX(-50%);
+          opacity: 0;
         }
       }
     }
@@ -170,6 +186,11 @@ h3 {
   }
 }
 
+sib-route,
+sib-trigger {
+  cursor: pointer;
+}
+
 sib-trigger.back {
   display: block;
   @include icon('arrow-left');

src/styles/variables.scss

@@ -2,6 +2,7 @@
 $color-white: #fff;
 $color-black: #36383b;
 $color-grey: #898f95;
+$color-grey-light2: #d8d8d8;
 $color-grey-light: #f0f3f6;
 
 $color-yellow: #ffb700;
@@ -11,6 +12,11 @@ $color-yellow-light: #ffd759;
   box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
 }
 
+%cadre {
+  @extend %shadow;
+  background-color: $color-white;
+}
+
 $breakpoints: (
   phone: 480px,
   tablet: 768px,