You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
151 lines
2.6 KiB
CSS
151 lines
2.6 KiB
CSS
|
|
body > header{
|
|
--header-h: calc(var(--lh) * 3);
|
|
}
|
|
header > .top-header{
|
|
background: var(--c-dark);
|
|
|
|
height: calc(var(--lh) * 1);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
header > .top-header > h1{
|
|
color: white;
|
|
margin-left: calc(var(--lh) * 0.5);
|
|
line-height: var(--lh);
|
|
text-transform: uppercase;
|
|
}
|
|
header > .top-header > h1 > a{
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* LANG
|
|
========================================================================== */
|
|
nav.lang-menu ul{
|
|
|
|
display: flex;
|
|
gap: calc(var(--lh) * 0.5);
|
|
justify-content: flex-end;
|
|
padding-right: calc(var(--lh) * 0.5);
|
|
|
|
line-height: var(--lh);
|
|
|
|
/* theme 1 */
|
|
color: var(--c-soft);
|
|
|
|
/* theme 2 */
|
|
/* background: var(--c-soft);
|
|
color: var(--c-dark); */
|
|
}
|
|
nav.lang-menu a{
|
|
color: currentColor;
|
|
text-decoration: none;
|
|
}
|
|
nav.lang-menu li.active{
|
|
color: white;
|
|
}
|
|
|
|
/* order */
|
|
nav.lang-menu #lang__en{
|
|
order: 1;
|
|
}
|
|
nav.lang-menu #lang__fr{
|
|
order: 2;
|
|
}
|
|
nav.lang-menu #lang__nl{
|
|
order: 3;
|
|
}
|
|
nav.lang-menu #lang__sp{
|
|
order: 4;
|
|
}
|
|
|
|
/* NAVIGATION
|
|
========================================================================== */
|
|
nav.nav-menu ul{
|
|
height: calc(var(--lh) * 2);
|
|
|
|
display: flex;
|
|
align-items: stretch;
|
|
border-bottom: var(--border);
|
|
box-sizing: border-box;
|
|
|
|
/* theme 1 */
|
|
background: var(--c-soft);
|
|
|
|
/* theme 2 */
|
|
/* border-top: var(--border);
|
|
background: var(--c-dark);
|
|
border-color: var(--c-soft);
|
|
color: var(--c-soft); */
|
|
}
|
|
nav.nav-menu li{
|
|
flex: 1 0 0%;
|
|
box-sizing: border-box;
|
|
max-width: 16rem;
|
|
position: relative;
|
|
border-right: var(--border);
|
|
|
|
/* theme 1 */
|
|
/* background: var(--c-light); */
|
|
|
|
/* theme 2 */
|
|
/* border-color: var(--c-soft); */
|
|
}
|
|
nav.nav-menu li:first-child{
|
|
/* border-left: var(--border); */
|
|
|
|
/* theme 2 */
|
|
/* border-color: var(--c-soft); */
|
|
}
|
|
|
|
nav.nav-menu a{
|
|
color: currentColor;
|
|
display: block;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
|
|
text-transform: uppercase;
|
|
text-decoration: none;
|
|
transition: 300ms font-variation-settings;
|
|
font-variation-settings: "SERI" 0, "slnt" 0;
|
|
}
|
|
nav.nav-menu a span{
|
|
padding-top: 0.2em;
|
|
}
|
|
nav.nav-menu a:hover,
|
|
nav.nav-menu li.active a{
|
|
font-variation-settings: "SERI" 100, "slnt" 0;
|
|
}
|
|
|
|
nav.nav-menu li.active{
|
|
/* theme 1 */
|
|
background: white;
|
|
|
|
/* theme 2 */
|
|
/* color: white; */
|
|
}
|
|
|
|
/* order */
|
|
nav.nav-menu #nav__index{
|
|
order: 1;
|
|
}
|
|
nav.nav-menu #nav__projects{
|
|
order: 2;
|
|
}
|
|
nav.nav-menu #nav__gallery{
|
|
order: 3;
|
|
}
|
|
|
|
/* breaking point */
|
|
/* 16em * 3 * 1.25*/
|
|
@media only screen and (max-width: 60em) {
|
|
nav.nav-menu li#nav__gallery{
|
|
border-right: none;
|
|
}
|
|
}
|