/************ FONTS ************/ @font-face { font-family: 'Roboto Condensed Bold'; src: url('webfonts/Roboto_Condensed/RobotoCondensed-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Roboto Condensed'; src: url('webfonts/Roboto_Condensed/RobotoCondensed-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } /*@font-face { font-family: 'Roboto'; src: url('webfonts/Roboto_Regular/Roboto-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Roboto Italic'; src: url('webfonts/Roboto_Regular/Roboto-Italic.ttf') format('truetype'); font-weight: normal; font-style: normal; } */ /*new import font*/ @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto:ital@0;1&display=swap'); /***************** ALL RESPONSE TEXT ****************/ @media screen and (min-width: 320px) { /* 12 18 */ body, tbody tr th, .mw-parser-output ul, .mw-parser-output a, .artwork-intro, .date, div.artwork-relatedworks-date, div#header-keyword-search span, .metadata-link p { font-size: calc(12px + 6 * (100vw - 320px) / 1600); line-height: 1.63; } /* 12 18 */ div#footer-title-br p, div#footer-title-others p, div#footer-title-contact p, div#footer-title-socials p, thead tr th, .artwork-nav-label, .label-item { font-size: calc(12px + 6 * (100vw - 320px) / 1600); line-height: 16px; } /* 12 18 line height diff */ div#footer-socials-links a { font-size: calc(12px + 6 * (100vw - 320px) / 1600); line-height: 28.4px; } /* 14 20 */ div#navigation a, .title, .metadata-link, .metadata-link a, .metadata-link a span, div.artwork-relatedworks-tile { font-size: calc(14px + 8 * (100vw - 320px) / 1600); line-height: 1.44; } /* 10 14 - line height 16 */ div#backend-data-button, div#container-backend-data-button, .primary-button, .secondary-button, .artwork-button, #home-top-div .primary-button a, #home-top-div .primary-button a:visited, #home-top-div .secondary-button a, #home-top-div .secondary-button a:visited, div.browsebycategory-categories a { font-size: calc(10px + 4 * (100vw - 320px) / 1600); line-height: 16px; } /* 18 32 */ .mw-parser-output blockquote p { font-size: calc(18px + 12 * (100vw - 320px) / 1600); line-height: 1.56; } /* 40 22 */ .heading_A { font-size: calc(22px + 18 * (100vw - 320px) / 1600); line-height: 1.45; } /* 20 25 */ .mw-parser-output h1, .Heading_B, .artwork-title, div.pagetitle, .mw-parser-output h1, div#header-title { font-size: calc(20px + 5 * (100vw - 320px) / 1600); line-height: 35px; } /* 18 30 */ h2, .artbase-logo, .Heading_C, .mw-parser-output h2 { font-size: calc(18px + 12 * (100vw - 320px) / 1600); line-height: 40px; } /* 20 25 */ h3, .Heading_D, .mw-parser-output h3 { font-size: calc(20px + 5 * (100vw - 320px) / 1600); line-height: 35px; } /* 14 20 */ .Heading_E { font-size: calc(14px + 6 * (100vw - 320px) / 1600); line-height: 20px; } } /* - * - * - * - * - * - * - * - * - */ @media screen and (min-width: 1920px) { body, tbody tr th, .mw-parser-output ul, .mw-parser-output a, .artwork-intro, .date, div.artwork-relatedworks-date, div#header-keyword-search span, .metadata-link p { font-size: 18px; } div#footer-title-br p, div#footer-title-others p, div#footer-title-contact p, div#footer-title-socials p, thead tr th, .artwork-nav-label, .label-item { font-size: font-size: 18px; } div#navigation a, .title, .metadata-link, .metadata-link a, .metadata-link a span, div.artwork-relatedworks-tile { font-size: 20px; } div#footer-socials-links a { font-size: 18px; } div#backend-data-button, div#container-backend-data-button, .primary-button, .secondary-button, .artwork-button, #home-top-div .primary-button a, #home-top-div .primary-button a:visited, #home-top-div .secondary-button a, #home-top-div .secondary-button a:visited, div.browsebycategory-categories a { font-size: 14px; } .mw-parser-output blockquote p { font-size: 32px; } .heading_A { font-size: 40px; } .mw-parser-output h1, .Heading_B, .artwork-title, div.pagetitle, .mw-parser-output h1, div#header-title { font-size: 25px; } h2, .artbase-logo, .Heading_C, .mw-parser-output h2 { font-size: 30px; } h3, .Heading_D, .mw-parser-output h3 { font-size: 25px; } .Heading_E { font-size: 20px; } } /***************** EMERGENCY BUTTON AND MOCKUPS****************/ div#backend-data-button { font-family: 'Roboto Condensed Bold', sans-serif; /* font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320))); line-height: 16px;*/ font-weight: bold; font-stretch: condensed; font-style: normal; line-height: normal; letter-spacing: 1.5px; text-align: center; text-decoration: none; color: #ffffff; cursor: pointer; background-color: var(--blue-blue); max-width: 365px !important; min-height: 48px !important; border-radius: 6px; margin: 0 auto; display: flex; align-items: center; justify-content: center; } #container-backend-data-button { margin-top: 20px; width: 100%; } img.placeholder-style, .placeholder-style { width: 100%; } div#container-backend-data-button a{ text-decoration: none; } div#backend-data-button span{ color: #FFFFFF; text-decoration: none; font-family: 'Roboto Condensed', sans-serif; font-weight: bold; text-transform: uppercase; } img.artwork-mockuppage{ width: 80%; padding: 0 10%; } .web-dev-placeholder{ color: var(--blue-blue); background-color: #ffff00; font-family: 'Roboto Condensed Bold', sans-serif; font-size: calc(12px + 8 * (100vw - 320px) / 1600); line-height: 1.44; letter-spacing: 0.9px; font-weight: bold; text-transform: uppercase; padding: 0px 20px; } .web-dev-placeholder p { margin: 12px; } .soon { margin: 55px 80px; width: 100%; } .soon + #footer { position: fixed; bottom: 0; left: 0; } .soon-nofix { margin: 80px 80px; width: 100%; } @media screen and (min-width: 1920px) { .soon-nofix + #footer { position: fixed; } } br{ display: none; } /************ LAYOUT ************/ :root { --black: #000000; --blue-blue: #1b42d8; --white: #fdfdfd; --brown-grey: #7f7f7f; --very-light-pink: #e9e9e9; } html { margin:0; padding:0; height: 100vh; width: 100vw; font-family: 'Roboto', sans-serif; font-size: 16px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; } body { font-family: Roboto; /*font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320))); line-height: 1.63;*/ font-weight: normal; font-stretch: normal; font-style: normal; letter-spacing: normal; color: var(--black); margin: 0; padding: 0; } body i { font-family: 'Roboto'; font-weight: normal; font-stretch: normal; font-style: italic; } /*Header*/ div#header{ width: 100%; background-color: #FFFFFF; height: 134px; border-bottom: 3px solid #000; display: flex; width: 100%; } div#header-top{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; border-bottom: 1px solid #000; } #title-nav{ width: 100%; } div#animatedlogo{ display: flex; width: 8vw; min-width: 130px; } div#animatedlogo img{ width: 8vw; /*auto*/ min-width: 130px; max-width: 130px; justify-self: center; } div#header-title{ font-family: 'Roboto Condensed Bold', sans-serif; font-weight: bold; /* font-size: 25px; line-height: 35px;*/ letter-spacing: 1.88px; } div#header-title a:link, div#header-title a:visited { text-decoration: none; color: #000000; } div#header-keyword-search span { /* font-size: 20px;*/ font-weight: bold; padding: 2px 10px; } div#header-top div#header-keyword-search input[type=text]{ background-color: #e9e9e9; color: #7f7f7f; font-size: 18px; line-height: 38px; letter-spacing: 1px; font-family: 'Roboto Condensed', sans-serif; width: 257px; height: 43px; border: none; padding: 2px 2px 2px 12px; } div#header-top div#header-keyword-search:after { display: inline-block; content: ' '; background-image: url('Icons/icn_search.svg'); background-size: 16px 16px; height: 16px; width: 16px; margin: 0px 16px 0px -32px; } div#header-top, div#navigation{ width: 100%; height: 67px; padding-right: 8vw; } div#navigation{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; align-content: center; } #nav-left { display: flex; flex-direction: row; } #nav-right { display: flex; flex-direction: row; } #nav-left div, #nav-right div { padding: 0px 24px; } #nav-left div:first-child, #nav-right div:first-child{ padding-left: 0px; } #nav-right div:last-child { padding-right: 0px; } div#navigation a{ font-family: 'Roboto Condensed', sans-serif; text-decoration: none; font-weight: normal; color: var(--black); /* font-size: calc(12px + (18 - 12) * ((100vw - 320) / (1600 - 320))); line-height: 26px;*/ } div#navigation a:hover { text-decoration: underline; } div#navigation a:active { color: #1b42d8; text-decoration: none; } #home-top-div:after { content:""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 25%; border-left: 2px solid rgba(233,233,233, 1); transform: translate(-50%); } #home-top-div:before { content:""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 75%; border-left: 2px solid rgba(233,233,233, 1); transform: translate(-50%); } div#home-top-div { /* margin: 10px auto; width: 60%; height: 100px; border: 1px solid #333; position:relative; text-align:center*/ } /*Footer*/ div#footer{ display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: baseline; padding: 55px 8vw; width: 100%; bottom: 0; background-color: black; color:white; } .footer-left, .footer-right { display: flex; flex-direction: row; width: 100%; } .footer-left{ flex-wrap: nowrap; justify-content: start;} .footer-right{ flex-wrap: wrap; justify-content: end; flex-wrap: nowrap; margin: 0px 0px 0px 56px; } #footer-credit , #footer-funds { display: flex; flex-direction: column; flex-wrap: nowrap; } #footer-credit, #footer-socials{ padding: 0px 56px 0px 0px; } #footer-socials-links { display: flex; flex-direction: column; flex-wrap: nowrap; } div#footer-title-br p, div#footer-title-others p, div#footer-title-contact p, div#footer-title-socials p{ text-transform: uppercase; font-family: 'Roboto Condensed', sans-serif; /* font-size: calc(12px + (18 - 12) * ((100vw - 320px) / (1600 - 320))); line-height: 1.5;*/ font-weight: normal; font-stretch: condensed; font-style: normal; letter-spacing: 1.5px; color: var(--brown-grey); } div#footer-img-br img{ width: 85px; height: auto; padding-top: 5px; margin-left: -8px; } /* Banner Repeater Logo*/ div#footer-img-br figcaption { font-family: 'Roboto', sans-serif; font-size: 16px; margin: 0; padding: 0; line-height: 26px; font-style: normal; font-weight: normal; white-space: nowrap; margin-top: -8px; } div#footer-img-others{ display: flex; flex-direction: row; flex-wrap: nowrap; padding-top: 26px; } div#footer-img-lottery{ padding-left: 60px; } div#footer-img-lottery img{ width: 124px; height: auto; } div#footer-img-wiki img{ width: 56px; height: auto; } div#footer-socials-links a{ text-decoration: none; color:#FFFFFF; font-family: 'Roboto', sans-serif; /* font-size: calc(12px + (18 - 12) * ((100vw - 320px) / (1600 - 320))); line-height: 28.4px;*/ font-weight: normal; font-stretch: normal; font-style: normal; letter-spacing: normal; } div#contactform{ display: flex; align-items: center; justify-content: center; } #contactform span, a.footer-contact { text-decoration: none; /* color:#FFFFFF;*/ } div#contactform:hover { color: white; background-color: var(--blue-blue); } #footer-contact-form { width: 100%; max-width: 365px; } @media screen and (min-width:0px) and (max-width: 1000px) { div#footer{ flex-wrap: wrap; } .footer-left{ justify-content: space-between;} .footer-right{ justify-content: space-between; margin: 0px;} #footer-title-others, #footer-title-contact {text-align: right;} #footer-contact-form {margin: 30px 0px 0px 0px;} #footer-credit, #footer-socials{ padding: 0px; } } @media screen and (min-width:0px) and (max-width: 768px) { #footer-title-others {text-align: right;} #footer-title-contact {text-align: left;} #footer-socials {width: 100%; } #footer-socials-links{ display: flex; flex-direction: row; justify-content: space-between; width: 100%; } div#contactform {width: 100%; max-width: none;} #footer-contact-form { width: 100%; max-width: none;} .footer-left, .footer-right { width: 100%; } .footer-right { flex-wrap: wrap; } #footer-credit, #footer-socials{ padding: 0px; } #footer-right { margin: 0px; } #footer-socials, #footer-contact-form {margin: 30px 0px 0px 0px;} } /*Titles all pages*/ /*div#home-recent-title, div#browsethearchive-title, div#artistsindex-title, div#publishersindex-title, div#selfpublishedindex-title, div#zinesindex-title, div#browseby-title */ div.pagetitle, .mw-parser-output h1{ margin: 60px 8vw 30px 8vw; /* font-size: 25px; line-height: 35px;*/ font-family: 'Roboto Condensed Bold', sans-serif; font-weight: bold; text-transform: uppercase; letter-spacing: 1.88px; } /******************************************************/ /************ BROWSING SEARCHING INDEXING ************/ /****************************************************/ /************ INDEXES ************/ table, th, td { border-bottom: 1px solid black; border-collapse: collapse; text-align: left; } #artistsindex-table_wrapper{ overflow-x:auto; } #artistsindex-table, #publishersindex-table, #zinesindex-table, #selfpublishedindex-table { width: 100%; } #artistsindex-table_wrapper, #publishersindex-table_wrapper, #selfpublishedindex-table_wrapper, #zinesindex-table_wrapper {background-color: #E9E9E9;} table {background-color: #fdfdfd} thead tr th:first-child { padding: 0px 0px 0px 8vw } thead tr th:last-child { padding: 0px 8vw 0px 0px } tr { padding: 10px 8vw 10px 8vw; } th { padding: 16px; } thead tr th{ text-transform: uppercase; color:#7f7f7f; /* font-size: 16px; letter-spacing: 1.5px;*/ line-height: 24px; font-family: 'Roboto Condensed', sans-serif; font-weight: normal; border-bottom: black 3px solid; } tbody tr th{ /* font-size: calc(12px + (18 - 12) * ((100vw - 320px) / (1600 - 320))); line-height: 26px;*/ font-family: 'Roboto', sans-serif; font-weight: normal; } tbody tr th a{ text-decoration: none; color: #000000; } .idnumber { padding: 16px 0px 16px 8vw; width: 10%; /*min-width: 56px; max-width: 128px; */ } .label { width: 20%; } .label a { font-family: Roboto Condensed Bold, sans-serif; font-weight: bold; color: #000000; } .altaliases { width: 20%; } .description { padding: 16px 8vw 16px 0px; width: 50%; } .idnumber, .label, .altaliases, .description{ vertical-align: top;} #artistsindex-table_paginate{ background-color: #E9E9E9; } /* Pagination Numbers */ .dataTables_paginate { display: flex; flex-direction: row; justify-content: space-between; align-content: baseline; margin-left: auto; margin-right: auto; padding-top: 42px; padding-bottom: 52px; font-family: Roboto Condensed; font-size: 14px; line-height: 48px; font-weight: bold; font-stretch: condensed; min-height: 48px; max-width: 376px; } .dataTables_paginate > span { display: flex; flex-direction: row; justify-content: space-around; width: 100%; } a.current { height: 36px; width: 36px; border-radius: 6px; background-color: #1B42D8; color: white; display: flex; align-content: baseline; margin-top: 6px; align-items: center; justify-content: center; cursor: pointer; } .paginate_button { cursor: pointer; } a.paginate_button.previous, a.paginate_button.next{ display: flex; flex-direction: row; font-size: 0; } a.paginate_button.previous:before { display: inline-block; content: ' '; background-image: url('Icons/icn_arrow_left.svg'); background-size: 16px 16px; height: 16px; width: 16px; margin: 16px 16px 0px 0px; } a.paginate_button.next:after { display: inline-block; content: ' '; background-image: url('Icons/icn_arrow_right.svg'); background-size: 16px 16px; height: 16px; width: 16px; margin: 16px 0px 0px 16px; } /************ TEXT STYLES************/ .title, div.artwork-relatedworks-tile { /* width: 200px; height: 26px; font-size: 18px; line-height: 1.44;*/ font-family: Roboto Condensed; font-weight: bold; font-stretch: condensed; font-style: normal; letter-spacing: 0.9px; color: var(--black); } .date, div.artwork-relatedworks-date { font-family: Roboto; /*font-size: 16px; line-height: 1.63;*/ font-weight: normal; font-stretch: normal; font-style: normal; letter-spacing: normal; color: var(--black); } /************ BUTTONS ************/ .primary-button { max-width: 365px; min-height: 48px; font-family: 'Roboto Condensed Bold', sans-serif; /* font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320))); line-height: 16px;*/ font-weight: bold; font-stretch: condensed; font-style: normal; line-height: normal; letter-spacing: 1.5px; text-align: center; text-decoration: none; color: #ffffff; cursor: pointer; background-color: var(--blue-blue); border-radius: 6px; } .secondary-button { max-width: 365px; min-height: 48px; font-family: 'Roboto Condensed Bold', sans-serif; /* font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320))); line-height: 16px;*/ font-weight: bold; font-stretch: condensed; font-style: normal; line-height: normal; letter-spacing: 1.5px; text-align: center; text-decoration: none; cursor: pointer; background-color: #ffffff; color: var(--blue-blue); border: solid 1px var(--blue-blue); border-radius: 6px; } .artwork-button { width: 76px; height: 24px; font-family: Roboto; /* font-size: 16px; line-height: 1.5;*/ font-weight: normal; font-stretch: condensed; font-style: normal; letter-spacing: 1.5px; text-align: center; color: var(--black); cursor: pointer; } /************ HOME & Browse Archive Layout ************/ /*Home Top div*/ div#home-top-div{ height: 60vh; /* 661px;*/ width: 100%; overflow: hidden; position: relative; border-bottom: solid black 3px; background-color: rgba(233,233,233, 0.5); padding: 0vw 8vw; display: grid; row-gap: 2rem; column-gap: 1rem; grid-template-columns: repeat(18, 1fr); grid-template-rows: min-content auto; } .heading_A { font-family: Roboto Condensed; /* font-size: 40px; line-height: 1.45;*/ font-weight: normal; font-stretch: condensed; font-style: normal; letter-spacing: normal; color: var(--black); margin-top: 2vw; margin-left: 0vw; /* 150px 8vw */ } #home-top-div .heading_A { position: relative; /*max-width: 634px;*/ z-index: 1000; /*99*/ grid-column-start: 1; grid-column-end: 10; grid-row-start: 1; grid-row-end: 1; align-self: center; max-width: 800px; margin-top: 6vw; } #home-top-div p { margin-bottom: 0px; } #home-top-div #wrapper-bt-vid { display: flex; flex-direction: row; justify-content: space-between; position: relative; z-index: 99; } #home-top-div #wrapper-vid { margin: 0vmin 0vw 0px 0px; /*8vmin*/ /*width: 50%;*/ z-index: 99; grid-column-start: 9; grid-column-end: 17; grid-row-start: 1; grid-row-end: 3; align-self: end; margin-bottom: 2vw; } #home-top-div #wrapper-bt{ /* margin: 36px 26px 0px 0vw; 8vmin*/ /*width: 50%;*/ z-index: 99; grid-column-start: 1; grid-column-end: 9; grid-row-start: 2; grid-row-end: 2; } #home-top-div #wrapper-vid video { width: 100%; height: auto; position: relative; z-index: 99; } #home-top-div #wrapper-top-buttons{ display: flex; align-items: center; justify-content: center; margin-bottom: 26px; } #home-top-div .primary-button a, #home-top-div .primary-button a:visited { color: #fdfdfd; text-decoration: none; /* font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320))); */} #home-top-div .primary-button:hover, #home-top-div .primary-button a:hover { color: white; background-color: black; } #home-top-div .secondary-button a, #home-top-div .secondary-button a:visited { color: var(--blue-blue); text-decoration: none; /* font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320))); */} #home-top-div .secondary-button:hover, #home-top-div .secondary-button a:hover { color: white; background-color: var(--blue-blue); } #home-top-div img { position: absolute; width: 100%; z-index: 0; max-width: 400px; left: -600px; padding-right: 60px; padding-left: 60px; animation-name: move; animation-duration: 40s; animation-iteration-count: infinite; /* or infinite*/ animation-fill-mode: forwards; animation-direction: normal; animation-timing-function: linear; /* or ease*/ filter: contrast(40%); opacity: 0.9; } #home-top-div img:nth-of-type(even) { } #home-top-div img:nth-of-type(odd) { } #home-top-div img:nth-of-type(2n+1) { } /*#home-top-div img:nth-of-type(1)*/ .banner-image-0 { animation-delay: 0s; padding-top: 200px; } /*#home-top-div img:nth-of-type(2) */ .banner-image-1 { animation-delay: 6s; padding-top: -60px; } /*#home-top-div img:nth-of-type(3) */ .banner-image-2 { animation-delay: 12s; padding-top: 430px; } /*#home-top-div img:nth-of-type(4)*/ .banner-image-3 { animation-delay: 18s; padding-top: 100px; } /*#home-top-div img:nth-of-type(5) */ .banner-image-4 { animation-delay: 26s; padding-top: -60px; } /*#home-top-div img:nth-of-type(6)*/ .banner-image-5 { animation-delay: 34s; padding-top: 300px; } /*#home-top-div img:nth-of-type(7)*/ .banner-image-6{ animation-delay: 40s; } /*#home-top-div img:nth-of-type(8)*/ .banner-image-7 { animation-delay: 46s; } /*#home-top-div img:nth-of-type(9) */ .banner-image-8 { animation-delay: 52s; } /*#home-top-div img:nth-of-type(10) */ .banner-image-9 { animation-delay: 58s; } /*#home-top-div img:nth-of-type(11)*/ .banner-image-10 { animation-delay: 64s; } /*#home-top-div img:nth-of-type(12) */ .banner-image-11 { animation-delay: 70s; } .banner-image-6, .banner-image-7, .banner-image-8, .banner-image-9, .banner-image-10, .banner-image-11 { display: none; } @keyframes move { 0% { -webkit-transform: translateX(0vw); -ms-transform: translateX(0vw); -moz-transform: translateX(0vw); transform: translateX(0vw); } 100% { -webkit-transform: translateX(200vw); /* 250vw*/ -ms-transform: translateX(200vw); -moz-transform: translateX(200vw); transform: translateX(200vw); } } @-webkit-keyframes move{ 0% { -webkit-transform: translateX(0px); -ms-transform: translateX(0px); -moz-transform: translateX(0px); transform: translateX(0px); } 100% { -webkit-transform: translateX(1650px); /* 250vw*/ -ms-transform: translateX(1650px); -moz-transform: translateX(1650px); transform: translateX(1650px); } } .scroll-down { font-family: Roboto Condensed Bold; font-size: 14px; font-weight: bold; font-stretch: condensed; font-style: normal; line-height: normal; letter-spacing: 1.5px; color: var(--blue-blue); display: none; /*flex*/ flex-direction: row; justify-content: right; width: 96%; text-align: end; z-index: 99; position: absolute; margin-top: -40px; } .scroll-down span { writing-mode: vertical-rl; transform: rotate(180deg); text-align: end; margin-top: -100px; line-height: 0px; line-height: 0px; padding: 0px; height: 160px; } .scroll-down:before { content:""; position: absolute; z-index: -1; top: 0; bottom: 0; border-left: 1px solid blue; transform: translate(90%); } /* ARCHIVE PREVIEW */ img.home-recent-imgs, img.browsethearchive-imgs, img.selfpublishedindex-imgs, img.zinesindex-imgs { width: 100%; } div.home-recent-items, div.browsethearchive-items, div.zinesindex-items, div.selfpublishedindex-items { /* align-content: start; center; font-size: 16px; */ font-family: 'Roboto Condensed', sans-serif; margin: 0 auto; display: flex; flex-direction: column; justify-content: space-between; height: 100%; } div.home-recent-items a, div.browsethearchive-items a, div.zinesindex-items a, div.selfpublishedindex-items a { /* font-size: 18px; line-height: 26px; display: flex; justify-content: left;*/ font-family: 'Roboto Condensed Bold', sans-serif; color: #000000; text-decoration: none; } /*div.home-recent-items span, div.browsethearchive-items span { display: flex; justify-content: left; } */ div.home-recent-items-top, div.browsethearchive-items-top, div.selfpublishedindex-items-top, div.zinesindex-items-top { display: flex; flex-direction: column; margin: auto; } div.home-recent-items-bottom, div.browsethearchive-items-bottom, div.selfpublishedindex-items-bottom, div.zinesindex-items-bottom { display: flex; flex-direction: column; flex-shrink: 0; flex-basis: 100px; justify-content: flex-start; } div.browsethearchive-items-bottom, div.selfpublishedindex-items-bottom, div.zinesindex-items-bottom { /* padding: 20px 0px 0px 0px;*/ } div#home-recent-grid, div#browsethearchive-grid, div#selfpublishedindex-grid, div#zinesindex-grid { width: 100%; padding: 0px 8vw 60px 8vw; display: grid; /*text-align: center;*/ grid-gap: 1rem; } div.home-show-wrapper{ width: 100%; margin: 0px auto 60px auto; display: flex; align-items: center; justify-content: center; } div.home-show-wrapper a{ display: flex; align-items: center; justify-content: center; width: 100%; } div.home-show-wrapper a:hover { color: white; background-color: black; } @media (min-width: 768px) { #home-recent-grid, #browsethearchive-grid, #selfpublishedindex-grid, #zinesindex-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { #home-recent-grid, #browsethearchive-grid, #selfpublishedindex-grid, #zinesindex-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1400px) { #home-recent-grid, #browsethearchive-grid, #selfpublishedindex-grid, #zinesindex-grid { grid-template-columns: repeat(6, 1fr); } } /************ ABOUT & TEXT TEMPLATES ************/ .mw-parser-output { width: 100%; padding: 0px 8vw 60px 8vw; display: grid; row-gap: 0rem; column-gap: 1rem; grid-template-columns: repeat(18, 1fr); } .mw-parser-output h1, .mw-parser-output h2 { grid-column-start: 1; grid-column-end: 18; } .mw-parser-output h1 { margin: 60px 0px 30px 0px; } .mw-parser-output h1, .Heading_B { margin-block-end: 1.5em; font-family: Roboto Condensed Bold; /* font-size: calc(22 + (25 - 22) * ((100vw - 320px) / (1600 - 320))); line-height: 35px;*/ font-weight: bold; font-stretch: condensed; font-style: normal; text-transform: uppercase; letter-spacing: 1.13px; color: var(--black); } .mw-parser-output blockquote{ grid-column-start: 1; grid-column-end: 8; grid-row-start: 2; grid-row-end: 2; margin: 0 !important; } .mw-parser-output blockquote p { font-family: Roboto Condensed; /* font-size: calc(20px + (30 - 20) * ((100vw - 320px) / (1600 - 320))); line-height: 1.56;*/ font-weight: normal; font-stretch: condensed; font-style: normal; letter-spacing: normal; color: var(--blue-blue); } .mw-parser-output blockquote + p { grid-column-start: 9; grid-column-end: 18; grid-row-start: 2; grid-row-end: 2; } .mw-parser-output p { margin: 0px 0px 30px 0px; } .Heading_C, .mw-parser-output h2, h2 { font-family: Roboto Condensed; /* font-size: calc(20px + (30 - 20) * ((100vw - 320px) / (1600 - 320))); line-height: 40px; margin: 0px 0px 30px 0px; */ font-weight: normal; font-stretch: condensed; font-style: normal; letter-spacing: 1.13px; color: var(--black); } .Heading_D, .mw-parser-output h3, h3 { font-family: Roboto Condensed; /* font-size: calc(22px + (25 - 22) * ((100vw - 320px) / (1600 - 320))); line-height: 35px;*/ font-weight: normal; font-stretch: condensed; font-style: normal; letter-spacing: 1.13px; color: var(--black); } .Heading_E { font-family: Roboto Condensed; /* font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (1600 - 320))); line-height: 20px;*/ font-weight: normal; font-stretch: condensed; text-transform: uppercase; font-style: normal; letter-spacing: 1.13px; color: var(--black); } .mw-parser-output p, .mw-parser-output ul, .mw-parser-output h2, .mw-parser-output h3 { grid-column-start: 4; grid-column-end: 15; } .mw-parser-output ul { font-family: Roboto; /* font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320))); line-height: 1.63;*/ font-weight: normal; font-stretch: normal; font-style: normal; letter-spacing: normal; color: var(--black); margin: 0; padding: 0; list-style-type: circle; margin: 0px 0px 30px 56px; } .mw-parser-output p img { width: 100%; height: auto; } .mw-parser-output img { font-family: Roboto ; /* font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320))); line-height: 1.63;*/ text-decoration: none; font-weight: normal; font-stretch: normal; font-style: normal; letter-spacing: normal; color: var(--black); } .mw-parser-output a { font-family: Roboto ; /* font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320))); line-height: 1.63;*/ font-weight: normal; font-stretch: normal; font-style: normal; letter-spacing: normal; color: #163adc; } a:hover , .mw-parser-output a:hover { color: var(--black); } /************ BROWSE THE ARCHIVE Pagination ************/ .current { background-color: #1b42d8; } #browsethearchive-pagin li.current a, #zinesindex-pagin li.current a, #selfpublishedindex-pagin li.current a{ color: #FFFFFF; font-weight: bold; text-decoration: none; font-family: 'Roboto Condensed', sans-serif; } #browsethearchive-pagin li a, #zinesindex-pagin li a, #selfpublishedindex-pagin li a { color: #000000; font-weight: bold; text-decoration: none; font-family: 'Roboto Condensed', sans-serif; } ul#browsethearchive-pagin, ul#zinesindex-pagin, ul#selfpublishedindex-pagin { display: flex; flex-direction: row; justify-content: center; /*space-around */ align-content: baseline; margin-left: auto; margin-right: auto; padding-top: 42px; padding-bottom: 52px; padding-left: 8vw; padding-right: 8vw; font-family: Roboto Condensed; font-size: 14px; line-height: 48px; font-weight: bold; font-stretch: condensed; /*min-height: 48px; max-width: 376px;*/ } #browsethearchive-pagin li, #zinesindex-pagin li, #selfpublishedindex-pagin li { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 6px; } div#browsethearchive-pagination, div#zinesindex-pagination, div#selfpublishedindex-pagination { width: 100%; background-color: #e9e9e9; border-top: black solid 3px; height: 139px; text-align: center; } /************ BROWSE BY CATEGORY ************/ div#browsebycategory-listcategories{ margin: 0px 8vw 60px 8vw; } div.browsebycategory-categories{ margin: 22px 0px; padding: 16px; border-radius: 6px; background-color: var(--blue-blue); display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; } div.browsebycategory-categories a { font-family: 'Roboto Condensed Bold', sans-serif; color: #ffffff; text-decoration: none; /* font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320))); */ } div.browsebycategory-categories:hover { color: white; background-color: black; } /************ SEARCH TOOLS ************/ /*********************************************/ /************ PERSON ************/ /*******************************************/ /************ ARTWORK ************/ .artwork-box span { width: 100%; display: flex; align-items: center; justify-content: center; } .artwork-box { font-family: Roboto Condensed; font-size: 16px; font-weight: normal; font-stretch: condensed; font-style: normal; line-height: 1.5; letter-spacing: 1.5px; text-align: center; color: var(--black); border: solid 1px var(--black); margin: 30px 8vw 0px 8vw; padding: 6px 10px; max-width: 96px; } .artwork-title { margin: 20px 8vw 30px 8vw; /* font-size: 25px; */ font-family: 'Roboto Condensed Bold', sans-serif; font-weight: bold; text-transform: uppercase; letter-spacing: 1.88px; line-height: 35px; } .artwork-intro { font-family: Roboto; /* font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320))); line-height: 1.63;*/ font-weight: normal; font-stretch: normal; font-style: normal; letter-spacing: normal; color: var(--black); margin: 20px 8vw 0px 8vw; } .artwork-nav { /* display: flex; flex-direction: row; width: 100%; justify-content: space-evenly;*/ width: 100%; display: grid; row-gap: 0rem; margin: 30px 0px; padding-bottom: 2rem; column-gap: 1rem; grid-template-columns: repeat(18, 1fr); border-bottom: 3px solid #000; } .artwork-nav-label, .label-item { margin: 25px 0 12px 1px; font-family: Roboto Condensed; /* font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320))); */ font-weight: normal; font-stretch: condensed; font-style: normal; line-height: normal; letter-spacing: 1.5px; color: var(--brown-grey); } .artwork-nav-label-about { grid-column-start: 4; grid-column-end: 7; grid-row-start: 1; grid-row-end: 1; } .artwork-nav-label-about:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; border-left: 3px solid blue; transform: translate(90%); height: 45px; max-width: 2px; margin-top: 410px; left: 21.5%; } .artwork-nav-label-record:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; border-left: 3px solid var(--brown-grey); transform: translate(90%); height: 45px; max-width: 2px; margin-top: 410px; left: 44%; } .artwork-nav-label-record { grid-column-start: 8; grid-column-end: 11; grid-row-start: 1; grid-row-end: 1; } .artwork-nav-label .det-record:after { display: inline-block; content: ' '; background-image: url('Icons/icn-external-link.svg'); background-size: 16px 16px; height: 16px; width: 16px; margin: 0px 0px 0px 8px; color: #e9e9e9; } .artwork-nav .active { color: var(--blue-blue); } .artwork-nav-label div, .artwork-nav-label a, .artwork-nav-label a:visited{ text-decoration: none; color: var(--brown-grey); } .artwork-nav-label div:hover, .artwork-nav-label a:hover { color: var(--blue-blue); cursor: pointer; } .artwork-about, .artwork-copieswrapper, .artwork-relatedwrapper { width: 100%; display: grid; row-gap: 0rem; column-gap: 1rem; grid-template-columns: repeat(18, 1fr); } /*.artwork-relatedwrapper{ grid-template-areas: "title title item1 item1 item1 item2 item2 item2 item3 item3 item3 item4 item4 item4 item5 item5 item5"; }*/ .artwork-about{ padding: 30px 8vw 60px 8vw; } .artwork-copieswrapper { border-top: solid 3px var(--black); border-bottom: solid 3px var(--black); padding: 30px 8vw 30px 8vw; } .artwork-relatedwrapper { padding: 30px 8vw 30px 8vw; } .artwork-leftcolumn { grid-column-start: 1; grid-column-end: 8; grid-row-start: 1; grid-row-end: 3; margin: 0 !important; } .artwork-rightcolumn { grid-column-start: 9; grid-column-end: 18; grid-row-start: 1; grid-row-end: 1; margin: 0 !important; display: grid; } .artwork-about-img img { width: 100%; } .artwork-about-bottom{ grid-column-start: 9; grid-column-end: 18; grid-row-start: 2; grid-row-end: 2; } .artwork-rightcolumn-top { margin: 0 !important; display: grid; } .artwork-rightcolumn-top-contributors { grid-column-start: 9; grid-column-end: 13; grid-row-start: 1; grid-row-end: 1; } .artwork-rightcolumn-top-date { grid-column-start: 14; grid-column-end: 18; grid-row-start: 1; grid-row-end: 1; } .artwork-rightcolumn-top-publishers, .artwork-rightcolumn-top-publishers { grid-column-start: 15; grid-column-end: 18; grid-row-start: 2; grid-row-end: 2; } .artwork-rightcolumn-description { grid-column-start: 9; grid-column-end: 18; grid-row-start: 3; grid-row-end: 3; border-top: 0.5px solid var(--brown-grey);; } .artwork-rightcolumn-top-date + div.artwork-rightcolumn-description { grid-column-start: 9; grid-column-end: 18; grid-row-start: 2; grid-row-end: 2; border-top: 3px solid black; } .text-description .mw-parser-output, .text-exhibition .mw-parser-output{ display: initial; } .artwork-rightcolumn-exhibition { grid-column-start: 9; grid-column-end: 18; grid-row-start: 5; grid-row-end: 5; border-top: 0.5px solid var(--brown-grey);; } .artwork-rightcolumn-description + .artwork-rightcolumn-exhibition { grid-column-start: 9; grid-column-end: 18; grid-row-start: 4; grid-row-end: 4; border-top: 3px solid black; } .artwork-rightcolumn-top-publishers { grid-column-start: 15; grid-column-end: 18; grid-row-start: 2; grid-row-end: 2; } .artwork-rightcolumn-exhibition, .artwork-rightcolumn-description { display: grid; row-gap: 0rem; column-gap: 1rem; grid-template-columns: repeat(9, 1fr); } .artwork-rightcolumn-exhibition p, .artwork-rightcolumn-description p { grid-column-start: 1; grid-column-end: 9; grid-row-start: 1; grid-row-end: 1; } .text-description { grid-column-start: 1; grid-column-end: 7; grid-row-start: 2; grid-row-end: 2; } .text-description .mw-parser-output { padding: 0px; } .text-exhibition { grid-column-start: 1; grid-column-end: 8; grid-row-start: 2; grid-row-end: 2; } .text-date-author { grid-column-start: 8; grid-column-end: 11; grid-row-start: 2; grid-row-end: 2; } .text-date-author .label-item:nth-of-type(1) { margin-top: 0px; } .artwork-lists { padding: 30px 8vw 30px 8vw; } .artwork-copiesincollection { grid-column-start: 3; grid-column-end: 6; border-right: solid 0.5px var(--black); display: flex; flex-direction: column; justify-content: center; } .artwork-copiesincollection-title-div { text-align: center; } .artwork-relatedwrapper .Heading_C , .artwork-copieswrapper .Heading_C { grid-column-start: 1; grid-column-end: 3; /* writing-mode: sideways-lr; max-height: 120px; */ text-align: center; align-self: center; writing-mode: vertical-rl; transform: rotate(180deg); max-height: 120px; /* -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%;*/ } .artwork-copiesincollection-img-div { max-width: 55px; align-self: center; } .artwork-copiesincollection-img-div img { width: 100%; } .metadata-link, .metadata-link a, .metadata-link a span { font-family: Roboto Condensed Bold; /* font-size: 18px; line-height: 1.44;*/ font-weight: bold; font-stretch: condensed; font-style: normal; letter-spacing: 0.9px; color: var(--blue-blue); text-decoration-color:var(--blue-blue); } .label-item-date-artwork{ font-family: Roboto Condensed Bold; font-weight: bold; font-stretch: condensed; font-style: normal; letter-spacing: 0.9px; margin-top: 0px; margin-bottom: 30px; } .metadata-link:hover, .metadata-link a:hover, .metadata-link a span:hover { color: black; text-decoration-color: black; } .metadata-link p { font-family: Roboto; font-weight: normal; font-stretch: normal; font-style: normal; margin-top: 0px; margin-bottom: 0px; } .artwork-rightcolumn-top-contributors p.label-item, .artwork-rightcolumn-top-date p.label-item, .artwork-rightcolumn-top-contributors .metadata-link, .artwork-rightcolumn-top-date .metadata-link { margin-bottom: 1em; margin-top: 0px !important; } .artwork-about-bottom .mw-parser-output, .artwork-about-bottom div.label-item, .artwork-about-bottom div.mw-parser-output { width: 100%; padding: 30px 0px 0px 0px; display: inherit; } .artwork-rightcolumn-bottom .mw-parser-output { width: 100%; margin: 0px; padding: 0px; display: initial; } .artwork-relatedworks:nth-of-type(2) { grid-column-start: 3; grid-column-end: 6; margin: 0 !important; } .artwork-relatedworks:nth-of-type(3) { grid-column-start: 6; grid-column-end: 9; margin: 0 !important; } .artwork-relatedworks:nth-of-type(4) { grid-column-start: 9; grid-column-end: 12; margin: 0 !important; } .artwork-relatedworks:nth-of-type(5) { grid-column-start: 12; grid-column-end: 15; margin: 0 !important; } .artwork-relatedworks:nth-of-type(6) { grid-column-start: 15; grid-column-end: 18; margin: 0 !important; } .artwork-relatedworks-imgs{ width: 100%; max-width: 200px; } /*************************************/ /************ WIKI PAGES ************/ /***********************************/ /************ TUTORIALS ************/ div#tutorials-intro{ text-align: center; padding-top: 5em; } div#tutorials-intro h3, div#tutorials-intro p { text-align: center; width: 50%; margin: auto; }