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

improvement: use better collumn style for footer

Browse source
This commit is contained in:
Kazhnuz 2019-11-05 21:06:19 +01:00
parent 263fdf04bc
commit 2ea3c3a6ce
8 changed files with 1115 additions and 1388 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
blog.html
View file

@ -190,7 +190,7 @@
</div> </div>
<footer class="container"> <footer>
<ul class="social"> <ul class="social">
<li class="social-li"><a class="social-link" href="https://twitter.com/kazhnuz" alt="Twitter"><i class="fa fa-fw fa-twitter"></i></a></li> <li class="social-li"><a class="social-link" href="https://twitter.com/kazhnuz" alt="Twitter"><i class="fa fa-fw fa-twitter"></i></a></li>
<li class="social-li"><a class="social-link" href="https://octodon.social/users/kazhnuz" alt="Mastodon"><i class="fa fa-fw fa-mastodon"></i></a></li> <li class="social-li"><a class="social-link" href="https://octodon.social/users/kazhnuz" alt="Mastodon"><i class="fa fa-fw fa-mastodon"></i></a></li>
@ -201,16 +201,16 @@
</ul> </ul>
<div class="columns"> <div class="columns">
<div class="column col-md-4"> <div class="column">
<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 col-md-4"> <div class="column">
<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 col-md-4"> <div class="column">
<p>Lorem Ipsum.</p> <p>Lorem Ipsum.</p>
</div> </div>
</div> </div>

48
color-test.html
View file

@ -167,31 +167,31 @@ In id suscipit elit.</code></pre>
</div> </div>
<footer class="container"> <footer>
<ul class="social"> <ul class="social">
<li class="social-li"><a class="social-link" href="https://twitter.com/kazhnuz" alt="Twitter"><i class="fa fa-fw fa-twitter"></i></a></li> <li class="social-li"><a class="social-link" href="https://twitter.com/kazhnuz" alt="Twitter"><i class="fa fa-fw fa-twitter"></i></a></li>
<li class="social-li"><a class="social-link" href="https://octodon.social/users/kazhnuz" alt="Mastodon"><i class="fa fa-fw fa-mastodon"></i></a></li> <li class="social-li"><a class="social-link" href="https://octodon.social/users/kazhnuz" alt="Mastodon"><i class="fa fa-fw fa-mastodon"></i></a></li>
<li class="social-li"><a class="social-link" href="#" alt="Diaspora"><i class="fa fa-fw fa-diaspora"></i></a></li> <li class="social-li"><a class="social-link" href="#" alt="Diaspora"><i class="fa fa-fw fa-diaspora"></i></a></li>
<li class="social-li"><a class="social-link" href="#" alt="DeviantART"><i class="fa fa-fw fa-deviantart"></i></a></li> <li class="social-li"><a class="social-link" href="#" alt="DeviantART"><i class="fa fa-fw fa-deviantart"></i></a></li>
<li class="social-li"><a class="social-link" href="#" alt="Github"><i class="fa fa-fw fa-github"></i></a></li> <li class="social-li"><a class="social-link" href="#" alt="Github"><i class="fa fa-fw fa-github"></i></a></li>
<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="columns">
<div class="column col-md-4"> <div class="column">
<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 class="column col-md-4">
<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 col-md-4">
<p>Lorem Ipsum.</p>
</div>
</div> </div>
</footer>
<div class="column">
<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">
<p>Lorem Ipsum.</p>
</div>
</div>
</footer>

2296
css/style.css
View file

File diff suppressed because one or more lines are too long

20
index.html
View file

