Styling voor footer
This commit is contained in:
parent
517629f575
commit
d31702265c
|
@ -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;
|
||||||
|
|
Reference in a new issue