Styling voor footer

This commit is contained in:
Michael Boelen 2023-05-15 21:58:14 +02:00
parent 517629f575
commit d31702265c

View file

@ -1,25 +1,29 @@
$color-button: #1D3160; $color-button: #1D3160;
$color-button-hover: #17274d; $color-button-hover: #17274d;
$color-button-call-to-action: #138808;
$color-button-call-to-action-hover: #0F6D06; // %25 donkerder dan #138808 met encycolorpedia
$color-header: #6A2060; $color-header: #6A2060;
$color-highlight-box-border: #6A2060; $color-highlight-box-border: #6A2060;
$color-highlight-box-background: #EBBCE5; // omgezet naar lichtere kleur via https://encycolorpedia.com/6a2060 $color-highlight-box-background: #EBBCE5; // omgezet naar lichtere kleur via https://encycolorpedia.com/6a2060
$color-border: #6A2060; $color-border: #6A2060;
$color-text-inverse: white; $color-text-inverse: white;
*, :after, :before { *, :after, :before {
box-sizing: border-box; box-sizing: border-box;
padding: 0; padding: 0;
} }
body { body {
font: 1rem/1.5 -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica,helvetica neue,ubuntu,roboto,noto,segoe ui,arial,sans-serif; //font: 1rem/1.5 -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica,helvetica neue,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
font: 1rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
padding: 1.2rem; padding: 1.2rem;
// background: hsla(93, 0%, 96%, 1.00); // background: hsla(93, 0%, 96%, 1.00);
color: #000; color: #2E2E2E;
} }
.skip-link { .skip-link {
@ -42,6 +46,13 @@ figure {
margin-inline-end: 10px; margin-inline-end: 10px;
} }
footer {
background-color: #E3E9F7;
border-top: 1px solid #99AFE2;
margin-top: 40px;
padding: 20px;
}
.grid-team-members { .grid-team-members {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
@ -237,6 +248,23 @@ a.button:hover, a.button:active {
background-color: $color-button-hover; background-color: $color-button-hover;
} }
// Button
.btn:link, .btn:visited {
border-radius: 4px;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
// Button voor call-to-action, <a href="#" class="btn btn-cta">#</a>
.btn-cta:link, .btn-cta:visited {
background-color: $color-button-call-to-action;
}
.btn-cta:hover, .btn-cta:active {
background-color: $color-button-call-to-action-hover;
}
.time { .time {
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;