improvement: use latest css and static pages

This commit is contained in:
Kazhnuz 2020-11-08 20:17:49 +01:00
parent 5b5ec0b576
commit f612838b6b
10 changed files with 303 additions and 40 deletions

View file

@ -34,6 +34,69 @@ $fontweight_hyper: 800;
$basefont: Open Sans, sans-serif; $basefont: Open Sans, sans-serif;
$titlefont: Amatic SC, 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() { @mixin borders() {
border: $border-size solid rgba(0, 0, 0, 0.3) border: $border-size solid rgba(0, 0, 0, 0.3)
} }

View file

@ -10,3 +10,89 @@
@import 'components/buttons'; @import 'components/buttons';
@import 'components/previews'; @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);
}
}
}

View file

@ -12,8 +12,23 @@
} }
@mixin container-big() { @mixin container-big() {
padding-left: 3*$lineheight; padding-left: $lineheight/2;
padding-right: 3*$lineheight; 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 { .no-pills {
@ -30,9 +45,45 @@
#page-header { #page-header {
background: $color-turquoise url('img/background.png') center bottom repeat-x; background: $color-turquoise url('img/background.png') center bottom repeat-x;
height:10*$lineheight;
border-top: 6px solid $color-dark2; border-top: 6px solid $color-dark2;
@include container-big(); @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 { header h1 {
@ -73,32 +124,46 @@ header h1 {
.container-blog { .container-blog {
@include container-big(); @include container-big();
display: grid; display: grid;
grid-template-columns: auto 360px; grid-template-columns: 1fr;
grid-template-rows: auto; grid-template-rows: auto;
row-gap: $lineheight; row-gap: $lineheight;
column-gap: 3rem; 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; grid-area: main;
} }
section.sidebar { .sidebar {
grid-area: sidebar; grid-area: side;
} }
.container-preview { .container-preview {
@include container-big(); @include container-big();
display: grid; display: grid;
grid-template-columns: 360px auto; grid-template-columns: 1fr;
grid-template-rows: auto; grid-template-rows: auto;
row-gap: $lineheight; row-gap: $lineheight;
column-gap: 3rem; 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 { .container-onecolumn {
@ -161,9 +226,23 @@ body {
footer { footer {
color: $color-footer-text; color: $color-footer-text;
margin-top:1.5em; margin-top:1.5rem;
@include container-big(); @include container-big();
font-size: 0.8rem!important; 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 */ /* social media */

View file

@ -55,6 +55,7 @@ p {
ul, ol { ul, ol {
@include paragraph(); @include paragraph();
list-style: disc;
ul, ol { ul, ol {
padding-bottom:0; padding-bottom:0;
margin:0; margin:0;
@ -72,6 +73,12 @@ ul, ol {
/* 2.2 - Text Wrapper */ /* 2.2 - Text Wrapper */
.container-typographic { .container-typographic {
p {
padding:0;
margin:0;
text-indent: 3rem;
}
p, em, p em { p, em, p em {
font-weight:$fontweight_base; font-weight:$fontweight_base;
} }
@ -234,6 +241,7 @@ code {
.container-typographic { .container-typographic {
max-width: 800px; max-width: 800px;
margin:auto; margin:auto;
margin-bottom: 3rem;
} }

View file

@ -11,6 +11,11 @@ $button_large: $lineheight;
$button_small: $lineheight_quarter; $button_small: $lineheight_quarter;
@mixin button($size) { @mixin button($size) {
@include button-nobiseau($size);
@include biseau($size);
}
@mixin button-nobiseau($size) {
padding: $size; padding: $size;
padding-top: $size/3; padding-top: $size/3;
padding-bottom: $size/3; padding-bottom: $size/3;
@ -31,8 +36,6 @@ $button_small: $lineheight_quarter;
background-color:transparent; background-color:transparent;
} }
@include biseau($size);
&:focus { &:focus {
outline: none; outline: none;
box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0); 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) { @mixin button-fullcontrol($background-color, $hover-color, $text-color) {
@include colorize-button($background-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 > & { &:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
@include colorize-button($hover-color, lighten($text-color, 5%)); @include colorize-button($hover-color, lighten($text-color, 5%));
} }
@ -91,7 +97,7 @@ $button_small: $lineheight_quarter;
// NAVBAR SPECIAL BUTTONS // NAVBAR SPECIAL BUTTONS
.navbar .btn-link { .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 { .btn-readmore {

View file

@ -66,6 +66,9 @@ $card-smallpad: $lineheight_half;
&-header { &-header {
@include card-header($card-bigpad); @include card-header($card-bigpad);
.fa {
margin-right: 0.5em;
}
} }
/* Menu handling */ /* Menu handling */
@ -73,7 +76,19 @@ $card-smallpad: $lineheight_half;
&-menu { &-menu {
display:flex; display:flex;
flex-direction: column; 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; display:flex;
line-height:$lineheight; line-height:$lineheight;
padding-right:$lineheight_half; padding-right:$lineheight_half;
@ -89,6 +104,11 @@ $card-smallpad: $lineheight_half;
overflow:hidden; overflow:hidden;
@include biseau($lineheight_half); @include biseau($lineheight_half);
strong {
font-weight: 900;
color:$color-dark!important;
}
} }
a { a {

View file

@ -7,10 +7,18 @@ $preview-height: 8*$lineheight;
.previews-section { .previews-section {
display: grid; display: grid;
grid-template-columns: auto auto auto; grid-template-columns: 1fr;
grid-template-rows: auto; grid-template-rows: auto;
grid-gap: $lineheight; grid-gap: $lineheight;
padding-bottom: $lineheight; padding-bottom: $lineheight;
@include xl() {
grid-template-columns: 1fr 1fr;
}
@include xxl() {
grid-template-columns: 1fr 1fr 1fr;
}
} }
.preview-container { .preview-container {
@ -187,11 +195,11 @@ $preview-height: 8*$lineheight;
} }
.mwarea { .mwarea {
height:5*$lineheight; padding-bottom: $lineheight;
} }
.mwaimg { .mwaimg {
width:auto; width:100%;
height:auto; height:auto;
display:block; display:block;
margin:auto; margin:auto;

View file

@ -8,17 +8,17 @@
<li class="social-li"><a class="social-link" href="#" alt="Gitlab"><i class="fa fa-fw fa-gitlab"></i></a></li> <li class="social-li"><a class="social-link" href="#" alt="Gitlab"><i class="fa fa-fw fa-gitlab"></i></a></li>
</ul> </ul>
<div class="columns"> <div class="footer-collumns">
<div class="column"> <div>
<p>Ce theme est diffusé sous licence <strong>Creative Common Attribution - Partage à l'Identique 4.0</strong> - hors mention contraire.</p> <p>Ce theme 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> <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>
<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>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>
</div> </div>
<div class="column"> <div>
<p>Connection à <a href="admin/connection.html">l'interface administrateur</a></p> <p>Connection à <a href="admin/connection.html">l'interface administrateur</a></p>
</div> </div>
</div> </div>

View file

@ -1,20 +1,13 @@
<header id="page-header"> <header id="page-header">
<div class="columns"> <div class="header-collumns">
<div class="column col-6"> <div class="logo-area">
<h1><a href="/"><img src="img/logo.png" alt="Kazhnuz"/></a></h1> <h1><a href="/"><img src="/img/logo.png" alt="Kazhnuz"/></a></h1>
</div> </div>
<div class="column col-md-6"> <div class="navbar-area">
<nav class="navbar"> <a href="/blog.html" class="btn btn-navbar">Blog</a>
<section class="navbar-section"> <a href="/crea.html" class="btn btn-navbar">Gallerie</a>
<a href="/apropos.html" class="btn btn-navbar">A propos</a>
</section>
<section class="navbar-section">
<a href="/blog" class="btn btn-link">Blog</a>
<a href="/crea.html" class="btn btn-link">Gallerie</a>
<a href="/apropos.html" class="btn btn-link">A propos</a>
</section>
</nav>
</div> </div>
</div> </div>
</header> </header>

View file

@ -4,7 +4,7 @@
<!-- framework utilisés --> <!-- framework utilisés -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,800&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Amatic+SC&display=swap" rel="stylesheet">
<link href="dep/spectre/css/spectre.min.css" rel="stylesheet"> <link href="/dep/spectre/css/spectre.min.css" rel="stylesheet">
<link href="dep/fork-awesome/css/fork-awesome.css" rel="stylesheet"> <link href="/dep/fork-awesome/css/fork-awesome.css" rel="stylesheet">
<link href="style.css" rel="stylesheet"> <link href="/style.css" rel="stylesheet">