/*! reset.css | proto.css v0.0.9 | Nieuwe Pixels */ /* 1. Use a more-intuitive box-sizing model */ *,*::before,*::after { box-sizing: border-box; } /* 2. Remove default margin */ * { margin: 0; } /* 3. Enable keyword animations */ @media (prefers-reduced-motion: no-preference) { html { interpolate-size: allow-keywords; } } body { /* 4. Add accessible line-height */ line-height: 1.5; /* 5. Improve text rendering */ -webkit-font-smoothing: antialiased; } /* 6. Improve media defaults */ img,picture,video,canvas,svg { display: block; max-width: 100%; max-height: 100%; } /* 7. Inherit fonts for form controls */ input,button,textarea,select { font: inherit; } /* 8. Avoid text overflows */ p,h1,h2,h3,h4,h5,h6 { overflow-wrap: break-word; } /* 9. Improve line wrapping */ p { text-wrap: pretty; } h1,h2,h3,h4,h5,h6 { text-wrap: balance; } /* 10. Create a root stacking context */ #root,#__next { isolation: isolate; }
/*! utilities.css | proto.css v0.0.9 | Nieuwe Pixels */ :root{ --btn-font-size: inherit; --btn-padding: 0.75em 1.25em; --btn-radius: 0em; } /* btn ---------------------------------------*/ [class*="btn"]{ line-height: 1; text-decoration: none; } .btn{ font-size: var(--btn-font-size); border-radius: var(--btn-radius); transition: .3s; } .btn.ghost{ color: inherit; padding: var(--btn-padding); border: 1px solid #333; border-radius: 0; } .btn.ghost:hover{ background-color: #fff; } .btn.primary{ --accent: var(--color-white); padding: var(--btn-padding); background-color: var(--brand-color-primary); border-radius: var(--btn-radius); border: 1px solid var(--brand-color-primary); } .btn.primary:hover{ color: var(--brand-color-primary);; background-color: #fff; } .btn__white{ padding: var(--btn-padding); font-size: var(--btn-font-size); color: var(--brand-color-primary); background-color: var(--color-white); border-radius: var(--btn-radius); border: 0; } /* Widget ----------------------------------- */ .widget__aside{ margin-bottom: 0.5em; } .widget__aside.primary{ padding: 1em; background-color: var(--brand-color-primary-accent2); } /* utils -------------------------------------*/ .text-align--center{ text-align: center; } .text-align--right{ text-align: right; } img.responsive{ max-width: 100%; } /* Development ------------------------------- [class*="col"]{ border: 1px solid #dddddd50; } */
/*! flexboxgrid.css | proto.css v0.0.9 | Nieuwe Pixels */ :root{ --flex-gap-column: 1em;} /* Utils ------------------------------------- */.flex{ display: flex; column-gap: var(--flex-gap-column);} /* Flexbox ----------------------------------- */.container-fluid,.container,[container] { margin-right: auto; margin-left: auto;}.container-fluid { padding-right: 2rem; padding-left: 2rem;}[class*="container"]{ margin-left: auto; margin-right: auto;}.container-xs,[container="xs"]{ max-width: var(--container-xs);}.container-sm,[container="sm"]{ max-width: var(--container-sm);}.container-md,[container="md"]{ max-width: var(--container-md);}.container-lg,[container="lg"]{ max-width: var(--container-lg);}.container-xl,[container="xl"]{ max-width: var(--container-xl);} .row { box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-right: calc((var(--flex-gap-column) / 2) * -1); padding-left: calc((var(--flex-gap-column) / 2) * -1);}.row.reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse;}.col.reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse;} .col-xs,.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-offset-0,.col-xs-offset-1,.col-xs-offset-2,.col-xs-offset-3,.col-xs-offset-4,.col-xs-offset-5,.col-xs-offset-6,.col-xs-offset-7,.col-xs-offset-8,.col-xs-offset-9,.col-xs-offset-10,.col-xs-offset-11,.col-xs-offset-12 { box-sizing: border-box; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; padding-right: calc((var(--flex-gap-column) / 2)); padding-left: calc((var(--flex-gap-column) / 2));} .col-xs { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%;} .col-xs-1 { -ms-flex-preferred-size: 8.33333333%; flex-basis: 8.33333333%; max-width: 8.33333333%;} .col-xs-2 { -ms-flex-preferred-size: 16.66666667%; flex-basis: 16.66666667%; max-width: 16.66666667%;} .col-xs-3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%;} .col-xs-4 { -ms-flex-preferred-size: 33.33333333%; flex-basis: 33.33333333%; max-width: 33.33333333%;} .col-xs-5 { -ms-flex-preferred-size: 41.66666667%; flex-basis: 41.66666667%; max-width: 41.66666667%;} .col-xs-6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%;} .col-xs-7 { -ms-flex-preferred-size: 58.33333333%; flex-basis: 58.33333333%; max-width: 58.33333333%;} .col-xs-8 { -ms-flex-preferred-size: 66.66666667%; flex-basis: 66.66666667%; max-width: 66.66666667%;} .col-xs-9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%;} .col-xs-10 { -ms-flex-preferred-size: 83.33333333%; flex-basis: 83.33333333%; max-width: 83.33333333%;} .col-xs-11 { -ms-flex-preferred-size: 91.66666667%; flex-basis: 91.66666667%; max-width: 91.66666667%;} .col-xs-12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%;} .col-xs-offset-0 { margin-left: 0;} .col-xs-offset-1 { margin-left: 8.33333333%;} .col-xs-offset-2 { margin-left: 16.66666667%;} .col-xs-offset-3 { margin-left: 25%;} .col-xs-offset-4 { margin-left: 33.33333333%;} .col-xs-offset-5 { margin-left: 41.66666667%;} .col-xs-offset-6 { margin-left: 50%;} .col-xs-offset-7 { margin-left: 58.33333333%;} .col-xs-offset-8 { margin-left: 66.66666667%;} .col-xs-offset-9 { margin-left: 75%;} .col-xs-offset-10 { margin-left: 83.33333333%;} .col-xs-offset-11 { margin-left: 91.66666667%;} .start-xs { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; text-align: start;} .center-xs { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center;} .end-xs { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; text-align: end;} .top-xs { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;} .middle-xs { -webkit-box-align: center; -ms-flex-align: center; align-items: center;} .bottom-xs { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;} .around-xs { -ms-flex-pack: distribute; justify-content: space-around;} .between-xs { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;} .first-xs { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1;} .last-xs { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1;} @media only screen and (min-width: 48em) { .container { /*width: 49rem;*/ } .col-sm,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-offset-0,.col-sm-offset-1,.col-sm-offset-2,.col-sm-offset-3,.col-sm-offset-4,.col-sm-offset-5,.col-sm-offset-6,.col-sm-offset-7,.col-sm-offset-8,.col-sm-offset-9,.col-sm-offset-10,.col-sm-offset-11,.col-sm-offset-12 { box-sizing: border-box; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; padding-right: calc((var(--flex-gap-column) / 2)); padding-left: calc((var(--flex-gap-column) / 2)); } .col-sm { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%; } .col-sm-1 { -ms-flex-preferred-size: 8.33333333%; flex-basis: 8.33333333%; max-width: 8.33333333%; } .col-sm-2 { -ms-flex-preferred-size: 16.66666667%; flex-basis: 16.66666667%; max-width: 16.66666667%; } .col-sm-3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } .col-sm-4 { -ms-flex-preferred-size: 33.33333333%; flex-basis: 33.33333333%; max-width: 33.33333333%; } .col-sm-5 { -ms-flex-preferred-size: 41.66666667%; flex-basis: 41.66666667%; max-width: 41.66666667%; } .col-sm-6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } .col-sm-7 { -ms-flex-preferred-size: 58.33333333%; flex-basis: 58.33333333%; max-width: 58.33333333%; } .col-sm-8 { -ms-flex-preferred-size: 66.66666667%; flex-basis: 66.66666667%; max-width: 66.66666667%; } .col-sm-9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } .col-sm-10 { -ms-flex-preferred-size: 83.33333333%; flex-basis: 83.33333333%; max-width: 83.33333333%; } .col-sm-11 { -ms-flex-preferred-size: 91.66666667%; flex-basis: 91.66666667%; max-width: 91.66666667%; } .col-sm-12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } .col-sm-offset-0 { margin-left: 0; } .col-sm-offset-1 { margin-left: 8.33333333%; } .col-sm-offset-2 { margin-left: 16.66666667%; } .col-sm-offset-3 { margin-left: 25%; } .col-sm-offset-4 { margin-left: 33.33333333%; } .col-sm-offset-5 { margin-left: 41.66666667%; } .col-sm-offset-6 { margin-left: 50%; } .col-sm-offset-7 { margin-left: 58.33333333%; } .col-sm-offset-8 { margin-left: 66.66666667%; } .col-sm-offset-9 { margin-left: 75%; } .col-sm-offset-10 { margin-left: 83.33333333%; } .col-sm-offset-11 { margin-left: 91.66666667%; } .start-sm { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; text-align: start; } .center-sm { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .end-sm { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; text-align: end; } .top-sm { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .middle-sm { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .bottom-sm { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .around-sm { -ms-flex-pack: distribute; justify-content: space-around; } .between-sm { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .first-sm { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .last-sm { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }} @media only screen and (min-width: 64em) { .container { /*width: 65rem;*/ } .col-md,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-md-offset-0,.col-md-offset-1,.col-md-offset-2,.col-md-offset-3,.col-md-offset-4,.col-md-offset-5,.col-md-offset-6,.col-md-offset-7,.col-md-offset-8,.col-md-offset-9,.col-md-offset-10,.col-md-offset-11,.col-md-offset-12 { box-sizing: border-box; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; padding-right: calc((var(--flex-gap-column) / 2)); padding-left: calc((var(--flex-gap-column) / 2)); } .col-md { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%; } .col-md-1 { -ms-flex-preferred-size: 8.33333333%; flex-basis: 8.33333333%; max-width: 8.33333333%; } .col-md-2 { -ms-flex-preferred-size: 16.66666667%; flex-basis: 16.66666667%; max-width: 16.66666667%; } .col-md-3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } .col-md-4 { -ms-flex-preferred-size: 33.33333333%; flex-basis: 33.33333333%; max-width: 33.33333333%; } .col-md-5 { -ms-flex-preferred-size: 41.66666667%; flex-basis: 41.66666667%; max-width: 41.66666667%; } .col-md-6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } .col-md-7 { -ms-flex-preferred-size: 58.33333333%; flex-basis: 58.33333333%; max-width: 58.33333333%; } .col-md-8 { -ms-flex-preferred-size: 66.66666667%; flex-basis: 66.66666667%; max-width: 66.66666667%; } .col-md-9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } .col-md-10 { -ms-flex-preferred-size: 83.33333333%; flex-basis: 83.33333333%; max-width: 83.33333333%; } .col-md-11 { -ms-flex-preferred-size: 91.66666667%; flex-basis: 91.66666667%; max-width: 91.66666667%; } .col-md-12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } .col-md-offset-0 { margin-left: 0; } .col-md-offset-1 { margin-left: 8.33333333%; } .col-md-offset-2 { margin-left: 16.66666667%; } .col-md-offset-3 { margin-left: 25%; } .col-md-offset-4 { margin-left: 33.33333333%; } .col-md-offset-5 { margin-left: 41.66666667%; } .col-md-offset-6 { margin-left: 50%; } .col-md-offset-7 { margin-left: 58.33333333%; } .col-md-offset-8 { margin-left: 66.66666667%; } .col-md-offset-9 { margin-left: 75%; } .col-md-offset-10 { margin-left: 83.33333333%; } .col-md-offset-11 { margin-left: 91.66666667%; } .start-md { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; text-align: start; } .center-md { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .end-md { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; text-align: end; } .top-md { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .middle-md { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .bottom-md { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .around-md { -ms-flex-pack: distribute; justify-content: space-around; } .between-md { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .first-md { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .last-md { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }} @media only screen and (min-width: 75em) { .container { /*width: 76rem;*/ } .col-lg,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-offset-0,.col-lg-offset-1,.col-lg-offset-2,.col-lg-offset-3,.col-lg-offset-4,.col-lg-offset-5,.col-lg-offset-6,.col-lg-offset-7,.col-lg-offset-8,.col-lg-offset-9,.col-lg-offset-10,.col-lg-offset-11,.col-lg-offset-12 { box-sizing: border-box; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; padding-right: calc((var(--flex-gap-column) / 2)); padding-left: calc((var(--flex-gap-column) / 2)); } .col-lg { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%; } .col-lg-1 { -ms-flex-preferred-size: 8.33333333%; flex-basis: 8.33333333%; max-width: 8.33333333%; } .col-lg-2 { -ms-flex-preferred-size: 16.66666667%; flex-basis: 16.66666667%; max-width: 16.66666667%; } .col-lg-3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } .col-lg-4 { -ms-flex-preferred-size: 33.33333333%; flex-basis: 33.33333333%; max-width: 33.33333333%; } .col-lg-5 { -ms-flex-preferred-size: 41.66666667%; flex-basis: 41.66666667%; max-width: 41.66666667%; } .col-lg-6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } .col-lg-7 { -ms-flex-preferred-size: 58.33333333%; flex-basis: 58.33333333%; max-width: 58.33333333%; } .col-lg-8 { -ms-flex-preferred-size: 66.66666667%; flex-basis: 66.66666667%; max-width: 66.66666667%; } .col-lg-9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } .col-lg-10 { -ms-flex-preferred-size: 83.33333333%; flex-basis: 83.33333333%; max-width: 83.33333333%; } .col-lg-11 { -ms-flex-preferred-size: 91.66666667%; flex-basis: 91.66666667%; max-width: 91.66666667%; } .col-lg-12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } .col-lg-offset-0 { margin-left: 0; } .col-lg-offset-1 { margin-left: 8.33333333%; } .col-lg-offset-2 { margin-left: 16.66666667%; } .col-lg-offset-3 { margin-left: 25%; } .col-lg-offset-4 { margin-left: 33.33333333%; } .col-lg-offset-5 { margin-left: 41.66666667%; } .col-lg-offset-6 { margin-left: 50%; } .col-lg-offset-7 { margin-left: 58.33333333%; } .col-lg-offset-8 { margin-left: 66.66666667%; } .col-lg-offset-9 { margin-left: 75%; } .col-lg-offset-10 { margin-left: 83.33333333%; } .col-lg-offset-11 { margin-left: 91.66666667%; } .start-lg { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; text-align: start; } .center-lg { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .end-lg { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; text-align: end; } .top-lg { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .middle-lg { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .bottom-lg { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .around-lg { -ms-flex-pack: distribute; justify-content: space-around; } .between-lg { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .first-lg { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .last-lg { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }}
/*! config.css | proto.css v0.0.9 | Nieuwe Pixels */ :root{ --brand-color-primary: #676943; /* reedoo green */ --brand-color-primary-accent: #e8e9e3; --brand-color-primary-accent2: #efefeb; --brand-color-white: #ffffff; --brand-color-black: #000000; --brand-color-grey: #a2a2a2; --brand-color-grey-accent: #f6f6f6; --brand-color-grey-accent2: #ededed; --color-black: #000; --color-grey: #bbb; --color-white: #fff; --brand-border-radius: 1.7em; } :root{ --font-family-heading: 'Bebas Neue',sans-serif; --font-family-text: 'Aller',sans-serif; --line-height: 1.4; --container-xs: 640px; --container-sm: 768px; --container-md: 1024px; --container-lg: 1280px; --container-xl: 1536px; --flex-gap-column: 3em; } *{ font-family: var(--font-family-text); } html{ font-size: 16px; } /* Mobile ------------------------------------ */ @media only screen and (max-width: 48em){ :root{ --flex-gap-column: 2em; } } @media only screen and (min-width: 48em){}
/*! classless-vanilla.css | proto.css v0.0.9 | Nieuwe Pixels *//* based on simple.css no colors,minimal defaults */:root { /* Set sans-serif & mono fonts */ --sans-font: apple-system,BlinkMacSystemFont,avenir next,avenir,"Nimbus Sans L",roboto,noto,segoe ui,arial,helvetica,helvetica neue,sans-serif; --mono-font: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace; --line-height: 1.3; --h1: 2.25em; --h2: 1.85em; --h3: 1.55em; --h4: 1.25em; --h5: 1.15em; --h6: 0.9em; /* Default (light) theme */ --bg: #fff; --accent-bg: #F5F7FF; --text: #212121; --text-light: #666; --border: #D8DAE1; --accent: #0D47A1; --accent-light: #90CAF9; --code: #D81B60; /* Custom */ --line-height: 1.3; --header-padding: 1.5rem 15rem; --footer-padding: 2rem 1rem 1.5rem 1rem; --button-padding: .7rem .9rem;} /* Dark theme @media (prefers-color-scheme: dark) { :root { --bg: #212121; --accent-bg: #2b2b2b; --text: #ababab; --text-light: #808080; --border: #666; --accent: #FFB300; --accent-light: #FFECB3; --code: #F06292; } img { opacity: .6; }}*/ * { /* Set the font globally font-family: var(--sans-font); */} /* Make the body a nice central block */body { margin: 0; color: var(--text); background: var(--bg); font-size: 1.15rem; line-height: var(--line-height);} /* Make the main element a nice central block */main { margin: 0 auto;} /* Make the header bg full width,but the content inline with body */header { background: var(--accent-bg); border-bottom: 1px solid var(--border); padding: var(--header-padding);} /* Reduces header padding on smaller screens */@media only screen and (max-width: 1200px) {} /* Remove margins for header text */header h1,header p { margin: 0;} /* Format navigation */nav { font-size: 1rem; line-height: 2; padding: 1rem 0;} nav a { margin: 1rem 1rem 0 0; border: 1px solid var(--border); border-radius: 5px; color: var(--text) !important; display: inline-block; padding: .1rem 1rem; text-decoration: none; transition: .3s;} nav a:hover { color: var(--accent) !important; border-color: var(--accent);} nav a.current:hover { text-decoration: none;} footer { padding: var(--footer-padding); color: var(--text-light); border-top: 1px solid var(--border);} /* Format headers */h1 { font-size: var(--h1);}h2 { font-size: var(--h2); /*margin-top: 3rem;*/}h3 { font-size: var(--h3); /*margin-top: 3rem;*/}h4 { font-size: var(--h4)}h5 { font-size: var(--h5);}h6 { font-size: var(--h6);} /* nuf */p{ margin-bottom: 1em;} /* Format links & buttons */a,a:visited { color: var(--accent);} a:hover { text-decoration: none;} a button,button,input[type="submit"],input[type="reset"],input[type="button"] { border: none; background: var(--accent); color: var(--bg); padding: var(--button-padding); margin: .5rem 0; transition: .4s; border-radius: 5px; cursor: pointer; /* font-size: 1rem; */} /* Format forms */textarea,select,input { --input-border: 1px solid var(--border); font-size: inherit; font-family: inherit; padding: .5rem; margin-bottom: .5rem; color: var(--text); background: var(--bg); border: var(--input-border); box-shadow: none; box-sizing: border-box; width: 100%; /* border-radius: 5px; width: 60%; */} a button[disabled],button[disabled],input[type="submit"][disabled],input[type="reset"][disabled],input[type="button"][disabled] { cursor: default; opacity: .5; cursor: not-allowed; width: initial;} button:focus,button:enabled:hover,input[type="submit"]:focus,input[type="submit"]:enabled:hover,input[type="reset"]:focus,input[type="reset"]:enabled:hover,input[type="button"]:focus,input[type="button"]:enabled:hover { opacity: .8;} /* Format the expanding box */details { padding: .6rem 1rem; background: var(--accent-bg); border: 1px solid var(--border); border-radius: 5px; margin-bottom: 1rem;} summary { cursor: pointer; font-weight: bold;} details[open] { padding-bottom: .75rem;} details[open] summary { margin-bottom: .5rem;} details[open]>*:last-child { margin-bottom: 0;} /* Format tables */table { border-collapse: collapse; width: 100%} td,th { border: 1px solid var(--border); text-align: left; padding: .5rem;} th { background: var(--accent-bg); font-weight: bold;} tr:nth-child(even) { /* Set every other cell slightly darker. Improves readability. */ background: var(--accent-bg);} table caption { font-weight: bold; margin-bottom: .5rem;} /* Lists */ol,ul { padding-left: 3rem;} /* Make the textarea wider than other inputs */textarea { /*width: 80%;*/} /* Makes input fields wider on smaller screens */@media only screen and (max-width: 720px) { textarea,select,input { width: 100%; }} /* Ensures the checkbox and radio inputs do not have a set width like other input fields */input[type="checkbox"],input[type="radio"]{ width: auto;} /* Without this any HTML using <fieldset> shows ugly borders and has additional padding/margin. (Issue #3) */fieldset { border: 0; padding: 0; margin: 0;} /* Misc body elements */ hr { color: var(--border); border-top: 1px; margin: 1rem auto;} mark { padding: 3px 6px; background: var(--accent-light);} main img { max-width: 100%; /*border-radius: 5px;*/} figure { margin: 0;} figcaption { font-size: .9rem; color: var(--text-light); text-align: center; margin-bottom: 1rem;} blockquote { margin: 2rem 0 2rem 2rem; padding: .4rem .8rem; border-left: .35rem solid var(--accent); opacity: .8; font-style: italic;} cite { font-size: 0.9rem; color: var(--text-light); font-style: normal;} /* Use mono font for code like elements */code,pre,kbd,samp { font-family: var(--mono-font); font-size: 1.1rem; color: var(--code);} kbd { border: 1px solid var(--code); border-bottom: 3px solid var(--code); border-radius: 5px; padding: .1rem;} pre { padding: 1rem 1.4rem; max-width: 100%; overflow: auto; background: var(--accent-bg); border: 1px solid var(--border); border-radius: 5px;} /* Fix embedded code within pre */pre code { color: var(--text); background: none; margin: 0; padding: 0;}
/*! site.css | proto.css v0.0.9 | Nieuwe Pixels */ :root{ --section-margin: 0 0 1.5em;} [class*="col"]{ border: 0px solid #dddddd50;} /* HTML Init --------------------------------------- */body{ margin: 0 auto; font-size: clamp(0.92rem,1.5vw + 0.5em,1.17rem);}h1,h2,h3,h4{ font-weight: 500; line-height: 1em;}section{ /*margin: var(--section-margin);*/ min-height: 0em;} /* unset/change classless defaults */header{ --accent-bg: transparent; --header-padding: 0; --border: 0;} /* Global ------------------------------------------- */hr.ridb{ margin: 0 auto; max-width: 500px; height: 0; border: 0; border-top: 11px solid var(--brand-color-primary);}.widget__aside{}.widget__aside p{ margin: 0; } /* Header ------------------------------------------- */.header__primary{ border-top: 30px solid var(--brand-color-primary);} .home__header{}.home__header__slogan{ font-size: 1.4em; padding: 0.8em 0; color: var(--brand-color-primary);}.home__header__media{ margin-bottom: 0.75em;}.home__header__media img{ display: inline-block; width: 470px; max-width: 90%;} /* Main ------------------------------------------- */ /* Hero */.home__hero__container{ margin-bottom: 4em;}.home__hero{ --flex-gap-column: 0; background-color: var(--brand-color-primary-accent); }.home__hero__media{}.home__hero__media img{ aspect-ratio: 10/6; width: 100%; max-height: 420px; object-fit: cover;} .home__hero__introduction{ padding: 1.5em 1em; max-width: 65ch; line-height: 1.7;}.home__hero__introduction strong{ font-size: 1.2em; color: var(--brand-color-primary);}.home__hero__introduction strong em{ font-weight: 400;} /* Mobile */@media only screen and (min-width: 48em){ .home__hero__introduction{ padding: 3em; } } /* Informatie -------------------------- */.home__information{ margin-bottom: 4em; color: var(--brand-color-primary);}.home__information__region h4{ margin-bottom: 0.75em; font-weight: 600; color: #a2a2a2; } .home__information__magazine{}.home__information__magazine img{ border: 1px solid #333; box-shadow: 2px 2px 7px rgba(50,50,50,0.3);}.magazine__edition{ font-style: italic;}.home__information__text{ margin-top: 1em; padding: 3em 1.5em; background-color: var(--brand-color-primary-accent2);}.home__information__text h4{ margin-bottom: 0.75em; font-weight: 600;}.home__information__text .button__action{ margin-top: 2em;}.home__information__text a{ margin-bottom: 1em; display: inline-block; min-width: 200px; width: 100%; text-align: center; font-weight: 600; font-size: 1.2rem;} /* Mobile */@media only screen and (max-width: 48em){ .home__information__region{ margin-bottom: 5em; } .home__information__magazine{ margin-bottom: 2em; }}@media only screen and (min-width: 48em){ .home__information__text{ margin-top: 8em; padding: 3em 3em; }} /* Quote --------------------------------*/.home__quote{ margin-bottom: 4em; background-color: var(--brand-color-grey-accent);}.home__quote__content{ padding: 4em 0; text-align: center; color: var(--brand-color-primary);}q { quotes: "“" "”" "‘" "’";}q::before { content: open-quote;}q::after { content: close-quote;}.home__quote__content q{ font-size: 3.4em; line-height: 1.1; font-family: 'Jenna Sue'; } /* Aside/Widgets */.widget__aside__widgetbox{ padding: 1em;}.widget__aside__widgetbox header h5{ margin-bottom: 0.75em; font-weight: 600; color: #a2a2a2;}.widget__aside__widgetbox p,.widgetbox__job p{ font-size: 0.84em;}.widget__aside__widgetbox a{ color: var(--brand-color-primary);}.widget__aside__widgetbox.white{ color: var(--brand-color-primary); background-color: #fff; border: 1px solid #333;} .widgetbox__jobs{ color: var(--brand-color-primary);}.widgetbox__jobs header h5{ margin-bottom: 1em;}.widgetbox__job{ margin-bottom: 1.25em; line-height: 1.4;}.widgetbox__job h5{ margin-bottom: 0.15em; color: inherit; font-size: 1em;}.widgetbox__job p{ margin: 0 0 0.5em;}.widgetbox__job a{ color: inherit; font-size: inherit; font-style: italic;} .widgetbox__archief{}.widgetbox__archief a{ color: inherit; font-style: italic;} /* Contact -------------------------------*/.home__contact{ margin-bottom: 4em;}.home__contact__form{ color: var(--brand-color-primary);}.home__contact__form h3{ margin-bottom: 0.75em; font-weight: 600; color: var(--brand-color-black);}.home__contact__form p{}.home__contact__form ul{ margin: 1.5em 0 2em; padding: 0; list-style: none; line-height: 1.2;}.home__contact__form ul li{ margin-bottom: 0.75em; font-style: italic;}.home__contact__form form{ --flex-gap-column: 0;}.home__contact__form form input[type="checkbox"]{ margin-right: 0.5em; margin-bottom: 0.5em; margin-top: 0.25em; display: block; float: left;}.home__contact__form form input[type="text"],.home__contact__form form input[type="email"],.home__contact__form form input[type="tel"],.home__contact__form form textarea{ padding: 0.75em; width: 100%; background-color: var(--brand-color-grey-accent); border: 0;} /* MESSAGES */.home__contact__form #form__messages{ margin-bottom: 1.5em; text-align: center;}.home__contact__form #form__messages p{ padding: 1em;}.home__contact__form #form__messages.error{ background-color: #ffbfbf;}.home__contact__form #form__messages.success{ background-color: #defcdf;} ::placeholder{ color: #aaa; }::-webkit-input-placeholder{ color: #aaa; }::-moz-placeholder{ color: #aaa; }:-ms-input-placeholder{ color: #aaa; }:-moz-placeholder { color: #aaa; } /* Mobile */@media only screen and (max-width: 48em){ .home__contact__form{ margin-top: 2em; }}@media only screen and (min-width: 48em){ .home__information__text{ margin-top: 8em; padding: 3em 3em; }} /* Footer ------------------------------------------- */footer.site__footer{ padding: 2em 0; background-color: var(--brand-color-grey-accent2);}footer.site__footer a{ color: var(--brand-color-primary);} .site__footer__copyright{ font-sizE: 0.8em; color: var(--brand-color-primary);} .site__footer__media{ text-align: center;}.site__footer__media img{ display: inline-block;}.site__footer__socials{ text-align: right;}.site__footer__socials a + a{ margin-left: 1.5em;}.site__footer__socials img{ display: inline-block;} /* Mobile */@media only screen and (max-width: 48em){ footer.site__footer{ text-align: center; } .site__footer__media{ margin-top: 2em; } .site__footer__socials{ margin-top: 2em; text-align: center; }}@media only screen and (min-width: 48em){ .home__information__text{ margin-top: 8em; padding: 3em 3em; }}