kazhnuz/kazhnuz.css
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>

8
color-test.html
View file

@ -167,7 +167,7 @@ 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>
@ -178,16 +178,16 @@ In id suscipit elit.</code></pre>
</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>

1420
css/style.css
View file

File diff suppressed because one or more lines are too long

8
index.html
View file

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

8
preview.html
View file

@ -183,7 +183,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>
@ -194,16 +194,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>

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

8
writing-test.html
View file

@ -131,7 +131,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>
@ -142,16 +142,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>