diff --git a/src/scss/_definitions.scss b/src/scss/_definitions.scss
index bff23ab..fa0c9cb 100644
--- a/src/scss/_definitions.scss
+++ b/src/scss/_definitions.scss
@@ -34,6 +34,69 @@ $fontweight_hyper: 800;
$basefont: Open Sans, sans-serif;
$titlefont: Amatic SC, sans-serif;
+
+// MIXINS RESPONSIVES
+
+// Small tablets and large smartphones (landscape view)
+$screen-sm-min: 576px;
+
+// Small tablets (portrait view)
+$screen-md-min: 768px;
+
+// Tablets and small desktops
+$screen-lg-min: 992px;
+
+// Large tablets and desktops
+$screen-xl-min: 1200px;
+
+// Very large desktops
+$screen-xxl-min: 1600px;
+
+
+// Small devices
+@mixin sm {
+ @media (min-width: #{$screen-sm-min}) {
+ @content;
+ }
+}
+
+// Medium devices
+@mixin md {
+ @media (min-width: #{$screen-md-min}) {
+ @content;
+ }
+}
+
+// Large devices
+@mixin lg {
+ @media (min-width: #{$screen-lg-min}) {
+ @content;
+ }
+}
+
+// Extra large devices
+@mixin xl {
+ @media (min-width: #{$screen-xl-min}) {
+ @content;
+ }
+}
+
+// Extra large desktops
+@mixin xxl {
+ @media (min-width: #{$screen-xxl-min}) {
+ @content;
+ }
+}
+
+// Custom devices
+@mixin rwd($screen) {
+ @media (min-width: $screen+'px' ) {
+ @content;
+ }
+}
+
+// MIXINS AUTRES
+
@mixin borders() {
border: $border-size solid rgba(0, 0, 0, 0.3)
}
diff --git a/src/scss/_drawing.scss b/src/scss/_drawing.scss
index 8eef321..b640d2c 100644
--- a/src/scss/_drawing.scss
+++ b/src/scss/_drawing.scss
@@ -10,3 +10,89 @@
@import 'components/buttons';
@import 'components/previews';
+
+.article-meta, .article-nav {
+ display: flex;
+ justify-content: space-between;
+ padding-bottom: 1.5rem;
+}
+
+.article-category-link {
+ @include button($button_small);
+ padding-left: $button_small;
+ padding-right: $button_small;
+ @include button-color($color-info, $color-button-light);
+ &:hover, &:active {
+ @include borders();
+ }
+
+ p &:last-child {
+ margin-bottom:0;
+ }
+}
+
+strong.btn-fake {
+ @include button($button_large);
+ @include button-fullcontrol(transparent, transparent, rgba(0,0,0,1));
+}
+
+a.article-nav-link-wrap {
+ @include button($button_large);
+ padding-left: $button_large;
+ padding-right: $button_large;
+ &:hover, &:active {
+ @include borders();
+ }
+
+ p &:last-child {
+ margin-bottom:0;
+ }
+ @include button-color($color-info, $color-button-light);
+}
+
+.article-more-link {
+ text-align: center;
+ a {
+ @include button($button_large);
+ padding-left: $button_large;
+ padding-right: $button_large;
+ &:hover, &:active {
+ @include borders();
+ }
+
+ p &:last-child {
+ margin-bottom:0;
+ }
+ @include button-fullcontrol(transparent, rgba(0,0,0,0.05), $color-primary);
+ }
+}
+
+.btn-navbar {
+ @include button($button_small);
+ padding-left: $button_small;
+ padding-right: $button_small;
+ @include button-fullcontrol(transparent, rgba(0,0,0,0.1), $color-light);
+ @include sm() {
+ @include button($button_large);
+ padding-left: $button_large;
+ padding-right: $button_large;
+ }
+}
+
+.pigimg, .mb {
+ padding-bottom:1.5rem;
+}
+
+#page-nav {
+ padding-bottom:1.5rem;
+ .page-number, .next, .prev {
+ @include button($button_small);
+ padding-left: $button_small;
+ padding-right: $button_small;
+ @include button-color($color-light2, $color-button-dark);
+
+ &.current {
+ @include button-color($color-info, $color-button-light);
+ }
+ }
+}
diff --git a/src/scss/_global.scss b/src/scss/_global.scss
index 590e056..083f137 100644
--- a/src/scss/_global.scss
+++ b/src/scss/_global.scss
@@ -12,8 +12,23 @@
}
@mixin container-big() {
- padding-left: 3*$lineheight;
- padding-right: 3*$lineheight;
+ padding-left: $lineheight/2;
+ padding-right: $lineheight/2;
+
+ @include sm() {
+ padding-left: $lineheight;
+ padding-right: $lineheight;
+ }
+
+ @include lg() {
+ padding-left: $lineheight*2;
+ padding-right: $lineheight*2;
+ }
+
+ @include xxl() {
+ padding-left: $lineheight*3;
+ padding-right: $lineheight*3;
+ }
}
.no-pills {
@@ -30,9 +45,45 @@
#page-header {
background: $color-turquoise url('img/background.png') center bottom repeat-x;
- height:10*$lineheight;
border-top: 6px solid $color-dark2;
@include container-big();
+ padding-bottom:3rem;
+
+ .header-collumns {
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-template-areas:
+ "nav"
+ "logo";
+ grid-template-rows: auto;
+ grid-gap: $lineheight;
+ padding-bottom: $lineheight;
+
+ .navbar-area {
+ grid-area: nav;
+ text-align: center;
+ }
+
+ .logo-area {
+ grid-area: logo;
+ }
+
+ @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;
+
+ }
+
+ }
}
header h1 {
@@ -73,32 +124,46 @@ header h1 {
.container-blog {
@include container-big();
+
display: grid;
- grid-template-columns: auto 360px;
+ grid-template-columns: 1fr;
grid-template-rows: auto;
row-gap: $lineheight;
column-gap: 3rem;
+ grid-template-areas:
+ "main"
+ "side";
- grid-template-areas: "main sidebar";
+ @include lg() {
+ grid-template-columns: auto 360px;
+ grid-template-areas: "main side";
+ }
}
-main.mainpane {
+.mainpane {
grid-area: main;
}
-section.sidebar {
- grid-area: sidebar;
+.sidebar {
+ grid-area: side;
}
.container-preview {
@include container-big();
+
display: grid;
- grid-template-columns: 360px auto;
+ grid-template-columns: 1fr;
grid-template-rows: auto;
row-gap: $lineheight;
column-gap: 3rem;
+ grid-template-areas:
+ "main"
+ "side";
- grid-template-areas: "sidebar main";
+ @include lg() {
+ grid-template-columns: 360px auto;
+ grid-template-areas: "side main";
+ }
}
.container-onecolumn {
@@ -161,9 +226,23 @@ body {
footer {
color: $color-footer-text;
- margin-top:1.5em;
+ margin-top:1.5rem;
@include container-big();
font-size: 0.8rem!important;
+ padding-bottom:1.5rem;
+
+ .footer-collumns {
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-template-rows: auto;
+ grid-gap: $lineheight;
+ padding-bottom: $lineheight;
+
+ @include lg() {
+ grid-template-columns: 1fr 1fr 1fr;
+ }
+
+ }
}
/* social media */
diff --git a/src/scss/_typography.scss b/src/scss/_typography.scss
index bd9fb22..dc68d56 100644
--- a/src/scss/_typography.scss
+++ b/src/scss/_typography.scss
@@ -55,6 +55,7 @@ p {
ul, ol {
@include paragraph();
+ list-style: disc;
ul, ol {
padding-bottom:0;
margin:0;
@@ -72,6 +73,12 @@ ul, ol {
/* 2.2 - Text Wrapper */
.container-typographic {
+ p {
+ padding:0;
+ margin:0;
+ text-indent: 3rem;
+ }
+
p, em, p em {
font-weight:$fontweight_base;
}
@@ -234,6 +241,7 @@ code {
.container-typographic {
max-width: 800px;
margin:auto;
+ margin-bottom: 3rem;
}
diff --git a/src/scss/components/_buttons.scss b/src/scss/components/_buttons.scss
index 93edd0a..6435356 100644
--- a/src/scss/components/_buttons.scss
+++ b/src/scss/components/_buttons.scss
@@ -11,6 +11,11 @@ $button_large: $lineheight;
$button_small: $lineheight_quarter;
@mixin button($size) {
+ @include button-nobiseau($size);
+ @include biseau($size);
+}
+
+@mixin button-nobiseau($size) {
padding: $size;
padding-top: $size/3;
padding-bottom: $size/3;
@@ -31,8 +36,6 @@ $button_small: $lineheight_quarter;
background-color:transparent;
}
- @include biseau($size);
-
&:focus {
outline: none;
box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0);
@@ -53,7 +56,10 @@ $button_small: $lineheight_quarter;
@mixin button-fullcontrol($background-color, $hover-color, $text-color) {
@include colorize-button($background-color, $text-color);
- &, &:not(.disabled):not(:disabled) {
+ &:visited {
+ @include colorize-button($background-color, $text-color);
+ }
+ &, &:visited, &:not(.disabled):not(:disabled) {
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
@include colorize-button($hover-color, lighten($text-color, 5%));
}
@@ -91,7 +97,7 @@ $button_small: $lineheight_quarter;
// NAVBAR SPECIAL BUTTONS
.navbar .btn-link {
- @include button-fullcontrol(transparent, rgba(0,0,0,0.2), $color-light)
+ @include button-fullcontrol(transparent, rgba(0,0,0,0.2), $color-light);
}
.btn-readmore {
diff --git a/src/scss/components/_cards.scss b/src/scss/components/_cards.scss
index ff89686..6058e07 100644
--- a/src/scss/components/_cards.scss
+++ b/src/scss/components/_cards.scss
@@ -66,6 +66,9 @@ $card-smallpad: $lineheight_half;
&-header {
@include card-header($card-bigpad);
+ .fa {
+ margin-right: 0.5em;
+ }
}
/* Menu handling */
@@ -73,7 +76,19 @@ $card-smallpad: $lineheight_half;
&-menu {
display:flex;
flex-direction: column;
- .menu-element, .menu-element-link {
+
+ ul {
+ margin:0;
+ padding:0;
+ }
+
+ li {
+ list-style: none;
+ padding:0;
+ margin:0;
+ }
+
+ .menu-element, .menu-element-link, li a {
display:flex;
line-height:$lineheight;
padding-right:$lineheight_half;
@@ -89,6 +104,11 @@ $card-smallpad: $lineheight_half;
overflow:hidden;
@include biseau($lineheight_half);
+
+ strong {
+ font-weight: 900;
+ color:$color-dark!important;
+ }
}
a {
diff --git a/src/scss/components/_previews.scss b/src/scss/components/_previews.scss
index 68ca938..cafc4b3 100644
--- a/src/scss/components/_previews.scss
+++ b/src/scss/components/_previews.scss
@@ -7,10 +7,18 @@ $preview-height: 8*$lineheight;
.previews-section {
display: grid;
- grid-template-columns: auto auto auto;
+ grid-template-columns: 1fr;
grid-template-rows: auto;
grid-gap: $lineheight;
padding-bottom: $lineheight;
+
+ @include xl() {
+ grid-template-columns: 1fr 1fr;
+ }
+
+ @include xxl() {
+ grid-template-columns: 1fr 1fr 1fr;
+ }
}
.preview-container {
@@ -187,11 +195,11 @@ $preview-height: 8*$lineheight;
}
.mwarea {
- height:5*$lineheight;
+ padding-bottom: $lineheight;
}
.mwaimg {
- width:auto;
+ width:100%;
height:auto;
display:block;
margin:auto;
diff --git a/src/static/includes/_footer.html b/src/static/includes/_footer.html
index 64bcbd7..0ba21d9 100644
--- a/src/static/includes/_footer.html
+++ b/src/static/includes/_footer.html
@@ -8,17 +8,17 @@
- 
