serny.s
/
siteWeb
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Delete fichier scss

master
SERNY Sacha 3 years ago
parent
7a1cbbb5b9
commit
7b7f274276
5 changed files with 0 additions and 603 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 52
      style/styles_fun.scss
  2. 39
      style/styles_home.scss
  3. 238
      style/styles_index.scss
  4. 119
      style/styles_log.scss
  5. 155
      style/styles_main.scss

52
style/styles_fun.scss
View File

@ -1,52 +0,0 @@
* {
box-sizing: content-box;
}
@keyframes defilement {
0% {
top: 0;
transform: rotateX(15deg) translateZ(2200px);
}
100% {
top: -10000px;
transform: rotateX(20deg) translateZ(-2200px);
}
}
@keyframes rainbow {
0% {
color: yellow;
}
25% {
color: yellowgreen;
}
50% {
color: red;
}
75% {
color: blue;
}
100% {
color:yellow;
}
}
.main-contents {
z-index: 9999;
}
.star-wars {
background-color: black;
height: 70%;
margin-right: 10px;
transform: perspective(400px) rotateX(20deg);
overflow: hidden;
background-image: url("../_content/star.png");
background-repeat: repeat;
background-size: 400px;
padding: 0 10%;
div {
font-family: 'Pathway Gothic One', sans-serif;
text-align: center;
font-size: 28px;
animation: defilement 40s linear infinite;
color: yellow;
}
}

39
style/styles_home.scss
View File

@ -1,39 +0,0 @@
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&display=swap');
body {
margin: 0;
}
main {
display: flex;
flex-direction: row;
justify-content: center;
width: 100vw;
height: 100vh;
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%);
& .title {
display: flex;
flex-direction: column;
justify-content: center;
& h1, & h1:visited, & h1:link, & h1:active {
padding: 1em;
background-color: #fff;
box-shadow:-1px -1px 15px 0px rgba(255, 255, 255, 0.75);
& a {
color: black;
text-decoration: none;
font-size: 3.5em;
font-family: "Playfair Display", sans-serif;
font-weight: 700;
transition: font-size 0.75s ease-in-out;
&:hover {
transition: font-size 0.75s ease-out;
font-size: 5em;
}
}
}
}
}

238
style/styles_index.scss
View File

@ -1,238 +0,0 @@
@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;
}
}
section.mentions-legales {
padding: 20px;
font-family: "Roboto", sans-serif;
h2 {
font-weight: 800;
font-size: 24px;
}
p {
font-size: 16px;
}
}
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;
}
}
}
}

119
style/styles_log.scss
View File

@ -1,119 +0,0 @@
@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap";
@import"https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap";
/* Reset CSS */
input[type="submit" i] {
appearance: none;
user-select: none;
white-space: normal;
align-items: flex-start;
text-align: start;
cursor: default;
color: black;
background-color: white;
box-sizing: border-box;
padding: 0px;
border-width: 0px;
border-style: none;
border-color: white;
border-image: initial;
font-size: 16px;
}
a:-webkit-any-link {
color: black;
cursor: default;
text-decoration: none;
}
input {
writing-mode: auto;
text-rendering: auto;
color: black;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: auto;
text-shadow: none;
display: inline-block;
text-align: auto;
appearance: none;
background-color: white;
-webkit-rtl-ordering: none;
cursor: text;
margin: 0em;
font: 400 13.3333px Arial;
padding: 1px 2px;
border-width: 2px;
border-style: none;
border-color: white;
border-image: initial;
}
input:focus-visible {
outline: rgba(0, 0, 0, 0) solid 0px;
outline-offset: 0px;
}
/* Fin Reset */
input:focus {
position: relative;
color: red;
&::before {
content: " ";
position: absolute;
background-color: red;
top: 0;
width: 10px;
height: 1000px;
}
}
body {
position: relative;
margin: 0;
}
.log-area {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
height: 20vh;
margin: 30vh 0 50vh 0;
font-family: 'montserrat', sans-serif;
}
.log-area > p {
text-align: center;
}
form {
font-family: monospace, sans-serif;
}
.f_inputs {
text-align: center;
}
.f_inputs > div {
margin-top: 5px;
}
.buttons {
display : flex;
align-items: center;
justify-content: center;
margin-top: 25px;
}
.sign_in {
background-color:#00dc64;
}
.sign_up {
background-color: #6a6a6a;
}
.buttons > div {
padding:10px 40px;
border-radius: 25px;
margin: 0 20px;
}
div > input[type="submit"], div > a {
font-family: roboto, sans-serif;
background-color: inherit;
}

155
style/styles_main.scss
View File

@ -1,155 +0,0 @@
body {
min-height: 100vh;
margin: 0;
box-sizing: border-box;
position: relative;
padding-bottom: 20vh;
}
header {
background-color:rgb(36, 37, 42);
padding: 30px 10%;
display: flex;
justify-content: space-around;
align-items: center;
align-content: center;
text-decoration: none;
h1 {
margin: 0;
position: relative;
::before {
content: " ";
position: absolute;
background-color: rgba(255, 255, 255, 0);
transition: 1s;
top: -2px;
left: -2px;
width: 0px;
height: 0px;
border: 2px solid transparent;
}
:hover::before {
animation: border_top_right 0.75s linear forwards;
}
::after {
content: " ";
position: absolute;
background-color: rgba(255, 255, 255, 0);
transition: 1s;
top: -2px;
left: -2px;
width: 0px;
height: 0px;
border: 2px solid transparent;
}
:hover::after {
animation: border_bottom_left 0.75s linear forwards;
}
a {
color: rgb(237, 240, 241);
text-decoration: none;
font-family: sans-serif;
letter-spacing: 0px;
padding: 5px;
.word1 {
color: rgb(146,147,149);
}
.word2 {
color: rgb(192, 192, 192);
}
.word3 {
color:rgb(237, 240, 241);
}
}
}
& ul {
list-style-type: none;
display: flex;
justify-content: space-around;
text-align: center;
}
& a:not(._title) {
padding: 1em 2em;
text-decoration: none;
color: rgb(237, 240, 241);
font-family: "Montserrat", sans-serif;
font-weight: 500;
&:hover {
color: rgb(36, 37, 42);
background-color: rgb(237, 240, 241);
font-weight: 800;
transition: 0.2s;
}
}
@keyframes border_top_right {
0% {
width: 0;
height: 0;
border-top-color: rgb(255, 255, 255);
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}
25% {
width: 100%;
height: 0;
border-top-color: rgb(255, 255, 255);
border-right-color: rgb(255, 255, 255);
border-bottom-color: transparent;
border-left-color: transparent;
}
100% {
width: 100%;
height: 100%;
border-top-color: rgb(255, 255, 255);
border-right-color: rgb(255, 255, 255);
border-bottom-color: transparent;
border-left-color: transparent;
}
}
@keyframes border_bottom_left {
0% {
width: 0;
height: 0;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: rgb(255, 255, 255);
}
75% {
width: 0;
height: 100%;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: rgb(255, 255, 255);
border-left-color: rgb(255, 255, 255);
}
100% {
width: 100%;
height: 100%;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: rgb(255, 255, 255);
border-left-color: rgb(255, 255, 255);
}
}
}
footer {
position: absolute;
bottom: 0;
right: 0;
left: 0;
text-align: center;
background-color:rgb(36, 37, 42);
color: rgb(237, 240, 241);
font-family: "Montserrat", sans-serif;
font-weight: 500;
padding: 3vh 0;
& a {
color: white;
}
}
Write Preview
Loading…
Cancel
Save