diff --git a/docs/accueil/logo_ecritures.png b/docs/accueil/logo_ecritures.png new file mode 100644 index 0000000..804ef0c Binary files /dev/null and b/docs/accueil/logo_ecritures.png differ diff --git a/docs/accueil/logo_ecritures_mid.png b/docs/accueil/logo_ecritures_mid.png new file mode 100644 index 0000000..59f5a0a Binary files /dev/null and b/docs/accueil/logo_ecritures_mid.png differ diff --git a/docs/accueil/logo_line.png b/docs/accueil/logo_line.png new file mode 100644 index 0000000..49eb9d3 Binary files /dev/null and b/docs/accueil/logo_line.png differ diff --git a/docs/autres/kosmopolit_fond.xcf b/docs/autres/kosmopolit_fond.xcf new file mode 100644 index 0000000..ecc9e96 Binary files /dev/null and b/docs/autres/kosmopolit_fond.xcf differ diff --git a/docs/litterall/revue_26/.~lock.Onglet LITTERall 26.odt# b/docs/litterall/revue_26/.~lock.Onglet LITTERall 26.odt# deleted file mode 100644 index cc13d43..0000000 --- a/docs/litterall/revue_26/.~lock.Onglet LITTERall 26.odt# +++ /dev/null @@ -1 +0,0 @@ -,simplonco,simplonco-Latitude-E6320,15.03.2021 21:48,file:///home/simplonco/.config/libreoffice/4; \ No newline at end of file diff --git a/docs/litterall/revue_27/.~lock.Onglet LITTERall 27.odt# b/docs/litterall/revue_27/.~lock.Onglet LITTERall 27.odt# deleted file mode 100644 index f6f9235..0000000 --- a/docs/litterall/revue_27/.~lock.Onglet LITTERall 27.odt# +++ /dev/null @@ -1 +0,0 @@ -,simplonco,simplonco-Latitude-E6320,14.03.2021 23:11,file:///home/simplonco/.config/libreoffice/4; \ No newline at end of file diff --git a/index.html b/index.html index 132a055..615a09f 100644 --- a/index.html +++ b/index.html @@ -7,62 +7,33 @@ - +
-
-
+ diff --git a/styles/index.css b/styles/index.css index fcea651..56292e1 100644 --- a/styles/index.css +++ b/styles/index.css @@ -1,18 +1,175 @@ /*------------------------------------------*/ -/*IMAGE*/ -body main.index { - position: relative; - height: 100vh; - width: 100vw; - padding: 0px; - margin: 0px; +/*ACCUEIL*/ +body { + background-color: white; } -body main.index img { - margin: 0px; - padding: 0px; - max-width: 100vw; - max-height: 100vh; - object-fit: contain; +main { + display: flex; + flex-direction: column; + width: auto; + margin: auto; + background-color: white; +} +.all_container { + width: 550px; + margin: 20px auto; +} + +/*------------------------------------------*/ +.logo_txt { + height: auto; + width: 100%; +} + +/*------------------------------------------*/ +/*all the ratios of the following elements*/ +._ratio { + position: relative; + width: 100%; +} +.logo_bubbles > ._ratio { + padding-top: 70%; +} +.circle > ._ratio { + padding-top: 100%; +} +/*the wrapper box*/ +.logo_bubbles { + position: relative; + width: 100%; +} +/*commmon settings*/ +.logo_bubbles .circle { + position: absolute; + border-radius: 50%; +} +/*sie position and color for each circles*/ +.logo_bubbles .circle._1 { + top: 13.4%; + left: 2.2%; + width: 51.6%; + background-color: #ee1998; +} +.logo_bubbles .circle._2 { + top: 18.8%; + left: 27.6%; + width: 51.6%; + background-color: #8fce3c; +} +.logo_bubbles .circle._3 { + top: 5.9%; + left: 66.1%; + width: 30.5%; + background-color: #0c9cb5; +} +.logo_bubbles .circle._4 { + top: 36%; + left: 59%; + width: 10.9%; + background-color: #e3e00a; +} +/*mix-blend-mode*/ +.logo_bubbles .circle._blend._2 { + mix-blend-mode: luminosity; +} +.logo_bubbles .circle._blend._3 { + mix-blend-mode: color; +} +/*the line*/ +.logo_bubbles .logo_line { + position: absolute; + top: 0px; + left: 0px; + width: 100%; +} +/*THE ANIMATION*/ +@keyframes shape { + 0% {transform: scale(1.00, 1.00);} + 20% {transform: scale(1.01, 0.98);} + 30% {transform: scale(0.98, 1.01);} + 40% {transform: scale(1.02, 0.99);} + 50% {transform: scale(1.00, 1.02);} + 60% {transform: scale(0.98, 1.01);} + 70% {transform: scale(1.01, 0.98);} + 80% {transform: scale(0.99, 1.00);} + 90% {transform: scale(0.98, 1.02);} + 100% {transform: scale(1.00, 0.98);} +} +@keyframes size { + 0% {transform: scale(1.00, 1.00);} + 20% {transform: scale(0.98, 0.98);} + 30% {transform: scale(1.01, 1.01);} + 40% {transform: scale(0.99, 0.99);} + 50% {transform: scale(1.02, 1.02);} + 60% {transform: scale(1.01, 1.01);} + 70% {transform: scale(0.98, 0.98);} + 80% {transform: scale(1.00, 1.00);} + 90% {transform: scale(1.02, 1.02);} + 100% {transform: scale(0.98, 0.98);} +} +@keyframes position { + 0% {transform: translate( 0%, 0%);} + 20% {transform: translate( 2%, -2%);} + 30% {transform: translate(-2%, 0%);} + 40% {transform: translate( 2%, -2%);} + 50% {transform: translate( 0%, 2%);} + 60% {transform: translate( 2%, -2%);} + 70% {transform: translate( 0%, 0%);} + 80% {transform: translate(-2%, -2%);} + 90% {transform: translate( 2%, -2%);} + 100% {transform: translate( 0%, 0%);} +} +.logo_bubbles .circle { + animation-name: position; + animation-name: shape; + animation-name: size; + animation-duration: 4s; + animation-delay: 0s; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-direction: alternate; +} +.logo_bubbles .circle._1 { + animation-delay: -0.8s; +} +.logo_bubbles .circle._2 { + animation-delay: -1.3s; +} +.logo_bubbles .circle._3 { + animation-delay: -2.7s; +} +.logo_bubbles .circle._4 { + animation-delay: 0s; +} + + + + + + +/*------------------------------------------*/ +.logo_links { + display: flex; + flex-direction: row; + padding: 10px; +} +.logo_links > * { + margin: auto; +} +.logo_links > :first-child { + margin-left: 0px; +} +.logo_links > :last-child { + margin-right: 0px; +} +.logo_links #kosmopolit a { + color: #ee1998; +} +.logo_links #litterall a { + color: #8fce3c; +} +.logo_links #lea a { + color: #0c9cb5; } diff --git a/styles/text.css b/styles/text.css index 3a7b5b0..1d412d1 100644 --- a/styles/text.css +++ b/styles/text.css @@ -60,7 +60,7 @@ small { line-height: 1.2em; } /*specials settings*/ -p, p *, h1, h1 *, h2, h2 * { +p, p *, h1, h1 *, h2, h2 *, h3, h3 * { display: inline; } li *, li p, p b, p em, p i, p a, p span {