Meilleur support de la bannière et meilleur espacement
This commit is contained in:
Anthony Dumas
parent
d64f7585fc
commit
889cc54a97
@ -26,11 +26,12 @@ $primary-invert: $pink-invert;
|
||||
// 4. Import the rest of Bulma
|
||||
*/
|
||||
|
||||
$primary: #3c3c3c;
|
||||
$primary-invert:#fff;
|
||||
$primary: #fff;
|
||||
$primary-invert:#3c3c3c;
|
||||
|
||||
@import "../node_modules/bulma/bulma";
|
||||
|
||||
#menu {
|
||||
text-shadow: 1px 1px 3px #3c3c3c99;
|
||||
#idCard .hero-body {
|
||||
padding-bottom: 2rem;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
215
css/main.css
215
css/main.css
@ -733,13 +733,13 @@ a.has-text-dark:hover, a.has-text-dark:focus {
|
||||
background-color: #363636 !important; }
|
||||
|
||||
.has-text-primary {
|
||||
color: #3c3c3c !important; }
|
||||
color: #fff !important; }
|
||||
|
||||
a.has-text-primary:hover, a.has-text-primary:focus {
|
||||
color: #232323 !important; }
|
||||
color: #e6e6e6 !important; }
|
||||
|
||||
.has-background-primary {
|
||||
background-color: #3c3c3c !important; }
|
||||
background-color: #fff !important; }
|
||||
|
||||
.has-text-link {
|
||||
color: #3273dc !important; }
|
||||
@ -1487,69 +1487,69 @@ a.box:active {
|
||||
box-shadow: none;
|
||||
color: whitesmoke; }
|
||||
.button.is-primary {
|
||||
background-color: #3c3c3c;
|
||||
background-color: #fff;
|
||||
border-color: transparent;
|
||||
color: #fff; }
|
||||
color: #3c3c3c; }
|
||||
.button.is-primary:hover, .button.is-primary.is-hovered {
|
||||
background-color: #363636;
|
||||
background-color: #f9f9f9;
|
||||
border-color: transparent;
|
||||
color: #fff; }
|
||||
color: #3c3c3c; }
|
||||
.button.is-primary:focus, .button.is-primary.is-focused {
|
||||
border-color: transparent;
|
||||
color: #fff; }
|
||||
color: #3c3c3c; }
|
||||
.button.is-primary:focus:not(:active), .button.is-primary.is-focused:not(:active) {
|
||||
box-shadow: 0 0 0 0.125em rgba(60, 60, 60, 0.25); }
|
||||
box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25); }
|
||||
.button.is-primary:active, .button.is-primary.is-active {
|
||||
background-color: #2f2f2f;
|
||||
background-color: #f2f2f2;
|
||||
border-color: transparent;
|
||||
color: #fff; }
|
||||
color: #3c3c3c; }
|
||||
.button.is-primary[disabled],
|
||||
fieldset[disabled] .button.is-primary {
|
||||
background-color: #3c3c3c;
|
||||
background-color: #fff;
|
||||
border-color: transparent;
|
||||
box-shadow: none; }
|
||||
.button.is-primary.is-inverted {
|
||||
background-color: #fff;
|
||||
color: #3c3c3c; }
|
||||
background-color: #3c3c3c;
|
||||
color: #fff; }
|
||||
.button.is-primary.is-inverted:hover {
|
||||
background-color: #f2f2f2; }
|
||||
background-color: #2f2f2f; }
|
||||
.button.is-primary.is-inverted[disabled],
|
||||
fieldset[disabled] .button.is-primary.is-inverted {
|
||||
background-color: #fff;
|
||||
background-color: #3c3c3c;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
color: #3c3c3c; }
|
||||
.button.is-primary.is-loading::after {
|
||||
border-color: transparent transparent #fff #fff !important; }
|
||||
.button.is-primary.is-outlined {
|
||||
background-color: transparent;
|
||||
border-color: #3c3c3c;
|
||||
color: #3c3c3c; }
|
||||
.button.is-primary.is-outlined:hover, .button.is-primary.is-outlined:focus {
|
||||
background-color: #3c3c3c;
|
||||
border-color: #3c3c3c;
|
||||
color: #fff; }
|
||||
.button.is-primary.is-outlined.is-loading::after {
|
||||
border-color: transparent transparent #3c3c3c #3c3c3c !important; }
|
||||
.button.is-primary.is-outlined[disabled],
|
||||
fieldset[disabled] .button.is-primary.is-outlined {
|
||||
background-color: transparent;
|
||||
border-color: #3c3c3c;
|
||||
box-shadow: none;
|
||||
color: #3c3c3c; }
|
||||
.button.is-primary.is-inverted.is-outlined {
|
||||
.button.is-primary.is-loading::after {
|
||||
border-color: transparent transparent #3c3c3c #3c3c3c !important; }
|
||||
.button.is-primary.is-outlined {
|
||||
background-color: transparent;
|
||||
border-color: #fff;
|
||||
color: #fff; }
|
||||
.button.is-primary.is-inverted.is-outlined:hover, .button.is-primary.is-inverted.is-outlined:focus {
|
||||
.button.is-primary.is-outlined:hover, .button.is-primary.is-outlined:focus {
|
||||
background-color: #fff;
|
||||
border-color: #fff;
|
||||
color: #3c3c3c; }
|
||||
.button.is-primary.is-inverted.is-outlined[disabled],
|
||||
fieldset[disabled] .button.is-primary.is-inverted.is-outlined {
|
||||
.button.is-primary.is-outlined.is-loading::after {
|
||||
border-color: transparent transparent #fff #fff !important; }
|
||||
.button.is-primary.is-outlined[disabled],
|
||||
fieldset[disabled] .button.is-primary.is-outlined {
|
||||
background-color: transparent;
|
||||
border-color: #fff;
|
||||
box-shadow: none;
|
||||
color: #fff; }
|
||||
.button.is-primary.is-inverted.is-outlined {
|
||||
background-color: transparent;
|
||||
border-color: #3c3c3c;
|
||||
color: #3c3c3c; }
|
||||
.button.is-primary.is-inverted.is-outlined:hover, .button.is-primary.is-inverted.is-outlined:focus {
|
||||
background-color: #3c3c3c;
|
||||
color: #fff; }
|
||||
.button.is-primary.is-inverted.is-outlined[disabled],
|
||||
fieldset[disabled] .button.is-primary.is-inverted.is-outlined {
|
||||
background-color: transparent;
|
||||
border-color: #3c3c3c;
|
||||
box-shadow: none;
|
||||
color: #3c3c3c; }
|
||||
.button.is-link {
|
||||
background-color: #3273dc;
|
||||
border-color: transparent;
|
||||
@ -2224,13 +2224,13 @@ a.box:active {
|
||||
box-shadow: 0 0 0 0.125em rgba(54, 54, 54, 0.25); }
|
||||
.input.is-primary,
|
||||
.textarea.is-primary {
|
||||
border-color: #3c3c3c; }
|
||||
border-color: #fff; }
|
||||
.input.is-primary:focus, .input.is-primary.is-focused, .input.is-primary:active, .input.is-primary.is-active,
|
||||
.textarea.is-primary:focus,
|
||||
.textarea.is-primary.is-focused,
|
||||
.textarea.is-primary:active,
|
||||
.textarea.is-primary.is-active {
|
||||
box-shadow: 0 0 0 0.125em rgba(60, 60, 60, 0.25); }
|
||||
box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25); }
|
||||
.input.is-link,
|
||||
.textarea.is-link {
|
||||
border-color: #3273dc; }
|
||||
@ -2445,13 +2445,13 @@ a.box:active {
|
||||
.select.is-dark select:focus, .select.is-dark select.is-focused, .select.is-dark select:active, .select.is-dark select.is-active {
|
||||
box-shadow: 0 0 0 0.125em rgba(54, 54, 54, 0.25); }
|
||||
.select.is-primary:not(:hover)::after {
|
||||
border-color: #3c3c3c; }
|
||||
border-color: #fff; }
|
||||
.select.is-primary select {
|
||||
border-color: #3c3c3c; }
|
||||
border-color: #fff; }
|
||||
.select.is-primary select:hover, .select.is-primary select.is-hovered {
|
||||
border-color: #2f2f2f; }
|
||||
border-color: #f2f2f2; }
|
||||
.select.is-primary select:focus, .select.is-primary select.is-focused, .select.is-primary select:active, .select.is-primary select.is-active {
|
||||
box-shadow: 0 0 0 0.125em rgba(60, 60, 60, 0.25); }
|
||||
box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25); }
|
||||
.select.is-link:not(:hover)::after {
|
||||
border-color: #3273dc; }
|
||||
.select.is-link select {
|
||||
@ -2588,21 +2588,21 @@ a.box:active {
|
||||
border-color: transparent;
|
||||
color: whitesmoke; }
|
||||
.file.is-primary .file-cta {
|
||||
background-color: #3c3c3c;
|
||||
background-color: #fff;
|
||||
border-color: transparent;
|
||||
color: #fff; }
|
||||
color: #3c3c3c; }
|
||||
.file.is-primary:hover .file-cta, .file.is-primary.is-hovered .file-cta {
|
||||
background-color: #363636;
|
||||
background-color: #f9f9f9;
|
||||
border-color: transparent;
|
||||
color: #fff; }
|
||||
color: #3c3c3c; }
|
||||
.file.is-primary:focus .file-cta, .file.is-primary.is-focused .file-cta {
|
||||
border-color: transparent;
|
||||
box-shadow: 0 0 0.5em rgba(60, 60, 60, 0.25);
|
||||
color: #fff; }
|
||||
box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.25);
|
||||
color: #3c3c3c; }
|
||||
.file.is-primary:active .file-cta, .file.is-primary.is-active .file-cta {
|
||||
background-color: #2f2f2f;
|
||||
background-color: #f2f2f2;
|
||||
border-color: transparent;
|
||||
color: #fff; }
|
||||
color: #3c3c3c; }
|
||||
.file.is-link .file-cta {
|
||||
background-color: #3273dc;
|
||||
border-color: transparent;
|
||||
@ -2830,7 +2830,7 @@ a.box:active {
|
||||
.help.is-dark {
|
||||
color: #363636; }
|
||||
.help.is-primary {
|
||||
color: #3c3c3c; }
|
||||
color: #fff; }
|
||||
.help.is-link {
|
||||
color: #3273dc; }
|
||||
.help.is-info {
|
||||
@ -3156,8 +3156,8 @@ a.box:active {
|
||||
background-color: #363636;
|
||||
color: whitesmoke; }
|
||||
.notification.is-primary {
|
||||
background-color: #3c3c3c;
|
||||
color: #fff; }
|
||||
background-color: #fff;
|
||||
color: #3c3c3c; }
|
||||
.notification.is-link {
|
||||
background-color: #3273dc;
|
||||
color: #fff; }
|
||||
@ -3240,13 +3240,13 @@ a.box:active {
|
||||
.progress.is-dark:indeterminate {
|
||||
background-image: linear-gradient(to right, #363636 30%, #dbdbdb 30%); }
|
||||
.progress.is-primary::-webkit-progress-value {
|
||||
background-color: #3c3c3c; }
|
||||
background-color: #fff; }
|
||||
.progress.is-primary::-moz-progress-bar {
|
||||
background-color: #3c3c3c; }
|
||||
background-color: #fff; }
|
||||
.progress.is-primary::-ms-fill {
|
||||
background-color: #3c3c3c; }
|
||||
background-color: #fff; }
|
||||
.progress.is-primary:indeterminate {
|
||||
background-image: linear-gradient(to right, #3c3c3c 30%, #dbdbdb 30%); }
|
||||
background-image: linear-gradient(to right, #fff 30%, #dbdbdb 30%); }
|
||||
.progress.is-link::-webkit-progress-value {
|
||||
background-color: #3273dc; }
|
||||
.progress.is-link::-moz-progress-bar {
|
||||
@ -3331,9 +3331,9 @@ a.box:active {
|
||||
color: whitesmoke; }
|
||||
.table td.is-primary,
|
||||
.table th.is-primary {
|
||||
background-color: #3c3c3c;
|
||||
border-color: #3c3c3c;
|
||||
color: #fff; }
|
||||
background-color: #fff;
|
||||
border-color: #fff;
|
||||
color: #3c3c3c; }
|
||||
.table td.is-link,
|
||||
.table th.is-link {
|
||||
background-color: #3273dc;
|
||||
@ -3365,8 +3365,8 @@ a.box:active {
|
||||
width: 1%; }
|
||||
.table td.is-selected,
|
||||
.table th.is-selected {
|
||||
background-color: #3c3c3c;
|
||||
color: #fff; }
|
||||
background-color: #fff;
|
||||
color: #3c3c3c; }
|
||||
.table td.is-selected a,
|
||||
.table td.is-selected strong,
|
||||
.table th.is-selected a,
|
||||
@ -3376,14 +3376,14 @@ a.box:active {
|
||||
color: #363636;
|
||||
text-align: left; }
|
||||
.table tr.is-selected {
|
||||
background-color: #3c3c3c;
|
||||
color: #fff; }
|
||||
background-color: #fff;
|
||||
color: #3c3c3c; }
|
||||
.table tr.is-selected a,
|
||||
.table tr.is-selected strong {
|
||||
color: currentColor; }
|
||||
.table tr.is-selected td,
|
||||
.table tr.is-selected th {
|
||||
border-color: #fff;
|
||||
border-color: #3c3c3c;
|
||||
color: currentColor; }
|
||||
.table thead {
|
||||
background-color: transparent; }
|
||||
@ -3503,8 +3503,8 @@ a.box:active {
|
||||
background-color: #363636;
|
||||
color: whitesmoke; }
|
||||
.tag:not(body).is-primary {
|
||||
background-color: #3c3c3c;
|
||||
color: #fff; }
|
||||
background-color: #fff;
|
||||
color: #3c3c3c; }
|
||||
.tag:not(body).is-link {
|
||||
background-color: #3273dc;
|
||||
color: #fff; }
|
||||
@ -4066,13 +4066,13 @@ a.list-item {
|
||||
border-color: #363636;
|
||||
color: #2a2a2a; }
|
||||
.message.is-primary {
|
||||
background-color: #fafafa; }
|
||||
background-color: white; }
|
||||
.message.is-primary .message-header {
|
||||
background-color: #3c3c3c;
|
||||
color: #fff; }
|
||||
background-color: #fff;
|
||||
color: #3c3c3c; }
|
||||
.message.is-primary .message-body {
|
||||
border-color: #3c3c3c;
|
||||
color: #2e2e2e; }
|
||||
border-color: #fff;
|
||||
color: #4d4d4d; }
|
||||
.message.is-link {
|
||||
background-color: #f6f9fe; }
|
||||
.message.is-link .message-header {
|
||||
@ -4393,26 +4393,26 @@ a.list-item {
|
||||
background-color: #363636;
|
||||
color: whitesmoke; } }
|
||||
.navbar.is-primary {
|
||||
background-color: #3c3c3c;
|
||||
color: #fff; }
|
||||
background-color: #fff;
|
||||
color: #3c3c3c; }
|
||||
.navbar.is-primary .navbar-brand > .navbar-item,
|
||||
.navbar.is-primary .navbar-brand .navbar-link {
|
||||
color: #fff; }
|
||||
color: #3c3c3c; }
|
||||
.navbar.is-primary .navbar-brand > a.navbar-item:hover, .navbar.is-primary .navbar-brand > a.navbar-item.is-active,
|
||||
.navbar.is-primary .navbar-brand .navbar-link:hover,
|
||||
.navbar.is-primary .navbar-brand .navbar-link.is-active {
|
||||
background-color: #2f2f2f;
|
||||
color: #fff; }
|
||||
background-color: #f2f2f2;
|
||||
color: #3c3c3c; }
|
||||
.navbar.is-primary .navbar-brand .navbar-link::after {
|
||||
border-color: #fff; }
|
||||
border-color: #3c3c3c; }
|
||||
.navbar.is-primary .navbar-burger {
|
||||
color: #fff; }
|
||||
color: #3c3c3c; }
|
||||
@media screen and (min-width: 1088px) {
|
||||
.navbar.is-primary .navbar-start > .navbar-item,
|
||||
.navbar.is-primary .navbar-start .navbar-link,
|
||||
.navbar.is-primary .navbar-end > .navbar-item,
|
||||
.navbar.is-primary .navbar-end .navbar-link {
|
||||
color: #fff; }
|
||||
color: #3c3c3c; }
|
||||
.navbar.is-primary .navbar-start > a.navbar-item:hover, .navbar.is-primary .navbar-start > a.navbar-item.is-active,
|
||||
.navbar.is-primary .navbar-start .navbar-link:hover,
|
||||
.navbar.is-primary .navbar-start .navbar-link.is-active,
|
||||
@ -4420,18 +4420,18 @@ a.list-item {
|
||||
.navbar.is-primary .navbar-end > a.navbar-item.is-active,
|
||||
.navbar.is-primary .navbar-end .navbar-link:hover,
|
||||
.navbar.is-primary .navbar-end .navbar-link.is-active {
|
||||
background-color: #2f2f2f;
|
||||
color: #fff; }
|
||||
background-color: #f2f2f2;
|
||||
color: #3c3c3c; }
|
||||
.navbar.is-primary .navbar-start .navbar-link::after,
|
||||
.navbar.is-primary .navbar-end .navbar-link::after {
|
||||
border-color: #fff; }
|
||||
border-color: #3c3c3c; }
|
||||
.navbar.is-primary .navbar-item.has-dropdown:hover .navbar-link,
|
||||
.navbar.is-primary .navbar-item.has-dropdown.is-active .navbar-link {
|
||||
background-color: #2f2f2f;
|
||||
color: #fff; }
|
||||
background-color: #f2f2f2;
|
||||
color: #3c3c3c; }
|
||||
.navbar.is-primary .navbar-dropdown a.navbar-item.is-active {
|
||||
background-color: #3c3c3c;
|
||||
color: #fff; } }
|
||||
background-color: #fff;
|
||||
color: #3c3c3c; } }
|
||||
.navbar.is-link {
|
||||
background-color: #3273dc;
|
||||
color: #fff; }
|
||||
@ -6610,49 +6610,49 @@ label.panel-block {
|
||||
.hero.is-dark.is-bold .navbar-menu {
|
||||
background-image: linear-gradient(141deg, #1f191a 0%, #363636 71%, #46403f 100%); } }
|
||||
.hero.is-primary {
|
||||
background-color: #3c3c3c;
|
||||
color: #fff; }
|
||||
background-color: #fff;
|
||||
color: #3c3c3c; }
|
||||
.hero.is-primary a:not(.button):not(.dropdown-item):not(.tag),
|
||||
.hero.is-primary strong {
|
||||
color: inherit; }
|
||||
.hero.is-primary .title {
|
||||
color: #fff; }
|
||||
color: #3c3c3c; }
|
||||
.hero.is-primary .subtitle {
|
||||
color: rgba(255, 255, 255, 0.9); }
|
||||
color: rgba(60, 60, 60, 0.9); }
|
||||
.hero.is-primary .subtitle a:not(.button),
|
||||
.hero.is-primary .subtitle strong {
|
||||
color: #fff; }
|
||||
color: #3c3c3c; }
|
||||
@media screen and (max-width: 1087px) {
|
||||
.hero.is-primary .navbar-menu {
|
||||
background-color: #3c3c3c; } }
|
||||
background-color: #fff; } }
|
||||
.hero.is-primary .navbar-item,
|
||||
.hero.is-primary .navbar-link {
|
||||
color: rgba(255, 255, 255, 0.7); }
|
||||
color: rgba(60, 60, 60, 0.7); }
|
||||
.hero.is-primary a.navbar-item:hover, .hero.is-primary a.navbar-item.is-active,
|
||||
.hero.is-primary .navbar-link:hover,
|
||||
.hero.is-primary .navbar-link.is-active {
|
||||
background-color: #2f2f2f;
|
||||
color: #fff; }
|
||||
background-color: #f2f2f2;
|
||||
color: #3c3c3c; }
|
||||
.hero.is-primary .tabs a {
|
||||
color: #fff;
|
||||
color: #3c3c3c;
|
||||
opacity: 0.9; }
|
||||
.hero.is-primary .tabs a:hover {
|
||||
opacity: 1; }
|
||||
.hero.is-primary .tabs li.is-active a {
|
||||
opacity: 1; }
|
||||
.hero.is-primary .tabs.is-boxed a, .hero.is-primary .tabs.is-toggle a {
|
||||
color: #fff; }
|
||||
color: #3c3c3c; }
|
||||
.hero.is-primary .tabs.is-boxed a:hover, .hero.is-primary .tabs.is-toggle a:hover {
|
||||
background-color: rgba(10, 10, 10, 0.1); }
|
||||
.hero.is-primary .tabs.is-boxed li.is-active a, .hero.is-primary .tabs.is-boxed li.is-active a:hover, .hero.is-primary .tabs.is-toggle li.is-active a, .hero.is-primary .tabs.is-toggle li.is-active a:hover {
|
||||
background-color: #fff;
|
||||
border-color: #fff;
|
||||
color: #3c3c3c; }
|
||||
background-color: #3c3c3c;
|
||||
border-color: #3c3c3c;
|
||||
color: #fff; }
|
||||
.hero.is-primary.is-bold {
|
||||
background-image: linear-gradient(141deg, #261f20 0%, #3c3c3c 71%, #4c4645 100%); }
|
||||
background-image: linear-gradient(141deg, #e6e6e6 0%, #fff 71%, white 100%); }
|
||||
@media screen and (max-width: 768px) {
|
||||
.hero.is-primary.is-bold .navbar-menu {
|
||||
background-image: linear-gradient(141deg, #261f20 0%, #3c3c3c 71%, #4c4645 100%); } }
|
||||
background-image: linear-gradient(141deg, #e6e6e6 0%, #fff 71%, white 100%); } }
|
||||
.hero.is-link {
|
||||
background-color: #3273dc;
|
||||
color: #fff; }
|
||||
@ -6946,5 +6946,6 @@ label.panel-block {
|
||||
background-color: #fafafa;
|
||||
padding: 3rem 1.5rem 6rem; }
|
||||
|
||||
#menu {
|
||||
text-shadow: 1px 1px 3px #3c3c3c99; }
|
||||
#idCard .hero-body {
|
||||
padding-bottom: 2rem;
|
||||
padding-top: 2rem; }
|
||||
|
||||
15
index.html
15
index.html
@ -14,17 +14,16 @@
|
||||
<section id="menu" class="hero is-primary">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-8-desktop is-offset-2-desktop">
|
||||
<h1 class="title is-2 is-spaced">
|
||||
Anthony Dumas
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="title">
|
||||
Anthony Dumas
|
||||
</h1>
|
||||
<h2 class="subtitle">
|
||||
Développeur @ Harvest
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="hero is-medium is-primary-inverted">
|
||||
<section id="idCard" class="hero is-medium is-primary-inverted">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user