diff --git a/public/styles/detail.css b/public/styles/detail.css index e381a15c..08f1f22a 100644 --- a/public/styles/detail.css +++ b/public/styles/detail.css @@ -149,6 +149,10 @@ main:has(.elementor-widget-container) { } } +b:has(footer){ + grid-column: 1/-1; +} + /* -intro text- */ @@ -353,17 +357,18 @@ select{ figure img{ width: 100% !important; height: auto; + } .wp-block-image{ width: 100% !important; - margin-block: 5% ; + margin-block: 10% ; transition: 1s forwards ; animation: appear-subtopic 1s forwards ease-out ; animation-timeline: view(); - animation-range:entry 1rem ; - /* animation-range:exit ; */ + animation-range-start:entry ; + animation-range-end:contain ; opacity: 0; z-index: 0 ; max-height: 40%; @@ -413,7 +418,7 @@ select{ content: close-quote; position: absolute; top: 34%; - left: 95%; + left: 99%; /* outline: solid rgb(0, 145, 255); */ } @@ -431,11 +436,11 @@ select{ em{ font-style: italic; - color: #373636; + color: #373434; } :nth-last-child(1) em:nth-last-of-type(1) { - color: rgb(107, 107, 18); + color: rgb(114, 114, 23); } } @@ -789,5 +794,19 @@ footer{ fill: var(--text-dm-color); } - + #main-article em{ + + color: #625b5b; + color: var(--bg-color); + mix-blend-mode:difference; + filter:hue-rotate(10deg)saturate(70%); + + /* :nth-last-child(1) em:nth-last-of-type(1) { + color: rgb(114, 114, 23); + mix-blend-mode:difference; + filter: none !important; + + } */ + + } } diff --git a/public/styles/header.css b/public/styles/header.css index 1c96d8bb..db354006 100644 --- a/public/styles/header.css +++ b/public/styles/header.css @@ -115,6 +115,11 @@ header nav{ width: min(220px,100%); } +.mobile-logo,.desktop-logo{ + + width: min(220px,100%); +} + .desktop-menu a svg { width:fit-content ; } @@ -335,6 +340,10 @@ header nav{ } } + .mobile-menu { + border-bottom: solid 1px white; + } + #mobile-menu-window .menu-exit svg path { stroke: var(--text-dm-color); } @@ -347,9 +356,9 @@ header nav{ fill: var(--text-dm-color); } - + /* .desktop-menu a svg { - fill: white; + fill: #fff; } */ :is(.desktop-logo,.mobile-logo,.desktop-pages) svg { diff --git a/public/styles/home-page.css b/public/styles/home-page.css index 3bebbdbc..db349b3e 100644 --- a/public/styles/home-page.css +++ b/public/styles/home-page.css @@ -166,17 +166,23 @@ main{ background-size: cover; } + article.highlighted-post .post-image:hover, section.carousel li:hover{ + transform: translateY(-2.8px); + transition: transform 70ms ease-out; + } + article.highlighted-post .overlay { position: absolute; bottom: 0; left: 0; width: 100%; - height: 125px; + height: 145px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); } article.highlighted-post .post-title, article.highlighted-post .post-meta { + font-family: sans-serif; width: 90%; position: absolute; bottom: 15px; @@ -186,6 +192,7 @@ main{ z-index: 1; } + /* First Highlighted Post */ article.highlighted-post:first-of-type { grid-column: 1 / 3; @@ -196,33 +203,41 @@ main{ } article.highlighted-post:first-of-type .post-title { - font-size: 1em; - bottom: 40px; - -webkit-line-clamp: 2; + font-family: sans-serif; + font-size: 1.25em; + left: 20px; + bottom: 50px; + -webkit-line-clamp: 3; } article.highlighted-post:first-of-type .post-meta { - bottom: 10px; + left: 20px; + bottom: 20px; display: flex; justify-content: space-between; color: #B1B1B1; - font-size: 12px; + font-size: 1em; background-color: unset; height: unset; } /* Carousel Section */ section.carousel ul { + position: relative; display: flex; overflow: auto; scroll-snap-type: x mandatory; gap: 2em; + /* outline: solid blue; */ + /* height: 34dvh; */ } section.carousel li { + position: relative; margin-block: 2em; text-align: center; - width: 70vw; + width: 70dvw; + /* height: 27dvh; */ flex: 70vw 0 0; scroll-snap-align: center; } @@ -235,7 +250,14 @@ main{ } section.carousel .post-title { - margin: 0 0 1.5rem; + margin: 0 0 1rem; + height: 7dvh; + height: 100%; + } + + section.carousel .post-meta { + position: relative; + } /* Scrollbar Support */ diff --git a/views/partials/header.ejs b/views/partials/header.ejs index d47975aa..471d426a 100644 --- a/views/partials/header.ejs +++ b/views/partials/header.ejs @@ -99,7 +99,20 @@ Nieuwsbrief -
+
+ + + + + + + + + + + + +