diff --git a/content/quiz.md b/content/quiz.md index 971b9e0..9e418c3 100644 --- a/content/quiz.md +++ b/content/quiz.md @@ -2,4 +2,5 @@ naam: Quiz navigable: true order: 4 +head: --- diff --git a/content/stylesheets/main.css b/content/stylesheets/main.css index 753830d..e6eff75 100644 --- a/content/stylesheets/main.css +++ b/content/stylesheets/main.css @@ -28,7 +28,7 @@ body { } a { - color: inherit; + color: inherit; } main { @@ -41,23 +41,54 @@ main { padding: 2rem 2rem 0 2rem; } +.main_content { + width: 100%; + margin: 0 auto; +} + .beforeTheFold { min-height: 100vh; } +.quizSpotlight { + margin-top: 2rem; + font-size: 2rem; + font-family: Arial, Helvetica, sans-serif; + font-weight: bold; +} + +.quizSpotlight:hover { + cursor: pointer; +} + +.quizSpotlight a { + position: relative; + text-decoration: none; + background: var(--white); + color: var(--darkblue); + border: 0.4rem solid var(--darkblue); + padding: 1rem 2rem; + margin-right: 3rem; +} +.quizSpotlight a:hover { + background-color: var(--lightblue); + border: 0.4rem solid var(--lightblue); + color: var(--white); +} + footer { width: 80%; margin: 0 auto; } details { - margin-bottom: 1rem; + margin-bottom: 1rem; } summary { - cursor: pointer; + cursor: pointer; } details[open] { - border-bottom: 1px solid #000; + border-bottom: 1px solid #000; } .align { @@ -111,7 +142,8 @@ details[open] { color: inherit; } -.nav-link:hover, .active_link { +.nav-link:hover, +.active_link { background: var(--yellow); color: var(--lightblue); } @@ -146,43 +178,43 @@ details[open] { } .randomVerenigingen p:nth-child(odd) { - -webkit-text-stroke-width: 2px; - -webkit-text-stroke-color: var(--lightblue); - color: transparent; + -webkit-text-stroke-width: 2px; + -webkit-text-stroke-color: var(--lightblue); + color: transparent; } .randomVerenigingen p { - text-transform: uppercase; + text-transform: uppercase; } -.randomVereniging{ - border: 2px solid var(--yellow); - padding: 1rem; - margin: 1rem; +.randomVereniging { + border: 2px solid var(--yellow); + padding: 1rem; + margin: 1rem; } -.randomVerenigingWrapper{ - min-width: 20rem; - flex: 1; +.randomVerenigingWrapper { + min-width: 20rem; + flex: 1; } .randomVerenigingenWrapper { - display: flex; - flex-wrap: wrap; - justify-content: space-between; + display: flex; + flex-wrap: wrap; + justify-content: space-between; } -.randomVerenigingWrapper:nth-child(1){ - padding-top: 4rem; +.randomVerenigingWrapper:nth-child(1) { + padding-top: 4rem; } -.randomVerenigingWrapper:nth-child(2){ - padding-top: 2rem; +.randomVerenigingWrapper:nth-child(2) { + padding-top: 2rem; } -.randomVereniging_imageWrapper{ - display: flex; - justify-content: center; - margin-bottom: 2rem; - margin-top: 1rem; +.randomVereniging_imageWrapper { + display: flex; + justify-content: center; + margin-bottom: 2rem; + margin-top: 1rem; } /* Small screens */ @@ -277,9 +309,11 @@ input { color: inherit; background-color: transparent; } + button { border: 0.15em solid var(--darkblue); } + input { border: none; border-bottom: 0.15em solid var(--darkblue); @@ -335,28 +369,6 @@ h2 { margin: 0.5em 0; } -.quizSpotlight { - margin-top: 2rem; - font-size: 2rem; - font-family: Arial, Helvetica, sans-serif; - font-weight: bold; -} - -.quizSpotlight a { - position: relative; - text-decoration: none; - background: var(--white); - color: var(--darkblue); - border: 0.4rem solid var(--darkblue); - padding: 1rem 2rem; - margin-right: 3rem; -} -.quizSpotlight a:hover { - background-color: var(--lightblue); - border: 0.4rem solid var(--lightblue); - color: var(--white); -} - .scroll { display: block; position: absolute; @@ -417,47 +429,8 @@ h2 { box-shadow: inset 0 -0.15em 0 var(--yellow); } -#postcodeField { - -webkit-appearance: none; - margin: 0; -} - -#postcodeField::-webkit-outer-spin-button, -#postcodeField::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; -} - -/* Firefox */ -#postcodeField[type="number"] { - -moz-appearance: textfield; -} - -fieldset { - max-height: 60vh; - display: grid; - grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); - overflow-y: auto; - margin: auto; -} - -fieldset p label { - display: flex; -} - -fieldset p { - margin: 15px 10px; -} - -fieldset p label input { - margin-right: 10px; -} - -.buttons { - width: 70%; - margin: 20px auto; - display: flex; - justify-content: space-between; +.home_link .active_link { + box-shadow: inset 0 -0.1rem 0 var(--darkblue); } .link { @@ -581,7 +554,8 @@ fieldset p label input { height: 100%; } -.tile__image img, .tile__image svg { +.tile__image img, +.tile__image svg { width: auto; height: 100%; } @@ -631,8 +605,10 @@ fieldset p label input { } @media only screen and (max-width: 1024px) { - .randomVerenigingWrapper:nth-child(1), .randomVerenigingWrapper:nth-child(2){ /* Dit heeft hogere prioriteit dan elk kind. */ - padding-top: 0; + .randomVerenigingWrapper:nth-child(1), + .randomVerenigingWrapper:nth-child(2) { + /* Dit heeft hogere prioriteit dan elk kind. */ + padding-top: 0; } } diff --git a/content/stylesheets/quiz.css b/content/stylesheets/quiz.css index cfe4752..1e98682 100644 --- a/content/stylesheets/quiz.css +++ b/content/stylesheets/quiz.css @@ -82,7 +82,19 @@ h3::first-letter { } .buttons { +<<<<<<< HEAD padding: 10px; +======= + width: 70%; + margin: 20px auto; + display: flex; + justify-content: space-between; +} + +.buttons { + width: 70%; + margin: 20px auto; +>>>>>>> 85fe081... style the quiz a little again display: flex; justify-content: space-between; } diff --git a/layouts/default.erb b/layouts/default.erb index b223071..2c384ac 100644 --- a/layouts/default.erb +++ b/layouts/default.erb @@ -1,7 +1,9 @@ <%= render '/partials/navbar.*' %>
-<%= yield %> +
+ <%= yield %> +