kazhnuz.space
/
kspace-static
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix: repair responsive design

This commit is contained in:
Kazhnuz 2020-05-19 21:13:35 +02:00
parent a5c07ffa24
commit 9df8b00773
10 changed files with 204 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/blog/themes/blog/layout/_partial/footer.ejs
View File

@ -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>

19
src/blog/themes/blog/layout/_partial/header.ejs
View File

@ -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>

63
src/scss/_definitions.scss
View File

@ -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)
}

12
src/scss/_drawing.scss
View File

@ -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;
}

98
src/scss/_global.scss
View File

@ -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 */

10
src/scss/components/_previews.scss
View File

@ -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 {

11
src/static/includes/_footer.html
View File

@ -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>

19
src/static/includes/_header.html
View File

@ -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
src/textes/themes/blog/layout/_partial/footer.ejs
View File

@ -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>

19
src/textes/themes/blog/layout/_partial/header.ejs
View File

@ -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>