fix: repair responsive design
This commit is contained in:
Kazhnuz
parent
a5c07ffa24
commit
9df8b00773
10 changed files with 204 additions and 63 deletions
|
|
@ -8,18 +8,18 @@
|
|||
<li class="social-li"><a class="social-link" href="#" alt="Gitlab"><i class="fa fa-fw fa-gitlab"></i></a></li>
|
||||
</ul>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="footer-collumns">
|
||||
<div>
|
||||
<p>Le contenue de ce site, sauf mention contraire, est diffusé sous licence <strong>Creative Common Attribution - Partage à l'Identique 4.0</strong> - hors mention contraire.</p>
|
||||
<p>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 ! <i style="color:#FF0000" class="fa fa-heart"></i></p>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<div>
|
||||
<p>Theme réalisé avec le quadriciel <a href="https://getbootstrap.com/">Bootstrap4</a> et la banque d'icone <a href="https://forkawesome.github.io/Fork-Awesome/">Fork-Awesome</a>.</p>
|
||||
<p><%= __('powered_by') %> <a href="http://hexo.io/" target="_blank">Hexo</a></p>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<div>
|
||||
<p><a href="https://git.chlore.net/Kazhnuz/kazhnuz.space">Code Source</a> du site</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,13 @@
|
|||
<header id="page-header">
|
||||
<div class="columns">
|
||||
<div class="column col-6">
|
||||
<div class="header-collumns">
|
||||
<div class="logo-area">
|
||||
<h1><a href="/"><img src="/img/logo.png" alt="Kazhnuz"/></a></h1>
|
||||
</div>
|
||||
|
||||
<div class="column col-md-6">
|
||||
<nav class="navbar">
|
||||
<section class="navbar-section">
|
||||
|
||||
</section>
|
||||
<section class="navbar-section">
|
||||
<a href="/blog" class="btn btn-link">Blog</a>
|
||||
<a href="/textes" class="btn btn-link">Textes</a>
|
||||
<a href="/apropos.html" class="btn btn-link">A propos</a>
|
||||
</section>
|
||||
</nav>
|
||||
<div class="navbar-area">
|
||||
<a href="/blog" class="btn btn-navbar">Blog</a>
|
||||
<a href="/textes" class="btn btn-navbar">Textes</a>
|
||||
<a href="/apropos.html" class="btn btn-navbar">A propos</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -8,17 +8,18 @@
|
|||
<li class="social-li"><a class="social-link" href="#" alt="Gitlab"><i class="fa fa-fw fa-gitlab"></i></a></li>
|
||||
</ul>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p>Ce theme est diffusé sous licence <strong>Creative Common Attribution - Partage à l'Identique 4.0</strong> - hors mention contraire.</p>
|
||||
<div class="footer-collumns">
|
||||
<div>
|
||||
<p>Le contenue de ce site, sauf mention contraire, est diffusé sous licence <strong>Creative Common Attribution - Partage à l'Identique 4.0</strong> - hors mention contraire.</p>
|
||||
<p>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 ! <i style="color:#FF0000" class="fa fa-heart"></i></p>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<div>
|
||||
<p>Theme réalisé avec le quadriciel <a href="https://getbootstrap.com/">Bootstrap4</a> et la banque d'icone <a href="https://forkawesome.github.io/Fork-Awesome/">Fork-Awesome</a>.</p>
|
||||
<p><%= __('powered_by') %> <a href="http://hexo.io/" target="_blank">Hexo</a></p>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<div>
|
||||
<p><a href="https://git.chlore.net/Kazhnuz/kazhnuz.space">Code Source</a> du site</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,13 @@
|
|||
<header id="page-header">
|
||||
<div class="columns">
|
||||
<div class="column col-6">
|
||||
<div class="header-collumns">
|
||||
<div class="logo-area">
|
||||
<h1><a href="/"><img src="/img/logo.png" alt="Kazhnuz"/></a></h1>
|
||||
</div>
|
||||
|
||||
<div class="column col-md-6">
|
||||
<nav class="navbar">
|
||||
<section class="navbar-section">
|
||||
|
||||
</section>
|
||||
<section class="navbar-section">
|
||||
<a href="/blog" class="btn btn-link">Blog</a>
|
||||
<a href="/textes" class="btn btn-link">Textes</a>
|
||||
<a href="/apropos.html" class="btn btn-link">A propos</a>
|
||||
</section>
|
||||
</nav>
|
||||
<div class="navbar-area">
|
||||
<a href="/blog" class="btn btn-navbar">Blog</a>
|
||||
<a href="/textes" class="btn btn-navbar">Textes</a>
|
||||
<a href="/apropos.html" class="btn btn-navbar">A propos</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -8,18 +8,18 @@
|
|||
<li class="social-li"><a class="social-link" href="#" alt="Gitlab"><i class="fa fa-fw fa-gitlab"></i></a></li>
|
||||
</ul>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="footer-collumns">
|
||||
<div>
|
||||
<p>Le contenue de ce site, sauf mention contraire, est diffusé sous licence <strong>Creative Common Attribution - Partage à l'Identique 4.0</strong> - hors mention contraire.</p>
|
||||
<p>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 ! <i style="color:#FF0000" class="fa fa-heart"></i></p>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<div>
|
||||
<p>Theme réalisé avec le quadriciel <a href="https://getbootstrap.com/">Bootstrap4</a> et la banque d'icone <a href="https://forkawesome.github.io/Fork-Awesome/">Fork-Awesome</a>.</p>
|
||||
<p><%= __('powered_by') %> <a href="http://hexo.io/" target="_blank">Hexo</a></p>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<div>
|
||||
<p><a href="https://git.chlore.net/Kazhnuz/kazhnuz.space">Code Source</a> du site</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,13 @@
|
|||
<header id="page-header">
|
||||
<div class="columns">
|
||||
<div class="column col-6">
|
||||
<div class="header-collumns">
|
||||
<div class="logo-area">
|
||||
<h1><a href="/"><img src="/img/logo.png" alt="Kazhnuz"/></a></h1>
|
||||
</div>
|
||||
|
||||
<div class="column col-md-6">
|
||||
<nav class="navbar">
|
||||
<section class="navbar-section">
|
||||
|
||||
</section>
|
||||
<section class="navbar-section">
|
||||
<a href="/blog" class="btn btn-link">Blog</a>
|
||||
<a href="/textes" class="btn btn-link">Textes</a>
|
||||
<a href="/apropos.html" class="btn btn-link">A propos</a>
|
||||
</section>
|
||||
</nav>
|
||||
<div class="navbar-area">
|
||||
<a href="/blog" class="btn btn-navbar">Blog</a>
|
||||
<a href="/textes" class="btn btn-navbar">Textes</a>
|
||||
<a href="/apropos.html" class="btn btn-navbar">A propos</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
Reference in a new issue