valentin_le_moign/ou_atterrir_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

couleurs en canvas et responsive sass

Browse Source
This commit is contained in:
Valentin
2023-03-28 02:39:40 +02:00
parent 6e4dca0d5a
commit 40c1d8402e
6 changed files with 628 additions and 536 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles.scss
+401 -334
View File
@@ -1,335 +1,402 @@
$global_margins: 1.5vh 1vw;
$buttons_border_width: 1.2px;
$grey_inactive: rgb(110, 110, 110);
$grey_hover: rgb(50, 50, 50);
@font-face {
font-family: 'Public';
font-style: normal;
font-weight: 400;
src: url('assets/fonts/PublicSans-Regular.ttf') format('TrueType');
}
@font-face {
font-family: 'Public';
font-style: normal;
font-weight: 300;
src: url('assets/fonts/PublicSans-Light.ttf') format('TrueType');
}
@font-face {
font-family: 'Ortica';
font-style: bold;
font-weight: 300;
src: url('assets/fonts/Ortica-Bold.woff2') format('woff2');
}
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Public', sans-serif;
font-weight: 400;
}
#content {
padding: $global_margins;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
svg {
position: absolute;
height: 50%;
path {
cursor: pointer;
}
}
svg#fill {
fill: white;
/* mix blend mode est dépendant du stacking context */
mix-blend-mode: overlay;
opacity: 0.4;
}
svg#stroke {
position: absolute;
fill: none;
stroke: black;
stroke-width: 1px;
}
#BG_BG_BG {
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background-size: 100% 100%;
background-repeat: no-repeat;
z-index: -1;
opacity: 1;
transition: opacity 0.5s ease-in-out;
}
#BG_BG_BG_tmp {
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background-size: 100% 100%;
background-repeat: no-repeat;
z-index: -2;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
}
#grain-bg {
position: absolute !important;
width: 100vw;
height: 100vh;
}
#grain-bg > * {
position: relative;
}
#buttons_container {
position: fixed;
top: 0;
left: 0;
z-index: 1;
display: flex;
align-items: center;
margin: $global_margins;
height: 4vh;
.niveau_profondeur {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
margin-right: 30px;
width: 5vw;
p {
font-weight: 300;
cursor: pointer;
}
p.selected {
font-weight: 400;
text-decoration: underline;
}
p:hover {
font-weight: 400;
}
}
.arrow {
margin-right: 15px;
svg {
height: 27px;
width: auto;
fill: white;
stroke: black;
stroke-width: 0;
cursor: pointer;
margin-top: 4px;
transition: fill 0.2s ease-out;
}
svg:hover {
fill: $grey_inactive;
}
svg:active {
fill: $grey_hover;
}
}
.arrow:last-of-type {
margin-right: 0;
margin-left: 12px;
}
.mode {
display: flex;
align-items: center;
justify-content: space-around;
background-color: white;
margin: 0;
margin-right: 14px;
padding: 10px 12px;
border-radius: 50px;
cursor: pointer;
border: solid 0.8px $grey_inactive;
color: rgba(0, 0, 0, 0.5);
transition: border 0.1s ease-out, color 0.1s ease-out, padding 0.2s ease-out;
font-weight: 300;
font-size: 1rem;
svg {
height: 28px;
.thick {
transition: stroke-width 0.2s ease-out, fill 0.2s ease-out, stroke 0.2s ease-out;
stroke-width: 0.8;
stroke: $grey_inactive;
}
.thin {
transition: stroke-width 0.2s ease-out, fill 0.2s ease-out, stroke 0.2s ease-out;
stroke-width: 0.5;
stroke: $grey_inactive;
}
.circle-fill {
fill: $grey_inactive;
}
}
.mode_container {
overflow: hidden;
width: auto;
transition: max-width 0.4s ease-out, margin-left 0.4s ease-out, margin-right 0.4s ease-out;
max-width: 0px;
margin-left: 10px;
margin-right: 5px;
max-width: 200px;
p {
white-space: nowrap;
height: fit-content;
margin-bottom: 3px;
}
}
}
.mode.active {
padding: 10px 12px !important;
font-weight: 400;
border: solid $buttons_border_width rgba(0, 0, 0, 1);
color: rgba(0, 0, 0, 1);
svg .thick {
stroke-width: 1.2;
stroke: rgba(0, 0, 0, 1);
}
svg .thin {
stroke-width: 0.6;
stroke: rgba(0, 0, 0, 1);
}
svg .circle-fill {
fill: rgba(0, 0, 0, 1);
}
.mode_container {
max-width: 200px !important;
margin-left: 10px !important;
margin-right: 5px !important;
}
}
.mode:hover {
padding: 10px 12px !important;
color: $grey_hover;
border-color: $grey_hover;
svg .thick, svg .thin {
stroke: $grey_hover;
}
svg .circle-fill {
fill: $grey_hover;
}
.mode_container {
max-width: 200px !important;
margin-left: 10px !important;
margin-right: 5px !important;
}
}
.mode.collapsed {
padding: 10px 7px;
.mode_container {
max-width: 0px;
margin-left: 0px;
margin-right: 0px;
}
}
}
#global_nav {
position: fixed;
bottom: 0;
left: 0;
margin: $global_margins;
z-index: 1;
h1 {
font-family: 'Ortica';
font-size: 1.7em;
margin-bottom: 17px;
margin-left: 5px;
}
#menu {
display: flex;
#search {
display: flex;
align-items: center;
input[type="search"] {
height: 34px;
width: 10vw;
padding-left: 13px;
padding-right: 30px;
padding-bottom: 2px;
font-family: 'Public';
font-size: 1em;
font-weight: 300;
border-radius: 20px;
border: solid $grey_inactive $buttons_border_width;
color: $grey_inactive;
transition: color 0.2s ease-out;
}
input[type="search"]:hover {
color: $grey_hover;
}
input[type="search"]:active {
color: black;
}
button {
background: none;
border: none;
cursor: pointer;
svg {
margin-top: 3px;
margin-left: -45px;
height: 24px;
fill: $grey_inactive;
transition: fill 0.2s ease-out;
}
svg:hover {
fill: $grey_hover;
}
}
}
.menu_item {
font-weight: 300;
display: flex;
align-items: center;
cursor: pointer;
margin: 0 10px;
padding-bottom: 2px;
svg {
height: 24px;
margin-right: -5px;
}
}
.menu_item:hover {
font-weight: 400;
}
}
// /!\ Large Desktop first /!\
// larger desktop variables (default)
$animation_style: 0.3s ease-out;
$global_margins: 1.5vh 1vw 2vh 1vw;
$buttons_border_width: 1.2px;
$buttons_padding: 10px 12px;
$buttons_padding_collapsed: 10px 10px;
$buttons_inner_margin: 0px 5px 0px 10px;
$buttons_margin: 14px;
$main_title_margin: 0px 0px 17px 5px;
$search_box_height: 2rem;
$search_icon_offset: -45px;
$main_color: rgb(0, 0, 0);
$bg_color: rgba(255, 255, 255);
$grey_inactive: rgb(110, 110, 110);
$grey_hover: rgb(50, 50, 50);
$UI_main_font_size: 1rem;
$large_picto_size: 2rem;
$medium_picto_size: 1.3rem;
// smaller desktop variables
$buttons_padding--sm: 8px 10px 8px 7px;
$buttons_padding_collapsed--sm: 8px 2px;
$buttons_inner_margin--sm: 0px 3px 0px 5px;
$main_title_margin--sm: 0px 0px 8px 5px;
$search_box_height--sm: 1.5rem;
$search_icon_offset--sm: -23px;
$UI_main_font_size--sm: 0.7rem;
$large_picto_size--sm: 1.2rem;
$medium_picto_size--sm: 1rem;
@font-face {
font-family: 'Public';
font-style: normal;
font-weight: 400;
src: url('assets/fonts/PublicSans-Regular.ttf') format('TrueType');
}
@font-face {
font-family: 'Public';
font-style: normal;
font-weight: 300;
src: url('assets/fonts/PublicSans-Light.ttf') format('TrueType');
}
@font-face {
font-family: 'Ortica';
font-style: bold;
font-weight: 300;
src: url('assets/fonts/Ortica-Bold.woff2') format('woff2');
}
* {
margin: 0;
padding: 0;
}
button {
all: initial;
}
body {
font-family: 'Public', sans-serif;
font-weight: 400;
color: $main_color;
}
#content {
padding: $global_margins;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
svg {
position: absolute;
height: 50%;
path {
cursor: pointer;
}
}
svg#fill {
fill: $bg_color;
/* mix blend mode est dépendant du stacking context */
mix-blend-mode: overlay;
opacity: 0.4;
}
svg#stroke {
position: absolute;
fill: none;
stroke: $main_color;
stroke-width: 1px;
}
}
#buttons_container {
position: fixed;
top: 0;
left: 0;
z-index: 1;
display: flex;
align-items: center;
margin: $global_margins;
font-size: $UI_main_font_size;
.niveau_profondeur {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
margin-right: 30px;
width: 5vw;
p {
font-weight: 300;
cursor: pointer;
}
p.selected {
font-weight: 400;
text-decoration: underline;
}
p:hover {
font-weight: 400;
}
}
.arrow {
margin-right: $buttons_margin;
svg {
height: $large_picto_size;
width: auto;
fill: $bg_color;
stroke: $main_color;
stroke-width: 0;
cursor: pointer;
margin-top: 4px;
transition: fill $animation_style;
}
svg:hover {
fill: $grey_inactive;
}
svg:active {
fill: $grey_hover;
}
}
.arrow:last-of-type {
margin-right: 0;
margin-left: $buttons_margin;
}
.mode {
display: flex;
align-items: center;
justify-content: space-around;
background-color: $bg_color;
margin: 0;
margin-right: $buttons_margin;
padding: $buttons_padding;
border-radius: 50px;
cursor: pointer;
border: solid 0.8px $grey_inactive;
color: rgba(0, 0, 0, 0.5);
transition: border 0.1s ease-out, color 0.1s ease-out, padding $animation_style;
font-weight: 300;
svg {
height: $large_picto_size;
.thick {
transition: stroke-width $animation_style, fill $animation_style, stroke $animation_style;
stroke-width: 0.8;
stroke: $grey_inactive;
}
.thin {
transition: stroke-width $animation_style, fill $animation_style, stroke $animation_style;
stroke-width: 0.5;
stroke: $grey_inactive;
}
.circle-fill {
fill: $grey_inactive;
}
}
.mode_container {
overflow: hidden;
width: auto;
transition: max-width 0.4s ease-out, margin-left 0.4s ease-out, margin-right 0.4s ease-out;
max-width: 0px;
margin: $buttons_inner_margin;
max-width: 200px;
p {
white-space: nowrap;
height: fit-content;
margin-bottom: 1.5px;
}
}
}
.mode.active {
padding: $buttons_padding !important;
font-weight: 400;
border: solid $buttons_border_width $main_color;
color: $main_color;
svg .thick {
stroke-width: 1.2;
stroke: $main_color;
}
svg .thin {
stroke-width: 0.6;
stroke: $main_color;
}
svg .circle-fill {
fill: $main_color;
}
.mode_container {
max-width: 200px !important;
margin: $buttons_inner_margin !important;
}
}
.mode:hover {
padding: $buttons_padding !important;
color: $grey_hover;
border-color: $grey_hover;
svg .thick, svg .thin {
stroke: $grey_hover;
}
svg .circle-fill {
fill: $grey_hover;
}
.mode_container {
max-width: 200px !important;
margin: $buttons_inner_margin !important;
}
}
.mode.collapsed {
padding: $buttons_padding_collapsed;
.mode_container {
max-width: 0px;
margin-left: 0px;
margin-right: 0px;
}
}
.mode:last-of-type {
margin-right: 0;
}
}
#global_nav {
position: fixed;
bottom: 0;
left: 0;
margin: $global_margins;
z-index: 1;
font-size: $UI_main_font_size;
h1 {
font-family: 'Ortica';
font-size: 1.7em;
margin: $main_title_margin;
}
#menu {
display: flex;
align-items: center;
#search {
display: flex;
align-items: center;
input[type="search"] {
height: $search_box_height;
width: 10vw;
padding-left: 13px;
padding-right: 30px;
padding-bottom: 1px;
font-family: 'Public';
font-weight: 300;
border-radius: 20px;
border: solid $grey_inactive $buttons_border_width;
color: $grey_inactive;
background-color: $bg_color;
transition: color $animation_style;
}
input[type="search"]:hover {
color: $grey_hover;
}
input[type="search"]:active {
color: $main_color;
}
button {
background: none;
border: none;
cursor: pointer;
svg {
margin-top: 5px;
margin-left: $search_icon_offset;
height: $medium_picto_size;
fill: $grey_inactive;
transition: fill $animation_style;
}
svg:hover {
fill: $grey_hover;
}
}
}
.menu_item {
font-weight: 300;
display: flex;
align-items: center;
cursor: pointer;
margin: 0 10px;
padding-bottom: 2px;
svg {
width: $medium_picto_size;
height: $medium_picto_size;
margin-right: 3px;
fill: $main_color;
}
}
.menu_item:hover {
font-weight: 400;
}
}
}
// //
// smaller desktop //
// //
@media only screen and (max-width: 1440px) {
#buttons_container, #global_nav {
font-size: $UI_main_font_size--sm;
}
#buttons_container {
.arrow svg {
height: $large_picto_size--sm;
}
.mode {
padding: $buttons_padding--sm;
svg {
height: $large_picto_size--sm;
}
.mode_container {
margin: $buttons_inner_margin--sm;
}
}
.mode.active {
padding: $buttons_padding--sm !important;
.mode_container {
margin: $buttons_inner_margin--sm !important;
}
}
.mode:hover {
padding: $buttons_padding--sm !important;
.mode_container {
margin: $buttons_inner_margin--sm !important;
}
}
.mode.collapsed {
padding: $buttons_padding_collapsed--sm;
}
}
#global_nav {
h1 {
margin: $main_title_margin--sm;
}
#menu {
#search {
input[type="search"] {
height: $search_box_height--sm;
font-size: $UI_main_font_size--sm;
}
button {
svg {
margin-left: $search_icon_offset--sm;
width: $medium_picto_size--sm;
}
}
}
.menu_item {
svg {
width: $medium_picto_size--sm;
height: $medium_picto_size--sm;
}
}
}
}
}