diff --git a/src/scss/_definitions.scss b/src/scss/_definitions.scss index fa0c9cb..4c29b14 100644 --- a/src/scss/_definitions.scss +++ b/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; - } } diff --git a/src/scss/_drawing.scss b/src/scss/_drawing.scss index 5fc8eba..6b041fb 100644 --- a/src/scss/_drawing.scss +++ b/src/scss/_drawing.scss @@ -5,10 +5,10 @@ * */ -@import 'components/cards'; - @import 'components/buttons'; +@import 'components/cards'; + @import 'components/previews'; .flex-that { diff --git a/src/scss/_global.scss b/src/scss/_global.scss index 7cceea9..d86856f 100644 --- a/src/scss/_global.scss +++ b/src/scss/_global.scss @@ -31,9 +31,9 @@ /* ------------------ HEADERS ------------------- */ #page-header { - background: get-color("skyblue") url('img/background.png') center bottom repeat-x; - border-top: 6px solid get-color("dark2"); - padding-bottom:3rem; + background: get-color("dark2") center bottom repeat-x; + border-top: 0px solid get-color("dark2"); + 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; diff --git a/src/scss/_palette.scss b/src/scss/_palette.scss index f003f38..95361a4 100644 --- a/src/scss/_palette.scss +++ b/src/scss/_palette.scss @@ -38,8 +38,8 @@ $semantics: ( "link":"skyblue", "selection":"skyblue", "mark":"yellow", - "primary":"violet", - "secondary":"skyblue", + "primary":"blue", + "secondary":"blue", "warning":"orange", "danger":"red", "info":"skyblue", diff --git a/src/scss/components/_buttons.scss b/src/scss/components/_buttons.scss index d76e46c..efded74 100644 --- a/src/scss/components/_buttons.scss +++ b/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,9 +49,7 @@ $button_small: $lineheight_quarter; } @mixin colorize-button($background-color) { - &:before { - background-color: $background-color; - } + background-color: $background-color; } @mixin button-fullcontrol($background-color, $hover-color, $text-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); - padding-left: $button_small; - padding-right: $button_small; + @include button-fullcontrol(transparent, rgba(255,255,255,0.1), $color-font-light); + margin-left:0; + 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 diff --git a/src/scss/components/_cards.scss b/src/scss/components/_cards.scss index c8a3315..16c8c0a 100644 --- a/src/scss/components/_cards.scss +++ b/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-right:0; + padding-left:$size; + padding-right:$size; padding-bottom: $size/2!important; + margin:0; margin-bottom:$lineheight_half; line-height:$lineheight; white-space: nowrap; - position:relative; - left: -$size*1.25; - - width:95%; - - @include biseau($size); + @include border-radius(); + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; 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 { - text-decoration:none; - color: $color-primary; - background-color:transparent; - &:hover { - text-decoration:none; - color: $color-primary; - - @include biseau($lineheight_half); - - &:before { - background-color: darken($color-background-alt, 7.5%) - } - } - - + a { + @include borders(); + @include border-radius(); + @include button-fullcontrol(transparent, darken($color-background-alt, 5.5%), $color-primary); + transition: background .2s,border .2s,box-shadow .2s,color .2s; } .menu-divider { diff --git a/src/scss/components/_previews.scss b/src/scss/components/_previews.scss index 25ca3ba..4ab7c48 100644 --- a/src/scss/components/_previews.scss +++ b/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;