Ce site est disponible à l'adresse suivante : https://serny-nsi.alwaysdata.net/ https://serny-nsi.alwaysdata.net/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

227 lines
4.7 KiB

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&display=swap');
* {
box-sizing: border-box;
}
body {
margin: 0;
}
@media only screen and (min-width: 1080px) {
.main {
padding: 0 20vh 0 20vh;
}
}
@keyframes load-items-left {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0%);
opacity: 1;
}
}
@keyframes load-items-right {
0% {
transform: translateX(100%);
opacity: 0;
}
100% {
transform: translateX(0%);
opacity: 1;
}
}
main {
padding: 10px;
background-color: rgb(255, 255, 255);
display: grid;
grid-template-columns: 65% 35%;
font-family: "Roboto", sans-serif;
font-weight: 300;
& a {
&:visited, &:active, &:link {
text-decoration: none;
color: rgb(0, 0, 0);
}
}
& .element {
position: relative;
padding-bottom: 24px;
word-break: break-word;
word-wrap: break-word;
text-align: justify;
hyphens: auto;
width: 11em;
height: 25em;
padding: 10px 10px 10px 10px;
margin: 2.5px 2.5px 0px 2.5px;
overflow: hidden;
p:not(.hidden) {
display: block;
}
p.hidden {
margin-top: 15px;
display: none;
font-style: italic;
}
&:hover {
p:not(.hidden) {
display: none;
}
h2 {
display: none;
}
p.hidden {
display: block;
}
}
& img {
border-radius: 10% 40% 40% 40%;
filter: blur(0.10px);
}
&:hover {
& img {
border-radius: 10% 10% 10% 10%;
filter: blur(0);
transition: 0.3s;
// transition: clip-path 0.3s;
// clip-path: circle(50%);
}
transition: 0.3s;
box-shadow:-1px -1px 30px 1px #ffb200;
background-image: radial-gradient(circle at 32.47% 115.42%, #ffc100 0, #ffb200 8.33%, #ffa014 16.67%, #ff8c2a 25%, #ff7638 33.33%, #ff5e41 41.67%, #f94646 50%, #e12e49 58.33%, #cb164b 66.67%, #b7004e 75%, #a60052 83.33%, #970056 91.67%, #8a005c 100%);
color: rgb(255, 255, 255);
& h2 {
text-decoration: underline;
}
}
}
& .main-contents {
background-color: rgb(226, 226, 226);
padding: inherit;
border-left: 3px solid black;
display: flex;
flex-direction: column;
& aside {
animation: load-items-right 0.2s ease-out;
display: flex;
flex-direction: column;
word-break: break-all;
word-wrap: break-word;
text-align: justify;
img {
max-width: 100%;
height: auto;
}
&:hover {
transition: 0.3s;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; // Pris sur https://getcssscan.com/css-box-shadow-examples
& h2 {
&::before {
transition: 0.2s ease-in;
bottom: -5px;
left: 0px;
width: 100%;
max-width: 100%;
height: 5px;
}
}
}
& h2 {
font-style: italic;
font-family: 'Playfair Display', serif;
position: relative;
&::before {
content: " +++";
transition: 0.2s ease-out;
font-size: 12px;
color: grey;
position: absolute;
background-color: rgb(78, 78, 78);
bottom: -5px;
left: 5px;
width: 6%;
height: 5px;
}
}
p {
font-family: 'Montserrat', serif;
text-align: justify;
}
a { // C'est très long pour faire un joli lien :sob-emote:
position: relative;
&::before {
content: " ";
position: absolute;
background-color:#2077d3;
bottom: -1px;
left: 0;
width: 100%;
height: 3px;
}
&::after {
transition: ease-out 0.3s;
content: " ";
position: absolute;
background-color:#fcbc3e;
bottom: -1px;
left: 0;
width: 0%;
height: 3px;
}
&:hover {
&::after {
transition: all ease-out 0.3s;
width: 100%;
}
}
}
padding: 20px 10px;
margin: 15px 0px;
background-color: #f8f9fa;
border-radius: 5px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
}
& .main-side {
animation: load-items-left 0.2s ease-out;
background-color: rgb(255, 255, 255);
padding: inherit;
align-content: flex-start;
display: flex;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
& img {
height: 150px;
width: 150px;
}
& u {
position: absolute;
bottom: 6px;
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: row;
text-decoration: underline green 2.8px;
text-decoration-skip-ink: none;
color: green;
font-weight: 600;
& img {
margin-right: 4px;
height: 18px;
width: 18px;
}
}
}
}