forked from ruangrupa/lumbung.space
add apps grid to homepage
This commit is contained in:
@ -61,6 +61,11 @@ body {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* pushes banner to bottom */
|
||||
body > iframe {
|
||||
margin: auto 0 0;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@ -201,7 +206,7 @@ body {
|
||||
.menu ul {
|
||||
list-style-type: none;
|
||||
margin: 0 auto;
|
||||
padding: 0 3rem;
|
||||
padding-left: 3rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
text-transform: lowercase;
|
||||
@ -966,22 +971,473 @@ li.page-item:after {
|
||||
z-index: -100;
|
||||
}
|
||||
|
||||
|
||||
/* Page footer */
|
||||
|
||||
footer {
|
||||
background: #AFAFAF;
|
||||
color: #333333;
|
||||
font-size: 15px;
|
||||
padding: 1em 4em;
|
||||
/* Landingpage */
|
||||
.welcome-text {
|
||||
text-align: center;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto 50px;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #333333;
|
||||
.app-columns {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto 50px;
|
||||
}
|
||||
|
||||
.app-column {
|
||||
width: 33%;
|
||||
text-align: center;
|
||||
padding: 3.5%;
|
||||
}
|
||||
|
||||
.app-column a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
.app-icon {
|
||||
display: block;
|
||||
max-width: 90px;
|
||||
width: 80%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.app-icon:hover {
|
||||
transform: rotate(-15deg);
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.2em;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.app-description {
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* ### Timeline ### */
|
||||
|
||||
/* Timeline Tags */
|
||||
.timeline-tags {
|
||||
margin-bottom: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 90vw;
|
||||
font-size: 1.4vw;
|
||||
}
|
||||
|
||||
.timeline-tags-headline {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.timeline-tags ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
white-space: nowrap;
|
||||
overflow: scroll;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.timeline-tags ul::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.timeline-tags ul li {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.timeline-tags ul li.timeline-tag {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
padding: 10px 35px;
|
||||
background: #007f76;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.timeline-tags ul li a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Timeline Container and Line */
|
||||
.timeline-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.timeline-start {
|
||||
font-size: 3vw;
|
||||
text-align: center;
|
||||
padding: 1.5vw 0 4.5vw;
|
||||
}
|
||||
|
||||
.timeline-end {
|
||||
font-size: 3vw;
|
||||
text-align: center;
|
||||
padding: 10vw 0 10vw;
|
||||
background: rgb(255,255,255);
|
||||
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
|
||||
width: 100vw;
|
||||
margin-left: -10vw;
|
||||
}
|
||||
|
||||
.timeline-start span {
|
||||
padding: 1.5vw 3vw;
|
||||
border: 2px solid;
|
||||
background: #fff;
|
||||
transform: rotate(3deg);
|
||||
display: block;
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.timeline-line {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 35vw;
|
||||
height: calc(100% - 12vw);
|
||||
top: 12vw;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.timeline-line-head {
|
||||
background-image: url(/img/timeline-head.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 25.5vw;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.timeline-line-body {
|
||||
background-image: url(/img/timeline-body.svg);
|
||||
background-repeat: repeat-y;
|
||||
background-size: 100%;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: calc(100% - 25.2vw);
|
||||
top: 25.2vw;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Timeline Events and Position */
|
||||
.timeline-events {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.timeline-event {
|
||||
width: 20vw;
|
||||
height: 12vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: -3.1vw !important;
|
||||
opacity: 0;
|
||||
transition: opacity 1.4s ease;
|
||||
}
|
||||
|
||||
.timeline-event.inView {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.timeline-url {
|
||||
font-size: 1.8vw;
|
||||
color: #333;
|
||||
text-decoration: unset;
|
||||
}
|
||||
|
||||
a.timeline-url {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.link-svg {
|
||||
height: 1.2vw;
|
||||
width: 1.2vw;
|
||||
margin-left: 0.8vw;
|
||||
}
|
||||
|
||||
/* Timeline Events - Left Side (sort margin)*/
|
||||
.timeline-event:nth-child(36n + 7), .timeline-event:nth-child(36n + 9), .timeline-event:nth-child(36n + 33) {
|
||||
margin-left: 2vw;
|
||||
}
|
||||
|
||||
.timeline-event:nth-child(36n + 1) {
|
||||
margin-left: 8vw;
|
||||
}
|
||||
|
||||
.timeline-event:nth-child(36n + 25), .timeline-event:nth-child(36n + 35) {
|
||||
margin-left: 10vw;
|
||||
}
|
||||
|
||||
.timeline-event:nth-child(1), .timeline-event:nth-child(36n + 11), .timeline-event:nth-child(36n + 17), .timeline-event:nth-child(36n + 23), .timeline-event:nth-child(36n + 27) {
|
||||
margin-left: 12vw;
|
||||
}
|
||||
|
||||
.timeline-event:nth-child(36n + 3), .timeline-event:nth-child(36n + 15), .timeline-event:nth-child(36n + 21) {
|
||||
margin-left: 14vw;
|
||||
}
|
||||
|
||||
.timeline-event:nth-child(3), .timeline-event:nth-child(36n + 5), .timeline-event:nth-child(36n + 13), .timeline-event:nth-child(36n + 19), .timeline-event:nth-child(36n + 29) {
|
||||
margin-left: 16vw;
|
||||
}
|
||||
|
||||
/* Timeline Events - Right Side */
|
||||
.timeline-event:nth-child(2n) {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.timeline-event:nth-child(36n + 2), .timeline-event:nth-child(36n + 6), .timeline-event:nth-child(36n + 20), .timeline-event:nth-child(36n + 32) {
|
||||
margin-right: 4vw;
|
||||
}
|
||||
|
||||
.timeline-event:nth-child(36n + 34) {
|
||||
margin-right: 6vw;
|
||||
}
|
||||
|
||||
.timeline-event:nth-child(36n + 36) {
|
||||
margin-right: 8vw;
|
||||
}
|
||||
|
||||
.timeline-event:nth-child(36n + 8), .timeline-event:nth-child(36n + 24) {
|
||||
margin-right: -3vw;
|
||||
}
|
||||
|
||||
.timeline-event:nth-child(36n + 14), .timeline-event:nth-child(36n + 16) {
|
||||
margin-right: -4vw;
|
||||
}
|
||||
|
||||
.timeline-event:nth-child(36n + 26) {
|
||||
margin-right: -5vw;
|
||||
}
|
||||
|
||||
/* Timeline Events - Rotate */
|
||||
.timeline-event:nth-child(2n) {
|
||||
transform: rotate(2deg);
|
||||
}
|
||||
|
||||
.timeline-event:nth-child(5n) {
|
||||
transform: rotate(3deg);
|
||||
}
|
||||
|
||||
.timeline-event:nth-child(2n + 1) {
|
||||
transform: rotate(-1.5deg);
|
||||
}
|
||||
|
||||
.timeline-event:nth-child(18n + 5), .timeline-event:nth-child(18n + 17) {
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
|
||||
.timeline-event:nth-child(18n + 13), .timeline-event:nth-child(18n + 36) {
|
||||
transform: rotate(-3deg);
|
||||
}
|
||||
|
||||
.timeline-event:nth-child(18n + 9), .timeline-event:nth-child(18n + 12), .timeline-event:nth-child(18n + 22) {
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
|
||||
/* Event Single */
|
||||
.back-button {
|
||||
width: fit-content;
|
||||
padding: 10px 20px;
|
||||
border: 0;
|
||||
background: #007f76;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* PopUp */
|
||||
.popup-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.6s ease, visibility 0s ease 0.6s;
|
||||
}
|
||||
|
||||
.popup-container.view {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition: opacity 0.6s ease, visibility 0s ease 0s;
|
||||
}
|
||||
|
||||
.popup {
|
||||
background: #fff;
|
||||
padding: 0 30px 30px;
|
||||
border: 2px solid;
|
||||
width: 80%;
|
||||
max-width: 1000px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
max-height: 80%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.popup-header h3 {
|
||||
margin: 0;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.popup-close {
|
||||
position: relative;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.popup-close:after, .popup-close:before {
|
||||
content: "";
|
||||
height: 30px;
|
||||
width: 2px;
|
||||
display: block;
|
||||
background: #333;
|
||||
position: absolute;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.popup-close:before {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.popup-bg {
|
||||
position: absolute;
|
||||
background: #00000059;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
||||
/* Page footer */
|
||||
|
||||
#footer {
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#footer.blue .f-main {
|
||||
background: var(--social-light);
|
||||
}
|
||||
|
||||
#footer.blue .f-credits {
|
||||
background: var(--social-dark);
|
||||
}
|
||||
|
||||
#footer.orange .f-main {
|
||||
background: var(--kios-light);
|
||||
}
|
||||
|
||||
#footer.orange .f-credits {
|
||||
background: var(--kios-dark);
|
||||
}
|
||||
|
||||
#footer.green .f-main {
|
||||
background: var(--tv-light);
|
||||
}
|
||||
|
||||
#footer.green .f-credits {
|
||||
background: var(--tv-dark);
|
||||
}
|
||||
|
||||
|
||||
.f-main {
|
||||
padding: 60px 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.f-column {
|
||||
margin-right: 6vw;
|
||||
}
|
||||
|
||||
.f-column:first-child {
|
||||
margin-right: 8vw;
|
||||
}
|
||||
|
||||
.f-column:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.f-main .logo {
|
||||
filter: brightness(0);
|
||||
max-width: 20vw;
|
||||
margin-top: 0;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.f-menu-headline {
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.f-main a {
|
||||
color: #000;
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
margin-bottom: 5px;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.f-main .login {
|
||||
font-weight: bold;
|
||||
padding: 8px 28px;
|
||||
border: 1.5px solid;
|
||||
}
|
||||
|
||||
.f-credits {
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
padding: 20px 2rem;
|
||||
}
|
||||
|
||||
.f-credits a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.f-credits a:hover {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
@ -1034,9 +1490,18 @@ footer a:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* mobile styles */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media all and (min-width: 980px) and (max-width: 1180px) {
|
||||
#top-menu a, .menu .has-submenu {
|
||||
font-size: 1.8vw;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* tablet styles */
|
||||
|
||||
@media (max-width: 980px) {
|
||||
body {
|
||||
display: initial;
|
||||
}
|
||||
@ -1058,6 +1523,7 @@ footer a:hover {
|
||||
|
||||
.mobile-menu #login {
|
||||
display: inline-flex;
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
@ -1065,10 +1531,12 @@ footer a:hover {
|
||||
background: none;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hamburger.opened {
|
||||
position: fixed;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.drawer {
|
||||
@ -1077,12 +1545,14 @@ footer a:hover {
|
||||
background: white;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 110vh;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
z-index: 2;
|
||||
transition: 0.2s all ease-in-out;
|
||||
padding-top: 120px;
|
||||
border-right: 1px solid;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.drawer * {
|
||||
@ -1108,6 +1578,10 @@ footer a:hover {
|
||||
/* border-bottom: 1px solid #333; */
|
||||
}
|
||||
|
||||
.drawer ul > li:last-child {
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
|
||||
.drawer ul li a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
@ -1124,6 +1598,35 @@ footer a:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Landingpage */
|
||||
.app-column {
|
||||
width: 33%;
|
||||
padding: 2.5%;
|
||||
}
|
||||
|
||||
/* Landingpage */
|
||||
.f-main {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.f-column {
|
||||
margin-right: 0vw;
|
||||
|
||||
}
|
||||
|
||||
.f-column:nth-child(1), .f-column:nth-child(2){
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
|
||||
.f-main .logo {
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
|
||||
/* mobile styles */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
/* card styles */
|
||||
.card,
|
||||
.card.network {
|
||||
@ -1138,6 +1641,85 @@ footer a:hover {
|
||||
.card h2 a {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
/* Landingpage */
|
||||
.app-column {
|
||||
width: 50%;
|
||||
padding: 2.5%;
|
||||
}
|
||||
|
||||
/* Timeline Tags */
|
||||
.timeline-tags {
|
||||
font-size: 3vw;
|
||||
}
|
||||
|
||||
/* Timeline Container and Line */
|
||||
.timeline-start {
|
||||
font-size: 5vw;
|
||||
padding: 1.5vw 0 9vw;
|
||||
}
|
||||
|
||||
.timeline-line {
|
||||
height: calc(100% - 18vw);
|
||||
top: 18vw;
|
||||
width: 25vw;
|
||||
}
|
||||
|
||||
.timeline-line-head {
|
||||
height: 18.5vw;
|
||||
}
|
||||
|
||||
.timeline-line-body {
|
||||
height: calc(100% - 18.2vw);
|
||||
top: 18.2vw;
|
||||
}
|
||||
|
||||
/* Timeline Events and Position */
|
||||
.timeline-events {
|
||||
padding-top: 15vw;
|
||||
}
|
||||
|
||||
.timeline-event {
|
||||
width: 30vw;
|
||||
height: 35vw;
|
||||
margin-top: -12vw !important;
|
||||
}
|
||||
|
||||
.timeline-url {
|
||||
font-size: 3.4vw;
|
||||
}
|
||||
|
||||
.link-svg {
|
||||
height: 2.4vw;
|
||||
width: 2.4vw;
|
||||
margin-left: 1.6vw;
|
||||
}
|
||||
|
||||
/* Timeline Events - Left Side (sort margin)*/
|
||||
.timeline-event:nth-child(36n + 7), .timeline-event:nth-child(36n + 9), .timeline-event:nth-child(36n + 33) {
|
||||
margin-left: 1vw;
|
||||
}
|
||||
|
||||
.timeline-event:nth-child(36n + 1), .timeline-event:nth-child(36n + 3), .timeline-event:nth-child(36n + 15), .timeline-event:nth-child(36n + 21), .timeline-event:nth-child(36n + 11), .timeline-event:nth-child(36n + 17), .timeline-event:nth-child(36n + 23), .timeline-event:nth-child(36n + 27) {
|
||||
margin-left: 2vw;
|
||||
}
|
||||
|
||||
.timeline-event:nth-child(3), .timeline-event:nth-child(36n + 5), .timeline-event:nth-child(36n + 13), .timeline-event:nth-child(36n + 19), .timeline-event:nth-child(36n + 29), .timeline-event:nth-child(36n + 25), .timeline-event:nth-child(36n + 35) {
|
||||
margin-left: -3vw;
|
||||
}
|
||||
|
||||
/* Timeline Events - Right Side */
|
||||
.timeline-event:nth-child(2n) {
|
||||
margin-right: -5vw;
|
||||
}
|
||||
|
||||
.timeline-event:nth-child(36n + 8), .timeline-event:nth-child(36n + 24) {
|
||||
margin-right: -6vw;
|
||||
}
|
||||
|
||||
.timeline-event:nth-child(36n + 26) {
|
||||
margin-right: -8vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
|
||||
Reference in New Issue
Block a user