@font-face { font-family: BarrioRegular; src: url(fonts/Barrio_Regular.woff); } @font-face { font-family: ZenMaruGothic; src: url(fonts/Zen_Maru_Gothic_Regular.woff); } @font-face { 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-face { 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"); } :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; --shouts-dark: #CB001D; --shouts-light: #FFD9DD; --calendar-light: #B6EDFF; --calendar-dark: #0E64C8; } /*Main Stuff*/ body { font-size: 21px; font-family: Gudea, sans-serif; margin: 0; /* pushes footer to bottom */ display: grid; grid-template-rows: auto auto 1fr auto; min-height: 100vh; } * { box-sizing: border-box; } #content { 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; } .card { background-color: peachpuff; } .side-bar { border: 2px solid var(--border-color); max-width: 400px; } .card:nth-child(even) { transform: rotate(-1deg); } .card:nth-child(odd) { transform: rotate(1deg); } .card:nth-child(5) { transform: rotate(2deg); } .video.box { 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; } .h-feed { display: flex; flex-flow: row wrap; width: 100%; } .entries { padding-top: 10%; } .p-name { padding-right: 1em; } /* base header & menu */ #top-menu { padding: 1rem; display: grid; grid-template-columns: 300px 1fr auto; align-items: flex-start; padding-top: 1.5rem; } .home-link { text-decoration: none; } .logo { width: 283px; margin-top: 2rem; } #top-menu ul { margin-left: 3rem; } #top-menu a { text-decoration: none; color: #333; padding: 5px; margin: 0 2rem; } #top-menu a:hover, #top-menu a:focus { color: black; } #top-menu #login { font-weight: bold; } #top-menu div { display: flex; } #top-menu div.mobile-menu, .drawer { display: none; } #top-menu .search { 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; } #top-menu input:focus, #top-menu input:hover { outline: none; border-bottom: 1px solid #333; } .menu-dropdown summary { list-style: none; cursor: pointer; } .dropdown-menu summary::-webkit-details-marker { display: none; } .menu { margin-top: 8px; } .menu ul { 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; } /*Article Summary Cards*/ .h-entry header { 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; } .h-entry header h2:hover { cursor: pointer; } .h-entry header h2 a { text-decoration: none; color: var(--border-color); } .h-entry header .header-metadata { margin: 0; display: flex; flex-flow: column wrap; font-size: 0.8rem; } .h-entry img { max-width: 100%; width: 100%; } .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; } .p-summary.truncated.image { display: flex; flex-direction: row-reverse; } .p-summary.truncated { display: flex; flex-direction: column; } .summary-text { flex: 1; padding: 1em; min-width: 34ch; text-overflow: ellipsis; overflow: hidden; } .summary-image > a { display: flex; } footer.post-footer { display: flex; flex-flow: row-reverse; } .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; } /* network cards */ .card.network { border: 2px solid var(--shouts-dark); background-color: var(--shouts-light); max-width: min-content; margin-bottom: 2em; flex: auto; margin: 0 3em 3em 0; align-self: start; color: var(--shouts-dark); } .h-entry.network header { display: flex; flex-direction: column; } .h-entry.network header h2 { padding: 0.2em 0.5em 0.5em 0.5em; margin: 0; border: none; } .h-entry.network header h2:hover { cursor: pointer; } .h-entry.network header h2 a { text-decoration: none; color: var(--shouts-dark); } .h-entry.network header time { text-align: right; padding: 0.6em 0.8em; font-size: 1rem; } .network .header-metadata { align-items: center; } .network .header-metadata .dt-published { border-bottom: 2px solid var(--shouts-dark); } .network .filler { min-height: 1rem; } .network .author.p-author { border-color: var(--shouts-dark); padding: 0.5em 1.2em 0.5em 1.2em; } .network .p-summary { display: flex; } .network .p-summary.portrait { flex-direction: row; } .network .p-summary.landscape { flex-direction: column; } .network .summary-image > img { display: inherit; } .network .summary-text { font-size: 18px; } div.network-source { padding: 1em; padding-right: 2em; width: fit-content; font-size: 14px; display: flex; justify-content: space-between; background-color: var(--shouts-dark); color: white; position: relative; right: 1em; } .network-source::before { content: ""; position: absolute; right: -20px; bottom: 0; width: 0; height: 0; border-left: 20px solid var(--shouts-dark); border-top: 23px solid transparent; border-bottom: 23px solid transparent; } .network-source a { font-weight: bold; color: white; } .network .footer-filler { border-left: 2px solid var(--shouts-dark); border-top: none; } .network footer.post-footer { border-top: 2px solid var(--shouts-dark); flex-flow: row; font-size: 0.9rem; background-color: var(--shouts-light); color: var(--shouts-dark); padding: 1em; } .network footer svg { fill: var(--shouts-dark) } .network .read-more { border: none; border-left: 2px solid var(--shouts-dark); padding: 0.5em 1.2em 0.5em 1.2em; } .network .footer-metadata { 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; } .card.shout h2 a { color: var(--social-dark); cursor: pointer; display: block; } .card .card.shout h2 a:hover { border: none; text-decoration: none; } .card.shout .post-footer { background: var(--social-light); color: var(--social-dark); } /* calendar cards */ .card.calendar { border: 2px solid var(--calendar-dark); background-color: var(--calendar-light); max-width: 360px; margin-bottom: 2em; flex: auto; margin: 0 3em 3em 0; align-self: start; color: var(--calendar-dark); } .calendar .tape-label { background-color: var(--calendar-light); } .calendar .tape-label span { background-color: var(--calendar-dark); } /* disabling temporarily since all the events are past events atm */ /* .card.calendar.past { opacity: 0.3; } .card.calendar.past:hover { opacity: 1; } */ .h-event.calendar header { 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; } .h-event.calendar header h2:hover { cursor: pointer; } .h-event.calendar header h2 a { text-decoration: none; color: var(--calendar-dark); } .h-event.calendar .calendar-location a { color: var(--calendar-dark); } .header-filler { 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; } .calendar-duration { 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; } .start-scroller marquee { font-size: 0.8rem; padding-top: 0.2em; padding-bottom: 0.2em; } .calendar .description { border-top: 2px solid cornflowerblue; } .calendar-image-holder { border-bottom: 2px solid cornflowerblue; } .calendar-image-holder a { display: inherit; } .calendar-image { max-width: 100%; display: inherit; } /* Card metadata (video & calendar) */ .tape-label { display: flex; justify-content: center; border: none; font-size: 1rem; } .tape-label a, .tape-label span { width: max-content; padding: 0.5em; position: relative; bottom: 19px; z-index: 1; transform: rotate(2deg); color: white; } .metadata { display: flex; justify-content: space-between; flex-wrap: wrap; } .description p:first-of-type { margin: 0; } .description ul:first-of-type { margin: 0; } input+label+.calendar-location+.description { display: none; } 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; } label:hover { box-shadow: inset 2px 2px 0px #95948c; } .description { padding: 0.5em 0.7em 0.7em 0.5em; overflow: hidden; flex-basis: 100%; } .descr_button { cursor: pointer; flex-grow: 1; text-align: center; } /* Paginator */ nav.pagination { 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 */ } .page-item { display: block; text-align: center; font-size: 38px; border-bottom: 2px solid black; cursor: pointer; } li.page-item { padding: 0.4em; position: relative; } li.page-item a { color: black; } li.page-item.active a { text-decoration: underline; } li.page-item.disabled { display: none; } /* li.page-item:nth-child(even) { transform: rotate(-1deg); } li.page-item:nth-child(odd) { transform: rotate(1deg); } li.page-item:nth-child(5) { transform: rotate(2deg); } li.page-item:nth-child(8) { transform: rotate(-3deg); } */ li.page-item:first-child, li.page-item:last-child { 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; } li.page-item:nth-last-child(2) { border: none; text-decoration: none; } li.page-item:nth-last-child(2)::before, li.page-item:nth-last-child(2)::after { display: none; } li.page-item a { text-decoration: none; } li.page-item:hover a { text-decoration: underline; } li.page-item:before { content: ""; position: absolute; left: 0; bottom: 0; height: 50%; width: 50%; border-left: 2px solid black; z-index: -100; } li.page-item:after { content: ""; position: absolute; right: 0; bottom: 0; height: 50%; width: 50%; border-right: 2px solid black; z-index: -100; } /* Page footer */ footer { background: #AFAFAF; color: #333333; font-size: 15px; padding: 1em 4em; } footer a { color: #333333; text-decoration: none; } footer a:hover { cursor: pointer; text-decoration: underline; } /* mobile styles */ @media (max-width: 480px) { body { display: initial; } #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; } .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 * { display: block; opacity: 1; } /* card styles */ .card, .card.network { max-width: 83vw; } .card .summary-text { font-size: 17px; min-width: 30ch; } .card h2 a { font-size: 26px; } } /* about styles */ #about-img { width: 50%; height: auto; display:block; margin:auto; } /* single page styles */ .single header { flex-direction: column; margin-bottom: 4rem; } .single .h-entry img { object-fit: contain; }