add zaclys menu
adjust style
This commit is contained in:
MatthieuBarbu 2023-08-28 09:52:05 +02:00
parent 905ce2a6f6
commit 7c4e5b3860
37 changed files with 1347 additions and 109 deletions

View file

@ -1,5 +1,5 @@
#main_index {
margin-top: 26vh;
margin-top: 7rem;
}
.index {
@ -46,6 +46,6 @@
}
#main_index {
margin-top: 6em;
margin-top: 14em;
}
}

View file

@ -5,6 +5,8 @@
}
#main_preferences {
margin-top: 8rem;
form {
width: 100%;
}

View file

@ -213,6 +213,16 @@ html.no-js #clear_search.hide_if_nojs {
}
}
#main_index,
#main_results {
margin-top: 7rem;
}
#main_preferences,
#main_info {
margin-top: 8rem;
}
@media screen and (max-width: @tablet) and (hover: none) {
#main_index,
#main_results {

View file

@ -140,6 +140,16 @@
background-position-x: 100%;
}
#main_index,
#main_results {
margin-top: 7rem;
}
#main_preferences,
#main_info {
margin-top: 8rem;
}
// patch of stats.less
.bar-chart-serie1,
.bar-chart-serie2 {

View file

@ -32,6 +32,9 @@
// to center the results
@import "style-center.less";
// Zaclys rebrand
@import "zotop.less";
// ion-icon
.ion-icon {
display: inline-block;
@ -725,7 +728,7 @@ summary.title {
position: absolute;
.ltr-right(1.8rem);
.ltr-text-align-right();
top: 2.2rem;
top: 9.2rem;
padding: 0;
border: 0;
display: flex;
@ -992,6 +995,16 @@ summary.title {
phone layout
*/
#main_index,
#main_results {
margin-top: 7rem;
}
#main_preferences,
#main_info {
margin-top: 8rem;
}
@media screen and (max-width: @phone) {
// based on the tablet layout
.results-tablet();
@ -1000,18 +1013,28 @@ summary.title {
background-color: var(--color-base-background-mobile);
}
#main_index,
#main_results {
margin-top: 9rem;
}
#main_preferences,
#main_info {
margin-top: 12rem;
}
#main_results div#results {
grid-template-columns: 100%;
margin: 1rem 0 0 0;
}
#links_on_top {
top: 0.8rem;
top: 10.5rem;
.ltr-right(0.7rem);
}
#main_index #links_on_top {
top: 0.5rem;
top: 10.5rem;
.ltr-right(0.5rem);
}

View file

