First full working version

This commit is contained in:
2025-01-22 15:10:59 +01:00
parent 37a323c375
commit 97f5e69740
83 changed files with 397 additions and 1016 deletions

View File

@ -210,74 +210,9 @@ header#mainHeader h2 { display: inline-block; vertical-align: middle; font-weigh
header#mainHeader > a:focus > img,
header#mainHeader > a:hover > img { opacity: .7; }
.summary { display: block;
padding: 0 1em;
border: 1px solid var(--color-borders);
border-radius: .1em; }
.accordion { max-height: 0; overflow-y: hidden;
transition: max-height 0.2s ease-out, border 0.2s ease-out; }
.accordion.active { display: block; padding: 1em 0; border-top: 1px dotted var(--color-borders);
border-bottom: 1px dotted var(--color-borders); }
.threeCol { display: grid; grid-template-columns: 1fr; grid-gap: 2em; }
.threeCol > * { max-height: 300px; overflow-y: hidden; padding: 0 1em;
transition: max-height 0.2s ease-out, border 0.2s ease-out;
cursor: pointer; border: 1px solid var(--color-borders); border-bottom-style: dashed; }
.threeCol > .active { border-bottom-style: solid; }
.threeCol > :hover { border-color: var(--color-accent-hover); }
.threeCol a { transition: color .4s; }
.threeCol a:hover { color: var(--color-accent-hover); }
@media screen and (min-width: 1024px) {
.threeCol { display: block; overflow-x: auto; white-space: nowrap; }
.threeCol > * { display: inline-block; margin-right: 5%; width: 30%; white-space: initial; vertical-align: top; }
.threeCol > :last-child { margin-right: 0; }
}
/*
* Accordions
*/
/* Style the buttons that are used to open and close the accordion panel */
.faq_question { position: relative; display: block; width: 100%;
padding: .6rem .8rem .6rem 2.4rem; cursor: pointer;
margin: .2em 0;
border: 1px solid var(--color-borders); border-radius: .2rem;
outline: none; transition: .4s ease-out; }
.faq_question:before { display: inline-block; content: " > ";
position: absolute; left: .8rem; top: 50%; transform: translate(0, -50%);
font-size: 1.6rem;
color: var(--color-accent-normal);
font-weight: bold; }
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .faq_question:hover { background: var(--color-bg-raised2); }
.accordion.faq_answer { padding-left: 18px; padding-right: 18px; white-space: pre-wrap; }
section h2 { margin-top: 2em; }
#more { border-top: 1px solid var(--color-borders); margin-top: 2em;}
.moreTiles { display: block; max-width: 100%; position: relative; }
.moreTiles > a { display: inline-block; border: 1px solid var(--color-borders);
border-radius: .1rem;
font-size: .7em;
transition: border .4s; }
.moreTiles > a:hover,
.moreTiles > a:focus { border-color: var(--color-accent-hover); }
.moreTiles > a img { display: block; width: 400px; height: 225px; border-radius: inherit; }
.moreTiles .moreTilesMeta { position: absolute; bottom: .5em;
max-width: 400px;
padding: .5em; background: rgba(0, 0, 0, .8);
color: #FFF; }
.moreTiles .moreTilesMeta p { margin: 0 0; padding: 0 0; font-weight: bold; }
.moreTilesTitle { font-weight: bold; font-size: 1.15em; transition: color .4s; }
.moreTiles > a:hover .moreTilesTitle,
.moreTiles > a:focus .moreTilesTitle { color: var(--color-accent-hover); }
@media screen and (min-width: 768px) {
header nav > div > div { display: none; position: absolute; right: 0; top: 100%; width: 300px;
@ -327,3 +262,5 @@ section h2 { margin-top: 2em; }
max-width: 1400px; margin: 0 auto;
}
}
#resultsP { margin: 1em 0; padding: 1em; background: var(--color-bg-raised); }

File diff suppressed because one or more lines are too long