Ajout de Github sur mobile + meilleure gestion de l'affichage

This commit is contained in:
Anthony Dumas 2019-03-15 16:01:02 +01:00
parent 7972c5bc4f
commit 49dc04ec25
3 changed files with 33 additions and 10 deletions

View File

@ -44,6 +44,7 @@ $info:$myrtle-green;
$info-invert:#fff; $info-invert:#fff;
$footer-color:$deep-koamaru; $footer-color:$deep-koamaru;
$link:$neon-carrot; $link:$neon-carrot;
$link-hover:"";
html { html {
background-color: $primary; background-color: $primary;
@ -92,6 +93,14 @@ div.hero-body {
padding-left: 5%; padding-left: 5%;
} }
@media screen and (max-width: 768px) {
.button.is-fullwidth-mobile {
display: flex;
width: 100%;
}
}
@font-face { @font-face {
font-family: "icomoon"; font-family: "icomoon";
src: url("../font/fonts/icomoon.eot"); src: url("../font/fonts/icomoon.eot");

View File

@ -346,7 +346,7 @@ a {
a strong { a strong {
color: currentColor; } color: currentColor; }
a:hover { a:hover {
color: #363636; } color: ""; }
code { code {
background-color: whitesmoke; background-color: whitesmoke;
@ -1215,7 +1215,7 @@ a.box:active {
margin-right: calc(-0.375em - 1px); } margin-right: calc(-0.375em - 1px); }
.button:hover, .button.is-hovered { .button:hover, .button.is-hovered {
border-color: #b5b5b5; border-color: #b5b5b5;
color: #363636; } color: ""; }
.button:focus, .button.is-focused { .button:focus, .button.is-focused {
border-color: #3273dc; border-color: #3273dc;
color: #363636; } color: #363636; }
@ -3685,7 +3685,7 @@ a.tag:hover {
justify-content: center; justify-content: center;
padding: 0 0.75em; } padding: 0 0.75em; }
.breadcrumb a:hover { .breadcrumb a:hover {
color: #363636; } color: ""; }
.breadcrumb li { .breadcrumb li {
align-items: center; align-items: center;
display: flex; } display: flex; }
@ -5021,7 +5021,7 @@ a.navbar-item,
.pagination-next:hover, .pagination-next:hover,
.pagination-link:hover { .pagination-link:hover {
border-color: #b5b5b5; border-color: #b5b5b5;
color: #363636; } color: ""; }
.pagination-previous:focus, .pagination-previous:focus,
.pagination-next:focus, .pagination-next:focus,
.pagination-link:focus { .pagination-link:focus {
@ -6983,6 +6983,11 @@ div.hero-body {
.btn-centered div.column.hasContent { .btn-centered div.column.hasContent {
padding-left: 5%; } padding-left: 5%; }
@media screen and (max-width: 768px) {
.button.is-fullwidth-mobile {
display: flex;
width: 100%; } }
@font-face { @font-face {
font-family: "icomoon"; font-family: "icomoon";
src: url("../font/fonts/icomoon.eot"); src: url("../font/fonts/icomoon.eot");

View File

@ -28,7 +28,7 @@
<div class="hero-body"> <div class="hero-body">
<div class="container"> <div class="container">
<div class="columns"> <div class="columns">
<div class="column is-offset-1 dontPrint"></div> <div class="column is-offset-1 is-narrow-tablet dontPrint"></div>
<div id="idCard" class="column is-3 is-hidden-mobile"> <div id="idCard" class="column is-3 is-hidden-mobile">
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
@ -64,7 +64,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="column is-narrow" id="experiences"> <div class="column is-narrow-desktop" id="experiences">
<span class="title">Experience</span> <span class="title">Experience</span>
<div class="card-content" id="harvest"> <div class="card-content" id="harvest">
<div class="media"> <div class="media">
@ -137,7 +137,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="column is-offset-1 dontPrint"></div> <div class="column is-offset-1 is-narrow-tablet dontPrint"></div>
</div> </div>
</div> </div>
</section> </section>
@ -157,7 +157,7 @@
<div class="columns btn-centered"> <div class="columns btn-centered">
<div class="column is-offset-1"></div> <div class="column is-offset-1"></div>
<div class="column is-3 hasContent"> <div class="column is-3 hasContent">
<a class="button is-large" href="mailto:anthony@dumas.cc"> <a class="button is-large is-fullwidth-mobile" href="mailto:anthony@dumas.cc">
<span class="icon"> <span class="icon">
<i class="fab icon-envelope-open"></i> <i class="fab icon-envelope-open"></i>
</span> </span>
@ -165,7 +165,8 @@
</a> </a>
</div> </div>
<div class="column is-3 hasContent"> <div class="column is-3 hasContent">
<a class="button is-large" href="https://www.linkedin.com/in/anthonyyvondumas/" target="_blank"> <a class="button is-large is-fullwidth-mobile" href="https://www.linkedin.com/in/anthonyyvondumas/"
target="_blank">
<span class="icon"> <span class="icon">
<i class="fab icon-linke-square"></i> <i class="fab icon-linke-square"></i>
</span> </span>
@ -173,13 +174,21 @@
</a> </a>
</div> </div>
<div class="column is-3 hasContent"> <div class="column is-3 hasContent">
<a class="button is-large" href="https://t.me/adamas_FR" target="_blank"> <a class="button is-large is-fullwidth-mobile" href="https://t.me/adamas_FR" target="_blank">
<span class="icon"> <span class="icon">
<i class="fab icon-teleg"></i> <i class="fab icon-teleg"></i>
</span> </span>
<span>Telegram</span> <span>Telegram</span>
</a> </a>
</div> </div>
<div class="column is-3 hasContent is-hidden-desktop">
<a class="button is-large is-fullwidth-mobile" href="https://t.me/adamas_FR" target="_blank">
<span class="icon">
<i class="fab icon-github-alt"></i>
</span>
<span>Github</span>
</a>
</div>
<div class="column is-offset-1"></div> <div class="column is-offset-1"></div>
</div> </div>
</div> </div>