wip mixed old and new, works on new to create a better iframe structure
This commit is contained in:
Hugo LAMY
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user