studio-variable/hic-et-nunc
5
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity Actions

Various fix CSS
All checks were successful
Deploy / Deploy to Production (push) Successful in 2s
Details

Browse source
This commit is contained in:
Camilledenoray 2026-06-04 15:33:30 +02:00
parent 52bed3e2c4
commit a481c727a6
7 changed files with 105 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

16
assets/css/src/_main.scss
View file

@ -35,7 +35,7 @@
--font-size-S: 0.9rem;
--font-size-L: 1.6rem;
--font-size-XL: 11vw;
--line-height-S: var(--font-size-S);
--line-height-S: calc(var(--font-size-S) * 1.2);
--text-color: black;
--bg-color: white;
--body-margin: 0.6rem;
@ -48,11 +48,13 @@
--index-width: 40rem;
--close-cursor: url(/assets/images/close-cursor.png), crosshair;
--main-title-top: -0.7vw;
--mix-blend-color: white;
}
body {
font-family: var(--main-font);
font-size: var(--font-size-S);
line-height: var(--line-height-S);
margin: var(--body-margin);
top: 0;
position: absolute;
@ -114,6 +116,7 @@ nav {
column-gap: calc(2 * var(--body-margin));
margin: calc(4 * var(--line-height-S)) 0 var(--line-height-S) 0;
width: calc(var(--index-width) - var(--body-margin));
line-height: normal;
a {
text-decoration: none;
@ -178,10 +181,10 @@ button.next {
display: grid;
grid-template-columns: var(--index-width) auto;
pointer-events: none;
mix-blend-mode: difference;
}
.fix:hover .slide-number {
display: none;
}
.toggle {
@ -220,18 +223,15 @@ button.next {
opacity: 1;
}
// passe en oppacité réduite les éléments non survolés de la liste sur la page index
.projects-index:has(li:hover) li:not(:hover) {
opacity: var(--low-opacity);
// opacity: var(--low-opacity);
}
.unselected:hover .toggle {
display: none;
}
.unselected:hover .slide-number {
display: none;
}
.selected {
opacity: 1;
}
@ -255,6 +255,8 @@ button.next {
.slide-number {
text-align: right;
display: none;
padding-right: var(--body-margin);
color: var(--mix-blend-color);
}
.selected .slide-number {

32
assets/css/src/_mobile.scss
View file

@ -94,7 +94,8 @@
position: fixed;
top: var(--slider-height);
margin-top: calc(-2 * (var(--line-height-S)));
right: var(--body-margin);
left: var(--body-margin);
padding-right: 0;
}
.main-menu {
@ -105,16 +106,6 @@
display: flex;
}
.close-mobile-menu {
position: fixed;
bottom: 0;
width: 100%;
left: 0;
font-size: var(--font-size-XL);
display: flex;
justify-content: center;
}
header:hover ~ main {
opacity: 1;
transition-duration: 0;
@ -133,6 +124,25 @@
#home-slideshow img:not(.slide.active img) {
display: none;
}
.project-toggler.closer {
position: fixed;
top: var(--slider-height);
margin-top: calc(-2.3 * (var(--line-height-S)));
right: var(--body-margin);
font-size: var(--font-size-L);
cursor: pointer;
mix-blend-mode: difference;
}
.project-toggler.closer::before {
content: "Fermer";
color: var(--mix-blend-color);
}
.selected .toggle {
display: block;
}
}
@media (max-width: 687px) {

24
assets/css/src/_nav.scss
View file

@ -23,6 +23,7 @@ nav ul {
nav li {
float: left;
color: var(--text-color);
}
nav li a {
@ -45,7 +46,6 @@ nav li a {
.title-nav a {
text-decoration: none;
padding-bottom: var(--nav-margin);
/* background-color: yellow; */
}
.title-nav-mobile {
@ -53,7 +53,6 @@ nav li a {
}
.main-title {
z-index: 2;
font-size: var(--font-size-S);
top: var(--body-margin);
cursor: pointer;
@ -141,7 +140,7 @@ nav.main-menu:hover {
}
[data-template="home"] .main-title span {
color: white;
color: var(--mix-blend-color);
}
@media (min-width: 1500px) {
@ -162,6 +161,25 @@ nav.main-menu:hover {
justify-content: center;
}
.toggle-mobile-menu {
position: fixed;
bottom: 0;
width: 100%;
left: 0;
font-size: var(--font-size-XL);
display: flex;
justify-content: center;
line-height: normal;
}
[data-template="home"] .toggle-mobile-menu {
color: var(--mix-blend-color);
}
.toggle-mobile-menu[command="close"] {
color: var(--text-color);
}
.mobile-menu button {
pointer-events: all;
}

1
assets/css/src/_reset.scss
View file

@ -6,4 +6,5 @@ button {
font: inherit;
cursor: pointer;
background-color: transparent;
color: inherit;
}

73
assets/css/style.css
View file

@ -7,6 +7,7 @@ button {
font: inherit;
cursor: pointer;
background-color: transparent;
color: inherit;
}
@font-face {
@ -30,7 +31,7 @@ button {
--font-size-S: 0.9rem;
--font-size-L: 1.6rem;
--font-size-XL: 11vw;
--line-height-S: var(--font-size-S);
--line-height-S: calc(var(--font-size-S) * 1.2);
--text-color: black;
--bg-color: white;
--body-margin: 0.6rem;
@ -43,11 +44,13 @@ button {
--index-width: 40rem;
--close-cursor: url(/assets/images/close-cursor.png), crosshair;
--main-title-top: -0.7vw;
--mix-blend-color: white;
}
body {
font-family: var(--main-font);
font-size: var(--font-size-S);
line-height: var(--line-height-S);
margin: var(--body-margin);
top: 0;
position: absolute;
@ -110,6 +113,7 @@ nav.filter-menu {
column-gap: calc(2 * var(--body-margin));
margin: calc(4 * var(--line-height-S)) 0 var(--line-height-S) 0;
width: calc(var(--index-width) - var(--body-margin));
line-height: normal;
}
nav.filter-menu a {
text-decoration: none;
@ -171,10 +175,7 @@ button.next {
display: grid;
grid-template-columns: var(--index-width) auto;
pointer-events: none;
}
.fix:hover .slide-number {
display: none;
mix-blend-mode: difference;
}
.toggle {
@ -213,18 +214,10 @@ button.next {
opacity: 1;
}
.projects-index:has(li:hover) li:not(:hover) {
opacity: var(--low-opacity);
}
.unselected:hover .toggle {
display: none;
}
.unselected:hover .slide-number {
display: none;
}
.selected {
opacity: 1;
}
@ -246,6 +239,8 @@ button.next {
.slide-number {
text-align: right;
display: none;
padding-right: var(--body-margin);
color: var(--mix-blend-color);
}
.selected .slide-number {
@ -347,6 +342,7 @@ nav ul {
nav li {
float: left;
color: var(--text-color);
}
nav li a {
@ -369,7 +365,6 @@ nav li a {
.title-nav a {
text-decoration: none;
padding-bottom: var(--nav-margin);
/* background-color: yellow; */
}
.title-nav-mobile {
@ -377,7 +372,6 @@ nav li a {
}
.main-title {
z-index: 2;
font-size: var(--font-size-S);
top: var(--body-margin);
cursor: pointer;
@ -465,7 +459,7 @@ nav.main-menu:hover {
}
[data-template=home] .main-title span {
color: white;
color: var(--mix-blend-color);
}
@media (min-width: 1500px) {
@ -484,6 +478,25 @@ nav.main-menu:hover {
justify-content: center;
}
.toggle-mobile-menu {
position: fixed;
bottom: 0;
width: 100%;
left: 0;
font-size: var(--font-size-XL);
display: flex;
justify-content: center;
line-height: normal;
}
[data-template=home] .toggle-mobile-menu {
color: var(--mix-blend-color);
}
.toggle-mobile-menu[command=close] {
color: var(--text-color);
}
.mobile-menu button {
pointer-events: all;
}
@ -645,7 +658,8 @@ dialog#mobile-menu-content::backdrop {
position: fixed;
top: var(--slider-height);
margin-top: calc(-2 * (var(--line-height-S)));
right: var(--body-margin);
left: var(--body-margin);
padding-right: 0;
}
.main-menu {
display: none;
@ -653,15 +667,6 @@ dialog#mobile-menu-content::backdrop {
.mobile-menu {
display: flex;
}
.close-mobile-menu {
position: fixed;
bottom: 0;
width: 100%;
left: 0;
font-size: var(--font-size-XL);
display: flex;
justify-content: center;
}
header:hover ~ main {
opacity: 1;
transition-duration: 0;
@ -677,6 +682,22 @@ dialog#mobile-menu-content::backdrop {
#home-slideshow img:not(.slide.active img) {
display: none;
}
.project-toggler.closer {
position: fixed;
top: var(--slider-height);
margin-top: calc(-2.3 * (var(--line-height-S)));
right: var(--body-margin);
font-size: var(--font-size-L);
cursor: pointer;
mix-blend-mode: difference;
}
.project-toggler.closer::before {
content: "Fermer";
color: var(--mix-blend-color);
}
.selected .toggle {
display: block;
}
}
@media (max-width: 687px) {
[data-template=infos] div {

2
assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long