218 lines
3.6 KiB
CSS
218 lines
3.6 KiB
CSS
/* v.1.4.6 */
|
|
|
|
/*
|
|
html::before {
|
|
width: calc(100vw);
|
|
height: calc(100vh);
|
|
content: "";
|
|
opacity: 0.25;
|
|
position: fixed;
|
|
|
|
background: url('/img/header-banner.png') no-repeat center center fixed;
|
|
background-size: 23vh;
|
|
background-position: right 23px bottom 23px;
|
|
z-index: -2;
|
|
}
|
|
*/
|
|
|
|
|
|
|
|
nav form, nav input[type=search] { display: inline-block; }
|
|
nav form { width: 100%; max-width: 130px; }
|
|
nav input[type=search] { padding: 5px; min-height: 10px; }
|
|
|
|
/*rmme
|
|
.headerBannerImg {
|
|
height: 120px;
|
|
background-image: url('/img/header-banner.svg');
|
|
background-size: contain;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
margin-bottom: -30px;
|
|
}
|
|
|
|
|
|
*/
|
|
|
|
.headerBannerImg {
|
|
padding-top: 10px;
|
|
display: block;
|
|
margin: 0 auto;
|
|
max-height: 120px;
|
|
margin-bottom: -30px;
|
|
position: relative;
|
|
z-index: -1;
|
|
}
|
|
|
|
.menu {
|
|
display: grid;
|
|
/*grid-template-areas: "a a a a a";*/
|
|
/*grid-template-columns: repeat(4, 1fr);*/
|
|
/*grid-template-columns: repeat(auto-fill, minmax(130px, max-content));*/
|
|
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
|
|
/*grid-template-columns: repeat(auto-fill, minmax(130px, max-content));*/
|
|
/*grid-auto-columns: 1fr;*/
|
|
grid-gap: 5px;
|
|
margin: 0 auto;
|
|
justify-content: center;
|
|
}
|
|
|
|
@media(max-width: 150px) { .menu { display: block; width: 100%; }}
|
|
|
|
.menu a{
|
|
display: flex;
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
justify-content: start;
|
|
align-content: center;
|
|
text-transform: lowercase;
|
|
padding: 12px;
|
|
margin: 0 auto;
|
|
text-wrap: balance;
|
|
text-align: left;
|
|
}
|
|
|
|
/*.menu a::first-letter {
|
|
font-weight: bold;
|
|
}*/
|
|
|
|
|
|
/*list*/
|
|
.listBlock { padding: 0 5%; margin-bottom: 10px; }
|
|
.listItem {
|
|
padding: 5px 0;
|
|
border-bottom: 2px dotted var(--d3);
|
|
}
|
|
.listBlock ul li { list-style-type:none }
|
|
|
|
|
|
/*first latter*/
|
|
h3, b, .bold, nav a {
|
|
/*text-transform: uppercase;*/
|
|
}
|
|
h1::first-letter,
|
|
h2::first-letter,
|
|
h3::first-letter,
|
|
h4::first-letter,
|
|
h5::first-letter,
|
|
h6::first-letter,
|
|
b::first-letter,
|
|
.bold::first-letter {
|
|
border-bottom: 1px solid var(--c);
|
|
/*padding-bottom: 2px;*/
|
|
}
|
|
|
|
|
|
|
|
|
|
/*nav a::first-letter {
|
|
border-bottom: 1px solid var(--b3);
|
|
}*/
|
|
|
|
/*.cookiePopup{
|
|
border: 2px solid var(--orange);
|
|
}*/
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/************/
|
|
.topNav nav {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(0, auto));
|
|
margin: 0 auto;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
|
|
/* start dropdown menu */
|
|
|
|
#dropdownMenuButton { cursor: pointer; background: transparent; border: none; }
|
|
.dropdownMenuWrapper { position: relative; }
|
|
.dropdownMenuContent {
|
|
z-index: 2;
|
|
box-sizing: border-box;
|
|
width: calc(100% - (2 * var(--bodyP)));
|
|
margin: 0 auto;
|
|
display: none;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
text-align: center;
|
|
/*max-width: 500px;*/
|
|
}
|
|
|
|
/*.dropdownMenuContent a{
|
|
display: inline-block;
|
|
text-align: left;
|
|
padding-bottom: 5px;
|
|
}*/
|
|
.dropdownMenuContentColumn { column-count: 4; text-align: left; }
|
|
@media(max-width: 500px) { .dropdownMenuContentColumn { column-count: 3; } }
|
|
@media(max-width: 360px) { .dropdownMenuContentColumn { column-count: 2; } }
|
|
@media(max-width: 250px) { .dropdownMenuContentColumn { column-count: 1; } }
|
|
|
|
|
|
/* desktop */
|
|
.menuTop { display: inline-block; }
|
|
.menuTop br { content: ''; display: none; }
|
|
#dropdownMenuButton { display: none; }
|
|
|
|
|
|
/* continuation in main js, where counter hide menu, show dropdown */
|
|
|
|
/* end dropdown menu */
|
|
|
|
|
|
|
|
|
|
.logo {
|
|
/*transition: transform 1.8s ease-in-out;*/
|
|
animation: ani 1.8s;
|
|
transform: rotate(0);
|
|
animation-duration: 1.8s;
|
|
animation-delay: 0.3s;
|
|
transition: transform 1.8s ease-in-out;
|
|
}
|
|
.logo2 { transition: transform 1.8s ease-in-out; }
|
|
|
|
.logo:hover, .logo2:hover{
|
|
transform: rotate(360deg);
|
|
}
|
|
|
|
@keyframes ani {
|
|
from { transform: rotate(0); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
|
|
/* fix */
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|