Flask application repository for Banner Repeater's DAAP (Digital Archive of Artists Publishing).
SPARQL queries by Lozana Rossenova, CSS and JS by Joana Chicau, python and Jinja by Julie Boschat-Thorez.
See https://daap.network
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
570 lines
10 KiB
570 lines
10 KiB
|
|
/************ FONTS ************/
|
|
|
|
@font-face {
|
|
font-family: 'Roboto Condensed';
|
|
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;
|
|
}
|
|
|
|
|
|
/***************** EMERGENCY BUTTON****************/
|
|
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#backend-data-button span{
|
|
color: #FFFFFF;
|
|
text-decoration: none;
|
|
font-family: 'Roboto Condensed', sans-serif;
|
|
font-weight: bold;
|
|
}
|
|
|
|
div#container-backend-data-button{
|
|
height: 100px;
|
|
width: 100%;
|
|
border-bottom: 1px solid black;
|
|
height: 70px;
|
|
}
|
|
|
|
|
|
/************ LAYOUT ************/
|
|
html,body{
|
|
margin:0;
|
|
padding:0;
|
|
height: 100%;
|
|
font-family: 'Roboto Condensed', sans-serif;
|
|
|
|
}
|
|
|
|
/*Header*/
|
|
div#header{
|
|
width: 100%;
|
|
/*border:1px solid blue;*/
|
|
background-color: #FFFFFF;
|
|
height: 134px;
|
|
}
|
|
div#header-top{
|
|
display: grid;
|
|
grid-template-columns: 5% 67.5% 27.5%;
|
|
grid-template-rows: 100%;
|
|
grid-column-gap: 0px;
|
|
grid-row-gap: 0px;
|
|
}
|
|
|
|
div#animatedlogo{
|
|
grid-area: 1 / 1 / 2 / 2;
|
|
}
|
|
div#animatedlogo img{
|
|
height: 43px;
|
|
}
|
|
div#header-title{
|
|
grid-area: 1 / 2 / 2 / 3;
|
|
font-family: 'Roboto Condensed', sans-serif;
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
}
|
|
div#header-title a:link, div#header-title a:visited {
|
|
text-decoration: none;
|
|
color: #000000;
|
|
}
|
|
div#header-keyword-search{
|
|
grid-area: 1 / 3 / 2 / 4;
|
|
}
|
|
div#header-top div#header-keyword-search input[type=text]{
|
|
background-color: #e9e9e9;
|
|
color: #7f7f7f;
|
|
font-size: 18px;
|
|
font-family: 'Roboto Condensed', sans-serif;
|
|
width: 257px;
|
|
height: 43px;
|
|
}
|
|
|
|
div#header-top, div#navigation{
|
|
width: 100%;
|
|
height: 67px;
|
|
}
|
|
|
|
div#navigation{
|
|
border:red 1px solid;
|
|
display: grid;
|
|
grid-template-columns: 12.5% repeat(2, 10%) 1fr repeat(2, 10%) 12.5%;
|
|
grid-template-rows: 100%;
|
|
grid-column-gap: 0px;
|
|
grid-row-gap: 0px;
|
|
}
|
|
div#navigation a{
|
|
font-family: 'Roboto Condensed', sans-serif;
|
|
text-decoration: none;
|
|
color: black;
|
|
font-size: 16px;
|
|
height: 67px;
|
|
|
|
}
|
|
|
|
div#nav-about {
|
|
grid-area: 1 / 1 / 2 / 2;
|
|
padding-left: 50%;
|
|
}
|
|
div#nav-browse-archive { grid-area: 1 / 2 / 2 / 3; }
|
|
div#nav-browse-category { grid-area: 1 / 3 / 2 / 4; }
|
|
div#nav-search { grid-area: 1 / 4 / 2 / 5; }
|
|
div#nav-tutorials { grid-area: 1 / 5 / 2 / 6; }
|
|
div#nav-upload { grid-area: 1 / 6 / 2 / 7; }
|
|
div#nav-login { grid-area: 1 / 7 / 2 / 8; }
|
|
|
|
|
|
/*Footer*/
|
|
div#footer{
|
|
padding-top: 20px;
|
|
height: 229px;
|
|
width: 100%;
|
|
bottom: 0;
|
|
background-color: black;
|
|
color:white;
|
|
display: grid;
|
|
grid-template-columns: 20% 40% 15% 25%;
|
|
grid-template-rows: 20% 80%;
|
|
grid-column-gap: 0px;
|
|
grid-row-gap: 0px;
|
|
}
|
|
|
|
div#footer-title-br{
|
|
grid-area: 1 / 1 / 2 / 2;
|
|
padding-left: 30%;
|
|
}
|
|
div#footer-title-others{
|
|
grid-area: 1 / 2 / 2 / 3;
|
|
}
|
|
div#footer-title-socials{
|
|
grid-area: 1 / 3 / 2 / 4;
|
|
}
|
|
|
|
div#footer-title-contact{
|
|
grid-area: 1 / 4 / 2 / 5;
|
|
}
|
|
|
|
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;
|
|
color:#7f7f7f;
|
|
font-size: 16px;
|
|
}
|
|
|
|
div#footer-img-br{
|
|
grid-area: 2 / 1 / 3 / 2;
|
|
padding-left: 30%;
|
|
}
|
|
div#footer-img-br img{
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
|
|
div#footer-img-others{
|
|
display: flex;
|
|
grid-area: 2 / 2 / 3 / 3;
|
|
padding-top: 5%;
|
|
}
|
|
div#footer-img-lottery{
|
|
padding-left: 10%;
|
|
}
|
|
div#footer-img-lottery img{
|
|
width: 124px;
|
|
height: 81px;
|
|
}
|
|
div#footer-img-wiki img{
|
|
width: 56px;
|
|
height: 56px;
|
|
}
|
|
div#footer-socials-links{
|
|
grid-area: 2 / 3 / 3 / 4;
|
|
}
|
|
div#footer-socials-links a{
|
|
text-decoration: none;
|
|
color:#FFFFFF;
|
|
font-family: 'Roboto Condensed', sans-serif;
|
|
|
|
}
|
|
div#footer-contact{
|
|
grid-area: 2 / 4 / 3 / 5;
|
|
padding-top: 5%;
|
|
}
|
|
div#contactform{
|
|
background-color: #1B42D8;
|
|
width: 250px;
|
|
height: 55px;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
div#footer-contact a{
|
|
text-decoration: none;
|
|
color: #FFFFFF;
|
|
font-weight: bold;
|
|
}
|
|
|
|
|
|
|
|
div#footer div#footer-top div#footer-top-left,
|
|
div#footer div#footer-top div#footer-top-right{
|
|
display: inline-flex;
|
|
border:lime 1px solid;
|
|
}
|
|
div#footer div#footer-left{
|
|
left: 0px;
|
|
width: 30%;
|
|
/*display: contents;*/
|
|
}
|
|
div#footer div#footer-right{
|
|
right: 0px;
|
|
width: 30%;
|
|
float: right;
|
|
/*position: absolute;*/
|
|
}
|
|
|
|
|
|
div#footer div#footer-left div,
|
|
div#footer div#footer-right div{
|
|
display: inline-block;
|
|
border:cyan 1px solid;
|
|
}
|
|
|
|
|
|
input#newslettersubs{
|
|
background-color: #000000;
|
|
color:#FFFFFF;
|
|
border-radius: 6px;
|
|
height: 48px;
|
|
border: solid 1px;
|
|
|
|
}
|
|
input.submitemail{
|
|
background-color: #1B42D8;
|
|
color: #FFFFFF;
|
|
border:none;
|
|
border-radius: 6px;
|
|
height: 50px;
|
|
width: 50px;
|
|
}
|
|
|
|
|
|
/*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-top: 60px;
|
|
margin-bottom: 30px;
|
|
font-size: 25px;
|
|
font-family: 'Roboto Condensed', sans-serif;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
margin-left: 81px;
|
|
}
|
|
|
|
/******************************************************/
|
|
/************ BROWSING SEARCHING INDEXING ************/
|
|
/****************************************************/
|
|
|
|
|
|
/************ INDEXES ************/
|
|
table, th, td {
|
|
border-bottom: 1px solid black;
|
|
border-collapse: collapse;
|
|
padding: 10px 30px 10px 30px;
|
|
}
|
|
|
|
thead tr th{
|
|
text-transform: uppercase;
|
|
color:#7f7f7f;
|
|
font-size: 16px;
|
|
font-family: 'Roboto Condensed', sans-serif;
|
|
font-weight: normal;
|
|
border-bottom: black 3px solid;
|
|
}
|
|
|
|
tbody tr th{
|
|
font-size: 20px;
|
|
font-family: 'Roboto Condensed', sans-serif;
|
|
font-weight: normal;
|
|
}
|
|
|
|
tbody tr th.label a{
|
|
font-weight: bold;
|
|
}
|
|
|
|
tbody tr th a{
|
|
text-decoration: none;
|
|
color: #000000;
|
|
}
|
|
|
|
tbody tr th.description{
|
|
font-size: 16px;
|
|
}
|
|
|
|
|
|
|
|
/************ RECENTLY ADDED + HOME ************/
|
|
|
|
|
|
|
|
/*Top div*/
|
|
|
|
div#home-top-div{
|
|
height: 661px;
|
|
border:blue solid 1px;
|
|
}
|
|
|
|
|
|
img.home-recent-imgs{
|
|
/*max-height: 200px;*/
|
|
width: 200px;
|
|
}
|
|
|
|
div.home-recent-items{
|
|
display: inline-block;
|
|
padding:10px;
|
|
font-size: 16px;
|
|
font-family: 'Roboto Condensed', sans-serif;
|
|
color: #7f7f7f;
|
|
margin: 0 auto;
|
|
border:solid;
|
|
}
|
|
div.home-recent-items a{
|
|
font-size: 20px;
|
|
font-family: 'Roboto Condensed', sans-serif;
|
|
font-weight: bold;
|
|
color: #000000;
|
|
text-decoration: none;
|
|
}
|
|
div#home-recent-grid{
|
|
max-width: 90%;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
grid-gap: 2rem;
|
|
/*border: 1px solid blue;*/
|
|
text-align: center;
|
|
}
|
|
|
|
div#show-button-wrapper{
|
|
width: 100%;
|
|
}
|
|
span.home-show{
|
|
background-color: #1b42d8;
|
|
border-radius: 6px;
|
|
color: #FFFFFF;
|
|
font-family: 'Roboto Condensed', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
height: 48px;
|
|
width: 365px;
|
|
|
|
}
|
|
|
|
|
|
@media (min-width: 600px) {
|
|
#home-recent-grid { grid-template-columns: repeat(2, 1fr); }
|
|
}
|
|
@media (min-width: 1000px) {
|
|
#home-recent-grid { grid-template-columns: repeat(4, 1fr); }
|
|
}
|
|
@media (min-width: 1400px) {
|
|
#home-recent-grid { grid-template-columns: repeat(6, 1fr); }
|
|
}
|
|
|
|
|
|
/************ BROWSE THE ARCHIVE ************/
|
|
|
|
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;
|
|
display: grid;
|
|
grid-gap: 2rem;
|
|
/*border: 1px solid blue;*/
|
|
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;
|
|
}
|
|
|
|
@media (min-width: 600px) {
|
|
#browsethearchive-grid { grid-template-columns: repeat(2, 1fr); }
|
|
}
|
|
@media (min-width: 1000px) {
|
|
#browsethearchive-grid { grid-template-columns: repeat(4, 1fr); }
|
|
}
|
|
@media (min-width: 1400px) {
|
|
#browsethearchive-grid { grid-template-columns: repeat(5, 1fr); }
|
|
}
|
|
|
|
|
|
|
|
/************ BROWSE BY CATEGORY ************/
|
|
|
|
div#browsebycategory-listcategories{
|
|
|
|
}
|
|
div.browsebycategory-categories{
|
|
border: black 1px solid;
|
|
margin: 10px;
|
|
padding: 10px;
|
|
width: 20em;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/************ 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{
|
|
|
|
}
|
|
div#about-content-top-left{
|
|
|
|
}
|
|
div#about-content-top-right{
|
|
|
|
}
|
|
/************ 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;
|
|
}
|