diff --git a/new/fr/litterall/litterall_28.html b/new/fr/litterall/litterall/litterall_28.html
similarity index 90%
rename from new/fr/litterall/litterall_28.html
rename to new/fr/litterall/litterall/litterall_28.html
index 706bdf3..d47d32b 100644
--- a/new/fr/litterall/litterall_28.html
+++ b/new/fr/litterall/litterall/litterall_28.html
@@ -15,32 +15,7 @@
diff --git a/new/index.html b/new/index.html
index 6dbb053..708d4d5 100644
--- a/new/index.html
+++ b/new/index.html
@@ -13,25 +13,11 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/new/navbar/nav_lang.html b/new/navbar/nav_lang.html
new file mode 100644
index 0000000..7ff1fb6
--- /dev/null
+++ b/new/navbar/nav_lang.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/new/fr/navbar.html b/new/navbar/navbar.html
similarity index 52%
rename from new/fr/navbar.html
rename to new/navbar/navbar.html
index 7cd9c8c..df540b0 100644
--- a/new/fr/navbar.html
+++ b/new/navbar/navbar.html
@@ -10,31 +10,18 @@
diff --git a/new/styles/index.css b/new/styles/index.css
index 08c6db0..ba8957e 100644
--- a/new/styles/index.css
+++ b/new/styles/index.css
@@ -7,143 +7,24 @@ body main {
height: 100vh;
margin: auto;
padding: 0px;
-}
-.logo_txt {
- height: auto;
width: 100%;
- margin: auto;
-}
-.logo_bubbles {
- position: relative;
- height: auto;
- width: 100%;
- margin: auto;
}
.logo_links {
display: flex;
- flex-direction: row;
- width: 100%;
- margin: auto auto 50px auto;
+ flex-direction: column;
+ margin: auto;
+ font-size: 3em;
+ text-align: center;
}
-
-/*------------------------------------------*/
-/*THE DRAWING*/
-/*all the ratios of the following elements*/
-._ratio {
- position: relative;
- width: 100%;
-}
-.logo_bubbles > ._ratio {
- padding-top: 70%;
-}
-.circle > ._ratio {
- padding-top: 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 position {
- 0% {transform: translate( 0%, 0%);}
- 20% {transform: translate( 1%, -1%);}
- 30% {transform: translate(-1%, 0%);}
- 40% {transform: translate( 1%, -1%);}
- 50% {transform: translate( 0%, 1%);}
- 60% {transform: translate( 1%, -1%);}
- 70% {transform: translate( 0%, 0%);}
- 80% {transform: translate(-1%, -1%);}
- 90% {transform: translate( 1%, -1%);}
- 100% {transform: translate( 0%, 0%);}
-}
-.logo_bubbles .circle {
- animation-name: position;
- animation-duration: 8s;
- animation-delay: 0s;
- animation-timing-function: linear;
- animation-iteration-count: infinite;
- animation-direction: alternate;
-}
-.logo_bubbles .circle._1 {
- animation-delay: -0.8s;
- animation-direction: reverse;
-}
-.logo_bubbles .circle._2 {
- animation-delay: -2.7s;
-}
-.logo_bubbles .circle._3 {
- animation-delay: -1.3s;
- animation-direction: reverse;
-}
-.logo_bubbles .circle._4 {
- animation-delay: 0s;
-}
-
-
-
-
-
-
/*------------------------------------------*/
/*LINKS*/
.logo_links > * {
margin: auto;
padding: 0px;
}
-.logo_links > :first-child {
- margin-left: 0px;
-}
-.logo_links > :last-child {
- margin-right: 0px;
-}
.logo_links #kosmopolit a {
color: var(--color-purple);
}
diff --git a/new/styles/nav.css b/new/styles/nav.css
index 9ca4fb4..9efcdb6 100644
--- a/new/styles/nav.css
+++ b/new/styles/nav.css
@@ -1,6 +1,9 @@
/*---------------------------------------------*/
/*NAVBAR*/
+nav {
+ border-bottom: 1px solid var(--color-lines-4);
+}
nav iframe {
width: 100%;
}
@@ -8,19 +11,43 @@ body#body_navbar {
background-color: transparent;
overflow: hidden;
}
-.navbar {
+.navbar, .i_navbar {
flex-direction: row;
/*we have to set the height to use the height % for childs elements*/
height: var(--nav-height);
background-color: var(--color-back-base);
- border-bottom: 1px solid var(--color-lines-4);
}
-.navbar * {
+.navbar *, .i_navbar * {
display: flex;
flex-direction: row;
margin: auto;
height: 100%;
}
+/*menu burger responsive*/
+.navbar input#burger {
+ display: none;
+}
+.navbar .burger {
+ margin: 0px;
+}
+/*hover & focus*/
+.navbar a:hover, .navbar a:focus,
+.i_navbar a:hover, .i_navbar a:focus {
+ background-color: var(--color-back-dark);
+}
+.navbar a#nav_logo:hover, .navbar a#nav_logo:focus {
+ background-color: var(--color-back-base);
+}
+.navbar a > *, .i_navbar a > * {
+ /*to center vertically the text*/
+ height: auto;
+}
+
+
+
+
+/*---------------------------------------------*/
+/*NAVIGATION LINKS*/
/* nav_left is used for links to pages*/
.navbar .nav_left {
margin-left: 0px;
@@ -32,24 +59,9 @@ body#body_navbar {
padding-left: 40px;
padding-right: 40px;
}
-.navbar a > * {
- /*to center vertically the text*/
- height: auto;
-}
.navbar .nav_left img {
height: calc(100% - 4px);
}
-.navbar a:hover, .navbar a:focus {
- background-color: var(--color-back-dark);
-}
-.navbar a#nav_logo:hover, .navbar a#nav_logo:focus {
- background-color: var(--color-back-base);
-}
-/* nav_right is used for actions such as connection, search or language*/
-.navbar .nav_right {
- margin-right: 0px;
-}
-
@@ -63,40 +75,35 @@ body#body_navbar {
language
language inactive
*/
-.navbar .nav_right .language {
+/* nav_right is used for actions such as connection, search or language*/
+.nav_right, .i_nav_right {
+ margin-right: 0px;
+}
+.i_nav_right .language {
position: relative;
padding: 0px 10px;
+ margin: auto 0px auto auto;
}
/* horizontal space between flag and name*/
-.navbar .nav_right .language > * {
+.i_nav_right .language > * {
margin: auto 3px;
}
/*flag size*/
-.navbar .nav_right .language img.flag {
+.i_nav_right .language img.flag {
height: 12px;
}
/*text size*/
-.navbar .nav_right .language p {
+.i_navbar .nav_right .language p {
font-size: 1.6em;
}
/*selected language*/
-.navbar .language.selected {
+.i_nav_right .language.selected {
background-color: var(--color-back-dark);
pointer-events: none;
}
/*inactive language*/
-.navbar .language.inactive {
+.i_nav_right .language.inactive {
pointer-events: none;
filter: grayscale(100%);
}
-
-/*menu burger responsive*/
-nav.navbar input#burger {
- display: none;
-}
-nav.navbar .burger {
- margin: 0px;
-}
-
-
+ 
+ 
+