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.

565 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-subscribe{
grid-area: 1 / 4 / 2 / 5;
}
div#footer-title-br p, div#footer-title-others p, div#footer-title-subscribe 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-subscribe{
grid-area: 2 / 4 / 3 / 5;
padding-top: 5%;
}
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{
margin-top: 60px;
margin-bottom: 30px;
}
/******************************************************/
/************ 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;
}
/* Titles */
div#artistsindex-title, div#publishersindex-title, div#selfpublishedindex, div#zinesindex-title{
font-weight: bold;
font-size: 25px;
font-family: 'Roboto Condensed', sans-serif;
}
/************ RECENTLY ADDED + HOME ************/
/*Top div*/
div#home-top-div{
height: 661px;
border:blue solid 1px;
}
/*Recent stuff*/
div#home-recent-title{
font-size: 25px;
font-family: 'Roboto Condensed', sans-serif;
font-weight: bold;
max-width: 90%;
margin: 0 auto;
padding-left: 20px;
}
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-title{
font-size: 25px;
font-family: 'Roboto Condensed', sans-serif;
font-weight: bold;
}
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-intro{
text-align: center;
padding-top: 5em;
}
div#about-intro h3, div#about-intro p {
text-align: center;
width: 50%;
margin: auto;
}
/************ 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;
}