/************ 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 Regular' ;
src : url ( 'webfonts/Roboto_Regular/Roboto-Regular.ttf' ) format ( 'truetype' ) ;
font-weight : normal ;
font-style : normal ;
}
/***************** EMERGENCY BUTTON AND MOCKUPS****************/
div # backend-data-button {
background-color : # 1B42D8 ;
width : 250px ;
height : 55px ;
border-radius : 6px ;
margin : 0 auto ;
display : flex ;
align-items : center ;
justify-content : center ;
margin-top : 20px ;
}
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 ;
}
div # container-backend-data-button {
height : 100px ;
width : 100 % ;
border-bottom : 1px solid black ;
height : 70px ;
}
img . artwork-mockuppage {
width : 80 % ;
padding : 0 10 % ;
}
/************ 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 - 768px ) / ( 1400 - 768 ) ) ) ;
font-size : 16px ;
font-weight : normal ;
font-stretch : normal ;
font-style : normal ;
line-height : 1 . 63 ;
letter-spacing : normal ;
color : var ( --black ) ;
margin : 0 ;
padding : 0 ;
}
/*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 ;
}
div # animatedlogo img {
width : auto ;
max-height : 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 : 80px ;
}
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 - 768px ) / ( 1400 - 768 ) ) ) ;
line-height : 26px ;
/ * line-height : calc ( 22px + ( 22 - 26 ) * ( ( 100vw - 768px ) / ( 1400 - 768 ) ) ) ;
* / }
div # navigation a : hover {
text-decoration : underline ;
}
div # navigation a : active {
color : # 1b42d8 ;
text-decoration : none ;
}
/*Footer*/
div # footer {
display : flex ;
flex-direction : row ;
flex-wrap : nowrap ;
justify-content : space-between ;
align-items : baseline ;
padding : 55px 80px ;
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 - 768px ) / ( 1400 - 768 ) ) ) ;
font-weight : normal ;
font-stretch : condensed ;
font-style : normal ;
line-height : 1 . 5 ;
letter-spacing : 1 . 5px ;
color : var ( --brown-grey ) ;
}
div # footer-img-br img {
width : 70px ;
height : auto ;
padding-top : 20px ;
margin-left : -8px ;
}
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 Regular' , sans-serif ;
font-size : calc ( 12px + ( 18 - 12 ) * ( ( 100vw - 768px ) / ( 1400 - 768 ) ) ) ;
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 ;
}
# 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 : 0 px ; }
# footer-title-others , # footer-title-contact { text-align : right ; }
# footer-contact-form { margin : 30 px 0 px 0 px 0 px ; }
# footer-credit , # footer-socials { padding : 0 px ; }
}
@ 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 : 0 px ; }
# footer-right { margin : 0 px ; }
# footer-socials , # footer-contact-form { margin : 30 px 0 px 0 px 0 px ; }
}
/*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 {
margin : 60px 80px 30px 80px ;
font-size : 25px ;
font-family : 'Roboto Condensed Bold' , sans-serif ;
font-weight : bold ;
text-transform : uppercase ;
letter-spacing : 1 . 88px ;
line-height : 35px ;
}
/******************************************************/
/************ 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 : 0 px 0 px 0 px 80 px }
thead tr th : last-child { padding : 0 px 80 px 0 px 0 px }
tr { padding : 10 px 80 px 10 px 80 px ; }
th { padding : 16 px ; }
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 - 768px ) / ( 1400 - 768 ) ) ) ;
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 80px ;
min-width : 56px ;
max-width : 128px ; /*56px * 2 + 16*/
}
. label {
font-family : Roboto Condensed Bold , sans-serif ;
font-weight : bold ;
min-width : 128px ;
max-width : 272px ; /*56px * 4 + 16 * 3*/
}
. altaliases {
min-width : 128px ;
max-width : 272px ; /*56px * 4 + 16 * 3*/
}
. description {
padding : 16px 80px 16px 0px ;
min-width : 128px ;
max-width : 560px ; /*56px * 8 + 16 * 7*/
}
. idnumber , . label , . altaliases , . description {
vertical-align : top ; }
# artistsindex-table_paginate {
background-color : # E9E9E9 ;
}
. 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 ;
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 {
/ * width : 200px ;
height : 26px ; * /
font-family : Roboto Condensed ;
font-size : 18px ;
font-weight : bold ;
font-stretch : condensed ;
font-style : normal ;
line-height : 1 . 44 ;
letter-spacing : 0 . 9px ;
color : var ( --black ) ;
}
. date {
font-family : Roboto Regular ;
font-size : 16px ;
font-weight : normal ;
font-stretch : normal ;
font-style : normal ;
line-height : 1 . 63 ;
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 + ( 16 - 12 ) * ( ( 100vw - 768px ) / ( 1400 - 768 ) ) ) ;
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 {
width : 365px ;
height : 48px ;
font-family : Roboto ;
font-size : 14px ;
font-weight : bold ;
font-stretch : condensed ;
font-style : normal ;
line-height : normal ;
letter-spacing : 1 . 5px ;
text-align : center ;
color : var ( --blue-blue ) ;
cursor : pointer ;
}
. artwork-button {
width : 76px ;
height : 24px ;
font-family : Roboto ;
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 ) ;
cursor : pointer ;
}
/************ HOME & Browse Archive Layout ************/
/*Home Top div*/
div # home-top-div {
height : 661px ;
width : 100 % ;
border : blue solid 1px ;
overflow-x : hidden ;
position : relative ;
}
# home-top-div img {
position : absolute ;
width : 100 % ;
max-width : 350px ;
left : -600px ;
padding : 60px ;
animation-name : move ;
animation-duration : 20s ;
animation-iteration-count : infinite ; /* or infinite*/
animation-fill-mode : forwards ;
animation-direction : normal ;
animation-timing-function : linear ; /* or ease*/
}
# home-top-div : nth-child ( even ) { padding-top : 60 px ; }
# home-top-div : nth-child ( odd ) { padding-top : 0 px ; }
# home-top-div img : nth-of-type ( 1 ) {
animation-delay : 0s ;
}
# home-top-div img : nth-of-type ( 2 ) {
animation-delay : 6s ;
}
# home-top-div img : nth-of-type ( 3 ) {
animation-delay : 12s ;
padding-top : 60px ;
}
@ 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 ) ;
}
}
@ -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 ) ;
}
}
img . home-recent-imgs , img . browsethearchive-imgs {
width : 100 % ;
}
div . home-recent-items , div . browsethearchive-items {
font-size : 16px ;
font-family : 'Roboto Condensed' , sans-serif ;
margin : 0 auto ;
display : flex ;
flex-direction : column ;
/* align-content: start; center;*/
justify-content : space-between ;
height : 100 % ;
}
div . home-recent-items a , div . browsethearchive-items a {
font-size : 18px ;
line-height : 26px ;
font-family : 'Roboto Condensed Bold' , sans-serif ;
color : # 000000 ;
text-decoration : none ;
/ * display : flex ;
justify-content : left ; * /
}
/ * div . home-recent-items span , div . browsethearchive-items span {
display : flex ;
justify-content : left ;
}
* /
div . home-recent-items-top , div . browsethearchive-items-top {
display : flex ;
flex-direction : column ;
margin : auto ;
}
div . home-recent-items-bottom , div . browsethearchive-items-bottom {
display : flex ;
flex-direction : column ;
flex-shrink : 0 ;
flex-basis : 140px ;
justify-content : flex-start ;
}
div . browsethearchive-items-bottom { padding : 20 px 0 px 0 px 0 px ; }
div # home-recent-grid , div # browsethearchive-grid {
width : 100 % ;
padding : 0px 80px ;
display : grid ;
/*text-align: center;*/
grid-gap : 1rem ;
}
div . home-show-wrapper {
width : 100 % ;
margin : 60px auto ;
display : flex ;
align-items : center ;
justify-content : center ;
}
@ media ( min-width : 768px ) {
# home-recent-grid , # browsethearchive-grid { grid-template-columns : repeat ( 2 , 1 fr ) ; }
}
@ media ( min-width : 1000px ) {
# home-recent-grid , # browsethearchive-grid { grid-template-columns : repeat ( 4 , 1 fr ) ; }
}
@ media ( min-width : 1400px ) {
# home-recent-grid , # browsethearchive-grid { grid-template-columns : repeat ( 6 , 1 fr ) ; }
}
/************ BROWSE THE ARCHIVE Pagination ************/
/ * img . browsethearchive-imgs {
width : 200px ;
}
div . browsethearchive-items {
display : inline-block ;
padding : 10px ;
font-size : 16px ;
font-family : 'Roboto Condensed' , sans-serif ;
color : # 7f7f7f ;
margin : 0 auto ;
}
div . browsethearchive-items a {
font-size : 20px ;
font-family : 'Roboto Condensed' , sans-serif ;
font-weight : bold ;
text-decoration : none ;
color : # 000000
}
div # browsethearchive-grid {
max-width : 90 % ;
margin : 0 auto 60px auto ;
display : grid ;
grid-gap : 2rem ;
text-align : center ;
} * /
. current {
background-color : # 1b42d8 ;
}
# browsethearchive-pagin li . current a {
color : # FFFFFF ;
font-weight : bold ;
text-decoration : none ;
font-family : 'Roboto Condensed' , sans-serif ;
}
# browsethearchive-pagin li a {
color : # 000000 ;
font-weight : bold ;
text-decoration : none ;
font-family : 'Roboto Condensed' , sans-serif ;
}
ul # browsethearchive-pagin {
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 ;
}
# browsethearchive-pagin li {
display : flex ;
align-items : center ;
justify-content : center ;
width : 36px ;
height : 36px ;
border-radius : 6px ;
}
div # browsethearchive-pagination {
width : 100 % ;
background-color : # e9e9e9 ;
border-top : black solid 3px ;
height : 139px ;
text-align : center ;
}
/************ BROWSE BY CATEGORY ************/
div # browsebycategory-listcategories {
margin : 0px 80px 60px 80px ;
}
div . browsebycategory-categories {
margin : 22px 0px ;
padding : 16px ;
border-radius : 6px ;
background-color : var ( --blue-blue ) ;
display : flex ;
flex-direction : row ;
flex-wrap : wrap ;
}
div . browsebycategory-categories a {
font-family : 'Roboto Condensed Bold' , sans-serif ;
color : # ffffff ;
text-decoration : none ;
margin : auto ;
display : inline-block ;
}
/************ SEARCH TOOLS ************/
/*********************************************/
/************ PERSON AND ARTWORK ************/
/*******************************************/
/************ PERSON ************/
/ * div # person_creatorof {
border : blue 1px solid ;
width : 100 % ;
height : 150px ;
background-color : grey ;
}
div . person_creatorof-item {
border : lime 1px solid ;
width : 150px ;
height : 150px ;
display : inline-block ;
vertical-align : middle ;
}
img . person_creatorof-imgs {
max-height : 75px ;
max-width : 75px ; * /
}
/************ ARTWORK ************/
/*************************************/
/************ WIKI PAGES ************/
/***********************************/
/************ ABOUT ************/
div # about-content {
padding-left : 81px ;
padding-right : 81px ;
}
div # about-content-top {
padding : 2 % 5 % ;
display : grid ;
grid-template-columns : 1fr 1fr 1fr 1fr ;
margin-bottom : 60px ;
grid-gap : 2 % ;
}
div # about-content-top-left {
grid-column : 1 / span 2 ;
font-size : 32px ;
font-weight : normal ;
font-stretch : condensed ;
font-style : normal ;
line-height : 50px ;
color : blue ;
padding-right : 10 % ;
align-self : center ;
}
div # about-content-top-right {
grid-column : 3 / span 2 ;
padding-right : 10 % ;
}
div # about-content-top-right img {
width : 100 % ;
}
div # about-content-bottom {
grid-column : 1 / span 4 ;
padding : 0 15 % ;
padding-bottom : 5 % ;
margin-bottom : 200px ;
}
div . about-paragraph-subtitle {
font-size : 30px ;
line-height : 30px ;
padding-top : 1 . 5rem ;
}
div . about-paragraph p , ul {
font-size : 20px ;
line-height : 28px ;
padding-bottom : 0 . 5rem ;
}
div . about-paragraph a {
font-family : 'Roboto Condensed' , sans-serif ;
text-decoration : none ;
color : blue ;
}
/************ 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 ;
}
/************ UPLOAD ************/
div # upload-intro {
text-align : center ;
padding-top : 5em ;
}
div # upload-intro h3 , div # upload-intro p {
text-align : center ;
width : 50 % ;
margin : auto ;
}