Commit b899708e authored by Juan's avatar Juan
Browse files

Added css styles for mobile

parent e69baa58
Pipeline #2069 passed with stages
in 2 minutes and 47 seconds
I"<h1 id="debug"><strong>debug</strong></h1>
<h3 id="15th18th-junelinz-austria"><strong>15th–18th June</strong><br /><strong>Linz, Austria</strong></h3>
<h4 id="contributors-and-locationsto-be-announced-soon"><strong>Contributors and locations<br />to be announced soon</strong></h4>
:ET
\ No newline at end of file
<svg class="hamburger-menu" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg
class="hamburger-menu visible"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M10 0H14V9H10V0Z" /> <path d="M10 0H14V9H10V0Z" />
<path d="M5 0H9V4H5V0Z" /> <path d="M5 0H9V4H5V0Z" />
<path d="M4 10H0V14H4V10Z" /> <path d="M4 10H0V14H4V10Z" />
......
<!--
<svg
class="lower-hamburger-menu lower-hamburger-menu-visible"
viewBox="0 0 9 9"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M5 0H9V9H0V5H5V0Z" />
<path d="M4 0H0V4H4V0Z" />
</svg>
-->
<svg
class="lower-hamburger-menu lower-hamburger-menu-visible"
viewBox="0 0 4 14"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M4 0H0V4H4V0Z" />
<path d="M4 5H0V9H4V5Z" />
<path d="M0 10H4V14H0V10Z" />
</svg>
<div class="lower-navigation-wrapper lower-hamburger-menu-visible"> <div class="lower-navigation-wrapper">
{% include lower-hamburger-menu.html %}
<!--{% include up-arrow.html %}-->
{% include close-sign.html %}
<div class="lower-navigation-background"></div> <div class="lower-navigation-background"></div>
<div class="lower-navigation"> <div class="lower-navigation">
<a href="{{ site.baseurl }}/debug/" class="display-hidden">debug</a> <a href="{{ site.baseurl }}/debug/" class="display-hidden">debug</a>
......
<!--{% include hamburger-menu.html %} {% include right-arrow.html %}-->
{% if page.layout == "landing-page" %} {% if page.layout == "landing-page" %}
<div class="main-navigation-wrapper-visible"> <div class="main-navigation-wrapper main-navigation-wrapper-visible">
{% else %} {% else %}
<div class="main-navigation-wrapper"> <div class="main-navigation-wrapper main-navigation-wrapper-hover">
{% endif %} {% include main-navigation-textblock.html %} {% endif %} {% include main-navigation-textblock.html %}
<div class="main-navigation-container"> <div class="main-navigation-container">
<div class="main-navigation"> <div class="main-navigation">
...@@ -13,14 +12,6 @@ ...@@ -13,14 +12,6 @@
<a href="{{ site.baseurl }}/program/" class="main-navigation-list-element" <a href="{{ site.baseurl }}/program/" class="main-navigation-list-element"
>program</a >program</a
> >
<!--
<a
href="https://radical-openness.org/en/contributors/2022"
class="main-navigation-list-element"
>contributors</a
>
-->
<a href="{{ site.baseurl }}/contributors/" class="main-navigation-list-element" <a href="{{ site.baseurl }}/contributors/" class="main-navigation-list-element"
>contributors</a >contributors</a
> >
...@@ -50,3 +41,4 @@ ...@@ -50,3 +41,4 @@
{% if page.layout == "overview" and page.path != "visit.html" %} {% include {% if page.layout == "overview" and page.path != "visit.html" %} {% include
lower-navigation.html %} {% endif %} lower-navigation.html %} {% endif %}
</div> </div>
{% include hamburger-menu.html %} {% include close-sign.html %}
...@@ -8,10 +8,12 @@ layout: main ...@@ -8,10 +8,12 @@ layout: main
<div class="contributors-list-container"> <div class="contributors-list-container">
{% for contributor in site.contributors %} {% for contributor in site.contributors %}
<div class="contributor-element contributor-element-hover"> <div class="contributor-element contributor-element-hover">
<a href="{{ site.baseurl }}{{ contributor.permalink }}"> <h5>
<img src="{{ contributor.img_src }}" /> <a href="{{ site.baseurl }}{{ contributor.permalink }}">
<h5>{{ contributor.name }}</h5> <img src="{{ contributor.img_src }}" />
</a> {{ contributor.name }}
</a>
</h5>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
......
...@@ -16,7 +16,7 @@ setTextBlockFontSize = () => { ...@@ -16,7 +16,7 @@ setTextBlockFontSize = () => {
if (window.innerWidth <= 800) { if (window.innerWidth <= 800) {
textBlock[i].classList.remove("textblock-right"); textBlock[i].classList.remove("textblock-right");
textBlock[i].classList.add("textblock-centered"); textBlock[i].classList.add("textblock-centered");
textBlock[i].style.fontSize = "10px"; textBlock[i].style.fontSize = "9.9px";
} else if (window.innerWidth >= 1366) { } else if (window.innerWidth >= 1366) {
textBlock[i].style.fontSize = "17.75px"; textBlock[i].style.fontSize = "17.75px";
} else { } else {
...@@ -61,14 +61,23 @@ window.addEventListener("load", (event) => { ...@@ -61,14 +61,23 @@ window.addEventListener("load", (event) => {
}); });
const contributorElement = document.getElementsByClassName("contributor-element"); const contributorElement = document.getElementsByClassName("contributor-element");
const mainNavigationWrapper = document.getElementsByClassName("main-navigation-wrapper");
const controlHoverActions = () => { const controlHoverActions = () => {
if (window.innerWidth <= 500) { if (window.innerWidth <= 500) {
for (let i = 0; i < contributorElement.length; i++) { for (let i = 0; i < contributorElement.length; i++) {
contributorElement[0].classList.remove("contributor-element-hover"); contributorElement[i].classList.remove("contributor-element-hover");
contributorElement[0].classList.add("contributor-element-hover"); }
for (let i = 0; i < mainNavigationWrapper.length; i++) {
mainNavigationWrapper[i].classList.remove("main-navigation-wrapper-hover");
}
} else {
for (let i = 0; i < contributorElement.length; i++) {
contributorElement[i].classList.add("contributor-element-hover");
}
for (let i = 0; i < mainNavigationWrapper.length; i++) {
mainNavigationWrapper[i].classList.add("main-navigation-wrapper-hover");
} }
console.log(window.innerWidth);
} }
}; };
...@@ -81,41 +90,6 @@ window.addEventListener( ...@@ -81,41 +90,6 @@ window.addEventListener(
true true
); );
/*
=============================================
main navigation - titles
=============================================
*/
/*
const amroTitle = document.getElementsByClassName("amro-title")[0];
const amroSubtitle = document.getElementsByClassName("amro-subtitle")[0];
window.addEventListener("scroll", (event) => {
if (mainContent && window.scrollY > 0) {
amroTitle.classList.add("amro-title-shrink");
amroSubtitle.classList.add("amro-subtitle-shrink");
if (window.innerWidth > 800) {
const debugTitle = document.getElementsByClassName("debug-title")[0];
const lowerNavigation = document.getElementsByClassName("lower-navigation")[0];
debugTitle.style.fontSize = "1.7rem";
lowerNavigation.style.fontSize = "1.7rem";
}
} else if (mainContent && window.scrollY == 0) {
amroTitle.classList.remove("amro-title-shrink");
amroSubtitle.classList.remove("amro-subtitle-shrink");
if (window.innerWidth > 800) {
const debugTitle = document.getElementsByClassName("debug-title")[0];
const lowerNavigation = document.getElementsByClassName("lower-navigation")[0];
debugTitle.style.fontSize = "2em";
lowerNavigation.style.fontSize = "2rem";
}
}
});
*/
/* /*
============================================= =============================================
theme color control theme color control
...@@ -197,6 +171,67 @@ upArrow.addEventListener("click", displayLowerNavigation); ...@@ -197,6 +171,67 @@ upArrow.addEventListener("click", displayLowerNavigation);
closeSign.addEventListener("click", hideLowerNavigation); closeSign.addEventListener("click", hideLowerNavigation);
*/ */
/*
=============================================
mobile navigation
=============================================
*/
const closeSign = document.getElementsByClassName("close-sign")[0];
const hamburgerMenu = document.getElementsByClassName("hamburger-menu")[0];
const displayNavigation = () => {
// Display maninavigationWrapper
const mainNavigationWrapper = document.getElementsByClassName("main-navigation-wrapper")[0];
const lowerNavigationWrapper = document.getElementsByClassName("lower-navigation-wrapper")[0];
lowerNavigationWrapper ? lowerNavigationWrapper.classList.add("visible") : null;
mainNavigationWrapper.classList.add("visible");
// Display amroSubtitle and hide debugTitle
const amroSubtitle = document.getElementsByClassName("amro-subtitle")[0];
const debugTitle = document.getElementsByClassName("debug-title")[0];
amroSubtitle.classList.add("amro-subtitle-visible");
debugTitle.style.display = "none";
// Display closeSign and hide hamburger menu
closeSign.classList.add("visible");
hamburgerMenu.classList.remove("visible");
// Lock scroll
const scrollY = document.documentElement.style.getPropertyValue("--scroll-y");
const body = document.body;
body.style.position = "fixed";
body.style.top = `-${scrollY}`;
};
const hideNavigation = () => {
// Hide maninavigationWrapper and lowerNavigationWrapper
const mainNavigationWrapper = document.getElementsByClassName("main-navigation-wrapper")[0];
const lowerNavigationWrapper = document.getElementsByClassName("lower-navigation-wrapper")[0];
lowerNavigationWrapper ? lowerNavigationWrapper.classList.remove("visible") : null;
mainNavigationWrapper.classList.remove("visible");
// Hide amroSubtitle and display debugTitle
const amroSubtitle = document.getElementsByClassName("amro-subtitle")[0];
const debugTitle = document.getElementsByClassName("debug-title")[0];
amroSubtitle.classList.remove("amro-subtitle-visible");
debugTitle.style.display = "block";
// Hide closeSign and display hamburger menu
closeSign.classList.remove("visible");
hamburgerMenu.classList.add("visible");
// Unlock scroll
const body = document.body;
const scrollY = body.style.top;
body.style.position = "";
body.style.top = "";
window.scrollTo(0, parseInt(scrollY || "0") * -1);
};
hamburgerMenu.addEventListener("click", displayNavigation);
closeSign.addEventListener("click", hideNavigation);
/* /*
============================================= =============================================
program days navigation program days navigation
...@@ -239,6 +274,16 @@ for (let i = 0; i < dayProgramContainer.length; i++) { ...@@ -239,6 +274,16 @@ for (let i = 0; i < dayProgramContainer.length; i++) {
programDayName[i].addEventListener("click", displayDayProgram, false); programDayName[i].addEventListener("click", displayDayProgram, false);
} }
window.addEventListener("scroll", () => {
document.documentElement.style.setProperty("--scroll-y", `${window.scrollY}px`);
});
window.addEventListener("load", (event) => { window.addEventListener("load", (event) => {
displayDayProgram(); displayDayProgram();
controlHoverActions();
const mainNavigationWrapper = document.getElementsByClassName("main-navigation-wrapper")[0];
if (window.innerWidth <= 500) {
mainNavigationWrapper.classList.remove("main-navigation-wrapper-visible");
}
}); });
...@@ -215,7 +215,8 @@ color palette ...@@ -215,7 +215,8 @@ color palette
--anim-time: 600s; --anim-time: 600s;
--navigation-anim-time: 30s; --navigation-anim-time: 30s;
--main-text-block-posx: 0%; --text-block-posx: 0%;
--nav-text-block-posx: 0%;
} }
/* /*
...@@ -268,28 +269,28 @@ debug textblock ...@@ -268,28 +269,28 @@ debug textblock
@keyframes text-scrolling-1 { @keyframes text-scrolling-1 {
0% { 0% {
transform: translate(var(--main-text-block-posx), 0%); transform: translate(var(--text-block-posx), 0%);
} }
100% { 100% {
transform: translate(var(--main-text-block-posx), -200%); transform: translate(var(--text-block-posx), -200%);
} }
} }
@keyframes text-scrolling-2 { @keyframes text-scrolling-2 {
0% { 0% {
transform: translate(var(--main-text-block-posx), 100%); transform: translate(var(--text-block-posx), 100%);
} }
100% { 100% {
transform: translate(var(--main-text-block-posx), -100%); transform: translate(var(--text-block-posx), -100%);
} }
} }
@keyframes text-scrolling-3 { @keyframes text-scrolling-3 {
0% { 0% {
transform: translate(var(--main-text-block-posx), 200%); transform: translate(var(--text-block-posx), 200%);
} }
100% { 100% {
transform: translate(var(--main-text-block-posx), 0%); transform: translate(var(--text-block-posx), 0%);
} }
} }
...@@ -357,7 +358,7 @@ main navigation ...@@ -357,7 +358,7 @@ main navigation
padding-left: 25px; padding-left: 25px;
padding-right: 0px; padding-right: 0px;
background: var(--main); background: var(--main-semi-transparent);
transition: 0.2s; transition: 0.2s;
z-index: 1; z-index: 1;
} }
...@@ -462,28 +463,28 @@ main navigation - textblock ...@@ -462,28 +463,28 @@ main navigation - textblock
@keyframes navigation-text-scrolling-1 { @keyframes navigation-text-scrolling-1 {
0% { 0% {
transform: translate(0%, 0%); transform: translate(var(--nav-text-block-posx), 0%);
} }
100% { 100% {
transform: translate(0%, -200%); transform: translate(var(--nav-text-block-posx), -200%);
} }
} }
@keyframes navigation-text-scrolling-2 { @keyframes navigation-text-scrolling-2 {
0% { 0% {
transform: translate(0%, 100%); transform: translate(var(--nav-text-block-posx), 100%);
} }
100% { 100% {
transform: translate(0%, -100%); transform: translate(var(--nav-text-block-posx), -100%);
} }
} }
@keyframes navigation-text-scrolling-3 { @keyframes navigation-text-scrolling-3 {
0% { 0% {
transform: translate(0%, 200%); transform: translate(var(--nav-text-block-posx), 200%);
} }
100% { 100% {
transform: translate(0%, 0%); transform: translate(var(--nav-text-block-posx), 0%);
} }
} }
...@@ -493,22 +494,22 @@ main navigation hover actions ...@@ -493,22 +494,22 @@ main navigation hover actions
============================================= =============================================
*/ */
.main-navigation-wrapper:hover { .main-navigation-wrapper-hover:hover {
left: 0; left: 0;
padding-right: 15px; padding-right: 15px;
} }
.main-navigation-wrapper:hover .main-navigation-container { .main-navigation-wrapper-hover:hover .main-navigation-container {
left: calc(1em); left: calc(1em);
} }
.main-navigation-wrapper:hover .main-navigation-textblock { .main-navigation-wrapper-hover:hover .main-navigation-textblock {
opacity: 0.6; opacity: 0.6;
} }
.main-navigation-wrapper:hover ~ .main-title .amro-title { .main-navigation-wrapper-hover:hover ~ .main-title .amro-title {
font-size: 4rem; font-size: 4rem;
} }
.main-navigation-wrapper:hover ~ .main-title .amro-subtitle { .main-navigation-wrapper-hover:hover ~ .main-title .amro-subtitle {
transform: scaleY(100%); transform: scaleY(100%);
} }
...@@ -677,43 +678,48 @@ lower navigation ...@@ -677,43 +678,48 @@ lower navigation
pointer-events: none; pointer-events: none;
} }
.lower-hamburger-menu { .hamburger-menu {
position: absolute; position: fixed;
top: 5px; bottom: 25px;
right: 25px; right: 25px;
width: 40px; width: 50px;
height: 40px; height: 50px;
padding: 7px; padding: 10px;
fill: var(--main-contrast); fill: var(--main-contrast);
background: var(--main-semi-transparent); background: var(--main-semi-transparent);
border-radius: 50%; border-radius: 50%;
z-index: 5;
display: none; display: none;
} }
.up-arrow { .close-sign {
position: absolute; position: fixed;
top: 5px; left: 25px;
right: 25px; bottom: 25px;
width: 40px; width: 46px;
height: 40px; height: 46px;
padding: 7px; padding: 10px;
fill: var(--main-contrast); fill: var(--main-contrast);
background: var(--main-semi-transparent); background: var(--main);
border-radius: 50%; border-radius: 50%;
z-index: 5;
display: none; display: none;
} }
.close-sign { /*
position: absolute; .up-arrow {
top: 15px; position: fixed;
top: 5px;
right: 25px; right: 25px;
width: 40px; width: 40px;
height: 40px; height: 40px;
padding: 7px; padding: 7px;
fill: var(--main-contrast); fill: var(--main-contrast);
background: var(--main-semi-transparent);
border-radius: 50%;
display: none; display: none;
} }
*/
/* /*
============================================= =============================================
...@@ -939,6 +945,7 @@ program style ...@@ -939,6 +945,7 @@ program style
.program-header h2 { .program-header h2 {
margin: unset; margin: unset;
display: flex;
} }
.day-program-container h1, .day-program-container h1,
...@@ -1032,16 +1039,21 @@ contributors style ...@@ -1032,16 +1039,21 @@ contributors style
transition: 0.5s; transition: 0.5s;
} }
.contributor-element img {
/*max-width: 300px;*/
width: 100%;
}
.contributor-element h5 { .contributor-element h5 {
max-width: 300px; max-width: 300px;
color: var(--main-contrast); color: var(--main-contrast);
} }
.contributor-element:hover { .contributor-element-hover:hover {
background: var(--main-contrast); background: var(--main-contrast);
} }
.contributor-element:hover h5 { .contributor-element-hover:hover h5 {
color: var(--main); color: var(--main);
text-shadow: -1px -1px 0 var(--main-contrast), 1px -1px 0 var(--main-contrast), text-shadow: -1px -1px 0 var(--main-contrast), 1px -1px 0 var(--main-contrast),
-1px 1px 0 var(--main-contrast), 1px 1px 0 var(--main-contrast); -1px 1px 0 var(--main-contrast), 1px 1px 0 var(--main-contrast);
...@@ -1052,7 +1064,7 @@ contributors style ...@@ -1052,7 +1064,7 @@ contributors style
transition: 0.2s; transition: 0.2s;
} }
.contributor-element:hover img { .contributor-element-hover:hover img {
opacity: 1; opacity: 1;
} }
...@@ -1140,15 +1152,15 @@ media queries ...@@ -1140,15 +1152,15 @@ media queries
@media only screen and (max-width: 800px) { @media only screen and (max-width: 800px) {
:root { :root {
--main-text-block-posx: -50%; --text-block-posx: -50%