<script type="module" src="pb-components-bundle.js" data-template="pages:load-components"/> <custom-style> <style is="custom-style"> body{ color:#3d3224; background:#ead8c3; font-size: 18px; --suggestions-item: { color: var(--pb-search-suggestions-color, black); }; --suggestions-wrapper: { background: var(--pb-search-suggestions-background, white); } --pb-link-color:white; } @font-face { font-family:"Oswald", Verdana, "Helvetica", sans-serif; } pb-page{ background-image: url('resources/images/klassik.png'); background-repeat: repeat; !important; width: 100% !important; } app-header{ position:fixed; top:0; left:0; width:100%; height:340px; --app-header-background-front-layer: { background: transparent; }; --app-header-background-rear-layer: { background: #ead8c3; }; } app-toolbar{ height:64px; background:transparent; } .cropper{ overflow:hidden; border-radius:50%; width:160px; height:160px; margin:0 auto; box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.4); } .portrait{ width:160px; } main { margin: 0 auto; max-width: 800px; background: rgba(0,0,0,0.5); padding: 0.5rem; animation: fadein 0.6s; padding-bottom: 10rem; margin-bottom: 1rem; color:white; } .content-body.single-col { grid-template-columns: minmax(auto, 64rem); justify-content: center; } pb-split-list{ transform:height 0.4s; } pb-split-list > span { display:block; } pb-split-list::part("category"){ color:white; } pb-split-list::part(active-item) { color: white !important; } pb-split-list::part(items) { margin-top: 1em; } pb-split-list a, pb-split-list a:link{ color:white; font-size:1.4rem; margin-left: 2em; } pb-split-list header a{ color:white; } .notes{ display:block; } #paginate{ width:100%; } #paginate[start!="41"]{ animation:fadein 1s; } @media (max-width: 768px) { app-header { height: auto !important; /* shrink header to content */ min-height: 0 !important; /* remove desktop min-height */ } app-header-layout, app-header-layout > * { padding-top: 0 !important; /* remove reserved space */ margin-top: 0 !important; } pb-page, pb-page > * { padding-top: 5vh !important; /* small buffer between header and main */ margin-top: 0 !important; } .menu { display: inline-block; position: sticky; /* sticks to viewport */ } } .menu { text-align: center; margin: -1.2rem auto 0; padding-top: 0.2em; display: block; /* ensures it's a block container */ } .menu a{ display: inline-block; padding: 0 0.5em; vertical-align: middle; position: relative; color: #3d3224; text-decoration: none; text-shadow:1px 1px white; font-size: 1.2rem; font-weight: 600; padding-left: 0.7em; padding-right: 0.7em; background: rgba(234, 211, 197, 0.4); border: 2px solid #3d3224; /* this adds a red border */ border-radius: 200px; } .menubar { background-color: transparent; --pb-download: { color: black; }; } .menubar a, .menubar paper-menu-button { color: black; font-weight: 400; } pb-login { --pb-login-theme: { color: black; font-weight: 400; } } pb-lang { --pb-lang-item-color: black; --pb-lang-label-color:var(--paper-grey-200); } .logo img { width: auto; } .tp-title { /*font-family: "Oswald",Verdana,"Helvetica",sans-serif;*/ font-size: 64px; font-weight: 400; color:#3d3224; text-shadow:2px 2px white; font-family:"Oswald", Verdana, "Helvetica", sans-serif; margin-top:4px; text-align:center; width:100%; margin-bottom:10px; } .tp-title span { color: #9e9e9e; font-size: 26px; margin-top: 12px; } pb-results { overflow: scroll; margin: 0 20px; height: calc(100vh - 128px); } @media (min-width: 1024px) { .panels { display: flex; flex-direction: row; } .panels .documents { flex: 2 auto; } } .panels { margin-bottom: 40px; } .panels .documents { flex: 2; display: block; margin-bottom: 22px; --paper-card-header: { background-color: #ead8c3; }; --paper-card-header-text: { font-family: "Oswald",Verdana,"Helvetica",sans-serif; font-size: 16px; font-weight: 400; }; } .panels pb-browse-docs { margin-right:20px; flex:3; --pb-search-label: #ffffff; --pb-search-input: #ffffff; animation: slideUp 0.6s ease; } .tei-publicationStmt1 a{ display:none; } .documents li { display: flex; flex-direction: row; margin-bottom: 10px; background:white; opacity:0.9; margin-bottom:20px; } .documents .document-select { flex: 0 0; } .documents .document-info app-toolbar{ display:none; } h1, h2, h3, h4, h5, h6 { font-family: "Oswald",Verdana,"Helvetica",sans-serif; font-weight: 400 !important; line-height: 1.2; } h1{ text-align: center; font-size: 30px; color:orange; } h2{ text-align: center; font-size: 30px; color:#3d3224; } strong { font-weight: 600; /* Strongest available */ } section { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4); background: rgba(255, 255, 255, 1.5); padding: 20px; width: 90%; max-width: 1000px; opacity: 0.85; margin: 20px auto; border-radius: 10px; color: #3d3224; } [condensed-title] { margin: 0; overflow: hidden; font-family:"Oswald", Verdana, "Helvetica", sans-serif;; font-size:32px !important; font-weight:700; color:#3d3224; text-shadow:2px 2px white; } pb-search { --pb-search-label-color: #e0e0e0; --pb-search-input-color: #f5f5f5; --pb-search-focus-color: var(--paper-orange-500); width:200px; display:block; } .condensed paper-icon-button{ color:black; } pb-login{ width:100%; } footer { background: rgba(61, 50, 36, 0.7) !important; color: rgb(255, 255, 255); padding: 10px 20px; // position:fixed; bottom:0; } app-drawer pb-login { margin: 20px 0 0 0; } .splash { background-image: url(resources/images/splash.png); } .wrapper{ height:100vh; } @keyframes fadein { 0% { opacity:0; } 30%{ opacity:0.7; } 100% { opacity:1; } } @keyframes grow { 0% { opacity:0; transform:scale(0); } 100% { transform:scale(1); opacity:1; } } @keyframes slideLeft { 0% { opacity:0; transform:translateX(100px); } 100% { transform:translateX(0px); opacity:1; } } @keyframes slideRight { 0% { opacity:0.3; transform:translateX(-100px); } 50% { opacity:0.3 } 75% { opacity:0.5; } 90% { opacity:0.9; } 100% { transform:translateX(0px); opacity:1; } } @keyframes slideDown { 0% { opacity:0.3; transform:translateY(-300px); } 50% { opacity:0.3 } 75% { opacity:0.5; } 90% { opacity:0.9; } 100% { transform:translateY(0px); opacity:1; } } @keyframes slideUp { 0% { opacity:0.3; transform:translateY(100px); } 50% { opacity:0.7 } 100% { transform:translateY(0px); opacity:1; } pb-split-list{ transform:height 0.4s; } pb-split-list > span { display:block; } pb-split-list::part("category"){ color:white; } pb-split-list::part(active-item) { color: white !important; } pb-split-list::part(items) { margin-top: 1em; } pb-split-list a, pb-split-list a:link{ color:white; font-size:1.4rem; } pb-split-list header a{ color:white; } } </style> </custom-style> </head> <body class="fullbleed"> <pb-page data-template="pages:pb-page" unresolved="unresolved" subscribe="transcription"> <app-drawer-layout force-narrow="force-narrow"> <app-drawer slot="drawer" align="right"> <div class="drawer-content"> <pb-lang name="lang" label="language" data-template="pages:languages"> </pb-lang> <a href="http://gitlab.existsolutions.com/tei-publisher/vangogh" title="View code on Gitlab" class="gitlab" target="_blank"> Source code <img src="resources/images/wm_no_bg.svg"/> </a> <pb-login id="login" group="tei"> <iron-icon slot="icon" icon="account-circle"/> </pb-login> </div> </app-drawer> <app-header-layout> <app-header slot="header" condenses="condenses" fixed="fixed" effects="parallax-background blend-background resize-title"> <app-toolbar style="height:64px;"> <div condensed-title="condensed-title" data-template="config:app-title"/> <paper-icon-button icon="icons:menu" drawer-toggle="drawer-toggle"/> <pb-progress indeterminate="indeterminate" bottom-item="bottom-item"/> </app-toolbar> <div class="cropper"> <a href="../index.html"> <img class="portrait" src="resources/images/splash.png"/> </a> </div> <h1 class="tp-title" main-title="main-title" data-template="config:app-title"/> <div class="menu"> <a href="../about.html">About</a> <a href="../uebersicht.html">Textübersicht</a> <paper-menu-button> <a href="#" slot="dropdown-trigger"> <pb-i18n key="menu.register">Register</pb-i18n> </a> <paper-listbox slot="dropdown-content"> <paper-item> <a href="/exist/apps/wvh-schriften/people/"> <pb-i18n key="menu.people">Namen</pb-i18n> </a> </paper-item> <paper-item> <a href="/exist/apps/wvh-schriften/places/"> <pb-i18n key="menu.places">Orte</pb-i18n> </a> </paper-item> </paper-listbox> </paper-menu-button> </div> <pb-progress indeterminate="indeterminate" bottom-item="bottom-item"/> </app-header> <main> <section> <div data-template="app:load-person"> <p>Loading person info...</p> </div> </section> <section> <div data-template="app:person-mentions"> </div> </section> </main> <footer data-template="templates:include" data-template-path="templates/footer.html"/> </app-header-layout> </app-drawer-layout> <paper-dialog id="downloadDialog"> <h2> <pb-i18n key="dialogs.generatingFile">Generating File...</pb-i18n> </h2> <paper-dialog-scrollable> <pb-i18n key="dialogs.downloadMessage"/> </paper-dialog-scrollable> <div class="buttons"> <paper-button dialog-confirm="dialog-confirm" autofocus="autofocus"> <pb-i18n key="dialogs.close">Close</pb-i18n> </paper-button> </div> </paper-dialog> <paper-dialog id="errorDialog"> <h2> <pb-i18n key="dialogs.error">Error</pb-i18n> </h2> <paper-dialog-scrollable/> <div class="buttons"> <paper-button dialog-confirm="dialog-confirm" autofocus="autofocus"> <pb-i18n key="dialogs.close">Close</pb-i18n> </paper-button> </div> </paper-dialog> </pb-page> <div class="splash"> <div class="cropper"> <img class="portrait" src="resources/images/splash.png"/> </div> </div> </body> </html>