Project-closer+css images projects
All checks were successful
Deploy / Deploy to Production (push) Successful in 3s
All checks were successful
Deploy / Deploy to Production (push) Successful in 3s
This commit is contained in:
parent
c569fa0140
commit
0badd67b46
8 changed files with 99 additions and 63 deletions
|
|
@ -135,20 +135,20 @@ nav {
|
|||
max-width: 100%;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
|
||||
picture img {
|
||||
max-width: 100%;
|
||||
max-height: calc(100vh - var(--body-margin) * 2);
|
||||
vertical-align: bottom;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
picture {
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
picture img {
|
||||
max-width: 100%;
|
||||
max-height: calc(100vh - var(--body-margin) * 2);
|
||||
vertical-align: bottom;
|
||||
width: auto;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.project-slideshow-container {
|
||||
display: block;
|
||||
position: fixed;
|
||||
|
|
@ -161,7 +161,6 @@ picture img {
|
|||
}
|
||||
|
||||
.project-slideshow-container .all-projects-closer {
|
||||
background-color: red;
|
||||
inset: 0;
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -9,18 +9,31 @@
|
|||
body {
|
||||
}
|
||||
|
||||
.project-slideshow {
|
||||
.project-slideshow-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
height: var(--slider-height);
|
||||
button.all-projects-closer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.project-slideshow img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
|
||||
.project-slideshow {
|
||||
inset: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
picture {
|
||||
inset: 0;
|
||||
position: absolute;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-title {
|
||||
|
|
@ -54,7 +67,7 @@
|
|||
padding-top: var(--font-size-XL);
|
||||
}
|
||||
|
||||
main:has(ul li.selected) {
|
||||
main:has(nav li.selected) {
|
||||
top: var(--slider-height);
|
||||
padding-top: 0;
|
||||
}
|
||||
|
|
@ -70,7 +83,7 @@
|
|||
nav.filter-menu:has(+ ul li.selected) {
|
||||
}
|
||||
|
||||
ul.projects-index {
|
||||
nav.projects-index {
|
||||
padding-top: var(--line-height-S);
|
||||
position: absolute;
|
||||
width: calc(100vw - (var(--body-margin) * 3));
|
||||
|
|
@ -104,6 +117,12 @@
|
|||
|
||||
.mobile-menu {
|
||||
display: flex;
|
||||
ul {
|
||||
font-size: var(--font-size-L);
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
header:hover ~ main {
|
||||
|
|
|
|||
|
|
@ -10,27 +10,26 @@ nav.main-menu {
|
|||
top: 0;
|
||||
font-size: var(--font-size-XL);
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
margin-top: var(--line-height-S);
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
font-size: var(--font-size-L);
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
}
|
||||
ul {
|
||||
margin-top: var(--line-height-S);
|
||||
padding: 0;
|
||||
font-size: var(--font-size-L);
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
|
||||
nav li {
|
||||
float: left;
|
||||
color: var(--text-color);
|
||||
}
|
||||
li {
|
||||
float: left;
|
||||
color: var(--text-color);
|
||||
|
||||
nav li a {
|
||||
list-style: none;
|
||||
text-decoration: none;
|
||||
text-transform: initial;
|
||||
cursor: pointer;
|
||||
a {
|
||||
list-style: none;
|
||||
text-decoration: none;
|
||||
text-transform: initial;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title-nav {
|
||||
|
|
|
|||
|
|
@ -8,3 +8,7 @@ button {
|
|||
background-color: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
nav li {
|
||||
list-style: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,10 @@ button {
|
|||
color: inherit;
|
||||
}
|
||||
|
||||
nav li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "neue-haas-grotesk-display";
|
||||
src: url("https://use.typekit.net/af/174ae3/00000000000000007735bb5a/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"), url("https://use.typekit.net/af/174ae3/00000000000000007735bb5a/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"), url("https://use.typekit.net/af/174ae3/00000000000000007735bb5a/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype");
|
||||
|
|
@ -130,18 +134,16 @@ nav.filter-menu a {
|
|||
right: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
picture {
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
picture img {
|
||||
.project-slideshow picture img {
|
||||
max-width: 100%;
|
||||
max-height: calc(100vh - var(--body-margin) * 2);
|
||||
vertical-align: bottom;
|
||||
width: auto;
|
||||
height: -moz-fit-content;
|
||||
height: fit-content;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
picture {
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.project-slideshow-container {
|
||||
|
|
@ -156,7 +158,6 @@ picture img {
|
|||
}
|
||||
|
||||
.project-slideshow-container .all-projects-closer {
|
||||
background-color: red;
|
||||
inset: 0;
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
@ -357,22 +358,18 @@ nav.main-menu {
|
|||
font-size: var(--font-size-XL);
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
nav.main-menu ul {
|
||||
margin-top: var(--line-height-S);
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
font-size: var(--font-size-L);
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
nav li {
|
||||
nav.main-menu ul li {
|
||||
float: left;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
nav li a {
|
||||
nav.main-menu ul li a {
|
||||
list-style: none;
|
||||
text-decoration: none;
|
||||
text-transform: initial;
|
||||
|
|
@ -624,7 +621,7 @@ dialog#mobile-menu-content::backdrop {
|
|||
--font-size-L: 1.5rem;
|
||||
--font-size-S: 0.75rem;
|
||||
}
|
||||
.project-slideshow {
|
||||
.project-slideshow-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
|
|
@ -632,7 +629,19 @@ dialog#mobile-menu-content::backdrop {
|
|||
margin: 0;
|
||||
height: var(--slider-height);
|
||||
}
|
||||
.project-slideshow img {
|
||||
.project-slideshow-container button.all-projects-closer {
|
||||
display: none;
|
||||
}
|
||||
.project-slideshow {
|
||||
inset: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
.project-slideshow picture {
|
||||
inset: 0;
|
||||
position: absolute;
|
||||
}
|
||||
.project-slideshow picture img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-o-object-fit: cover;
|
||||
|
|
@ -662,7 +671,7 @@ dialog#mobile-menu-content::backdrop {
|
|||
width: calc(100% - var(--body-margin));
|
||||
padding-top: var(--font-size-XL);
|
||||
}
|
||||
main:has(ul li.selected) {
|
||||
main:has(nav li.selected) {
|
||||
top: var(--slider-height);
|
||||
padding-top: 0;
|
||||
}
|
||||
|
|
@ -673,7 +682,7 @@ dialog#mobile-menu-content::backdrop {
|
|||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
ul.projects-index {
|
||||
nav.projects-index {
|
||||
padding-top: var(--line-height-S);
|
||||
position: absolute;
|
||||
width: calc(100vw - var(--body-margin) * 3);
|
||||
|
|
@ -702,6 +711,12 @@ dialog#mobile-menu-content::backdrop {
|
|||
.mobile-menu {
|
||||
display: flex;
|
||||
}
|
||||
.mobile-menu ul {
|
||||
font-size: var(--font-size-L);
|
||||
}
|
||||
.mobile-menu ul a {
|
||||
text-decoration: none;
|
||||
}
|
||||
header:hover ~ main {
|
||||
opacity: 1;
|
||||
transition-duration: 0;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -27,9 +27,9 @@ allProjects.forEach((project) => {
|
|||
});
|
||||
});
|
||||
|
||||
const projectTogglers = document.querySelectorAll(".project-toggler");
|
||||
const toggleProjects = document.querySelectorAll(".project-toggler");
|
||||
|
||||
projectTogglers.forEach((button) => {
|
||||
toggleProjects.forEach((button) => {
|
||||
button.addEventListener("click", (event) => {
|
||||
const parentLi = button.closest("li");
|
||||
if (parentLi.classList.contains("selected")) {
|
||||
|
|
@ -41,9 +41,9 @@ projectTogglers.forEach((button) => {
|
|||
});
|
||||
});
|
||||
|
||||
const allProjectsCloser = document.querySelectorAll(".all-projects-closer");
|
||||
allProjectsCloser.forEach((projectCloser) => {
|
||||
projectCloser.addEventListener("click", () => {
|
||||
const closeAllProjects = document.querySelectorAll(".all-projects-closer");
|
||||
closeAllProjects.forEach((closeProject) => {
|
||||
closeProject.addEventListener("click", () => {
|
||||
window.location = "/index";
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue