From 28c59acb346c9804904aadc0c8986c253cc70e13 Mon Sep 17 00:00:00 2001 From: Aadil Ayub Date: Thu, 13 Jan 2022 16:33:40 +0500 Subject: [PATCH] formatting --- themes/lumbung-theme/static/css/main.css | 831 ++++++++++++----------- 1 file changed, 421 insertions(+), 410 deletions(-) diff --git a/themes/lumbung-theme/static/css/main.css b/themes/lumbung-theme/static/css/main.css index 513957c..82d8e5f 100644 --- a/themes/lumbung-theme/static/css/main.css +++ b/themes/lumbung-theme/static/css/main.css @@ -1,637 +1,637 @@ @font-face { - font-family: BarrioRegular; - src: url(fonts/Barrio_Regular.woff); + font-family: BarrioRegular; + src: url(fonts/Barrio_Regular.woff); } @font-face { - font-family: ZenMaruGothic; - src: url(fonts/Zen_Maru_Gothic_Regular.woff); + font-family: ZenMaruGothic; + src: url(fonts/Zen_Maru_Gothic_Regular.woff); } @font-face { - font-family: AnonymousPro; - src: url(fonts/Anonymous_Pro_Regular.woff); + font-family: AnonymousPro; + src: url(fonts/Anonymous_Pro_Regular.woff); } @font-face { - font-family: Gudea; - font-style: normal; - font-weight: 400; - src: url(fonts/gudea.woff2) format("woff2"); + font-family: Gudea; + font-style: normal; + font-weight: 400; + src: url(fonts/gudea.woff2) format("woff2"); } @font-face { - font-family: Gudea; - font-style: italic; - font-weight: 400; - src: url(fonts/gudea-italic.woff2) format("woff2"); + font-family: Gudea; + font-style: italic; + font-weight: 400; + src: url(fonts/gudea-italic.woff2) format("woff2"); } @font-face { - font-family: Gudea; - font-style: normal; - font-weight: 700; - src: url(fonts/gudea-bold.woff2) format("woff2"); + font-family: Gudea; + font-style: normal; + font-weight: 700; + src: url(fonts/gudea-bold.woff2) format("woff2"); } :root { - --border-color: tomato; - - --tv-dark: #237D0F; - --tv-light: #E2FAD7; - - --pen-dark: #E0005C; - --pen-light: #FEDAE9; - - --social-light: #C2E4F2; - --social-dark: #0163A4; - - --gallery-light: #FCF4B9; - --gallery-dark: #846A00; + --border-color: tomato; + --tv-dark: #237D0F; + --tv-light: #E2FAD7; + --pen-dark: #E0005C; + --pen-light: #FEDAE9; + --social-light: #C2E4F2; + --social-dark: #0163A4; + --gallery-light: #FCF4B9; + --gallery-dark: #846A00; } + /*Main Stuff*/ + body { - font-size: 21px; - font-family: Gudea; - margin: 0; + font-size: 21px; + font-family: Gudea; + margin: 0; } * { - box-sizing: border-box; + box-sizing: border-box; } #content { - margin: 2em auto; - max-width: 80%; - margin-bottom: 0; + margin: 2em auto; + max-width: 80%; + margin-bottom: 0; } .card { - border: 2px solid var(--border-color); - background-color: #fff09d; - max-width: 600px; - margin-bottom: 2em; - flex: auto; - margin: 0 3em 3em 0; - align-self: start; - + border: 2px solid var(--border-color); + background-color: #fff09d; + max-width: 600px; + margin-bottom: 2em; + flex: auto; + margin: 0 3em 3em 0; + align-self: start; } .card { - background-color: peachpuff; + background-color: peachpuff; } .side-bar { - border: 2px solid var(--border-color); - max-width: 400px; + border: 2px solid var(--border-color); + max-width: 400px; } - .card:nth-child(even) { - transform: rotate(-1deg); + transform: rotate(-1deg); } .card:nth-child(odd) { - transform: rotate(1deg); + transform: rotate(1deg); } .card:nth-child(5) { - transform: rotate(2deg); + transform: rotate(2deg); } - .video.box { - margin-top:3em; + margin-top: 3em; } .bar { - border: 2px solid var(--border-color); - box-shadow: 0.6em 0.6em 0 #d2d1c8; - margin-bottom: 2em; - margin-top:3em; - display: inline-block; - background-color: #fff09d; + border: 2px solid var(--border-color); + box-shadow: 0.6em 0.6em 0 #d2d1c8; + margin-bottom: 2em; + margin-top: 3em; + display: inline-block; + background-color: #fff09d; } .h-feed { - display: flex; - flex-flow: row wrap; - width: 100%; - + display: flex; + flex-flow: row wrap; + width: 100%; } .entries { - padding-top: 10%; + padding-top: 10%; } /* base header & menu */ #top-menu { - padding: 1rem; - display: grid; - grid-template-columns: 300px 1fr auto; - align-items: flex-start; + padding: 1rem; + display: grid; + grid-template-columns: 300px 1fr auto; + align-items: flex-start; } - -.home-link { text-decoration: none; } +.home-link { + text-decoration: none; +} .logo { - width: 283px; - margin-top: 2rem; + width: 283px; + margin-top: 2rem; } #top-menu ul { - margin-left: 3rem; + margin-left: 3rem; } #top-menu a { - text-decoration: none; - color: #333; - padding: 5px; - margin: 0 2rem; + text-decoration: none; + color: #333; + padding: 5px; + margin: 0 2rem; } #top-menu a:hover, #top-menu a:focus { - color: black; + color: black; } #top-menu #login { - font-weight: bold; + font-weight: bold; } #top-menu div { - display: flex; + display: flex; } #top-menu div.mobile-menu, .drawer { - display: none; + display: none; } #top-menu .search { - display: flex; - justify-content: flex-end; - align-items: flex-end; - /* temporarily disabling search */ - display: none; + display: flex; + justify-content: flex-end; + align-items: flex-end; + /* temporarily disabling search */ + display: none; } #top-menu input { - border: none; - border-bottom: 1px solid #333; - margin-right: 2rem; - font-size: 13px; - margin-left: 5px; + border: none; + border-bottom: 1px solid #333; + margin-right: 2rem; + font-size: 13px; + margin-left: 5px; } -#top-menu input:focus, +#top-menu input:focus, #top-menu input:hover { - outline: none; - border-bottom: 1px solid #333; + outline: none; + border-bottom: 1px solid #333; } .menu-dropdown summary { - list-style: none; - cursor: pointer; + list-style: none; + cursor: pointer; } .dropdown-menu summary::-webkit-details-marker { - display: none; + display: none; } .menu { - margin-top: 8px; + margin-top: 8px; } .menu ul { - list-style-type: none; - margin: 0; - padding: 0; - display: flex; - text-transform: lowercase; + list-style-type: none; + margin: 0; + padding: 0; + display: flex; + text-transform: lowercase; } .menu-nav-item { - border-right: 2px solid var(--border-color); - padding: 0.5em; + border-right: 2px solid var(--border-color); + padding: 0.5em; } + /*Article Summary Cards*/ .h-entry header { - display: flex; - justify-content: space-between; + display: flex; + justify-content: space-between; } .h-entry header h2 { - padding: 0.2em; - margin: 0; - padding-right: 0.3em; - padding-left: 0.3em; - flex-grow: 1; + padding: 0.2em; + margin: 0; + padding-right: 0.3em; + padding-left: 0.3em; + flex-grow: 1; } .h-entry header h2:hover { - cursor: pointer; + cursor: pointer; } .h-entry header h2 a { - text-decoration: none; - color: var(--border-color); + text-decoration: none; + color: var(--border-color); } - .h-entry header .header-metadata { - margin: 0; - display: flex; - flex-flow: column wrap; - font-size: 0.8rem; + margin: 0; + display: flex; + flex-flow: column wrap; + font-size: 0.8rem; } -.header-metadata .dt-published{ - padding: 0.5em 1.2em 0.5em 1.2em; +.header-metadata .dt-published { + padding: 0.5em 1.2em 0.5em 1.2em; } .author.p-author { - border-top: 2px solid var(--border-color); - padding: 0.5em 1.2em 0.5em 1.2em; + border-top: 2px solid var(--border-color); + padding: 0.5em 1.2em 0.5em 1.2em; } - .p-summary.truncated.image { - display: flex; - flex-direction: row-reverse; + display: flex; + flex-direction: row-reverse; } .p-summary.truncated { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .summary-text { - flex: 1; - padding: 1em; - min-width: 34ch; - text-overflow: ellipsis; - overflow: hidden; + flex: 1; + padding: 1em; + min-width: 34ch; + text-overflow: ellipsis; + overflow: hidden; } -.summary-image > img { - /* height: 100%; +.summary-image>img { + /* height: 100%; object-fit: cover; max-width: 100%;*/ - } -.summary-image > a { - display: flex; +.summary-image>a { + display: flex; } footer.post-footer { - display: flex; - flex-flow: row-reverse; + display: flex; + flex-flow: row-reverse; } -.footer-filler{ - border-top: 2px solid var(--border-color); - flex-grow: 1; +.footer-filler { + border-top: 2px solid var(--border-color); + flex-grow: 1; } .read-more { - border-top: 2px solid var(--border-color); - border-left: 2px solid var(--border-color); - align-content: flex-end; - padding: 0.2em 1em 0.2em 1em; - font-size: 0.9rem; + border-top: 2px solid var(--border-color); + border-left: 2px solid var(--border-color); + align-content: flex-end; + padding: 0.2em 1em 0.2em 1em; + font-size: 0.9rem; } + /* network cards */ .card.network { - border: 2px solid darkcyan; - - background-color: lightgreen; - max-width: min-content; - margin-bottom: 2em; - flex: auto; - margin: 0 3em 3em 0; - align-self: start; - color: darkcyan; + border: 2px solid darkcyan; + background-color: lightgreen; + max-width: min-content; + margin-bottom: 2em; + flex: auto; + margin: 0 3em 3em 0; + align-self: start; + color: darkcyan; } .h-entry.network header { - display: flex; - border-bottom: 2px solid darkcyan; - flex-direction: row-reverse; + display: flex; + border-bottom: 2px solid darkcyan; + flex-direction: row-reverse; } .h-entry.network header h2 { - padding: 0.2em 0.5em 0.2em 0.5em; - margin: 0; - border: none; + padding: 0.2em 0.5em 0.2em 0.5em; + margin: 0; + border: none; } .h-entry.network header h2:hover { - box-shadow: inset 4px 4px 0px darkcyan; - cursor: pointer; + box-shadow: inset 4px 4px 0px darkcyan; + cursor: pointer; } .h-entry.network header h2 a { - text-decoration: none; - color: darkcyan; + text-decoration: none; + color: darkcyan; } .network .header-metadata { - align-items: center; + align-items: center; } -.network .header-metadata .dt-published{ - - border-bottom: 2px solid darkcyan; +.network .header-metadata .dt-published { + border-bottom: 2px solid darkcyan; } .network .filler { - min-height: 1rem; + min-height: 1rem; } .network .author.p-author { - border-color: darkcyan; - padding: 0.5em 1.2em 0.5em 1.2em; + border-color: darkcyan; + padding: 0.5em 1.2em 0.5em 1.2em; } .network .p-summary { - display: flex; + display: flex; } .network .p-summary.portrait { - flex-direction: row; + flex-direction: row; } -.network .p-summary.landscape{ - flex-direction: column; + +.network .p-summary.landscape { + flex-direction: column; } + .network .summary-image.portrait { - border-right: 2px solid darkcyan; + border-right: 2px solid darkcyan; } + .network .summary-image.landscape { - border-bottom: 2px solid darkcyan; - border-right: none; + border-bottom: 2px solid darkcyan; + border-right: none; } - -.network .summary-image > img { - display: inherit; +.network .summary-image>img { + display: inherit; } + .network .summary-text { - font-size: 18px; + font-size: 18px; } div.network-source { - padding: 0.5em 1em 0.5em 1em; - border-bottom: 2px solid darkcyan; - font-size: 14px; - display: flex; - justify-content: space-between; + padding: 0.5em 1em 0.5em 1em; + border-bottom: 2px solid darkcyan; + font-size: 14px; + display: flex; + justify-content: space-between; } .network-source a { - font-weight: bold; - color: darkcyan; + font-weight: bold; + color: darkcyan; } .network .footer-filler { - border-left: 2px solid darkcyan; - border-top: none; + border-left: 2px solid darkcyan; + border-top: none; } .network footer.post-footer { - border-top: 2px solid darkcyan; - flex-flow: row; - font-size: 0.9rem; + border-top: 2px solid darkcyan; + flex-flow: row; + font-size: 0.9rem; } .network .read-more { - border: none; - border-left: 2px solid darkcyan; - padding: 0.5em 1.2em 0.5em 1.2em; + border: none; + border-left: 2px solid darkcyan; + padding: 0.5em 1.2em 0.5em 1.2em; } .network .footer-metadata { - padding: 0.5em 1.2em 0.5em 1.2em; + padding: 0.5em 1.2em 0.5em 1.2em; } + /* shouts cards */ .card.shout { - border-color: steelblue; - border: 2px solid; - - background-color: aliceblue; - max-width: min-content; - margin-bottom: 2em; - flex: auto; - margin: 0 3em 3em 0; - align-self: start; - color: steelblue; + border-color: steelblue; + border: 2px solid; + background-color: aliceblue; + max-width: min-content; + margin-bottom: 2em; + flex: auto; + margin: 0 3em 3em 0; + align-self: start; + color: steelblue; } .card.shout h2 a { - color: var(--social-dark); - cursor: pointer; + color: var(--social-dark); + cursor: pointer; } -.card - -.card.shout h2 a:hover { - border: none; - text-decoration: none; +.card .card.shout h2 a:hover { + border: none; + text-decoration: none; } .card.shout .post-footer { - background: var(--social-light); - color: var(--social-dark); + background: var(--social-light); + color: var(--social-dark); } + /* calendar cards */ .card.calendar { - border: 2px solid cornflowerblue; - background-color: lightblue; - max-width: 360px; - margin-bottom: 2em; - flex: auto; - margin: 0 3em 3em 0; - align-self: start; - color: royalblue; + border: 2px solid cornflowerblue; + background-color: lightblue; + max-width: 360px; + margin-bottom: 2em; + flex: auto; + margin: 0 3em 3em 0; + align-self: start; + color: royalblue; } .card.calendar.past { - opacity: 0.3; + opacity: 0.3; } .card.calendar.past:hover { - opacity: 1; + opacity: 1; } .h-event.calendar header { - display: flex; - border-bottom: 2px solid cornflowerblue; + display: flex; + border-bottom: 2px solid cornflowerblue; } .h-event.calendar header h2 { - padding: 0.2em 0.5em 0.2em 0.5em; - margin: 0; - border-right: none; + padding: 0.2em 0.5em 0.2em 0.5em; + margin: 0; + border-right: none; } .h-event.calendar header h2:hover { - box-shadow: inset 4px 4px 0px royalblue; - cursor: pointer; + box-shadow: inset 4px 4px 0px royalblue; + cursor: pointer; } .h-event.calendar header h2 a { - text-decoration: none; - color: royalblue; + text-decoration: none; + color: royalblue; } .header-filler { - min-width: 10%; + min-width: 10%; } .calendar-location { - font-size: 0.8rem; - min-width: 20%; - padding: 0.5em 0.9em 0.5em 0.9em; - border-left: 2px solid cornflowerblue; + font-size: 0.8rem; + min-width: 20%; + padding: 0.5em 0.9em 0.5em 0.9em; + border-left: 2px solid cornflowerblue; } .calendar-duration { - font-size: 0.8rem; - border-right: 2px solid cornflowerblue; - padding: 0.5em 0.9em 0.5em 0.9em; + font-size: 0.8rem; + border-right: 2px solid cornflowerblue; + padding: 0.5em 0.9em 0.5em 0.9em; } .start-scroller { - display: flex; - flex-flow: row-reverse; - border-bottom: 2px solid cornflowerblue; + display: flex; + flex-flow: row-reverse; + border-bottom: 2px solid cornflowerblue; } -.start-scroller marquee{ - font-size: 0.8rem; - padding-top: 0.2em; - padding-bottom: 0.2em; + +.start-scroller marquee { + font-size: 0.8rem; + padding-top: 0.2em; + padding-bottom: 0.2em; } .calendar .description { - border-top: 2px solid cornflowerblue; + border-top: 2px solid cornflowerblue; } -.calendar-image-holder{ - border-bottom: 2px solid cornflowerblue; +.calendar-image-holder { + border-bottom: 2px solid cornflowerblue; } .calendar-image-holder a { - display: inherit; + display: inherit; } -.calendar-image{ - max-width: 100%; - display: inherit; +.calendar-image { + max-width: 100%; + display: inherit; } + /* Card metadata (video & calendar) */ .metadata { - display: flex; - justify-content: space-between; - flex-wrap: wrap; + display: flex; + justify-content: space-between; + flex-wrap: wrap; } .description p:first-of-type { - margin:0; + margin: 0; } .description ul:first-of-type { - margin:0; + margin: 0; } -input + label +.calendar-location+.description{ - display: none; +input+label+.calendar-location+.description { + display: none; } -input:checked + label +.calendar-location+.description { - display: block; - transition: ease .5s; +input:checked+label+.calendar-location+.description { + display: block; + transition: ease .5s; } .metadata label { - vertical-align: sub; - flex-grow: 1; - font-weight: normal; - cursor: pointer; - padding: 0.4em 0.9em 0.4em 0.9em; - font-size: 0.9em; + vertical-align: sub; + flex-grow: 1; + font-weight: normal; + cursor: pointer; + padding: 0.4em 0.9em 0.4em 0.9em; + font-size: 0.9em; } label:hover { - box-shadow: inset 2px 2px 0px #95948c; + box-shadow: inset 2px 2px 0px #95948c; } .description { - padding: 0.5em 0.7em 0.7em 0.5em; - overflow: hidden; - flex-basis: 100%; + padding: 0.5em 0.7em 0.7em 0.5em; + overflow: hidden; + flex-basis: 100%; } .descr_button { - cursor: pointer; - flex-grow: 1; - text-align: center; + cursor: pointer; + flex-grow: 1; + text-align: center; } + /* Paginator */ nav.pagination { - width: 60%; - margin: auto; - margin-top: 2em; - margin-bottom: 2em; + width: 60%; + margin: auto; + margin-top: 2em; + margin-bottom: 2em; } ul.pagination { - display: flex; - justify-content: space-evenly; /* align horizontal */ - align-items: center; /* align vertical */ + display: flex; + justify-content: space-evenly; + /* align horizontal */ + align-items: center; + /* align vertical */ } .page-item { - display: block; - text-align: center; - font-size: 38px; - border-bottom: 2px solid black; - cursor: pointer; + display: block; + text-align: center; + font-size: 38px; + border-bottom: 2px solid black; + cursor: pointer; } li.page-item { - padding: 0.4em; - position: relative; + padding: 0.4em; + position: relative; } li.page-item a { - color: black; + color: black; } li.page-item.active a { - text-decoration: underline; + text-decoration: underline; } li.page-item.disabled { - display: none; + display: none; } + /* li.page-item:nth-child(even) { transform: rotate(-1deg); @@ -651,156 +651,167 @@ li.page-item:nth-child(8) { li.page-item:first-child, li.page-item:last-child { - border: none; - text-decoration: none; + border: none; + text-decoration: none; } li.page-item:first-child::before, li.page-item:first-child::after, li.page-item:last-child::before, li.page-item:last-child::after { - display: none; + display: none; } li.page-item:nth-last-child(2) { - border: none; - text-decoration: none; + border: none; + text-decoration: none; } li.page-item:nth-last-child(2)::before, li.page-item:nth-last-child(2)::after { - display: none; + display: none; } - li.page-item a { - text-decoration: none; + text-decoration: none; } li.page-item:hover a { - text-decoration: underline; + text-decoration: underline; } li.page-item:before { - content: ""; - position: absolute; - left: 0; - bottom: 0; - height: 50%; - width: 50%; - border-left: 2px solid black; + content: ""; + position: absolute; + left: 0; + bottom: 0; + height: 50%; + width: 50%; + border-left: 2px solid black; } li.page-item:after { - content: ""; - position: absolute; - right: 0; - bottom: 0; - height: 50%; - width: 50%; - border-right: 2px solid black; + content: ""; + position: absolute; + right: 0; + bottom: 0; + height: 50%; + width: 50%; + border-right: 2px solid black; } /* Page footer */ footer { - background: #AFAFAF; - color: #333333; - font-size: 15px; - padding: 1em 4em; + background: #AFAFAF; + color: #333333; + font-size: 15px; + padding: 1em 4em; } footer a { - color: #333333; - text-decoration: none; + color: #333333; + text-decoration: none; } footer a:hover { - cursor: pointer; - text-decoration: underline; + cursor: pointer; + text-decoration: underline; } + /* mobile styles */ @media (max-width: 480px) { - #top-menu { - grid-template-columns: 1fr; - } - - .menu, - #top-menu .search, - #login { - display: none; - } - - /* menu styles */ - #top-menu div.mobile-menu { - display: flex; - justify-content: space-between; - } - - .mobile-menu #login { - display: inline-flex; - } - - .hamburger { - border: none; - background: none; - position: relative; - z-index: 3; - } - - .drawer { - display: block; - position: fixed; - background: white; - top: 0; - left: 0; - height: 100vh; - width: 0; - z-index: 2; - transition: 0.2s all ease-in-out; - padding-top: 120px; } - .drawer * { - display: none; - opacity: 0; } - #top-menu .drawer ul { - display: flex; - flex-direction: column; - gap: 14px; - width: 100%; - margin: 0; - padding: 0; + #top-menu { + grid-template-columns: 1fr; } - .drawer ul li { - padding: 1em 0; - border-bottom: 1px solid #333; } - .drawer ul li a { - color: white; - text-decoration: none; - text-transform: lowercase; - margin-left: 1em; } - .drawer.opened { - width: 80%; } - .drawer.opened * { + + .menu, + #top-menu .search, + #login { + display: none; + } + + /* menu styles */ + #top-menu div.mobile-menu { + display: flex; + justify-content: space-between; + } + + .mobile-menu #login { + display: inline-flex; + } + + .hamburger { + border: none; + background: none; + position: relative; + z-index: 3; + } + + .drawer { display: block; - opacity: 1; } - + position: fixed; + background: white; + top: 0; + left: 0; + height: 100vh; + width: 0; + z-index: 2; + transition: 0.2s all ease-in-out; + padding-top: 120px; + } + + .drawer * { + display: none; + opacity: 0; + } - /* card styles */ - .h-entry img { - max-width: 100%; - width: 100%; - } + #top-menu .drawer ul { + display: flex; + flex-direction: column; + gap: 14px; + width: 100%; + margin: 0; + padding: 0; + } + + .drawer ul li { + padding: 1em 0; + /* border-bottom: 1px solid #333; */ + } + + .drawer ul li a { + color: white; + text-decoration: none; + text-transform: lowercase; + margin-left: 1em; + } - .summary-text { - font-size: 17px; - min-width: none; - max-width: 16ch; - } - - .card.shout h2 a { - font-size: 26px; - } + .drawer.opened { + width: 80%; + } + + .drawer.opened * { + display: block; + opacity: 1; + } + + /* card styles */ + .h-entry img { + max-width: 100%; + width: 100%; + } + + .summary-text { + font-size: 17px; + min-width: none; + max-width: 16ch; + } + + .card.shout h2 a { + font-size: 26px; + } } \ No newline at end of file