wip: first try at unbranding

src/scss/_definitions.scss

@@ -23,7 +23,7 @@ $lineheight: $baseline * 1rem;
 $lineheight_half: $lineheight/2;
 $lineheight_quarter: $lineheight/4;
 
-$border-radius: 0px;
+$border-radius: 4px;
 $border-size: 0px;
 
 $fontweight_big: 300;
@@ -106,19 +106,5 @@ $screen-xxl-min: 1600px;
 }
 
 @mixin biseau($size) {
-    position: relative;
-    z-index:1;
-    overflow: visible;
 
-    &:before {
-        content: " ";
-        position: absolute;
-        top:0;
-        left:-$size/2;
-        right:-$size/2;
-        bottom:0;
-        z-index:-1;
-        transform: skewX(-15deg);
-        transition: background-color 0.3s;
-    }
 }

src/scss/_drawing.scss

@@ -5,10 +5,10 @@
  *
  */
 
-@import 'components/cards';
-
 @import 'components/buttons';
 
+@import 'components/cards';
+
 @import 'components/previews';
 
 .flex-that {

src/scss/_global.scss

@@ -31,9 +31,9 @@
   /* ------------------ HEADERS ------------------- */
 
 #page-header {
-    background: get-color("skyblue") url('img/background.png') center bottom repeat-x;
+    background: get-color("dark2") center bottom repeat-x;
-    border-top: 6px solid get-color("dark2");
+    border-top: 0px solid get-color("dark2");
-    padding-bottom:3rem;
+    margin-bottom:3rem;
 
     .header-collumns {
       @include container-big();
@@ -56,18 +56,11 @@
       }
 
       @include lg() {
-        grid-template-columns: 1fr 1fr;
-        grid-template-areas: "logo nav";
         height:11*$lineheight;
-        padding-bottom:0;
-        .navbar-area {
-          text-align: right;
-        }
       }
 
       @include xxl() {
         height:13*$lineheight;
-
       }
 
     }
@@ -81,11 +74,12 @@ header h1 {
     font-style:oblique;
     padding-bottom:0px;
     line-height: 1.5em;
+    margin:auto;
 
     img {
+      max-width:640px;
       width: 100%;
       height: auto;
-      margin-top:0.75rem;
     }
 }
 