@ -33,7 +33,7 @@
<div class="column col-md-6"> <div class="column col-md-6">
<nav class="navbar"> <nav class="navbar">
<section class="navbar-section"> <section class="navbar-section">
</section> </section>
<section class="navbar-section"> <section class="navbar-section">
<a href="..." class="btn btn-link">Blog</a> <a href="..." class="btn btn-link">Blog</a>
@ -68,7 +68,7 @@
</section> </section>
<div class="previews-section"> <div class="previews-section">
<article class="card card-preview card-primary"> <article class="card card-preview card-primary">
<a href="#" class="preview-link"> <a href="#" class="preview-link">
<div class="preview-item"> <div class="preview-item">
@ -84,7 +84,7 @@
</div> </div>
</a> </a>
</article> </article>
<article class="card card-preview card-primary"> <article class="card card-preview card-primary">
<a href="#" class="preview-link"> <a href="#" class="preview-link">
<div class="preview-item"> <div class="preview-item">
@ -100,7 +100,7 @@
</div> </div>
</a> </a>
</article> </article>
<article class="card card-preview card-primary"> <article class="card card-preview card-primary">
<a href="#" class="preview-link"> <a href="#" class="preview-link">
<div class="preview-item"> <div class="preview-item">
@ -116,7 +116,7 @@
</div> </div>
</a> </a>
</article> </article>
<article class="card card-preview card-primary"> <article class="card card-preview card-primary">
<a href="#" class="preview-link"> <a href="#" class="preview-link">
<div class="preview-item"> <div class="preview-item">
@ -132,7 +132,7 @@
</div> </div>
</a> </a>
</article> </article>
</div> </div>
<img src="https://kazhnuz.space/data/medias/incoming____by_kazhnuz-d5o055l.gif" alt="Une armée de cochon regarde de manière menaçante." class="pigimg" /> <img src="https://kazhnuz.space/data/medias/incoming____by_kazhnuz-d5o055l.gif" alt="Une armée de cochon regarde de manière menaçante." class="pigimg" />
@ -214,7 +214,7 @@
</div> </div>
<footer class="container"> <footer>
<ul class="social"> <ul class="social">
<li class="social-li"><a class="social-link" href="https://twitter.com/kazhnuz" alt="Twitter"><i class="fa fa-fw fa-twitter"></i></a></li> <li class="social-li"><a class="social-link" href="https://twitter.com/kazhnuz" alt="Twitter"><i class="fa fa-fw fa-twitter"></i></a></li>
<li class="social-li"><a class="social-link" href="https://octodon.social/users/kazhnuz" alt="Mastodon"><i class="fa fa-fw fa-mastodon"></i></a></li> <li class="social-li"><a class="social-link" href="https://octodon.social/users/kazhnuz" alt="Mastodon"><i class="fa fa-fw fa-mastodon"></i></a></li>
@ -225,16 +225,16 @@
</ul> </ul>
<div class="columns"> <div class="columns">
<div class="column col-md-4"> <div class="column">
<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 col-md-4"> <div class="column">
<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 col-md-4"> <div class="column">
<p>Lorem Ipsum.</p> <p>Lorem Ipsum.</p>
</div> </div>
</div> </div>

8
personnage.html
View file

@ -157,7 +157,7 @@
</div> </div>
<footer class="container"> <footer>
<ul class="social"> <ul class="social">
<li class="social-li"><a class="social-link" href="https://twitter.com/kazhnuz" alt="Twitter"><i class="fa fa-fw fa-twitter"></i></a></li> <li class="social-li"><a class="social-link" href="https://twitter.com/kazhnuz" alt="Twitter"><i class="fa fa-fw fa-twitter"></i></a></li>
<li class="social-li"><a class="social-link" href="https://octodon.social/users/kazhnuz" alt="Mastodon"><i class="fa fa-fw fa-mastodon"></i></a></li> <li class="social-li"><a class="social-link" href="https://octodon.social/users/kazhnuz" alt="Mastodon"><i class="fa fa-fw fa-mastodon"></i></a></li>
@ -168,16 +168,16 @@
</ul> </ul>
<div class="columns"> <div class="columns">
<div class="column col-md-4"> <div class="column">
<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 col-md-4"> <div class="column">
<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 col-md-4"> <div class="column">
<p>Lorem Ipsum.</p> <p>Lorem Ipsum.</p>
</div> </div>
</div> </div>

48
preview.html
View file

@ -183,31 +183,31 @@
</div> </div>
<footer class="container"> <footer>
<ul class="social"> <ul class="social">
<li class="social-li"><a class="social-link" href="https://twitter.com/kazhnuz" alt="Twitter"><i class="fa fa-fw fa-twitter"></i></a></li> <li class="social-li"><a class="social-link" href="https://twitter.com/kazhnuz" alt="Twitter"><i class="fa fa-fw fa-twitter"></i></a></li>
<li class="social-li"><a class="social-link" href="https://octodon.social/users/kazhnuz" alt="Mastodon"><i class="fa fa-fw fa-mastodon"></i></a></li> <li class="social-li"><a class="social-link" href="https://octodon.social/users/kazhnuz" alt="Mastodon"><i class="fa fa-fw fa-mastodon"></i></a></li>
<li class="social-li"><a class="social-link" href="#" alt="Diaspora"><i class="fa fa-fw fa-diaspora"></i></a></li> <li class="social-li"><a class="social-link" href="#" alt="Diaspora"><i class="fa fa-fw fa-diaspora"></i></a></li>
<li class="social-li"><a class="social-link" href="#" alt="DeviantART"><i class="fa fa-fw fa-deviantart"></i></a></li> <li class="social-li"><a class="social-link" href="#" alt="DeviantART"><i class="fa fa-fw fa-deviantart"></i></a></li>
<li class="social-li"><a class="social-link" href="#" alt="Github"><i class="fa fa-fw fa-github"></i></a></li> <li class="social-li"><a class="social-link" href="#" alt="Github"><i class="fa fa-fw fa-github"></i></a></li>
<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="columns">
<div class="column col-md-4"> <div class="column">
<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 class="column col-md-4">
<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 col-md-4">
<p>Lorem Ipsum.</p>
</div>
</div> </div>
</footer>
<div class="column">
<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">
<p>Lorem Ipsum.</p>
</div>
</div>
</footer>

