Testing hugo
This commit is contained in:
David
commit
e3975962fa
327 changed files with 17224 additions and 0 deletions
524
public/themes/novela/assets/scss/navigation.scss
Normal file
524
public/themes/novela/assets/scss/navigation.scss
Normal file
|
|
@ -0,0 +1,524 @@
|
|||
/************************FOOTER************************/
|
||||
|
||||
.footer-container{
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 80px;
|
||||
color: var(--grey);
|
||||
}
|
||||
|
||||
/*TABLET*/
|
||||
@media screen and (max-width: 735px){
|
||||
.footer-container{
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
/*PHABLET*/
|
||||
@media screen and (max-width: 540px){
|
||||
.footer-container{
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-hr{
|
||||
position: relative;
|
||||
margin: 140px auto 50px;
|
||||
border-bottom: 1px solid var(--horizontalRule);
|
||||
}
|
||||
|
||||
/*TABLET*/
|
||||
@media screen and (max-width: 735px){
|
||||
.footer-hr{
|
||||
margin: 60px auto;
|
||||
}
|
||||
.footer-text{
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
/*PHABLET*/
|
||||
@media screen and (max-width: 540px){
|
||||
.footer-hr{
|
||||
display: none;
|
||||
}
|
||||
.footer-text{
|
||||
margin: 120px auto 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-gradient{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 590px;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
background: var(--gradient);
|
||||
-webkit-transition: var(--color-mode-transition);
|
||||
-o-transition: var(--color-mode-transition);
|
||||
transition: var(--color-mode-transition);
|
||||
mix-blend-mode: lighten;
|
||||
}
|
||||
|
||||
/************************HEADER************************/
|
||||
|
||||
.back-arrow-ico-container{
|
||||
-webkit-transition: 0.2s -webkit-transform var(--ease-out-quad);
|
||||
transition: 0.2s -webkit-transform var(--ease-out-quad);
|
||||
-o-transition: 0.2s transform var(--ease-out-quad);
|
||||
transition: 0.2s transform var(--ease-out-quad);
|
||||
transition: 0.2s transform var(--ease-out-quad), 0.2s -webkit-transform var(--ease-out-quad);
|
||||
opacity: 0;
|
||||
padding-right: 30px;
|
||||
-webkit-animation: fadein 0.3s linear forwards;
|
||||
animation: fadein 0.3s linear forwards;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadein {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadein {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/*DESKTOP MEDIUM*/
|
||||
@media screen and (max-width: 1280px){
|
||||
.back-arrow-ico-container{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-container{
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
padding-top: 100px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@media screen and (max-height: 800px) {
|
||||
.nav-container{
|
||||
padding-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
/*DESKTOP MEDIUM*/
|
||||
@media screen and (max-width: 1280px){
|
||||
.nav-container{
|
||||
padding-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-link{
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo-link[class*="data-ally"]:focus::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -10%;
|
||||
top: -30%;
|
||||
width: 120%;
|
||||
height: 160%;
|
||||
border: 2px solid var(--accent);
|
||||
background: rgba(255, 255, 255, 0.01);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.logo-link[class*="back-arrow-ico-container"]{
|
||||
-webkit-transform: translateX(-3px);
|
||||
-ms-transform: translateX(-3px);
|
||||
transform: translateX(-3px);
|
||||
}
|
||||
|
||||
.logo-link:hover{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/*DESKTOP MEDIUM*/
|
||||
@media screen and (max-width: 1280px){
|
||||
.logo-link{
|
||||
left: 0
|
||||
}
|
||||
}
|
||||
|
||||
.nav-controls{
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/*PHABLET*/
|
||||
@media screen and (max-width: 540px){
|
||||
.nav-controls{
|
||||
right: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
.tool-tip{
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(6px);
|
||||
-ms-transform: translateY(6px);
|
||||
transform: translateY(6px);
|
||||
position: absolute;
|
||||
padding: 4px 13px;
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
top: -35px;
|
||||
color: var(--primary);
|
||||
background-color: var(--tooltip);
|
||||
-webkit-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes pan-toolbar {
|
||||
0% {opacity: 0; -webkit-transform: translateY(6px); transform: translateY(6px);}
|
||||
30% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
|
||||
70% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
|
||||
100% {opacity: 0; -webkit-transform: translateY(6px); transform: translateY(6px);}
|
||||
}
|
||||
|
||||
@keyframes pan-toolbar {
|
||||
0% {opacity: 0; -webkit-transform: translateY(6px); transform: translateY(6px);}
|
||||
30% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
|
||||
70% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
|
||||
100% {opacity: 0; -webkit-transform: translateY(6px); transform: translateY(6px);}
|
||||
}
|
||||
|
||||
.icon-wrapper{
|
||||
opacity: 0.5;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
width: 40px;
|
||||
height: 25px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-transition: opacity 0.3s ease;
|
||||
-o-transition: opacity 0.3s ease;
|
||||
transition: opacity 0.3s ease;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.icon-wrapper:hover{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.icon-wrapper[class*="data-ally"]:focus::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -30%;
|
||||
width: 100%;
|
||||
height: 160%;
|
||||
border: 2px solid var(--accent);
|
||||
background: rgba(255, 255, 255, 0.01);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/*TABLET*/
|
||||
@media screen and (max-width: 735px){
|
||||
.icon-wrapper{
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-webkit-transform: scale(0.708);
|
||||
-ms-transform: scale(0.708);
|
||||
transform: scale(0.708);
|
||||
margin-left: 10px;
|
||||
}
|
||||
.icon-wrapper:hover{
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.sun-rays{
|
||||
position: relative;
|
||||
right: -16px;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid
|
||||
var(--primary);
|
||||
background: var(--primary);
|
||||
-webkit-transform: 1;
|
||||
-ms-transform: 1;
|
||||
transform: 1;
|
||||
-webkit-transition: all 0.45s ease;
|
||||
-o-transition: all 0.45s ease;
|
||||
transition: all 0.45s ease;
|
||||
overflow: hidden;
|
||||
-webkit-box-shadow: 0 -23px 0 var(--primary),
|
||||
0 23px 0 var(--primary),
|
||||
23px 0 0 var(--primary),
|
||||
-23px 0 0 var(--primary),
|
||||
15px 15px 0 var(--primary),
|
||||
-15px 15px 0 var(--primary),
|
||||
15px -15px 0 var(--primary),
|
||||
-15px -15px 0 var(--primary);
|
||||
box-shadow: 0 -23px 0 var(--primary),
|
||||
0 23px 0 var(--primary),
|
||||
23px 0 0 var(--primary),
|
||||
-23px 0 0 var(--primary),
|
||||
15px 15px 0 var(--primary),
|
||||
-15px 15px 0 var(--primary),
|
||||
15px -15px 0 var(--primary),
|
||||
-15px -15px 0 var(--primary);
|
||||
-webkit-transform: scale(0.6);
|
||||
-ms-transform: scale(0.6);
|
||||
transform: scale(0.6);
|
||||
}
|
||||
|
||||
.moon-or-sun{
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid
|
||||
var(--primary);
|
||||
background: var(--primary);
|
||||
-webkit-transform: 1;
|
||||
-ms-transform: 1;
|
||||
transform: 1;
|
||||
-webkit-transition: all 0.45s ease;
|
||||
-o-transition: all 0.45s ease;
|
||||
transition: all 0.45s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.moon-mask{
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
top: -8px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
border-radius: 50%;
|
||||
border: 0;
|
||||
background: var(--background-color);
|
||||
-webkit-transform: translate("0, 0");
|
||||
-ms-transform: translate("0, 0");
|
||||
transform: translate("0, 0");
|
||||
opacity: 1;
|
||||
-webkit-transition: var(--color-mode-transition), -webkit-transform 0.45s ease;
|
||||
transition: var(--color-mode-transition), -webkit-transform 0.45s ease;
|
||||
-o-transition: transform 0.45s ease, var(--color-mode-transition);
|
||||
transition: transform 0.45s ease, var(--color-mode-transition);
|
||||
transition: transform 0.45s ease, var(--color-mode-transition), -webkit-transform 0.45s ease;
|
||||
}
|
||||
|
||||
.mask-to-sun-animation{
|
||||
-webkit-animation-name: mask-to-sun;
|
||||
animation-name: mask-to-sun;
|
||||
-webkit-animation-duration: 0.4s;
|
||||
animation-duration: 0.4s;
|
||||
}
|
||||
|
||||
.mask-to-moon-animation{
|
||||
-webkit-animation-name: mask-to-moon;
|
||||
animation-name: mask-to-moon;
|
||||
-webkit-animation-duration: 0.4s;
|
||||
animation-duration: 0.4s;
|
||||
}
|
||||
|
||||
.to-sun-animation{
|
||||
-webkit-animation-name: to-sun;
|
||||
animation-name: to-sun;
|
||||
-webkit-animation-duration: 0.4s;
|
||||
animation-duration: 0.4s;
|
||||
}
|
||||
|
||||
.to-moon-animation{
|
||||
-webkit-animation-name: to-moon;
|
||||
animation-name: to-moon;
|
||||
-webkit-animation-duration: 0.4s;
|
||||
animation-duration: 0.4s;
|
||||
}
|
||||
|
||||
.expand-rays{
|
||||
-webkit-animation-name: expand-rays;
|
||||
animation-name: expand-rays;
|
||||
-webkit-animation-duration: 0.5s;
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
|
||||
.contract-rays{
|
||||
-webkit-animation-name: contract-rays;
|
||||
animation-name: contract-rays;
|
||||
-webkit-animation-duration: 0.5s;
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes mask-to-sun {
|
||||
from {top: -8px; right: -5px; -webkit-transform: scale(1); transform: scale(1);}
|
||||
to {top: -25px; right: -15px; -webkit-transform: scale(0.5); transform: scale(0.5);}
|
||||
}
|
||||
|
||||
@keyframes mask-to-sun {
|
||||
from {top: -8px; right: -5px; -webkit-transform: scale(1); transform: scale(1);}
|
||||
to {top: -25px; right: -15px; -webkit-transform: scale(0.5); transform: scale(0.5);}
|
||||
}
|
||||
|
||||
@-webkit-keyframes mask-to-moon {
|
||||
from {top: -25px; right: -15px; -webkit-transform: scale(0.5); transform: scale(0.5);}
|
||||
to {top: -8px; right: -5px; -webkit-transform: scale(1); transform: scale(1);}
|
||||
}
|
||||
|
||||
@keyframes mask-to-moon {
|
||||
from {top: -25px; right: -15px; -webkit-transform: scale(0.5); transform: scale(0.5);}
|
||||
to {top: -8px; right: -5px; -webkit-transform: scale(1); transform: scale(1);}
|
||||
}
|
||||
|
||||
@-webkit-keyframes to-sun {
|
||||
from {-webkit-transform: scale(1);transform: scale(1);}
|
||||
to {-webkit-transform: scale(0.5);transform: scale(0.5);}
|
||||
}
|
||||
|
||||
@keyframes to-sun {
|
||||
from {-webkit-transform: scale(1);transform: scale(1);}
|
||||
to {-webkit-transform: scale(0.5);transform: scale(0.5);}
|
||||
}
|
||||
|
||||
@-webkit-keyframes to-moon {
|
||||
from {-webkit-transform: scale(0.5);transform: scale(0.5);}
|
||||
to {-webkit-transform: scale(1);transform: scale(1);}
|
||||
}
|
||||
|
||||
@keyframes to-moon {
|
||||
from {-webkit-transform: scale(0.5);transform: scale(0.5);}
|
||||
to {-webkit-transform: scale(1);transform: scale(1);}
|
||||
}
|
||||
|
||||
@-webkit-keyframes expand-rays {
|
||||
from {-webkit-transform: scale(0.1);transform: scale(0.1);}
|
||||
to {-webkit-transform: scale(0.6);transform: scale(0.6);}
|
||||
}
|
||||
|
||||
@keyframes expand-rays {
|
||||
from {-webkit-transform: scale(0.1);transform: scale(0.1);}
|
||||
to {-webkit-transform: scale(0.6);transform: scale(0.6);}
|
||||
}
|
||||
|
||||
@-webkit-keyframes contract-rays {
|
||||
from {-webkit-transform: scale(0.6);transform: scale(0.6);}
|
||||
to {-webkit-transform: scale(0.1);transform: scale(0.1);}
|
||||
}
|
||||
|
||||
@keyframes contract-rays {
|
||||
from {-webkit-transform: scale(0.6);transform: scale(0.6);}
|
||||
to {-webkit-transform: scale(0.1);transform: scale(0.1);}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.header-hidden{
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
visibility: hidden;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/************************HEADER************************/
|
||||
|
||||
.page-button{
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
text-decoration: none;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.page-button:hover, .page-button:focus{
|
||||
opacity: 1;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.page-number-button{
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
text-decoration: none;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.page-number-button:hover, .page-number-button:focus{
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.spacer{
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.spacer::before{
|
||||
content: "...";
|
||||
}
|
||||
|
||||
.mobiler-reference{
|
||||
font-weight: 400;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.mobile-reference em{
|
||||
font-style: normal;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.frame{
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/*TABLET*/
|
||||
@media screen and (max-width: 735px){
|
||||
.frame{
|
||||
left: -15px;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue