From 9df8b00773afb1b2ca434fc6ccbafb22ee0db31d Mon Sep 17 00:00:00 2001 From: Kazhnuz Date: Tue, 19 May 2020 21:13:35 +0200 Subject: [PATCH] fix: repair responsive design --- .../themes/blog/layout/_partial/footer.ejs | 8 +- .../themes/blog/layout/_partial/header.ejs | 19 ++-- src/scss/_definitions.scss | 63 ++++++++++++ src/scss/_drawing.scss | 12 +++ src/scss/_global.scss | 98 +++++++++++++++++-- src/scss/components/_previews.scss | 10 +- src/static/includes/_footer.html | 11 ++- src/static/includes/_header.html | 19 ++-- .../themes/blog/layout/_partial/footer.ejs | 8 +- .../themes/blog/layout/_partial/header.ejs | 19 ++-- 10 files changed, 204 insertions(+), 63 deletions(-) diff --git a/src/blog/themes/blog/layout/_partial/footer.ejs b/src/blog/themes/blog/layout/_partial/footer.ejs index 5d23aba..b30291c 100644 --- a/src/blog/themes/blog/layout/_partial/footer.ejs +++ b/src/blog/themes/blog/layout/_partial/footer.ejs @@ -8,18 +8,18 @@
    • -
    -
    +
    +

    Le contenue de ce site, sauf mention contraire, est diffusé sous licence Creative Common Attribution - Partage à l'Identique 4.0 - hors mention contraire.

    Cette licence vous autorise à partager et copier mes travaux, tant que vous me citiez en source, et que vous autorisez la même chose pour les travaux qui en seraient dérivés. N'hésitez pas à partager !

    -
    +

    Theme réalisé avec le quadriciel Bootstrap4 et la banque d'icone Fork-Awesome.

    <%= __('powered_by') %> Hexo

    -
    +

    Code Source du site

    diff --git a/src/blog/themes/blog/layout/_partial/header.ejs b/src/blog/themes/blog/layout/_partial/header.ejs index 9c4902d..788186b 100644 --- a/src/blog/themes/blog/layout/_partial/header.ejs +++ b/src/blog/themes/blog/layout/_partial/header.ejs @@ -1,20 +1,13 @@
    -
    -
    +
    +

    Kazhnuz

    -
    - +
    + Blog + Textes + A propos
    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 10f9817..b640d2c 100644 --- a/src/scss/_drawing.scss +++ b/src/scss/_drawing.scss @@ -67,6 +67,18 @@ a.article-nav-link-wrap { } } +.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; } diff --git a/src/scss/_global.scss b/src/scss/_global.scss index 570c0b1..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:11*$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 { @@ -165,6 +230,19 @@ footer { @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/components/_previews.scss b/src/scss/components/_previews.scss index 00e8760..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 { diff --git a/src/static/includes/_footer.html b/src/static/includes/_footer.html index 1012d51..b30291c 100644 --- a/src/static/includes/_footer.html +++ b/src/static/includes/_footer.html @@ -8,17 +8,18 @@ -
    -
    -

    Ce theme est diffusé sous licence Creative Common Attribution - Partage à l'Identique 4.0 - hors mention contraire.

    +
    +
    +

    Le contenue de ce site, sauf mention contraire, est diffusé sous licence Creative Common Attribution - Partage à l'Identique 4.0 - hors mention contraire.

    Cette licence vous autorise à partager et copier mes travaux, tant que vous me citiez en source, et que vous autorisez la même chose pour les travaux qui en seraient dérivés. N'hésitez pas à partager !

    -
    +

    Theme réalisé avec le quadriciel Bootstrap4 et la banque d'icone Fork-Awesome.

    +

    <%= __('powered_by') %> Hexo

    -
    +

    Code Source du site

    diff --git a/src/static/includes/_header.html b/src/static/includes/_header.html index 9c4902d..788186b 100644 --- a/src/static/includes/_header.html +++ b/src/static/includes/_header.html @@ -1,20 +1,13 @@
    -
    -
    +
    +

    Kazhnuz

    -
    - +
    + Blog + Textes + A propos
    diff --git a/src/textes/themes/blog/layout/_partial/footer.ejs b/src/textes/themes/blog/layout/_partial/footer.ejs index 5d23aba..b30291c 100644 --- a/src/textes/themes/blog/layout/_partial/footer.ejs +++ b/src/textes/themes/blog/layout/_partial/footer.ejs @@ -8,18 +8,18 @@ -
    -
    +
    +

    Le contenue de ce site, sauf mention contraire, est diffusé sous licence Creative Common Attribution - Partage à l'Identique 4.0 - hors mention contraire.

    Cette licence vous autorise à partager et copier mes travaux, tant que vous me citiez en source, et que vous autorisez la même chose pour les travaux qui en seraient dérivés. N'hésitez pas à partager !

    -
    +

    Theme réalisé avec le quadriciel Bootstrap4 et la banque d'icone Fork-Awesome.

    <%= __('powered_by') %> Hexo

    -
    +

    Code Source du site

    diff --git a/src/textes/themes/blog/layout/_partial/header.ejs b/src/textes/themes/blog/layout/_partial/header.ejs index 9c4902d..788186b 100644 --- a/src/textes/themes/blog/layout/_partial/header.ejs +++ b/src/textes/themes/blog/layout/_partial/header.ejs @@ -1,20 +1,13 @@
    -
    -
    +
    +

    Kazhnuz

    -
    - +
    + Blog + Textes + A propos