27
scss/_global.scss
View file

@ -11,11 +11,9 @@
} }
} }
@mixin limitedSize() { @mixin container-big() {
.columns { padding-left: 3*1.5rem;
max-width: 1024px; padding-right: 3*1.5rem;
margin:auto;
}
} }
.no-pills { .no-pills {
@ -34,7 +32,7 @@
background: $color-turquoise url('../img/background.png') center bottom repeat-x; background: $color-turquoise url('../img/background.png') center bottom repeat-x;
height:10*1.5rem; height:10*1.5rem;
border-top: 6px solid $color-dark2; border-top: 6px solid $color-dark2;
@include limitedSize(); @include container-big();
} }
header h1 { header h1 {
@ -44,8 +42,13 @@ header h1 {
font-size:5.4em; font-size:5.4em;
font-style:oblique; font-style:oblique;
padding-bottom:0px; padding-bottom:0px;
margin:auto;
line-height: 1.5em; line-height: 1.5em;
img {
width: 100%;
height: auto;
margin-top:0.75rem;
}
} }
.navbar { .navbar {
@ -64,11 +67,6 @@ header h1 {
} }
/* ------------------ CONTAINERS ------------------- */ /* ------------------ CONTAINERS ------------------- */
@mixin container-big() {
padding-left: 3*1.5rem;
padding-right: 3*1.5rem;
}
.container-big { .container-big {
@include container-big(); @include container-big();
} }
@ -164,7 +162,8 @@ body {
footer { footer {
color: $color-footer-text; color: $color-footer-text;
margin-top:1.5em; margin-top:1.5em;
@include limitedSize(); @include container-big();
font-size: 0.8rem!important;
} }
/* social media */ /* social media */
@ -192,4 +191,4 @@ ul.social {
} }
} }
} }
} }

48
writing-test.html
View file

@ -131,31 +131,31 @@
</div> </div>
<footer class="container"> <footer>
<ul class="social"> <ul class="social">
<li class="social-li"><a class="social-link" href="https://twitter.com/kazhnuz" alt="Twitter"><i class="fa fa-fw fa-twitter"></i></a></li> <li class="social-li"><a class="social-link" href="https://twitter.com/kazhnuz" alt="Twitter"><i class="fa fa-fw fa-twitter"></i></a></li>
<li class="social-li"><a class="social-link" href="https://octodon.social/users/kazhnuz" alt="Mastodon"><i class="fa fa-fw fa-mastodon"></i></a></li> <li class="social-li"><a class="social-link" href="https://octodon.social/users/kazhnuz" alt="Mastodon"><i class="fa fa-fw fa-mastodon"></i></a></li>
<li class="social-li"><a class="social-link" href="#" alt="Diaspora"><i class="fa fa-fw fa-diaspora"></i></a></li> <li class="social-li"><a class="social-link" href="#" alt="Diaspora"><i class="fa fa-fw fa-diaspora"></i></a></li>
<li class="social-li"><a class="social-link" href="#" alt="DeviantART"><i class="fa fa-fw fa-deviantart"></i></a></li> <li class="social-li"><a class="social-link" href="#" alt="DeviantART"><i class="fa fa-fw fa-deviantart"></i></a></li>
<li class="social-li"><a class="social-link" href="#" alt="Github"><i class="fa fa-fw fa-github"></i></a></li> <li class="social-li"><a class="social-link" href="#" alt="Github"><i class="fa fa-fw fa-github"></i></a></li>
<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="columns">
<div class="column col-md-4"> <div class="column">
<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 class="column col-md-4">
<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 col-md-4">
<p>Lorem Ipsum.</p>
</div>
</div> </div>
</footer>
<div class="column">
<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">
<p>Lorem Ipsum.</p>
</div>
</div>
</footer>