@ -0,0 +1,667 @@
/* stylelint-disable font-family-no-missing-generic-family-keyword */
@font-face {
font-family: ETmodules;
src: url(/static/themes/simple/fonts/modules.eot);
src: url(/static/themes/simple/fonts/modules.eot?#iefix) format("embedded-opentype"), url(/static/themes/simple/fonts/modules.ttf) format("truetype"), url(/static/themes/simple/fonts/modules.woff) format("woff"), url(/static/themes/simple/fonts/modules.svg#ETmodules) format("svg");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'ForkAwesome';
src: url('https://zzz.zaclys.com/fonts/forkawesome-webfont.eot?v=1.0.1');
src: url('https://zzz.zaclys.com/fonts/forkawesome-webfont.eot?#iefix&v=1.0.1') format('embedded-opentype'), url('https://zzz.zaclys.com/fonts/forkawesome-webfont.woff2?v=1.0.1') format('woff2'), url('https://zzz.zaclys.com/fonts/forkawesome-webfont.woff?v=1.0.1') format('woff'), url('https://zzz.zaclys.com/fonts/forkawesome-webfont.ttf?v=1.0.1') format('truetype'), url('https://zzz.zaclys.com/fonts/forkawesome-webfont.svg?v=1.0.1#forkawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Luciole Bold";
font-display: swap;
src: url("https://www.zaclys.com/wp-content/uploads/et-fonts/Luciole-Bold.ttf") format("truetype"), url("https://www.zaclys.com/wp-content/uploads/et-fonts/Luciole-Bold.otf") format("opentype");
}
@font-face {
font-family: "Luciole Regular";
font-display: swap;
src: url("https://www.zaclys.com/wp-content/uploads/et-fonts/Luciole-Regular.ttf") format("truetype"), url("https://www.zaclys.com/wp-content/uploads/et-fonts/Luciole-Regular.otf") format("opentype");
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 100;
src: url(/static/themes/simple/fonts/Roboto-Thin.ttf) format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 200;
src: url(/static/themes/simple/fonts/Roboto-Light.ttf) format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: url(/static/themes/simple/fonts/Roboto-Regular.ttf) format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(/static/themes/simple/fonts/Roboto-Regular.ttf) format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url(/static/themes/simple/fonts/Roboto-Medium.ttf) format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 600;
src: url(/static/themes/simple/fonts/Roboto-Bold.ttf) format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: url(/static/themes/simple/fonts/Roboto-Black.ttf) format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 100;
src: url(/static/themes/simple/fonts/Roboto-ThinItalic.ttf) format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 200;
src: url(/static/themes/simple/fonts/Roboto-LightItalic.ttf) format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 300;
src: url(/static/themes/simple/fonts/Roboto-Italic.ttf) format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 400;
src: url(/static/themes/simple/fonts/Roboto-Italic.ttf) format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 500;
src: url(/static/themes/simple/fonts/Roboto-MediumItalic.ttf) format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 600;
src: url(/static/themes/simple/fonts/Roboto-BoldItalic.ttf) format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 700;
src: url(/static/themes/simple/fonts/Roboto-BlackItalic.ttf) format('truetype');
}
ol,
ul {
list-style: none;
padding: 0;
}
#top-header {
background: 0 0;
background-color: #474ab6;
line-height: 1em;
-webkit-transition: background-color 0.4s, transform 0.4s, opacity 0.4s ease-in-out;
-moz-transition: background-color 0.4s, transform 0.4s, opacity 0.4s ease-in-out;
transition: background-color 0.4s, transform 0.4s, opacity 0.4s ease-in-out;
z-index: 100000;
color: #fff;
font-size: 12px;
margin: 0;
padding: 0;
border: 0;
outline: 0;
top: 0;
right: 0;
left: 0;
position: fixed;
box-sizing: border-box;
.container {
line-height: 1em;
padding: 0;
padding-top: 9px;
height: 24px;
font-weight: 600;
position: relative;
text-align: left;
width: 80%;
max-width: 1080px;
margin: auto;
border: 0;
outline: 0;
background: 0 0;
font-size: 100%;
a.ztopbtn {
color: #fff;
cursor: pointer;
transition: opacity 500ms;
span {
color: white;
}
}
&.clearfix::after {
display: block;
visibility: hidden;
clear: both;
height: 0;
font-size: 0;
content: " ";
}
}
#et-secondary-menu {
float: right;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background: 0 0;
font-size: 100%;
box-sizing: border-box;
ul.et-social-icons {
margin: 0;
margin-right: 20px;
float: none;
list-style: none;
box-sizing: border-box;
text-align: left;
display: flex;
justify-content: space-around;
width: 100%;
padding: 0;
li {
padding-left: 15px;
a {
display: block;
padding-bottom: 0.75em;
color: #fff;
position: relative;
text-align: center;
text-decoration: none;
:hover {
opacity: 0.7;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
}
&.et-social-icon {
padding-left: 15px;
a::before {
text-shadow: 0 0;
font-family: ETmodules !important;
font-weight: 400;
font-style: normal;
font-variant: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1;
text-transform: none;
}
}
&.et-social-diapora a::before {
content: "\f2e5";
background-size: 100% auto;
box-sizing: border-box;
font-family: ForkAwesome !important;
}
&.et-social-mastodon a::before {
content: "\f2e1";
background-size: 100% auto;
line-height: 1;
font-weight: 400;
box-sizing: border-box;
font-family: ForkAwesome !important;
}
&.et-social-linkdin a::before {
content: "\f08c";
background-size: 100% auto;
box-sizing: border-box;
line-height: 1;
font-family: ForkAwesome !important;
}
&.et-social-facebook a.icon::before {
content: "\e093";
}
&.et-social-twitter a.icon::before {
content: "\e094";
}
&.et-social-rss a.icon::before {
content: "\e09e";
}
span {
display: none;
}
}
}
}
}
header#main-header {
box-sizing: border-box;
display: block;
background-color: var(--color-base-background) !important;
position: fixed;
z-index: 99999;
top: 30px;
width: 100%;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
font-weight: 500;
line-height: 23px;
-webkit-transition: background-color 0.4s, color 0.4s, transform 0.4s, opacity 0.4s ease-in-out;
-moz-transition: background-color 0.4s, color 0.4s, transform 0.4s, opacity 0.4s ease-in-out;
transition: background-color 0.4s, color 0.4s, transform 0.4s, opacity 0.4s ease-in-out;
div.container.clearfix.et_menu_container {
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
width: 100vw !important;
z-index: 99;
position: relative;
text-align: left;
max-width: 1080px;
margin: auto;
.mobile_nav {
background-color: rgba(13, 13, 13, 0.05);
display: block;
text-align: left;
border-radius: 5px;
padding: 9px 10px;
box-sizing: border-box;
width: 80%;
position: relative;
}
.mobile_menu_bar {
color: #474ab6;
padding-bottom: 24px;
position: absolute;
right: 5px;
/* top: 2px; */
bottom: -25px;
display: block;
box-sizing: border-box;
line-height: 1;
font-family: 'Roboto', sans-serif;
font-weight: 600;
.mobile_nav {
font-family: 'Roboto', sans-serif;
}
}
.mobile_menu_bar::before {
content: "a";
font-size: 32px;
/* position: relative;
left: 0;
top: 0; */
cursor: pointer;
font-family: ETmodules !important;
font-style: normal;
font-weight: 400;
-webkit-font-feature-settings: normal;
font-feature-settings: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow: 0 0;
direction: ltr;
}
}
div#et-top-navigation {
float: right;
font-weight: 600;
padding-top: 18px;
height: 62px;
nav#top-menu-nav {
float: left;
line-height: 0;
display: flex;
justify-content: space-around;
}
#et_mobile_nav_menu {
display: none;
}
ul#top-menu {
float: left;
line-height: 0;
display: block;
li {
display: inline-block;
padding-right: 22px;
font-size: 14px;
word-wrap: break-word;
position: relative;
line-height: 1em;
&.centered-inline-logo-wrap {
display: inline-block !important;
padding: 0;
font-size: 14px;
height: 66px;
margin: -33px 0;
div.logo_container {
z-index: 2;
text-align: center;
height: 66px;
position: initial;
transition: all 0.4s ease-in-out;
span.logo_helper {
display: none;
width: 0;
height: 100%;
vertical-align: middle;
}
img#logo {
display: initial;
animation: fadeIn 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
float: none;
max-height: 100%;
margin-bottom: 0;
vertical-align: middle;
transition: all 0.4s ease-in-out;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
max-width: 100%;
width: 66px;
height: auto;
}
}
}
&:hover > ul {
visibility: visible !important;
opacity: 1 !important;
}
a {
font-weight: normal;
font-style: normal;
text-transform: uppercase;
text-decoration: none;
color: var(--color-base-font);
display: block;
position: relative;
padding: 8px;
padding-top: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
font-size: 14px;
}
&.current-menu-item > a {
color: #474ab6;
}
&.current-menu-ancestor > a {
color: #474ab6;
}
a:hover {
visibility: visible !important;
opacity: 1 !important;
color: var(--color-base-font);
background-color: var(--color-base-background);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
ul.sub-menu {
//margin-top: -2em;
width: auto;
border-color: #474ab6;
text-align: left;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: hidden;
z-index: 9999;
border-top: 3px solid #2ea3f2;
opacity: 0;
background: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
position: absolute;
padding: 20px 0;
background-color: var(--color-base-background) !important;
li {
padding: 0;
margin: 0;
position: relative;
line-height: 2em;
a {
width: 250px;
padding: 6px 40px;
box-sizing: border-box;
}
}
}
&.menu-item-has-children > a:first-child {
padding-right: 20px;
}
&.menu-item-has-children > a:first-child::after {
position: absolute;
top: 0;
right: 0;
font-family: ETmodules;
font-size: 16px;
font-weight: 800;
content: "3";
}
}
}
}
div.et_search_outer {
display: none;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
}
}
.ztitre,
.zET {
font-family: 'Luciole', Helvetica, Arial, Lucida, sans-serif;
color: #474ab6;
}
h2.ztitre {
margin: 0;
font-size: 5em;
font-weight: 400;
}
.zET {
font-weight: normal;
font-family: ETmodules;
}
div.zET {
font-size: 12rem;
line-height: 12rem;
margin: 0;
margin-top: 5rem;
}
h3.ztitre {
font-size: 1.2em;
margin: 0;
margin-top: 5px;
margin-bottom: 5em;
font-weight: 500;
}
@media (max-width: 580px) {
ul.et-social-icons {
display: none !important;
}
header {
div#et-top-navigation {
height: 96px !important;
width: 80vw;
min-width: 360px;
}
ul#top-menu {
li {
display: none !important;
}
}
#top-menu-nav {
margin-top: 5px;
width: 100%;
}
#et_mobile_nav_menu {
position: relative;
margin-top: 60px;
display: flex !important;
justify-content: space-around;
.mobile_nav {
border-radius: 5px;
line-height: 14px;
.select_page {
font-size: 14px;
font-family: 'Roboto', sans-serif;
line-height: 14px;
}
ul#mobile_menu {
display: none;
top: 35px;
position: absolute;
z-index: 9999;
left: 0;
width: 100%;
padding: 5%;
border: 0;
border-top: 3px solid rgb(71, 74, 182);
opacity: 1;
background: var(--color-base-background);
color: var(--color-base-font);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin: 0;
outline: 0;
font-size: 100%;
text-align: left;
line-height: 1;
li {
a {
color: var(--color-base-font);
display: block;
padding: 10px 5%;
border-bottom: 1px solid rgba(0, 0, 0, 0.03);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
cursor: pointer;
font-size: 14px;
font-family: 'Roboto', sans-serif;
}
.sub-menu {
font-weight: 600;
display: block !important;
visibility: visible !important;
padding-left: 10px;
li {
padding-left: 5%;
}
}
}
.menu-item-has-children > a {
color: var(--color-base-font);
background-color: rgba(0, 0, 0, 0.03);
font-weight: 700;
&:visited {
color: inherit;
}
}
}
}
}
}
}