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="M5 0H9V4H5V0Z" />
<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">
{% include lower-hamburger-menu.html %}
<!--{% include up-arrow.html %}-->
{% include close-sign.html %}
<div class="lower-navigation-wrapper">
<div class="lower-navigation-background"></div>
<div class="lower-navigation">
<a href="{{ site.baseurl }}/debug/" class="display-hidden">debug</a>
......
<!--{% include hamburger-menu.html %} {% include right-arrow.html %}-->
{% if page.layout == "landing-page" %}
<div class="main-navigation-wrapper-visible">
<div class="main-navigation-wrapper main-navigation-wrapper-visible">
{% else %}
<div class="main-navigation-wrapper">
<div class="main-navigation-wrapper main-navigation-wrapper-hover">
{% endif %} {% include main-navigation-textblock.html %}
<div class="main-navigation-container">
<div class="main-navigation">
......@@ -13,14 +12,6 @@
<a href="{{ site.baseurl }}/program/" class="main-navigation-list-element"
>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"
>contributors</a
>
......@@ -50,3 +41,4 @@
{% if page.layout == "overview" and page.path != "visit.html" %} {% include
lower-navigation.html %} {% endif %}
</div>
{% include hamburger-menu.html %} {% include close-sign.html %}
......@@ -8,10 +8,12 @@ layout: main
<div class="contributors-list-container">
{% for contributor in site.contributors %}
<div class="contributor-element contributor-element-hover">
<a href="{{ site.baseurl }}{{ contributor.permalink }}">
<img src="{{ contributor.img_src }}" />
<h5>{{ contributor.name }}</h5>
</a>
<h5>
<a href="{{ site.baseurl }}{{ contributor.permalink }}">
<img src="{{ contributor.img_src }}" />
{{ contributor.name }}
</a>
</h5>
</div>
{% endfor %}
</div>
......
......@@ -16,7 +16,7 @@ setTextBlockFontSize = () => {
if (window.innerWidth <= 800) {
textBlock[i].classList.remove("textblock-right");
textBlock[i].classList.add("textblock-centered");
textBlock[i].style.fontSize = "10px";
textBlock[i].style.fontSize = "9.9px";
} else if (window.innerWidth >= 1366) {
textBlock[i].style.fontSize = "17.75px";
} else {
......@@ -61,14 +61,23 @@ window.addEventListener("load", (event) => {
});
const contributorElement = document.getElementsByClassName("contributor-element");
const mainNavigationWrapper = document.getElementsByClassName("main-navigation-wrapper");
const controlHoverActions = () => {
if (window.innerWidth <= 500) {
for (let i = 0; i < contributorElement.length; i++) {
contributorElement[0].classList.remove("contributor-element-hover");
contributorElement[0].classList.add("contributor-element-hover");
contributorElement[i].classList.remove("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(
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
......@@ -197,6 +171,67 @@ upArrow.addEventListener("click", displayLowerNavigation);
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
......@@ -239,6 +274,16 @@ for (let i = 0; i < dayProgramContainer.length; i++) {
programDayName[i].addEventListener("click", displayDayProgram, false);
}
window.addEventListener("scroll", () => {
document.documentElement.style.setProperty("--scroll-y", `${window.scrollY}px`);
});
window.addEventListener("load", (event) => {
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
--anim-time: 600s;
--navigation-anim-time: 30s;
--main-text-block-posx: 0%;
--text-block-posx: 0%;
--nav-text-block-posx: 0%;
}
/*
......@@ -268,28 +269,28 @@ debug textblock
@keyframes text-scrolling-1 {
0% {
transform: translate(var(--main-text-block-posx), 0%);
transform: translate(var(--text-block-posx), 0%);
}
100% {
transform: translate(var(--main-text-block-posx), -200%);
transform: translate(var(--text-block-posx), -200%);
}
}
@keyframes text-scrolling-2 {
0% {
transform: translate(var(--main-text-block-posx), 100%);
transform: translate(var(--text-block-posx), 100%);
}
100% {
transform: translate(var(--main-text-block-posx), -100%);
transform: translate(var(--text-block-posx), -100%);
}
}
@keyframes text-scrolling-3 {
0% {
transform: translate(var(--main-text-block-posx), 200%);
transform: translate(var(--text-block-posx), 200%);
}
100% {
transform: translate(var(--main-text-block-posx), 0%);
transform: translate(var(--text-block-posx), 0%);
}
}
......@@ -357,7 +358,7 @@ main navigation
padding-left: 25px;
padding-right: 0px;
background: var(--main);
background: var(--main-semi-transparent);
transition: 0.2s;
z-index: 1;
}
......@@ -462,28 +463,28 @@ main navigation - textblock
@keyframes navigation-text-scrolling-1 {
0% {
transform: translate(0%, 0%);
transform: translate(var(--nav-text-block-posx), 0%);
}
100% {
transform: translate(0%, -200%);
transform: translate(var(--nav-text-block-posx), -200%);
}
}
@keyframes navigation-text-scrolling-2 {
0% {
transform: translate(0%, 100%);
transform: translate(var(--nav-text-block-posx), 100%);
}
100% {
transform: translate(0%, -100%);
transform: translate(var(--nav-text-block-posx), -100%);
}
}
@keyframes navigation-text-scrolling-3 {
0% {
transform: translate(0%, 200%);
transform: translate(var(--nav-text-block-posx), 200%);
}
100% {
transform: translate(0%, 0%);
transform: translate(var(--nav-text-block-posx), 0%);
}
}
......@@ -493,22 +494,22 @@ main navigation hover actions
=============================================
*/
.main-navigation-wrapper:hover {
.main-navigation-wrapper-hover:hover {
left: 0;
padding-right: 15px;
}
.main-navigation-wrapper:hover .main-navigation-container {
.main-navigation-wrapper-hover:hover .main-navigation-container {
left: calc(1em);
}
.main-navigation-wrapper:hover .main-navigation-textblock {
.main-navigation-wrapper-hover:hover .main-navigation-textblock {
opacity: 0.6;
}
.main-navigation-wrapper:hover ~ .main-title .amro-title {
.main-navigation-wrapper-hover:hover ~ .main-title .amro-title {
font-size: 4rem;
}
.main-navigation-wrapper:hover ~ .main-title .amro-subtitle {
.main-navigation-wrapper-hover:hover ~ .main-title .amro-subtitle {
transform: scaleY(100%);
}
......@@ -677,43 +678,48 @@ lower navigation
pointer-events: none;
}
.lower-hamburger-menu {
position: absolute;
top: 5px;
.hamburger-menu {
position: fixed;
bottom: 25px;
right: 25px;
width: 40px;
height: 40px;
padding: 7px;
width: 50px;
height: 50px;
padding: 10px;
fill: var(--main-contrast);
background: var(--main-semi-transparent);
border-radius: 50%;
z-index: 5;
display: none;
}
.up-arrow {
position: absolute;
top: 5px;
right: 25px;
width: 40px;
height: 40px;
padding: 7px;
.close-sign {
position: fixed;
left: 25px;
bottom: 25px;
width: 46px;
height: 46px;
padding: 10px;
fill: var(--main-contrast);
background: var(--main-semi-transparent);
background: var(--main);
border-radius: 50%;
z-index: 5;
display: none;
}
.close-sign {
position: absolute;
top: 15px;
/*
.up-arrow {
position: fixed;
top: 5px;
right: 25px;
width: 40px;
height: 40px;
padding: 7px;
fill: var(--main-contrast);
background: var(--main-semi-transparent);
border-radius: 50%;
display: none;
}
*/
/*
=============================================
......@@ -939,6 +945,7 @@ program style
.program-header h2 {
margin: unset;
display: flex;
}
.day-program-container h1,
......@@ -1032,16 +1039,21 @@ contributors style
transition: 0.5s;
}
.contributor-element img {
/*max-width: 300px;*/
width: 100%;
}
.contributor-element h5 {
max-width: 300px;
color: var(--main-contrast);
}
.contributor-element:hover {
.contributor-element-hover:hover {
background: var(--main-contrast);
}
.contributor-element:hover h5 {
.contributor-element-hover:hover h5 {
color: var(--main);
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);
......@@ -1052,7 +1064,7 @@ contributors style
transition: 0.2s;
}
.contributor-element:hover img {
.contributor-element-hover:hover img {
opacity: 1;
}
......@@ -1140,15 +1152,15 @@ media queries
@media only screen and (max-width: 800px) {
:root {
--main-text-block-posx: -50%;
--text-block-posx: -50%;
}
html {
font-size: 13px;
}
/*
.amro-slogan {
/*display: none;*/
bottom: 2%;
top: unset;
width: calc(100% - 80px);
......@@ -1212,7 +1224,7 @@ media queries
.close-sign-visible {
display: block;
}
*/
.main-content-background {
right: unset;
left: 50%;
......@@ -1220,18 +1232,49 @@ media queries
width: 100%;
}
.main-content-container {
left: 50%;
transform: translate(-50%, 0);
.main-content-container.main-content-overview,
.main-content-container.main-content-contributors,
.main-content-container.main-content-program,
.main-content-container.main-content-program-element,
.main-content-container.main-content-contributor-profile {
left: 0%;
width: 100%;
}
.main-content-overview .main-content,
.main-content-contributor-profile .main-content,
.main-content-contributors .main-content,
.main-content-program .main-content,
.main-content {
padding: 25px;
padding: 45px;
padding-left: 100px;
padding-top: 80px;
padding-bottom: 80px;
}
.main-content-program .main-content {
padding-top: unset;
padding-bottom: unset;
}
.day-program-element {
margin: unset;
width: unset;
flex-direction: column;
padding: 25px;
padding-left: 5px;
padding-right: 5px;
}
.day-program-element-left {
margin: unset;
width: unset;
}
.contributors-list-container {
justify-content: center;
}
.switch {
top: unset;
/*right: unset;*/
......@@ -1255,14 +1298,108 @@ media queries
}
@media only screen and (max-width: 500px) {
:root {
--nav-text-block-posx: -50%;
}
.main-title {
left: 5px;
margin-top: -2%;
left: 15px;
}
.amro-slogan {
bottom: 1%;
font-size: 1.6rem;
.amro-subtitle-visible {
transform: scaleY(100%);
}
.main-navigation-wrapper {
left: 0;
width: 100%;
padding-left: 0%;
}
/*
=============================================
main navigation - textblock
=============================================
*/
.main-navigation-textblock-container {
width: 100%;
}
.main-navigation-textblock {
left: 50%;
opacity: 0.6;
font-size: 5vw;
}
.main-navigation-list {
width: 100%;
}
.main-navigation-wrapper .main-navigation-container {
left: unset;
right: 25px;
bottom: 30%;
}
.main-navigation-wrapper .main-navigation-textblock {
opacity: 0.6;
}
.lower-navigation {
position: relative;
flex-direction: column;
}
.main-content-overview .main-content,
.main-content-contributor-profile .main-content,
.main-content-contributors .main-content,
.main-content-program .main-content,
.main-content {
padding: 25px;
padding-top: 80px;
padding-bottom: 80px;