/* * Custom Overrides – Literature across Boundaries (LAB) * OJS 3.x – Default / BerlinUP Theme * * This file targets every CSS class and ID used on the journal homepage. * All rules are intentionally left EMPTY so you can fill in your own values. * Do NOT rename or restructure existing selectors. * * Sections: * 1. Global / Reset * 2. Skip-Navigation Links * 3. Page Wrapper & Layout * 4. Header * 5. Site Navigation (Primary Nav) * 6. Mobile Nav Toggle * 7. Navigation Dropdown / Sub-menu * 8. Search Bar * 9. User Nav (Login) * 10. Homepage Hero / Journal Title * 11. Homepage Header Logo * 12. Highlights Section * 13. About the Journal Section * 14. Current Issue Section * 15. Issue Article List * 16. Latest Publications / Feed Icons * 17. Custom HTML Blocks (e.g. "Mein Testblock") * 18. Sidebar / Aside * 19. BerlinUP Plugin Block * 20. Footer * 21. OJS Brand / PKP Logo * 22. Utility Classes * 23. Responsive – Tablet (max-width: 992px) * 24. Responsive – Mobile (max-width: 767px) */ /* ========================================================================== 1. Global / Reset ========================================================================== */ @font-face { font-family: 'Junicode'; font-style: normal; font-weight: normal; font-display: swap; src: url(https://lab-journal.de/public/journals/1/Junicode/Junicode.woff) format('woff'); } @font-face { font-family: 'Junicode'; font-style: italic; font-weight: normal; font-display: swap; src: url(https://lab-journal.de/public/journals/1/Junicode/Junicode-Italic.woff) format('woff'); } @font-face { font-family: 'Junicode'; font-style: normal; font-weight: bold; font-display: swap; src: url(https://lab-journal.de/public/journals/1/Junicode/Junicode-Bold.woff) format('woff'); } @font-face { font-family: 'Junicode'; font-style: italic; font-weight: bold; font-display: swap; src: url(https://lab-journal.de/public/journals/1/Junicode/Junicode-BoldItalic.woff) format('woff'); } :root { --font-mono: 'IBM Plex Mono', monospace; --font-serif: 'Junicode', sans-serif; --white: #fff; --black: #111; --gray: #888; } * {} *, *::before, *::after {} html { font-size: 16px; } body { font-family: var(--font-serif); /* font-size: 1.6rem; */ /* line-height: 1.8; */ } a { color: var(--gray); } a:hover, a:focus { color: var(--black); } img {} ul, ol {} li {} h1 { font-family: var(--font-mono); font-size: 2rem; text-transform: uppercase; letter-spacing: 0.12em; border-top: 4px solid black; } h2 { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.2em; border-top: 1px solid var(--black); } .pkp_structure_main h2, .pkp_structure_main h1 { font-size: 1.5rem !important; border-top: 3px solid var(--black); padding-top: 6px; margin-top: 0; font-weight: 500; } h3 { font-family: var(--font-mono); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.2em; border-top: 1px solid black; } h4 {} h5 {} h6 {} p {} .obj_issue_toc .galleys>h2 { font-family: var(--font-mono); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.2em; border-top: 1px solid black; } /* ========================================================================== 2. Skip-Navigation Links ========================================================================== */ .skipNav {} .skipNav a {} .skipNav a:focus {} /* ========================================================================== 3. Page Wrapper & Layout ========================================================================== */ #pkp_content_main {} #pkp_content_footer {} .pkp_page_index {} /* class for the homepage */ .pkp_structure_page {} /* outermost page wrapper */ .pkp_site_name_wrapper, .pkp_head_wrapper { height: auto; /* width: 100% !important; */ } .pkp_site_name_wrapper:before, .pkp_navigation_primary_wrapper:before, .pkp_navigation_user:before, .pkp_search_mobile:before, .pkp_structure_content:before, .pkp_structure_footer:before, .pkp_site_name_wrapper:after, .pkp_navigation_primary_wrapper:after, .pkp_navigation_user:after, .pkp_search_mobile:after, .pkp_structure_content:after, .pkp_structure_footer:after { display: none; } .pkp_structure_head { background-color: white; border-bottom: 0; /* height: 16rem; */ } /* wraps header + primary nav */ .pkp_structure_main { padding-left: 0; border-right: 1px solid black; min-height: 800px; margin-bottom: 2.143rem; } /* wraps all main content */ .pkp_structure_main h1, .pkp_structure_main h2, .pkp_structure_main h3, .pkp_structure_main h4, .pkp_structure_main h5, .pkp_structure_main h6, .obj_issue_summary .title { font-family: var(--font-mono) !important; font-weight: 500; } .pkp_structure_main h1 { font-size: 1.5rem; font-weight: 500; letter-spacing: 0.12em; } @media (min-width: 768px) { .pkp_structure_main:before, .pkp_structure_main:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; margin-top: 10px; width: 0; background: white; } } .pkp_structure_sidebar {} /* right-hand sidebar (if present) */ /* footer wrapper */ .pkp_structure_footer { flex-direction: column; align-items: start; justify-content: start; text-transform: uppercase; border-top: 1px solid var(--black); } .pkp_structure_footer a { text-decoration: none; color: var(--gray); font-family: sans-serif; letter-spacing: 0.2em; } .pkp_structure_footer a:hover { color: var(--black); } .pkp_footer_content { padding: 0; display: flex; align-items: end; gap: 32px; } .berlinUP_footer_logo_wrapper { margin-block: 55px; } .pkp_footer_content * { padding: 0; } .container {} /* generic centering container */ .row {} .col {} /* ========================================================================== 4. Header ========================================================================== */ .pkp_site_name { position: initial; } /* journal title text in header */ .pkp_site_name_logo {} /* journal logo image wrapper */ .pkp_site_name_logo a {} .pkp_site_name_logo img {} header {} header .pkp_structure_head {} .pkp_site_name .is_img img { max-width: 160px; max-height: 100%; /* margin-bottom: 1rem; */ } .pkp_site_name .is_img:focus { outline: none; } .pkp_site_name a.is_img:after { content: "A Comparative Journal for the Analysis of Ancient and Medieval Texts"; text-decoration: none !important; display: block; position: absolute; left: 400px; top: 50%; transform: translateY(-50%); font-size: 21px; color: var(--black); max-width: 400px; font-family: var(--font-serif); margin-top: -1.1rem; margin-left: 64px; } @media (min-width: 992px) { .pkp_site_name .is_img img { max-width: 400px; max-height: 100%; /* margin-bottom: 1rem; */ } .pkp_navigation_primary>li>a:focus { background: none; color: var(--black); } } .pkp_site_nav_toggle { position: relative; } /* ========================================================================== 5. Site Navigation (Primary Nav) ========================================================================== */ #siteNav {} .pkp_site_nav_menu { margin-top: 24px; } /*

element anchor target */ .pkp_navigation_primary {} /*

primary nav list */ .pkp_navigation_primary_wrapper { border-top: 1px solid black; } .pkp_navigation_primary>li { font-family: var(--font-mono); text-transform: uppercase; font-size: 1.2rem; letter-spacing: 0.15em; } .pkp_navigation_primary>li>a { margin: .357rem .5em 0 0; padding: .357rem .5em calc(.714rem - 2px); border-bottom: 0; color: var(--gray); text-decoration: none; } .pkp_navigation_primary>li>a:hover, .pkp_navigation_primary>li>a:focus .pkp_navigation_primary>li>a:active { color: var(--black); background: transparent !important; } .pkp_navigation_primary>li>a:hover, .pkp_navigation_primary>li>a:focus .pkp_navigation_primary>li>a:active { text-decoration: none; } .pkp_navigation_primary>li.current>a { color: var(--black); } /* active nav item */ /* ========================================================================== 6. Mobile Nav Toggle ========================================================================== */ .pkp_navigation_toggle {} /* the "Open Menu" button */ .pkp_navigation_toggle button {} .pkp_navigation_toggle button:hover, .pkp_navigation_toggle button:focus {} .pkp_navigation_toggle .is_open {} /* ========================================================================== 7. Navigation Dropdown / Sub-menu ========================================================================== */ .pkp_navigation_primary .has_submenu {} .pkp_navigation_primary .has_submenu>a {} .pkp_navigation_primary .has_submenu>ul {} /* dropdown container */ .pkp_navigation_primary .has_submenu>ul li {} .pkp_navigation_primary .has_submenu>ul li a {} .pkp_navigation_primary .has_submenu>ul li a:hover, .pkp_navigation_primary .has_submenu>ul li a:focus {} .pkp_navigation_primary .has_submenu:hover>ul, .pkp_navigation_primary .has_submenu:focus-within>ul {} /* ========================================================================== 8. Search Bar ========================================================================== */ .pkp_search {} .pkp_search form {} .pkp_search input[type="search"] {} .pkp_search button {} .pkp_search button:hover, .pkp_search button:focus {} .search_prompt {} /* ========================================================================== 9. User Nav (Login / Register) ========================================================================== */ .pkp_navigation_user { width: 100%; } .pkp_navigation_user li {} .pkp_navigation_user li a {} .pkp_navigation_user li a:hover, .pkp_navigation_user li a:focus {} /* ========================================================================== 10. Homepage Hero / Journal Title Block ========================================================================== */ .pkp_site_name { /* padding-bottom: 24px; */ } .homepageHeader {} .homepageHeader h1 {} .pkp_journal_description {} /* ========================================================================== 11. Homepage Header Logo ========================================================================== */ .homepageHeaderImage {} .homepageHeaderImage img {} /* ========================================================================== 12. Highlights Section ========================================================================== */ /* Section wrapper */ .pkp_block.block_information {} /* "Highlights" heading */ .pkp_block.block_information h2 {} /* Ordered list of highlight items */ .pkp_block.block_information ol {} .pkp_block.block_information ol li {} /* Individual highlight heading */ .pkp_block.block_information ol li h3 {} /* Highlight body text */ .pkp_block.block_information ol li p {} /* Highlight link ("Mein Highlights") */ .pkp_block.block_information ol li a {} .pkp_block.block_information ol li a:hover, .pkp_block.block_information ol li a:focus {} /* ========================================================================== 13. About the Journal Section ========================================================================== */ #homepageAbout {} /* section anchor */ .homepageAbout {} .homepageAbout h2 {} .homepageAbout .homepageAbout_description {} .homepageAbout p {} /* ========================================================================== 14. Current Issue Section ========================================================================== */ #homepageIssue {} /* section anchor */ .homepageIssue {} .homepageIssue h2 {} .issue_identify {} .issue_identify .series {} .issue_identify .volume {} .issue_identify .number {} .issue_identify .year {} .issue_identify .title {} .issue_published {} .issue_published .label {} .issue_published .value {} /* "View All Issues" link */ .homepageIssue a.read_more {} .homepageIssue a.read_more:hover, .homepageIssue a.read_more:focus {} /* ========================================================================== 15. Issue Article List (inside Current Issue block) ========================================================================== */ .sections {} .sections li a {} .sections li a:hover, .sections li a:focus {} .obj_issue_summary {} .obj_issue_summary .title {} .obj_issue_summary .meta {} /* ========================================================================== 16. Latest Publications / Feed Icons ========================================================================== */ /* "Latest publications" heading */ .pkp_block h2 {} /* reusable across blocks */ .pkp_block.block_web_feed {} .pkp_block.block_web_feed h2 {} .pkp_block.block_web_feed ul {} .pkp_block.block_web_feed ul li {} .pkp_block.block_web_feed ul li a {} .pkp_block.block_web_feed ul li a img {} /* Atom / RSS SVG icons */ .pkp_block.block_web_feed ul li a:hover img, .pkp_block.block_web_feed ul li a:focus img {} /* ========================================================================== 17. Custom HTML Blocks (e.g. "Mein Testblock") ========================================================================== */ .pkp_block.block_custom_block {} .pkp_block.block_custom_block h2 {} .pkp_block.block_custom_block p {} .pkp_block.block_custom_block a {} /* ========================================================================== 18. Sidebar / Aside ========================================================================== */ .pkp_structure_sidebar {} .pkp_block {} /* generic sidebar block */ .pkp_block .title { font-family: 'IBM Plex Mono'; font-size: 14px !important; letter-spacing: 0.3em; font-weight: 400; color: black; padding-top: 5px; } /* block heading */ .pkp_block_information {} /* ========================================================================== 19. BerlinUP Plugin Block ========================================================================== */ /* BerlinUP logo in the issue area */ .berlinUP {} .berlinUP a {} .berlinUP img {} /* BerlinUP footer logo */ .footer_berlinUP {} .footer_berlinUP a {} .footer_berlinUP img {} /* ========================================================================== 20. Footer ========================================================================== */ #pkp_content_footer {} .pkp_structure_footer {} footer {} footer .footer_links {} footer .footer_links ul {} footer .footer_links ul li {} footer .footer_links ul li a {} footer .footer_links ul li a:hover, footer .footer_links ul li a:focus {} footer .pkp_page_footer {} footer p {} .pkp_structure_footer_wrapper { background: white; } /* ========================================================================== 21. OJS Brand / PKP Logo ========================================================================== */ .pkp_brand_footer {} .pkp_brand_footer a {} .pkp_brand_footer img {} .pkp_brand_footer a:hover img, .pkp_brand_footer a:focus img {} /* ========================================================================== 22. Utility Classes (used throughout OJS templates) ========================================================================== */ .pkp_helpers_clear {} /* clearfix */ .pkp_helpers_invisible {} /* visually hidden but accessible */ .pkp_screen_reader {} /* screen-reader-only text */ .pkp_helpers_align_left {} .pkp_helpers_align_right {} .pkp_helpers_align_center {} .btn {} /* generic button */ .btn:hover, .btn:focus {} .btn_primary {} .btn_primary:hover, .btn_primary:focus {} .label {} .description {} .pkp_notification {} .pkp_notification.notifySuccess {} .pkp_notification.notifyWarning {} .pkp_notification.notifyError {} .page, .page_index_journal { margin-top: 60px; } .page p, .additional_content p { font-size: 21px; line-height: 1.5; letter-spacing: 0.02em; } .obj_issue_toc .heading::before, .obj_issue_toc .heading::after, .obj_issue_summary:before, .obj_issue_summary:after { display: none; } .obj_issue_toc .cover, .obj_issue_summary .cover { /* max-width: 300px; */ /* width: 50%; */ float: none; margin: 0; grid-area: cover; align-self: start; width: 100%; } .obj_issue_toc .section:last-child .articles>li:last-child .obj_article_summary { border-bottom: none; } .obj_issue_toc .cover img, .obj_issue_summary .cover img { max-height: 100%; } .obj_issue_toc .heading, .obj_issue_summary { display: grid; grid-template-columns: minmax(0, 300px) 1fr; grid-template-rows: min-content; grid-template-areas: "cover description" "cover published"; column-gap: 20px; align-items: start; margin-bottom: 55px; } .current_issue_title { font-size: 1.6rem; font-family: var(--font-mono); font-weight: 500 !important; } .obj_issue_toc .description { grid-area: description; font-family: var(--font-mono); } .obj_issue_toc .published, .obj_issue_summary .description { display: flex; flex-direction: column; margin: 0; grid-area: published; align-self: end; font-family: var(--font-mono); } .obj_issue_toc .published .label { display: none; } .obj_issue_toc .published .value { color: var(--gray); } .obj_issue_toc .sections:not(:first-child) { margin-top: 0; } .obj_galley_link { margin-bottom: 42px; border: none; } .cmp_breadcrumbs { display: none; } .content p { font-family: var(--font-mono); font-size: 11px; } .pkp_block .content p { line-height: 1.5; } .pkp_navigation_user_wrapper { font-family: var(--font-mono); left: initial; right: 0; padding-right: 0; transform: initial; } .pkp_navigation_user>li:last-child>a { margin-right: 0 !important; padding-right: 0; } .pkp_navigation_search_wrapper { font-family: var(--font-mono); font-size: 14px; } .page_issue_archive .issues_archive { border-top: 0; } .page_issue_archive .issues_archive .obj_issue_summary { margin-bottom: 0; } .page_issue_archive .issues_archive>li { margin-inline: 2.143rem; padding-inline: 0; border-bottom-color: var(--black); } .obj_issue_summary .cover { margin-top: 0.5rem; } .issues_archive h2 { border-top: none; } /* ========================================================================== 23. Responsive – Tablet (max-width: 992px) ========================================================================== */ @media (max-width: 992px) { .page, .page_index_journal { margin-top: 0; } h2 { font-size: 1.125rem !important; } .has_site_logo .pkp_head_wrapper, .pkp_site_name_wrapper { width: 100%; display: flex; flex-direction: row-reverse; align-items: start; justify-content: space-between; padding-inline: 6px; padding-block: 12px; } .pkp_page_index .pkp_site_name { padding-bottom: 0; } .pkp_site_name a.is_img:after { top: 100%; left: 15px; font-size: 16px; margin-top: 0; margin-left: 0; } .pkp_site_nav_menu { margin-top: 0; border-bottom: 3px solid var(--black); } .pkp_structure_main { margin-bottom: 0; } .pkp_structure_content { width: 100%; padding-inline: 20px; border-right: none; } .pkp_block { padding-inline: 0; padding-block: 20px; } /* .pkp_structure_head { height: 8rem; } */ .berlinUP_brand_sidebar { border-top: 1px solid var(--black); } .obj_issue_toc .heading { display: block; } .pkp_structure_main { border-right: none; } .pkp_structure_page {} .page p, .additional_content p { font-size: 17px; } .pkp_structure_main { padding-inline: 0; } .pkp_structure_sidebar { padding-block: 32px; } .pkp_structure_sidebar .pkp_block img { max-width: 215px; } .obj_issue_toc .cover, .obj_issue_summary .cover { max-width: 300px; margin-bottom: 12px; } .page_issue_archive .issues_archive>li { margin-inline: 20px; } .pkp_navigation_primary {} .pkp_navigation_primary>li {} .pkp_navigation_primary .has_submenu>ul {} .pkp_structure_footer { width: 100%; padding: 20px; } .pkp_structure_footer_wrapper { border-top: 1px solid black; } } /* ========================================================================== 24. Responsive – Mobile (max-width: 767px) ========================================================================== */ @media (max-width: 767px) { h2 { font-size: 0.9375rem !important; } .pkp_structure_page {} .page p, .additional_content p { font-size: 15px; } .pkp_site_name a.is_img:after { display: none; } .pkp_structure_main {} .pkp_structure_sidebar {} .pkp_navigation_primary {} .obj_issue_summary { display: block; } .pkp_navigation_toggle {} .homepageHeaderImage {} .homepageAbout {} .homepageIssue {} #homepageAbout {} #homepageIssue {} footer {} .pkp_footer_content { flex-direction: column; align-items: start; gap: 16px; } .pkp_footer_content p { margin: 0; } .berlinUP_footer_logo_wrapper { flex-direction: row; align-items: end; } } /* .obj_issue_toc { display: grid; grid-template-areas: "top" "middle" "bottom"; } .obj_issue_toc .heading { grid-area: top; } .obj_issue_toc .galleys { grid-area: bottom; } .obj_issue_toc .sections { grid-area: middle; margin-top: 55px !important; } */ .obj_issue_toc .galleys, .obj_issue_toc .section { margin: 0; padding: 0; } .galleys::before, .obj_issue_toc .galleys:before, .obj_issue_toc .section:before { display: none; } .pkp_page_index .current_issue .read_more { display: none; } .obj_issue_toc .galleys>h2, .obj_issue_toc .section>h2, .obj_issue_toc .galleys>h3, .obj_issue_toc .section>h3 { display: block; left: 0; padding: 0; width: 100%; color: var(--black); border-top: 3px solid var(--black); margin-top: 0; padding-top: 4px; font-family: var(--font-mono); font-weight: 500; font-size: 16px !important; } .obj_article_summary { border-bottom: 1px solid var(--black); } .obj_article_summary>.title a, .obj_article_summary>.title { color: var(--black); font-family: var(--font-serif); font-size: 24px; font-weight: 400 !important; line-height: 1.3; border: none !important; text-transform: none !important; letter-spacing: normal; pointer-events: none; } .obj_article_summary>.title:hover { color: var(--gray); } .obj_article_summary>.title a .subtitle { font-size: 20px; font-weight: 300 !important; margin-bottom: 5px; color: var(--black) !important; } .obj_article_summary .meta { padding-top: 0; } .obj_article_summary .authors { color: var(--gray); font-size: 11px; font-family: var(--font-mono); } .obj_issue_toc .galleys_links { margin-top: 11px; } .obj_galley_link { font-family: var(--font-mono); background: var(--black); color: var(--white); width: 86px; text-align: center; } /* footer */ /* about section */ .board-section { margin-bottom: 80px; } .board-person { font-family: var(--font-mono); font-size: 11px; font-weight: 300; letter-spacing: 0.02em; margin-bottom: 15px; line-height: 1.6; } .board-person strong { font-weight: 400; display: block; font-size: 14px; margin-bottom: 2px; } .board-person span { font-size: 11px; color: var(--gray); } .section-title { font-family: var(--font-mono); font-size: 24px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 20px; padding-top: 4px; border-top: 3px solid var(--black); margin-top: 70px; } .sub-title { font-family: var(--font-mono); font-size: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; padding-top: 5px; margin-bottom: 14px; border-top: 3px solid var(--black); } .board-section { margin-bottom: 80px; } .board-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 46px; max-width: 750px; margin-top: 25px; } .advisory-grid { columns: 2; column-gap: 60px; max-width: 750px; margin-top: 35px; } .advisory-grid>div { break-inside: avoid; margin-bottom: 40px; } .advisory-group-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.09em; margin-bottom: 7px; border-bottom: 1px solid var(--black); } @media (max-width: 992px) { .board-grid { grid-template-columns: 1fr; max-width: 100%; gap: 4px 0; } .advisory-grid { columns: 1; max-width: 100%; } .board-section { margin-bottom: 40px; } } @media (max-width: 767px) { .board-grid { grid-template-columns: 1fr; } .advisory-grid { columns: 1; } }