/************ 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 ( 16px + ( 20 - 16 ) * ( ( 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' , sans-serif ;
font-weight : bold ;
font-size : 25px ;
}
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 16px ;
}
# 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 ( 16px + ( 20 - 16 ) * ( ( 100vw - 768px ) / ( 1400 - 768 ) ) ) ;
line-height : calc ( 22px + ( 22 - 26 ) * ( ( 100vw - 768px ) / ( 1400 - 768 ) ) ) ;
}
div # navigation a : hover {
color : # 1b42d8 ;
}
/*Footer*/
div # footer {
display : flex ;
flex-direction : row ;
flex-wrap : wrap ;
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 ;
}
. footer-left { flex-wrap : nowrap ; }
# footer-credit , # footer-funds {
display : flex ;
flex-direction : column ;
flex-wrap : nowrap ;
}
# footer-socials-links {
display : flex ;
flex-direction : column ;
flex-wrap : nowrap ;
}
# footer-credit , # footer-funds , # footer-socials-links , # footer-contact-form {
padding-right : 56px ;
}
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 : 16px ;
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 : 90px ;
height : 90px ;
padding-top : 20px ;
}
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 : 100 % ;
max-width : 124px ;
height : auto ;
}
div # footer-img-wiki img {
width : 100 % ;
max-width : 56px ;
height : auto ;
}
div # footer-socials-links a {
text-decoration : none ;
color : # FFFFFF ;
font-family : 'Roboto Regular' , sans-serif ;
font-size : calc ( 16px + ( 20 - 16 ) * ( ( 100vw - 768px ) / ( 1400 - 768 ) ) ) ;
font-weight : normal ;
font-stretch : normal ;
font-style : normal ;
letter-spacing : normal ;
}
div # contactform {
display : flex ;
align-items : center ;
justify-content : center ;
}
# footer-contact a {
text-decoration : none ;
color : # FFFFFF ;
}
@ media screen and ( min-width : 0px ) and ( max-width : 768px ) {
# footer-title-others { margin-left : auto ; }
# 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 % ; }
}
/*Titles all pages*/
/*div#home-recent-title, div#browsethearchive-title, div#artistsindex-title, div#publishersindex-title, div#selfpublishedindex-title, div#zinesindex-title, */
div . pagetitle {
margin : 60px 80px 30px 80px ;
font-size : 25px ;
font-family : 'Roboto Condensed' , 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 % ; }
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 : 22 px ; }
. idnumber { padding : 0 px 0 px 0 px 80 px }
. label { font-weight : bold ; }
. altaliases { }
. description { padding : 0 px 80 px 0 px 0 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 : 18px ;
line-height : 26px ;
font-family : 'Roboto Condensed' , sans-serif ;
font-weight : normal ;
}
tbody tr th a {
text-decoration : none ;
color : # 000000 ;
}
# 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 ;
}
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 ;
font-size : 14px ;
line-height : 16px ;
font-weight : bold ;
font-stretch : condensed ;
font-style : normal ;
line-height : normal ;
letter-spacing : 1 . 5px ;
text-align : center ;
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 ;
border : blue solid 1px ;
}
img . home-recent-imgs , img . browsethearchive-imgs {
width : 100 % ;
}
div . home-recent-items , div . browsethearchive-items {
padding : 10px ;
font-size : 16px ;
font-family : 'Roboto Condensed' , sans-serif ;
margin : 0 auto ;
display : flex ;
flex-direction : column ;
align-content : 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 ;
}
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 : 100px ;
justify-content : flex-start ;
}
div # home-recent-grid , div # browsethearchive-grid {
width : 100 % ;
padding : 0px 80px ;
display : grid ;
text-align : center ;
grid-gap : 2rem ;
}
div # show-button-wrapper {
width : 100 % ;
}
div . home-show-wrapper {
width : 100 % ;
margin : 60px 0px ;
}
span . home-show {
display : flex ;
margin : auto ;
background-color : # 1b42d8 ;
border-radius : 6px ;
color : # FFFFFF ;
font-family : 'Roboto Condensed' , sans-serif ;
font-size : 14px ;
font-weight : bold ;
height : 48px ;
width : 365px ;
cursor : pointer ;
}
@ 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 : inline-flex ;
}
# 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 ;
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 ;
}