Aanvulling implementatie kleuren en font
This commit is contained in:
Michael Boelen
parent
83583f55c0
commit
047426d00d
44 changed files with 258 additions and 18 deletions
|
|
@ -1,15 +1,19 @@
|
|||
// Main colors of our website
|
||||
|
||||
// Old colors:
|
||||
// purple: #6A2060
|
||||
// light purple-grey: #DCC9DB
|
||||
// darkblue: #1D3160
|
||||
// purple: #6A2060
|
||||
// light purple-grey: #DCC9DB
|
||||
// darkblue: #1D3160
|
||||
|
||||
// New colors (2024)
|
||||
// Primary colours are Midnight blue (HEX: #26266B) and Magenta (HEX: #FA198B)
|
||||
// Filters created with https://isotropic.co/tool/hex-color-to-css-filter/
|
||||
|
||||
// Mignight blue:
|
||||
// Original: #26266B
|
||||
// CSS filter: filter: invert(19%) sepia(64%) saturate(973%) hue-rotate(209deg) brightness(83%) contrast(105%);
|
||||
// Medium: #515189
|
||||
// CSS filter: filter: invert(32%) sepia(28%) saturate(906%) hue-rotate(201deg) brightness(91%) contrast(86%);
|
||||
// Light: #7D7DA6
|
||||
|
||||
// Magenta
|
||||
|
|
@ -28,9 +32,9 @@
|
|||
// Light: #F7D669
|
||||
|
||||
// Raisin black
|
||||
// Original: #222226
|
||||
// Medium: #4E4E51
|
||||
// Light: #7A7A7D
|
||||
$raisin-black-dark: #222226;
|
||||
$raisin-black-medium: #4E4E51;
|
||||
$raisin-black-light: #7A7A7D;
|
||||
|
||||
// Ghost white
|
||||
// Original: #FAFAFF
|
||||
|
|
@ -47,6 +51,9 @@ $color-button-call-to-action: #F2BB05;
|
|||
//$color-button-call-to-action-hover: #0F6D06; // %25 donkerder dan #138808 met encycolorpedia
|
||||
$color-button-call-to-action-hover: #F5C937;
|
||||
|
||||
$color-footer-background: #7D7DA6;
|
||||
$color-footer-text: $raisin-black-dark;
|
||||
|
||||
//$color-header: #6A2060;
|
||||
$color-header: #26266B;
|
||||
|
||||
|
|
|
|||
|
|
@ -4,13 +4,14 @@
|
|||
}
|
||||
|
||||
body {
|
||||
font: 1rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Roboto,noto,"Helvetica Neue",helvetica,arial,sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
padding: 1.2rem;
|
||||
//font: 1rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Roboto,noto,"Helvetica Neue",helvetica,arial,sans-serif;
|
||||
//text-rendering: optimizeLegibility;
|
||||
//-webkit-font-smoothing: antialiased;
|
||||
//-moz-osx-font-smoothing: grayscale;
|
||||
//padding: 1.2rem;
|
||||
// background: hsla(93, 0%, 96%, 1.00);
|
||||
color: #2E2E2E;
|
||||
//color: #2E2E2E;
|
||||
color: #222226;
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
|
@ -37,10 +38,12 @@ figure {
|
|||
}
|
||||
|
||||
footer {
|
||||
background-color: #E3E9F7;
|
||||
border-top: 1px solid #99AFE2;
|
||||
margin-top: 40px;
|
||||
padding: 20px;
|
||||
//background-color: #E3E9F7;
|
||||
background-color: $color-footer-background;
|
||||
color: $color-footer-text;
|
||||
border-top: 1px solid #99AFE2;
|
||||
margin-top: 40px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.grid-team-members {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,82 @@
|
|||
/*
|
||||
Font families defined by this CSS:
|
||||
- InterVariable variable font for modern web browsers
|
||||
- Inter static fonts for older web browsers (small optical size)
|
||||
- InterDisplay static fonts for older web browsers (large optical size)
|
||||
|
||||
Usage example:
|
||||
:root { font-family: Inter, sans-serif; }
|
||||
@supports (font-variation-settings: normal) {
|
||||
:root { font-family: InterVariable, sans-serif; }
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: InterVariable;
|
||||
font-style: normal;
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
src: url('/fonts/InterVariable.woff2?v=4.0') format('woff2');
|
||||
}
|
||||
@font-face {
|
||||
font-family: InterVariable;
|
||||
font-style: italic;
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
src: url('/fonts/InterVariable-Italic.woff2?v=4.0') format('woff2');
|
||||
}
|
||||
/* legacy name "Inter var" (Oct 2023) */
|
||||
@font-face { font-family:'Inter var'; font-style:normal; font-weight:100 900; font-display:swap; src: url('/fonts/InterVariable.woff2?v=4.0') format('woff2'); }
|
||||
@font-face { font-family:'Inter var'; font-style:italic; font-weight:100 900; font-display:swap; src: url('/fonts/InterVariable-Italic.woff2?v=4.0') format('woff2'); }
|
||||
/* static fonts */
|
||||
@font-face { font-family:Inter; font-style:normal; font-weight:100; font-display:swap; src:url("/fonts/Inter-Thin.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:Inter; font-style:italic; font-weight:100; font-display:swap; src:url("/fonts/Inter-ThinItalic.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:Inter; font-style:normal; font-weight:200; font-display:swap; src:url("/fonts/Inter-ExtraLight.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:Inter; font-style:italic; font-weight:200; font-display:swap; src:url("/fonts/Inter-ExtraLightItalic.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:Inter; font-style:normal; font-weight:300; font-display:swap; src:url("/fonts/Inter-Light.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:Inter; font-style:italic; font-weight:300; font-display:swap; src:url("/fonts/Inter-LightItalic.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:Inter; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/Inter-Regular.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:Inter; font-style:italic; font-weight:400; font-display:swap; src:url("/fonts/Inter-Italic.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:Inter; font-style:normal; font-weight:500; font-display:swap; src:url("/fonts/Inter-Medium.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:Inter; font-style:italic; font-weight:500; font-display:swap; src:url("/fonts/Inter-MediumItalic.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:Inter; font-style:normal; font-weight:600; font-display:swap; src:url("/fonts/Inter-SemiBold.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:Inter; font-style:italic; font-weight:600; font-display:swap; src:url("/fonts/Inter-SemiBoldItalic.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:Inter; font-style:normal; font-weight:700; font-display:swap; src:url("/fonts/Inter-Bold.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:Inter; font-style:italic; font-weight:700; font-display:swap; src:url("/fonts/Inter-BoldItalic.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:Inter; font-style:normal; font-weight:800; font-display:swap; src:url("/fonts/Inter-ExtraBold.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:Inter; font-style:italic; font-weight:800; font-display:swap; src:url("/fonts/Inter-ExtraBoldItalic.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:Inter; font-style:normal; font-weight:900; font-display:swap; src:url("/fonts/Inter-Black.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:Inter; font-style:italic; font-weight:900; font-display:swap; src:url("/fonts/Inter-BlackItalic.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:InterDisplay; font-style:normal; font-weight:100; font-display:swap; src:url("/fonts/InterDisplay-Thin.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:InterDisplay; font-style:italic; font-weight:100; font-display:swap; src:url("/fonts/InterDisplay-ThinItalic.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:InterDisplay; font-style:normal; font-weight:200; font-display:swap; src:url("/fonts/InterDisplay-ExtraLight.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:InterDisplay; font-style:italic; font-weight:200; font-display:swap; src:url("/fonts/InterDisplay-ExtraLightItalic.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:InterDisplay; font-style:normal; font-weight:300; font-display:swap; src:url("/fonts/InterDisplay-Light.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:InterDisplay; font-style:italic; font-weight:300; font-display:swap; src:url("/fonts/InterDisplay-LightItalic.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:InterDisplay; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/InterDisplay-Regular.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:InterDisplay; font-style:italic; font-weight:400; font-display:swap; src:url("/fonts/InterDisplay-Italic.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:InterDisplay; font-style:normal; font-weight:500; font-display:swap; src:url("/fonts/InterDisplay-Medium.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:InterDisplay; font-style:italic; font-weight:500; font-display:swap; src:url("/fonts/InterDisplay-MediumItalic.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:InterDisplay; font-style:normal; font-weight:600; font-display:swap; src:url("/fonts/InterDisplay-SemiBold.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:InterDisplay; font-style:italic; font-weight:600; font-display:swap; src:url("/fonts/InterDisplay-SemiBoldItalic.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:InterDisplay; font-style:normal; font-weight:700; font-display:swap; src:url("/fonts/InterDisplay-Bold.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:InterDisplay; font-style:italic; font-weight:700; font-display:swap; src:url("/fonts/InterDisplay-BoldItalic.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:InterDisplay; font-style:normal; font-weight:800; font-display:swap; src:url("/fonts/InterDisplay-ExtraBold.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:InterDisplay; font-style:italic; font-weight:800; font-display:swap; src:url("/fonts/InterDisplay-ExtraBoldItalic.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:InterDisplay; font-style:normal; font-weight:900; font-display:swap; src:url("/fonts/InterDisplay-Black.woff2?v=4.0") format("woff2"); }
|
||||
@font-face { font-family:InterDisplay; font-style:italic; font-weight:900; font-display:swap; src:url("/fonts/InterDisplay-BlackItalic.woff2?v=4.0") format("woff2"); }
|
||||
|
||||
:root {
|
||||
font-family: Inter, -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Roboto,noto,"Helvetica Neue",helvetica,arial,sans-serif;
|
||||
font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
|
||||
}
|
||||
@supports (font-variation-settings: normal) {
|
||||
:root {
|
||||
font-family: InterVariable, -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Roboto,noto,"Helvetica Neue",helvetica,arial,sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@ img.max-width {
|
|||
//}
|
||||
|
||||
.icon {
|
||||
filter: invert(18%) sepia(32%) saturate(1326%) hue-rotate(183deg) brightness(93%) contrast(95%);
|
||||
//filter: invert(18%) sepia(32%) saturate(1326%) hue-rotate(183deg) brightness(93%) contrast(95%);
|
||||
filter: invert(19%) sepia(64%) saturate(973%) hue-rotate(209deg) brightness(83%) contrast(105%);
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
|
|
@ -19,7 +20,8 @@ img.max-width {
|
|||
text-decoration: none;
|
||||
}
|
||||
.icon:hover {
|
||||
filter: invert(0%) sepia(0%) saturate(7500%) hue-rotate(338deg) brightness(106%) contrast(109%);
|
||||
//filter: invert(0%) sepia(0%) saturate(7500%) hue-rotate(338deg) brightness(106%) contrast(109%);
|
||||
filter: invert(32%) sepia(28%) saturate(906%) hue-rotate(201deg) brightness(91%) contrast(86%);
|
||||
text-decoration: none;
|
||||
}
|
||||
.icon:active {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue