From 0c439d759df81a046b4cae194431b0a362be4308 Mon Sep 17 00:00:00 2001 From: Aadil Ayub Date: Tue, 14 Jun 2022 19:23:54 +0500 Subject: [PATCH] add apps grid to homepage --- themes/lumbung-theme/layouts/index.html | 96 ++- themes/lumbung-theme/static/css/main.css | 612 +++++++++++++++++- .../static/img/buttons/books.svg | 5 + .../static/img/buttons/calendar.svg | 24 + .../static/img/buttons/gallery.svg | 38 ++ .../static/img/buttons/harvest.svg | 100 +++ .../lumbung-theme/static/img/buttons/kios.svg | 38 ++ .../static/img/buttons/panduan.svg | 7 + .../lumbung-theme/static/img/buttons/pen.svg | 5 + .../static/img/buttons/shouts.svg | 21 + .../static/img/buttons/social.svg | 5 + .../lumbung-theme/static/img/buttons/tv.svg | 5 + 12 files changed, 913 insertions(+), 43 deletions(-) create mode 100644 themes/lumbung-theme/static/img/buttons/books.svg create mode 100644 themes/lumbung-theme/static/img/buttons/calendar.svg create mode 100644 themes/lumbung-theme/static/img/buttons/gallery.svg create mode 100644 themes/lumbung-theme/static/img/buttons/harvest.svg create mode 100644 themes/lumbung-theme/static/img/buttons/kios.svg create mode 100644 themes/lumbung-theme/static/img/buttons/panduan.svg create mode 100644 themes/lumbung-theme/static/img/buttons/pen.svg create mode 100644 themes/lumbung-theme/static/img/buttons/shouts.svg create mode 100644 themes/lumbung-theme/static/img/buttons/social.svg create mode 100644 themes/lumbung-theme/static/img/buttons/tv.svg diff --git a/themes/lumbung-theme/layouts/index.html b/themes/lumbung-theme/layouts/index.html index 698517d..c7d396f 100644 --- a/themes/lumbung-theme/layouts/index.html +++ b/themes/lumbung-theme/layouts/index.html @@ -1,42 +1,82 @@ {{ define "main" }}
-
- {{ range where (.Paginator 13).Pages "Params.hidden" "ne" "true" }} +
lumbung.space is a social and publishing platform for sharing harvests by all members online. It is non-extractive, co governed by the users, and is built on open platforms.
+
+
+ + harvest +

harvest

+ +

Digital timeline of harvests for collective learning

+
- {{ if in .Params.categories "tv"}} - - {{- partial "video_box.html" . -}} +
+ + calendar +

calendar

+ +

Watch out for upcoming lumbung programs on our open-source calendar

+
- {{ else if in .Params.categories "calendar" }} +
+ + tv +

tv

+ +

Video archive. Watch or upload videos or start a livestream

+
+ +
+ + social +

social

+ +

Like twitter but for us! Jokes, announcements, chitchat

+
- {{- partial "calendar_card.html" . -}} +
+ + lumbung.pen +

pen

+ +

Write and publish longer texts.

+
- {{ else if in .Params.categories "network" }} +
+ + shouts +

shouts

+ +

lumbung members and artists share content from their ekosistems

+
+ +
+ + kios +

kios

+ +

Network of decentralized and self-run Kios to sell products at different locations

+
- {{- partial "network_card.html" . -}} +
+ + gallery +

gallery

+ +

Collectively governed, non speculative, and regenerative gallery of the lumbung network

+
- {{ else if in .Params.categories "pen" }} - - {{- partial "pen_card.html" . -}} - - {{ else if in .Params.categories "shouts" }} - - {{- partial "shout_card.html" . -}} - - {{ else }} - - {{- partial "card.html" . -}} - - {{ end }} - - {{ end }} +
+ + lumbung.books +

books

+ +

Archive of publications. Share, read or download PDFs and ebooks

+
+
- -
diff --git a/themes/lumbung-theme/static/css/main.css b/themes/lumbung-theme/static/css/main.css index 8c2fa2d..82ade43 100644 --- a/themes/lumbung-theme/static/css/main.css +++ b/themes/lumbung-theme/static/css/main.css @@ -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) { diff --git a/themes/lumbung-theme/static/img/buttons/books.svg b/themes/lumbung-theme/static/img/buttons/books.svg new file mode 100644 index 0000000..47bdab6 --- /dev/null +++ b/themes/lumbung-theme/static/img/buttons/books.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/themes/lumbung-theme/static/img/buttons/calendar.svg b/themes/lumbung-theme/static/img/buttons/calendar.svg new file mode 100644 index 0000000..2c7c232 --- /dev/null +++ b/themes/lumbung-theme/static/img/buttons/calendar.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + diff --git a/themes/lumbung-theme/static/img/buttons/gallery.svg b/themes/lumbung-theme/static/img/buttons/gallery.svg new file mode 100644 index 0000000..84d7738 --- /dev/null +++ b/themes/lumbung-theme/static/img/buttons/gallery.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + diff --git a/themes/lumbung-theme/static/img/buttons/harvest.svg b/themes/lumbung-theme/static/img/buttons/harvest.svg new file mode 100644 index 0000000..c3df1b4 --- /dev/null +++ b/themes/lumbung-theme/static/img/buttons/harvest.svg @@ -0,0 +1,100 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/themes/lumbung-theme/static/img/buttons/kios.svg b/themes/lumbung-theme/static/img/buttons/kios.svg new file mode 100644 index 0000000..9880c95 --- /dev/null +++ b/themes/lumbung-theme/static/img/buttons/kios.svg @@ -0,0 +1,38 @@ + + + + + + + + + + diff --git a/themes/lumbung-theme/static/img/buttons/panduan.svg b/themes/lumbung-theme/static/img/buttons/panduan.svg new file mode 100644 index 0000000..2fbc921 --- /dev/null +++ b/themes/lumbung-theme/static/img/buttons/panduan.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/themes/lumbung-theme/static/img/buttons/pen.svg b/themes/lumbung-theme/static/img/buttons/pen.svg new file mode 100644 index 0000000..6bc275d --- /dev/null +++ b/themes/lumbung-theme/static/img/buttons/pen.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/themes/lumbung-theme/static/img/buttons/shouts.svg b/themes/lumbung-theme/static/img/buttons/shouts.svg new file mode 100644 index 0000000..7c3c56e --- /dev/null +++ b/themes/lumbung-theme/static/img/buttons/shouts.svg @@ -0,0 +1,21 @@ + + + + + + + + + + diff --git a/themes/lumbung-theme/static/img/buttons/social.svg b/themes/lumbung-theme/static/img/buttons/social.svg new file mode 100644 index 0000000..e17793e --- /dev/null +++ b/themes/lumbung-theme/static/img/buttons/social.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/themes/lumbung-theme/static/img/buttons/tv.svg b/themes/lumbung-theme/static/img/buttons/tv.svg new file mode 100644 index 0000000..972df60 --- /dev/null +++ b/themes/lumbung-theme/static/img/buttons/tv.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file