From 2c81341f86757f0424cfe106a169af24b75356a9 Mon Sep 17 00:00:00 2001 From: Aadil Ayub Date: Tue, 18 Oct 2022 10:35:42 +0500 Subject: [PATCH] fix author color in lumbung callery cards --- themes/lumbung-theme/static/css/main.css | 866 +++-------------------- 1 file changed, 112 insertions(+), 754 deletions(-) diff --git a/themes/lumbung-theme/static/css/main.css b/themes/lumbung-theme/static/css/main.css index b0508f9..b2cdaf3 100644 --- a/themes/lumbung-theme/static/css/main.css +++ b/themes/lumbung-theme/static/css/main.css @@ -53,11 +53,6 @@ /*Main Stuff*/ -html { - scroll-behavior: smooth; -} - - body { font-size: 21px; font-family: Gudea, sans-serif; @@ -78,14 +73,9 @@ body > iframe { box-sizing: border-box; } -a { - color: #000; -} - .container { margin: 2em auto; max-width: 80%; - width: 100%; margin-bottom: 0; } @@ -132,15 +122,15 @@ a { max-width: 400px; } -.post:nth-child(even) { +.card:nth-child(even) { transform: rotate(-1deg); } -.post:nth-child(odd) { +.card:nth-child(odd) { transform: rotate(1deg); } -.post:nth-child(5) { +.card:nth-child(5) { transform: rotate(2deg); } @@ -169,133 +159,37 @@ a { /* base header & menu */ -.header-row { - margin: 1.5rem; - display: flex; - justify-content: space-between; - align-items: center; +#top-menu { + padding: 1.5rem 1rem 0; + display: grid; + grid-template-columns: 300px 1fr auto; + align-items: flex-start; } .home-link { - display: block; - max-width: 700px; - width: 70%; - padding: 0; - margin: auto; + text-decoration: none; } .logo { - display: block; - width: 100%; - height: auto; + width: 283px; + margin-top: 2rem; } -#top-menu .login-link { - background: #009d9b; - padding: 5px 30px; - color: #fff; - font-weight: 900; - position: absolute; - right: 1.5rem; -} - -.menu-row { - margin: 0 auto; - max-width: 80%; - width: 100%; - display: flex; - justify-content: center; - align-items: center; - position: sticky; - top: 15px; - z-index: 99; - max-width: fit-content; -} - -.menu-row .menu .filter-link { - background: #333; - height: 100%; - display: flex; - align-items: center; - padding: 0.5rem 1.5rem; - color: #fff; - cursor: pointer; -} - -.filter-icon { - height: 14px; - width: auto; - display: block; - margin-right: 10px; -} - -.filter-icon path { - fill:#fff; -} - -.menu-button { - width: 30px; - height: 16px; - display: none; - flex-direction: column; - justify-content: space-between; - color: pointer; -} - -.menu-button--line { - width: 100%; - height: 2px; - background: #333; -} - -.menu { - border: 2px solid #333; - padding: 0 1rem; - display: flex; - align-items: center; - background: #fff; - position: relative; -} - -.menu-dot { - width: 10px; - height: 10px; - margin-right: 3rem; -} - -.menu ul { - list-style-type: none; - margin: 0 auto; - padding-left: 0; - display: flex; - justify-content: space-between; - text-transform: lowercase; -} - -.menu ul li { - margin-right: 1.5rem; - padding: 0.5rem 0; -} - -.menu ul li:last-child { - margin-right: 0; -} - -.menu-nav-item { - border-right: 2px solid var(--border-color); - padding: 0.5em; -} - -.menu a { +#top-menu a { text-decoration: none; color: #333; } -.menu a:hover, -.menu a:focus { +#top-menu a:hover, +#top-menu a:focus { color: black; } +#top-menu #login { + font-weight: bold; + margin-top: 8px; +} + #top-menu div { display: flex; } @@ -305,7 +199,7 @@ a { display: none; } -.menu input { +#top-menu input { border: none; border-bottom: 1px solid #333; margin-right: 2rem; @@ -313,8 +207,8 @@ a { margin-left: 5px; } -.menu input:focus, -.menu input:hover { +#top-menu input:focus, +#top-menu input:hover { outline: none; border-bottom: 1px solid #333; } @@ -328,25 +222,27 @@ a { display: none; } -.login-menu { - display: none; +.menu { + margin-top: 8px; } -.menu-row .login { - height: 100%; +.menu ul { + list-style-type: none; + margin: 0 auto; + padding-left: 3rem; display: flex; - align-items: center; - border: 2px solid #333; - padding: 0 1.5rem; - background: #fff; + justify-content: space-between; + text-transform: lowercase; + max-width: 1100px; } -.login a { - text-decoration: none; +.menu-nav-item { + border-right: 2px solid var(--border-color); + padding: 0.5em; } /* styles for "tools" dropdown menu */ -.menu ul.submenu { +#top-menu ul.submenu { flex-direction: column; margin-left: 0; position: absolute; @@ -361,7 +257,6 @@ a { .menu .submenu li { margin: 2px 0; - padding: 0; } .menu .has-submenu { @@ -377,37 +272,49 @@ a { visibility: visible; } -.menu ul.submenu { - margin-left: -0.5em; - margin-top: 8px; - border: 2px solid ; +#top-menu .menu ul.submenu { + margin-left: 11px; + margin-top: 10px; + border: 1px solid ; gap: 0.25em; padding: 0.5em; } -.menu .menu .submenu a { +#top-menu a { + padding: 0 5px; +} + +#top-menu .menu .submenu a { margin: 0; display: flex; } -.menu .drawer .submenu { +#top-menu .drawer .submenu { position: initial; display: none; } -.menu .drawer .submenu.opened { +#top-menu .drawer .submenu.opened { display: flex; } -.menu .drawer .submenu li { +#top-menu .drawer .submenu li { padding: 0; padding-top: 1em; } -.menu .drawer .opened .submenu { +#top-menu .drawer .opened .submenu { visibility: visible; } +.drawer .has-submenu { + padding-left: 1em; + margin-left: 5px; + color: #333; + display: flex; + flex-direction: column; +} + /*Article Summary Cards*/ @@ -498,9 +405,9 @@ footer.post-footer { } -/* shout cards */ +/* network cards */ -.card.shout { +.card.network { border: 2px solid var(--shouts-dark); background-color: var(--shouts-light); max-width: min-content; @@ -512,70 +419,70 @@ footer.post-footer { } -.h-entry.shout header { +.h-entry.network header { display: flex; flex-direction: column; } -.h-entry.shout header h2 { +.h-entry.network header h2 { padding: 0.2em 0.5em 0.5em 0.5em; margin: 0; border: none; } -.h-entry.shout header h2:hover { +.h-entry.network header h2:hover { cursor: pointer; } -.h-entry.shout header h2 a { +.h-entry.network header h2 a { text-decoration: none; color: var(--shouts-dark); } -.h-entry.shout header time { +.h-entry.network header time { text-align: right; padding: 0.6em 0.8em; font-size: 1rem; } -.shout .header-metadata { +.network .header-metadata { align-items: center; } -.shout .header-metadata .dt-published { +.network .header-metadata .dt-published { border-bottom: 2px solid var(--shouts-dark); } -.shout .filler { +.network .filler { min-height: 1rem; } -.shout .author.p-author { +.network .author.p-author { border-color: var(--shouts-dark); padding: 0.5em 1.2em 0.5em 1.2em; } -.shout .p-summary { +.network .p-summary { display: flex; } -.shout .p-summary.portrait { +.network .p-summary.portrait { /* flex-direction: row; */ } -.shout .p-summary.landscape { +.network .p-summary.landscape { flex-direction: column; } -.shout .summary-image > img { +.network .summary-image > img { display: inherit; } -.shout .summary-text { +.network .summary-text { font-size: 18px; } -div.shout-source { +div.network-source { padding: 1em; padding-right: 2em; width: fit-content; @@ -588,28 +495,29 @@ div.shout-source { right: 1em; } -.shout-source .triangle { +.network-source::before { + content: ""; position: absolute; - right: 0px; + right: -20px; bottom: 0; - width: auto; - height: calc(100% + 0.5px); - top: -0.5px; - transform: translateX(calc(100% - 0.5px)); - fill: var(--shouts-dark); + width: 0; + height: 0; + border-left: 20px solid var(--shouts-dark); + border-top: 23px solid transparent; + border-bottom: 23px solid transparent; } -.shout-source a { +.network-source a { font-weight: bold; color: white; } -.shout .footer-filler { +.network .footer-filler { border-left: 2px solid var(--shouts-dark); border-top: none; } -.shout footer.post-footer { +.network footer.post-footer { border-top: 2px solid var(--shouts-dark); flex-flow: row; font-size: 0.9rem; @@ -618,17 +526,17 @@ div.shout-source { padding: 1em; } -.shout footer svg { +.network footer svg { fill: var(--shouts-dark) } -.shout .read-more { +.network .read-more { border: none; border-left: 2px solid var(--shouts-dark); padding: 0.5em 1.2em 0.5em 1.2em; } -.shout .footer-metadata { +.network .footer-metadata { padding: 0.5em 1.2em 0.5em 1.2em; } @@ -759,9 +667,9 @@ div.pen-source { padding: 0.5em 1.2em 0.5em 1.2em; } -/* social / hashtag cards */ +/* shouts cards */ -.card.social { +.card.shout { border-color: steelblue; border: 2px solid; background-color: aliceblue; @@ -773,24 +681,24 @@ div.pen-source { color: steelblue; } -.card.social h2 a { +.card.shout h2 a { color: var(--social-dark); cursor: pointer; display: block; word-wrap: anywhere; } -.card .card.social h2 a:hover { +.card .card.shout h2 a:hover { border: none; text-decoration: none; } -.card.social .post-footer { +.card.shout .post-footer { background: var(--social-light); color: var(--social-dark); } -.card.social .post-footer a{ +.card.shout .post-footer a { background: var(--social-light); color: var(--social-dark); text-decoration: underline; @@ -798,42 +706,47 @@ div.pen-source { /* gallery cards */ -.card.social.lumbunggallery, .card.social.lumbunggallery .post-footer a { +.card.shout.lumbung-gallery { border-color: var(--gallery-dark); background-color: var(--gallery-light); color: var(--gallery-dark); } -.card.social.lumbunggallery h2 a { +.card.shout.lumbung-gallery h2 a { color: var(--gallery-dark); } -.card.social.lumbunggallery .post-footer { +.card.shout.lumbung-gallery .post-footer { background: var(--gallery-light); color: var(--gallery-dark); border-top: 2px solid; } +.card.shout.lumbung-gallery .post-footer a { + background: var(--gallery-light); + color: var(--gallery-dark); +} + /* kios cards */ -.card.social.lumbungkios { +.card.shout.lumbung-kios { border-color: var(--kios-dark); background-color: var(--kios-light); color: var(--kios-dark); } -.card.social.lumbungkios h2 a { +.card.shout.lumbung-kios h2 a { color: var(--kios-dark); } -.card.social.lumbungkios .post-footer { +.card.shout.lumbung-kios .post-footer { background: var(--kios-light); color: var(--kios-dark); border-top: 2px solid; } -.card.social.lumbungkios .post-footer a { +.card.shout.lumbung-kios .post-footer a { background: none; color: var(--kios-dark); } @@ -1103,8 +1016,6 @@ li.page-item:after { z-index: -100; } - - /* Landingpage */ .welcome-text { text-align: center; @@ -1155,215 +1066,6 @@ li.page-item:after { margin-right: auto; } - -/* FILTER */ - -.filter-item, .card, .video-box { - display: none; -} - -.show-item { - display: block !important; -} - -.filter-container { - display: none; - background: #fff; - padding: 1.5rem; - border: 2px solid #333; - border-top: 0; - position: absolute; - left: 0; - z-index: 99; - width: 100%; - justify-content: space-between; -} - -.filter-information { - width: 15%; -} - -#load-more { - font-size: 0.8rem; - text-decoration: underline; - cursor: pointer; -} - -.filter-buttons-container { - align-items: center; - display: flex; - width: calc(85% - 30px); -} - -.filter-buttons-container-header { - display: flex; - margin-right: 20px; -} - -.filter-link { - height: 100%; - display: flex; - align-items: center; - background: #333; - color: #fff; - padding: calc(0.5rem + 2px) 1rem; - cursor: pointer; -} - -.filter-link:hover + .filter-container { - display: flex; -} - -.filter-container:hover { - display: flex; -} - -.filter-buttons-dropdown { - position: absolute; - top: 41px; - width: calc(100% + 2px); - left: -1px; - background: #fff; - max-height: 35vh; - min-height: 100%; - overflow-y: scroll; - overflow-x: hidden; - border: 1px solid #333; - border-top: 0; - display: none; -} - -.post.tv { - margin: auto; -} - -@media all and (min-width: 980px) { - .filter-buttons:hover .filter-buttons-dropdown { - display: block; - } - - .filter-buttons:hover { - display: block; - } -} - -.filter-buttons { - width: fit-content; - display: flex; - white-space: nowrap; - flex-direction: column; - position: relative; - border: 1px solid #333; - margin-right: 10px; - padding-right: 30px; - width: calc(25% - 7.5px); -} - -.filter-buttons:last-child { - margin-right: 0px; -} - -.filter-buttons > button { - height: 40px; -} - -.filter-by:after { - content:""; - width: 0; - height: 0; - border-style: solid; - border-width: 5px 5px 0 5px; - border-color: #333333 transparent transparent transparent; - position: absolute; - right: 0.5rem; -} - -.filter-buttons button { - display: flex; - align-items: center; - justify-content: space-between; - border: 0; - background: unset; - border-radius: 0; - width: 100%; - padding: 0.6rem; - cursor: pointer; - white-space: nowrap; - text-transform: lowercase; -} - -.filter-buttons-dropdown button { - border-bottom: 1px solid; -} - -.filter-buttons .filter-button { - padding: 0.6rem 0.6rem 0.6rem 1.6rem; -} - -.filter-button svg { - width: 10px; - position: absolute; - left: 0.6rem; -} - -.filter-button svg path { - fill: #3330; - stroke: #333; - stroke-width: 2px; -} - -.filter-button.active svg path { - fill: #333; -} - -.filter-title { - width: calc(100% - 20px); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - text-align: left; -} - -.filter-buttons-dropdown button:last-child { - border-bottom: 0; -} - -.filter-buttons .filter-button.active { - background: #c2c2ff; -} - -.disable-button { - display: none !important; -} - - .page-nav { - display: flex; - justify-content: center; - margin: 20px auto 50px; - } - - .nextpage { - padding: 15px; - position: relative; - color: #333; - text-decoration: none; - margin: 0px 20px; - font-size: 38px; - } - - .nextpage:after { - content: ""; - height: 50%; - width: 100%; - display: block; - border: 2px solid #333; - border-top: 0; - bottom: 0; - position: absolute; - left: 0; - } - - /* ### Timeline ### */ /* Timeline Tags */ @@ -1692,119 +1394,6 @@ a.timeline-url { } -/* EVENT LIST */ - -.event-list { - border: 2px solid var(--calendar-dark); - background-color: var(--calendar-light); - color: var(--calendar-dark); - margin: 1rem 0 4rem; -} - -.event-list .tape-label span { - background-color: var(--calendar-dark); -} - -.event-list-item { - border-top: 1px solid; - display: flex; - flex-wrap: wrap; -} - -.event-list-item-head { - display: flex; -} - -.event-list-item a { - color: var(--calendar-dark); -} - -.event-list-item .date-start, .event-list-item .title, .event-list-item .time, .event-list-item .duration, .event-list-item .location { - display: flex; - align-items: center; - border-right: 1px solid var(--calendar-dark); - padding: 0.8rem 0; - overflow: hidden; -} - -.event-list-item .date-start { - font-size: 1.2rem; - width: 110px; - padding-left: 0.4rem; - border-right: 0; -} - -.event-list-item .title { - width: calc(45% - 110px); - padding-left: 0.4rem; -} - -.event-list-item .p-name { - margin: 0; - font-size: 1.2rem; - padding: 0; - display: block; - width: 100%; -} - -.event-list-item .p-name a { - color: var(--calendar-dark); - text-decoration: none; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - width: calc(100% - 20px); - display: block; -} - -.event-list-item .time { - width: 20%; -} - -.event-list-item .time .start-scroller { - border-bottom: 0px; -} - -.event-list-item .duration { - width: 12.5%; - font-size: 0.8rem; - padding: 0.8rem 0.4rem; -} - -.event-list-item .duration b { - margin-left: 3px; -} - -.event-list-item .location { - min-width: unset; - width: 15%; - font-size: 0.8rem; - padding: 0.8rem 0.4rem; -} - -.event-list-item .button { - width: 7.5%; -} - -.event-list-item .calendar { - width: 7.5%; - display: flex; - align-items: center; - padding: 0.8rem 0.4rem; - cursor: pointer; -} - -.event-list-item .description { - display: none; - border-top: 1px solid; - font-size: 1.2rem; -} - -input:checked + label + .description { - display: block; - transition: ease .5s; - } - /* Page footer */ #footer { @@ -1857,8 +1446,6 @@ input:checked + label + .description { } .f-main .logo { - width: 280px; - max-height: unset; filter: brightness(0); max-width: 20vw; margin-top: 0; @@ -1964,10 +1551,6 @@ input:checked + label + .description { font-size: 1.8vw; vertical-align: top; } - - .menu-row { - font-size: 1.78vw; - } } @@ -1979,216 +1562,23 @@ input:checked + label + .description { } #top-menu { - width: 100%; + grid-template-columns: 1fr; } - .logo { - max-height: 50px; + .menu, + #login { + display: none; } /* menu styles */ - - .menu-row, #top-menu { - position: fixed !important; - z-index: 97; - } - - .menu-row { - z-index: 98; - width: fit-content; - margin-top: 3vw; - right: 5%; - } - - .menu { - display: none; - position: fixed; - left: 20px; - top: 80px; - width: calc(100vw - 40px); - overflow: scroll; - height: calc(100% - 90px); - padding: 0.5rem 1.5rem; - } - - .menu.active { - display: block; - } - - .menu ul { - margin: 0; - display: block; - } - - .menu-row .login { - display: none; - } - - .menu-button { - display: flex; - position: fixed; - left: 20px; - top: clamp(25px, 7vw, 35px); - } - - .menu ul.submenu { - margin-left: 0; - margin-top: 4px; - position: unset; - border: 0; - padding-left: 20px !important; - display: none; - } - - .menu .submenu li { - margin: 0; - padding: 0.5rem 0; - } - - .menu ul.submenu.active { - display: block; - visibility: visible; - } - - .login-menu { - display: block; - padding: 0.5rem 2rem; - background: #333; - transform: rotate(-3deg); - width: fit-content; - margin: 0.5rem 0 1rem; - } - - .login-menu a { - color: #fff !important; - } - - .menu-button--line{ - transition: all 0.3s ease-in-out; - } - - .menu-button.active { - -webkit-transition: all 0.3s ease-in-out; - -o-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; - transition-delay: 0s; - -webkit-transition-delay: 0.6s; - -o-transition-delay: 0.6s; - transition-delay: 0.6s; - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - -o-transform: rotate(45deg); - transform: rotate(45deg); - } - - .menu-button.active .menu-button--line:nth-child(1) { - -webkit-transform: translateY(8px); - -ms-transform: translateY(8px); - -o-transform: translateY(8px); - transform: translateY(8px); - -webkit-transition-delay: 0.3s; - -o-transition-delay: 0.3s; - transition-delay: 0.3s; - } - - .menu-button.active .menu-button--line:nth-child(2) { - width: 0px; - } - - .menu-button.active .menu-button--line:nth-child(3) { - -webkit-transform: translateY(-6px) rotate(90deg); - -ms-transform: translateY(-6px) rotate(90deg); - -o-transform: translateY(-6px) rotate(90deg); - transform: translateY(-6px) rotate(90deg); - -webkit-transition-delay: 0.3s; - -o-transition-delay: 0.3s; - transition-delay: 0.3s; - } - - .filter { - position: fixed; - right: 20px; - top: clamp(25px, 7vw, 35px); - } - - .filter-container { - flex-wrap: wrap; - border-top: 2px solid #333; - left: 20px; - width: calc(100vw - 40px); - position: fixed; - margin-top: 30px; - display: none !important; - } - - #filter.active .filter-container { - display: block !important; - } - - .filter-information { - width: 100%; - margin-bottom: 15px; - display: flex; - align-items: center; - justify-content: space-between; - } - - .filter-buttons-container { - display: block; - width: 100%; - } - - .filter-buttons-container.open { - display: block !important; - } - - .filter-buttons-dropdown { - z-index: 99; - } - - .filter-buttons { - margin-right: 0px; - margin-bottom: 10px; - width: 100%; - } - - .container { - padding-top: 60px; - } - - .filter-link { - background: unset; - padding: 0; - } - - .filter-link span { - display: none; - } - - .filter-icon { - height: 20px; - margin-right: 0; - } - - .filter-icon path { - fill: #333; - } - - .filter-buttons-dropdown.active { - display: block; - } - - .filter-by.active:after { - transform: rotate(180deg); - } - #top-menu div.mobile-menu { display: flex; justify-content: space-between; } - #top-menu .login-link { - display: none; + .mobile-menu #login { + display: inline-flex; + margin: 0 0 0 auto; } .hamburger { @@ -2286,38 +1676,6 @@ input:checked + label + .description { .f-main .logo { max-width: unset; } - - /* EVENT LIST */ - - .event-list .event-list-item:nth-child(2n) { - background: #c8efff; - } - - .event-list-item .date-start { - border-bottom: 1px solid; - } - - .event-list-item .title { - width: calc(100% - 110px); - border-bottom: 1px solid; - border-right: 0; - } - - .event-list-item .time { - width: 100%; - border-bottom: 1px solid; - border-right: 0; - padding: 0; - } - - .event-list-item .duration, .event-list-item .location { - width: 42%; - } - - .event-list-item .calendar { - width: 16%; - } - } /* mobile styles */