263 lines
7.9 KiB
CSS
263 lines
7.9 KiB
CSS
/*=============Gamme colorée*/
|
|
:root[data-theme="dark"]{
|
|
--back-color: black;
|
|
--main-color: white;
|
|
--accent-color: #05ff61;
|
|
--neon-color: #fe02c6;
|
|
}
|
|
|
|
:root[data-theme="light"]{
|
|
--back-color: white;
|
|
--main-color: black;
|
|
--accent-color: #FFA64D;
|
|
--neon-color: skyblue;
|
|
}
|
|
/*==========================Background*/
|
|
html,body{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
overflow: hidden;
|
|
background-color: var(--back-color);
|
|
top: 0;
|
|
left: 0;
|
|
margin: 0;
|
|
}
|
|
/*==========================Structure*/
|
|
|
|
main{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
z-index: 0;
|
|
|
|
#seeYouLater{
|
|
position: absolute;
|
|
z-index: 1;
|
|
width: 444px;
|
|
height: 377px;
|
|
top:33px;
|
|
left:33px;
|
|
|
|
div {
|
|
padding: 13.12px;
|
|
padding-right: 33px;
|
|
p{
|
|
font-family: 'lineal';
|
|
font-size: 22px;
|
|
color: var(--main-color)
|
|
|
|
|
|
}
|
|
|
|
strong{
|
|
color: unset;
|
|
animation: blink 3.33s infinite;
|
|
}
|
|
}
|
|
}
|
|
|
|
#contactSection{
|
|
position: absolute;
|
|
z-index: 1;
|
|
width: 333px;
|
|
height: 117px;
|
|
top:400px;
|
|
left:13.12px;
|
|
|
|
|
|
nav{
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
padding: 13.12px;
|
|
gap: 7.77px;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
|
|
box-sizing: border-box;
|
|
|
|
.textBtn{
|
|
width: 66%;
|
|
height: 77%;
|
|
}
|
|
}
|
|
}
|
|
|
|
#colorBtnContainer{
|
|
visibility: collapse;
|
|
position:absolute;
|
|
right: 13.12px;
|
|
bottom: 161px;
|
|
height: 144px;
|
|
width: 44px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
z-index: 1;
|
|
background-color: var(--back-color);
|
|
border-color: var(--main-color);
|
|
color: var(--main-color);
|
|
border-radius: 7.77px;
|
|
border-style: solid;
|
|
border-width: thin thick thin thin;
|
|
|
|
.checkedIcon{
|
|
color: var(--back-color);
|
|
fill: var(--accent-color);
|
|
}
|
|
|
|
/*==========================Toggle*/
|
|
.switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 34px;
|
|
height: 60px;
|
|
}
|
|
|
|
.switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.slider {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: var(--accent-color);
|
|
border-color: var(--main-color);
|
|
border-style: solid;
|
|
border-width: thin;
|
|
-webkit-transition: .4s;
|
|
transition: .4s;
|
|
border-radius: 34px;
|
|
cursor: cell;
|
|
}
|
|
|
|
.slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 26px;
|
|
width: 26px;
|
|
left: 3.33px;
|
|
bottom: 4px;
|
|
background-color: var(--main-color);
|
|
-webkit-transition: .4s;
|
|
transition: .4s;
|
|
border-radius: 50%;
|
|
cursor: cell;
|
|
}
|
|
|
|
input:checked + .slider {
|
|
background-color: var(--accent-color);
|
|
}
|
|
|
|
input:checked + .slider:before {
|
|
-webkit-transform: translateY(-26px);
|
|
-ms-transform: translateY(-26px);
|
|
transform: translateY(-26px);
|
|
}
|
|
|
|
.icon{
|
|
fill: currentColor;
|
|
width: 50%;
|
|
}
|
|
}
|
|
|
|
#colorBtnContainer:has(.switch:focus){
|
|
background-color: var(--main-color);
|
|
border-color: var(--back-color);
|
|
color: var(--back-color);
|
|
}
|
|
|
|
footer{
|
|
width: 100%;
|
|
min-height: 93px;
|
|
|
|
border-width: thin 0 0 0;
|
|
|
|
position: fixed;
|
|
z-index: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
|
|
padding: 13.12px;
|
|
padding-bottom: 16.1px;
|
|
box-sizing: border-box;
|
|
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 7.77px;
|
|
|
|
a{
|
|
width: 100%;
|
|
height: 100%;
|
|
margin-top: 7.77px;
|
|
box-sizing: border-box;
|
|
|
|
img{
|
|
width: 100%;
|
|
image-rendering: pixelated;
|
|
}
|
|
|
|
.needOutline{
|
|
border-color: var(--main-color);
|
|
border-style: solid;
|
|
border-width: thin;
|
|
}
|
|
|
|
#reducedDNN{
|
|
visibility: collapse;
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
a:focus, a:hover{
|
|
margin-top: 0;
|
|
margin-bottom: 7.77px;
|
|
|
|
img{
|
|
border-color: var(--main-color);
|
|
border-style: solid;
|
|
border-width: thin;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
aside{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
z-index: -33;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
#texture{
|
|
min-width: 100vw;
|
|
min-height: 100vh;
|
|
position: relative;
|
|
z-index: -30;
|
|
mix-blend-mode: multiply;
|
|
}
|
|
|
|
#gradient{
|
|
min-width: 100vw;
|
|
min-height: 100vh;
|
|
position: absolute;
|
|
z-index: -33;
|
|
top: 0;
|
|
left: 0;
|
|
transition: 7.77s ease-in;
|
|
}
|
|
|
|
}
|