kazhnuz/kazhnuz.css
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

improvement: use latest css and static pages

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

86
src/scss/_drawing.scss
View file

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

101
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: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 */

8
src/scss/_typography.scss
View file

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

14
src/scss/components/_buttons.scss
View file

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

22
src/scss/components/_cards.scss
View file

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

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

8
src/static/includes/_footer.html
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>
</ul>
<div class="columns">
<div class="column">
<div class="footer-collumns">
<div>
<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>
</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>
</div>
<div class="column">
<div>
<p>Connection à <a href="admin/connection.html">l'interface administrateur</a></p>
</div>
</div>

21
src/static/includes/_header.html
View file

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

6
src/static/includes/_links.html
View file

@ -4,7 +4,7 @@
<!-- 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=Amatic+SC&display=swap" 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/spectre/css/spectre.min.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">