@@ -212,7 +206,6 @@ body {
 }
 
 footer {
-    @include angled-edge('outside top', 'upper left', $color-footer-back, 32);
     color: $color-footer-text;
     padding-top:1.5rem;
     font-size: 0.8rem!important;

src/scss/_palette.scss

@@ -38,8 +38,8 @@ $semantics: (
   "link":"skyblue",
   "selection":"skyblue",
   "mark":"yellow",
-  "primary":"violet",
+  "primary":"blue",
-  "secondary":"skyblue",
+  "secondary":"blue",
   "warning":"orange",
   "danger":"red",
   "info":"skyblue",

src/scss/components/_buttons.scss

@@ -12,7 +12,7 @@ $button_small: $lineheight_quarter;
 
 @mixin button($size) {
   @include button-nobiseau($size);
-  @include biseau($size);
+  //@include biseau($size);
 }
 
 @mixin button-nobiseau($size) {
@@ -28,12 +28,14 @@ $button_small: $lineheight_quarter;
     @include borders();
     @include border-radius();
     font-weight: $fontweight_base;
+    transition: background .2s,border .2s,box-shadow .2s,color .2s;
 
     background-color:transparent;
 
     &:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
         text-decoration:none;
         background-color:transparent;
+        transition: background .2s,border .2s,box-shadow .2s,color .2s;
     }
 
     &:focus {
@@ -47,10 +49,8 @@ $button_small: $lineheight_quarter;
 }
 
 @mixin colorize-button($background-color) {
-    &:before {
     background-color: $background-color;
 }
-}
 
 @mixin button-fullcontrol($background-color, $hover-color, $text-color) {
     @include colorize-button($background-color);
@@ -105,13 +105,13 @@ $button_small: $lineheight_quarter;
 // NAVBAR SPECIAL BUTTONS
 
 .btn-navbar {
-    @include button-fullcontrol(transparent, rgba(0,0,0,0.1), $color-font-light);
+    @include button-fullcontrol(transparent, rgba(255,255,255,0.1), $color-font-light);
-    padding-left: $button_small;
+    margin-left:0;
-    padding-right: $button_small;
+    margin-right:0;
 }
 
 .btn-readmore {
-    @include button-fullcontrol(transparent, rgba(0,0,0,0.05), $color-font-light);
+    @include button-fullcontrol(transparent, darken($color-background-alt, 5.5%), $color-primary);
 }
 
 // BUTTONS GROUPS

src/scss/components/_cards.scss

@@ -15,7 +15,7 @@ $card-smallpad: $lineheight_half;
     border: none;
     margin:0;
     margin-bottom:$lineheight;
-    padding: $size;
+    padding-bottom: $size;
 }
 
 @mixin card-header($size) {
@@ -23,19 +23,17 @@ $card-smallpad: $lineheight_half;
     font-weight: $fontweight_big;
     border-radius: 0;
     padding: $size/2;
-    padding-left:0;
+    padding-left:$size;
-    padding-right:0;
+    padding-right:$size;
     padding-bottom: $size/2!important;
+    margin:0;
     margin-bottom:$lineheight_half;
     line-height:$lineheight;
     white-space: nowrap;
 
-    position:relative;
+    @include border-radius();
-    left: -$size*1.25;
+    border-bottom-left-radius: 0px;
-
+    border-bottom-right-radius: 0px;
-    width:95%;
-
-    @include biseau($size);
 
     h1, h2, h3, h4, h5, h6, h7, h8, h9, h10  {
         font-family:$basefont;
@@ -62,7 +60,12 @@ $card-smallpad: $lineheight_half;
 
     &-body {
         padding:0!important;
-        margin:0!important;
+        margin:$card-bigpad;
+    }
+
+    & > * {
+        margin-left:$card-bigpad;
+        margin-right:$card-bigpad;
     }
 
     &-header {
@@ -104,8 +107,6 @@ $card-smallpad: $lineheight_half;
             text-overflow: ellipsis;
             overflow:hidden;
 
-            @include biseau($lineheight_half);
-
             strong {
               font-weight: 900;
               color:get-color("dark")!important;
@@ -120,22 +121,11 @@ $card-smallpad: $lineheight_half;
             }
         }
 
-        a, a:visited {
+        a {
-            text-decoration:none;
+            @include borders();
-            color: $color-primary;
+            @include border-radius();
-            background-color:transparent;
+            @include button-fullcontrol(transparent, darken($color-background-alt, 5.5%), $color-primary);
-            &:hover {
+            transition: background .2s,border .2s,box-shadow .2s,color .2s;
-                text-decoration:none;
-                color: $color-primary;
-
-                @include biseau($lineheight_half);
-
-                &:before {
-                    background-color: darken($color-background-alt, 7.5%)
-                }
-            }
-
-
         }
 
         .menu-divider {

src/scss/components/_previews.scss

@@ -48,6 +48,11 @@ $preview-height: 8*$lineheight;
   width:100%;
   margin:auto;
   box-shadow: $large-shadow, $inset-shadow;
+
+  & > * {
+      margin-left:0;
+      margin-right:0;
+  }
 }
 
 .preview-link {
@@ -75,7 +80,6 @@ $preview-height: 8*$lineheight;
     top: 0;
     left: 0;
     position: absolute;
-    padding-top: $lineheight_half;
     backdrop-filter: none;
     transition: background-color 0.3s;
 
@@ -103,7 +107,7 @@ $preview-height: 8*$lineheight;
       .metadata-pills {
         opacity: .9;
         transition: opacity .5s, height .5s;
-        height:135px;
+        height:150px;
       }
     }
   }
@@ -146,11 +150,11 @@ $preview-height: 8*$lineheight;
 
 .preview-metadata {
   color: $color-font-light;
-  height:165px;
+  height:180px;
   overflow: hidden;
 
   .metadata-pills {
-    height:165px;
+    height:178px;
   	opacity: 0;
     transition: opacity .3s, height .3s;
     display:flex;
@@ -163,20 +167,17 @@ $preview-height: 8*$lineheight;
 
 .card-preview.card-info {
   .comment-text {
-    @include angled-edge('outside top', 'upper left', $color-info, 16);
     background-color:$color-info;
   }
 }
 
 .card-preview.card-grey {
   .comment-text {
-    @include angled-edge('outside top', 'upper left', $color-muted, 16);
     background-color:$color-muted;
   }
 }
 
 .comment-text {
-  @include angled-edge('outside top', 'upper left', $color-primary, 16);
   color: $color-font-light;
   background-color:$color-primary;
   text-align: center;