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.

163 lines
2.8 KiB
CSS

body > header{
--header-h: calc(var(--lh) * 3);
}
header > .top-header{
3 years ago
background: var(--clr-header);
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 2 */
/* background: var(--clr-soft); */
}
nav.lang-menu a{
3 years ago
color: rgba(255,255,255,0.5);
text-decoration: none;
}
3 years ago
nav.lang-menu li.active a{
color: white;
}
/* order */
nav.lang-menu #lang__en{
order: 1;
}
nav.lang-menu #lang__fr{
order: 2;
}
nav.lang-menu #lang__nl{
order: 3;
}
3 years ago
nav.lang-menu #lang__es{
order: 4;
}
/* NAVIGATION
========================================================================== */
nav.nav-menu{
height: calc(var(--lh) * 2);
display: flex;
justify-content: space-between;
align-items: stretch;
background: var(--clr-soft);
3 years ago
border-top: var(--border);
border-bottom: var(--border);
3 years ago
border-color: var(--clr-header);
box-sizing: border-box;
color: var(--clr-header);
}
ul.nav-menu__pages{
flex: 1 1 0;
display: flex;
align-items: stretch;
}
div.nav-menu__footer{
flex: 1 1 0;
display: flex;
align-items: stretch;
/* square */
max-width: calc(var(--lh) * 2);
}
/* ----- MAIN NAV ----- */
ul.nav-menu__pages li{
flex: 1 0 0%;
box-sizing: border-box;
max-width: 16rem;
position: relative;
border-right: var(--border);
3 years ago
border-color: var(--clr-header);
overflow: hidden;
}
ul.nav-menu__pages 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;
padding: 0 0.5em;
}
ul.nav-menu__pages a span{
padding-top: 0.2em;
}
ul.nav-menu__pages a span{
overflow: hidden;
text-overflow: ellipsis;
}
/* variations */
ul.nav-menu__pages a:hover,
ul.nav-menu__pages li.active a{
font-variation-settings: "SERI" 100, "slnt" 0;
}
nav.nav-menu li.active{
background: white;
3 years ago
}
/* order */
nav.nav-menu #nav__index{
order: 1;
}
nav.nav-menu #nav__projects{
order: 2;
}
nav.nav-menu #nav__gallery{
order: 3;
margin-right: calc(-1 * var(--border-width));
}
/* ----- FOOTER LINK ----- */
.open-footer{
/* border */
border-left: var(--border);
border-color: var(--clr-header);
/* square size */
flex: 1 0 0;
}