jules/DAAP_interface
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

updated css

Browse Source
This commit is contained in:
JoBCB 2020-11-15 20:18:13 +00:00
parent 70a5ee7ac0
commit a415307f2c
2 changed files with 46 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
static/css/style.css
View File

@ -31,11 +31,11 @@ font-style: normal;
}
/***************** EMERGENCY BUTTON AND MOCKUPS****************/
div#backend-data-button{
div#backend-data-button, div#container-backend-data-button {
max-width: 365px !important;
min-height: 48px !important;
font-family: 'Roboto Condensed Bold', sans-serif;
font-size: calc(12px + (14 - 12) * ((100vw - 768px) / (1400 - 768)));
font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320)));
line-height: 16px;
font-weight: bold;
font-stretch: condensed;
@ -55,7 +55,7 @@ div#backend-data-button{
margin-top: 20px;
}
img.placeholder-style {
img.placeholder-style, .placeholder-style {
width: 100%;
}
@ -70,12 +70,7 @@ div#backend-data-button span{
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%;
@ -106,8 +101,8 @@ html {
-moz-box-sizing: inherit;
box-sizing: inherit; }
body {
font-family: Roboto;
font-size: calc(12px + (20 - 12) * ((100vw - 768px) / (1400 - 768)));
font-family: Roboto Regular;
font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320)));
font-weight: normal;
font-stretch: normal;
font-style: normal;
@ -117,11 +112,11 @@ body {
margin: 0;
padding: 0;
}
body i {
body i {
font-family: 'Roboto Regular';
font-weight: normal;
font-style: italic;
}
font-style: italic;
}
/*Header*/
div#header{
@ -224,9 +219,9 @@ div#navigation a{
text-decoration: none;
font-weight: normal;
color: var(--black);
font-size: calc(12px + (18 - 12) * ((100vw - 768px) / (1400 - 768)));
font-size: calc(12px + (18 - 12) * ((100vw - 320) / (1600 - 320)));
line-height: 26px;
/* line-height: calc(22px + (22 - 26) * ((100vw - 768px) / (1400 - 768)));
/* line-height: calc(22px + (22 - 26) * ((100vw - 768px) / (1400 - 320)));
*/}
div#navigation a:hover {
@ -281,7 +276,7 @@ div#footer{
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-size: calc(12px + (18 - 12) * ((100vw - 320px) / (1600 - 320)));
font-weight: normal;
font-stretch: condensed;
font-style: normal;
@ -327,7 +322,7 @@ 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)));
font-size: calc(12px + (18 - 12) * ((100vw - 320px) / (1600 - 320)));
line-height: 28.4px;
font-weight: normal;
font-stretch: normal;
@ -341,12 +336,12 @@ div#contactform{
}
#contactform span, a.footer-contact {
text-decoration: none;
color:#FFFFFF;
/* color:#FFFFFF;*/
}
div#contactform:hover {
color: white;
background-color: black;
background-color: var(--blue-blue);
}
#footer-contact-form {
@ -430,7 +425,7 @@ thead tr th{
}
tbody tr th{
font-size: calc(12px + (18 - 12) * ((100vw - 768px) / (1400 - 768)));
font-size: calc(12px + (18 - 12) * ((100vw - 320px) / (1600 - 320)));
line-height: 26px;
font-family: 'Roboto', sans-serif;
font-weight: normal;
@ -562,7 +557,7 @@ a.paginate_button.next:after {
max-width: 365px;
min-height: 48px;
font-family: 'Roboto Condensed Bold', sans-serif;
font-size: calc(12px + (14 - 12) * ((100vw - 768px) / (1400 - 768)));
font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320)));
line-height: 16px;
font-weight: bold;
font-stretch: condensed;
@ -581,7 +576,7 @@ a.paginate_button.next:after {
max-width: 365px;
min-height: 48px;
font-family: 'Roboto Condensed Bold', sans-serif;
font-size: calc(12px + (14 - 12) * ((100vw - 768px) / (1400 - 768)));
font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320)));
line-height: 16px;
font-weight: bold;
font-stretch: condensed;
@ -617,7 +612,7 @@ a.paginate_button.next:after {
/*Home Top div*/
div#home-top-div{
height: 661px;
height: 75vh; /* 661px;*/
width: 100%;
overflow: hidden;
position: relative;
@ -675,7 +670,7 @@ div#home-top-div{
#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 - 768px) / (1400 - 768)));
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;
@ -684,7 +679,7 @@ div#home-top-div{
#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 - 768px) / (1400 - 768)));
font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320)));
}
#home-top-div .secondary-button:hover, #home-top-div .secondary-button a:hover {
@ -706,7 +701,7 @@ div#home-top-div{
animation-fill-mode: forwards;
animation-direction: normal;
animation-timing-function: linear; /* or ease*/
opacity: 0.8;
opacity: 0.4;
}
#home-top-div img:nth-of-type(even) { }
@ -726,7 +721,7 @@ div#home-top-div{
/*#home-top-div img:nth-of-type(3) */
.banner-image-2 {
animation-delay: 12s;
padding-top: 360px;
padding-top: 430px;
}
/*#home-top-div img:nth-of-type(4)*/
.banner-image-3 {
@ -907,7 +902,7 @@ div.home-show-wrapper a:hover {
}
.mw-parser-output h1, .Heading_B {
font-family: Roboto Condensed Bold;
font-size: calc(22 + (25 - 22) * ((100vw - 768px) / (1400 - 768)));
font-size: calc(22 + (25 - 22) * ((100vw - 320px) / (1600 - 320)));
font-weight: bold;
font-stretch: condensed;
font-style: normal;
@ -925,7 +920,7 @@ div.home-show-wrapper a:hover {
}
.mw-parser-output blockquote p {
font-family: Roboto Condensed;
font-size: calc(20px + (30 - 20) * ((100vw - 768px) / (1400 - 768)));
font-size: calc(20px + (30 - 20) * ((100vw - 320px) / (1600 - 320)));
font-weight: normal;
font-stretch: condensed;
font-style: normal;
@ -944,7 +939,7 @@ div.home-show-wrapper a:hover {
}
/*.mw-parser-output h2 {
font-family: Roboto Condensed;
font-size: calc(16px + (20 - 16) * ((100vw - 768px) / (1400 - 768)));
font-size: calc(16px + (20 - 16) * ((100vw - 768px) / (1400 - 320)));
font-weight: normal;
font-stretch: condensed;
font-style: normal;
@ -954,7 +949,7 @@ div.home-show-wrapper a:hover {
}*/
h2:nth-of-type(1), .Heading_C, .mw-parser-output h2, h2 {
font-family: Roboto Condensed;
font-size: calc(20px + (30 - 20) * ((100vw - 768px) / (1400 - 768)));
font-size: calc(20px + (30 - 20) * ((100vw - 320px) / (1600 - 320)));
font-weight: normal;
font-stretch: condensed;
font-style: normal;
@ -966,7 +961,7 @@ h2:nth-of-type(1), .Heading_C, .mw-parser-output h2, h2 {
}
h2:nth-of-type(2), .Heading_D,.mw-parser-output h3, h3 {
font-family: Roboto Condensed;
font-size: calc(22px + (25 - 22) * ((100vw - 768px) / (1400 - 768)));
font-size: calc(22px + (25 - 22) * ((100vw - 320px) / (1600 - 320)));
font-weight: normal;
font-stretch: condensed;
font-style: normal;
@ -976,7 +971,7 @@ h2:nth-of-type(2), .Heading_D,.mw-parser-output h3, h3 {
}
.Heading_E {
font-family: Roboto Condensed;
font-size: calc(16px + (20 - 16) * ((100vw - 768px) / (1400 - 768)));
font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (1600 - 320)));
font-weight: normal;
font-stretch: condensed;
text-transform: uppercase;
@ -991,7 +986,7 @@ h2:nth-of-type(2), .Heading_D,.mw-parser-output h3, h3 {
}
.mw-parser-output ul {
font-family: Roboto Regular;
font-size: calc(12px + (20 - 12) * ((100vw - 768px) / (1400 - 768)));
font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320)));
font-weight: normal;
font-stretch: normal;
font-style: normal;
@ -1009,7 +1004,7 @@ h2:nth-of-type(2), .Heading_D,.mw-parser-output h3, h3 {
}
.mw-parser-output img {
font-family: Roboto Regular;
font-size: calc(12px + (20 - 12) * ((100vw - 768px) / (1400 - 768)));
font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320)));
text-decoration: none;
font-weight: normal;
font-stretch: normal;
@ -1020,7 +1015,7 @@ h2:nth-of-type(2), .Heading_D,.mw-parser-output h3, h3 {
}
.mw-parser-output a {
font-family: Roboto Regular;
font-size: calc(12px + (20 - 12) * ((100vw - 768px) / (1400 - 768)));
font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320)));
font-weight: normal;
font-stretch: normal;
font-style: normal;
@ -1108,7 +1103,7 @@ div.browsebycategory-categories a {
font-family: 'Roboto Condensed Bold', sans-serif;
color: #ffffff;
text-decoration: none;
font-size: calc(12px + (14 - 12) * ((100vw - 768px) / (1400 - 768)));
font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320)));
}
@ -1122,30 +1117,9 @@ div.browsebycategory-categories:hover {
/*********************************************/
/************ PERSON AND ARTWORK ************/
/************ PERSON ************/
/*******************************************/
/************ 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 ************/
.artwork-box span {
@ -1184,7 +1158,7 @@ img.person_creatorof-imgs{
.artwork-intro {
font-family: Roboto;
font-size: calc(12px + (20 - 12) * ((100vw - 768px) / (1400 - 768)));
font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320)));
font-weight: normal;
font-stretch: normal;
font-style: normal;
@ -1205,7 +1179,7 @@ img.person_creatorof-imgs{
.artwork-nav-label, .label-item {
margin: 25px 0 12px 1px;
font-family: Roboto Condensed;
font-size: calc(14px + (18 - 14) * ((100vw - 768px) / (1400 - 768)));
font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
font-weight: normal;
font-stretch: condensed;
font-style: normal;
@ -1304,7 +1278,7 @@ img.person_creatorof-imgs{
writing-mode: sideways-lr;
margin-top: auto;
margin-bottom: auto;
max-height: 100px;
max-height: 120px;
text-align: center;
align-self: center;
}
@ -1328,10 +1302,17 @@ img.person_creatorof-imgs{
letter-spacing: 0.9px;
color: var(--blue-blue);
}
.metadata-link:hover {
.metadata-link, .metadata-link a, .metadata-link a span:hover {
color: black;
}
.artwork-about-bottom .mw-parser-output {
width: 100%;
padding: 30px 0px 0px 0px;
display: inherit;
}
/*************************************/
/************ WIKI PAGES ************/
/***********************************/

2
templates/layout.html
View File

@ -75,7 +75,7 @@
</div>
<div id="footer-contact-form">
<div id="footer-title-contact"><p>EXPRESSION OF INTEREST</p></div>
<div id="primary-button"><a class="footer-contact" href="https://docs.google.com/forms/d/e/1FAIpQLSdee1kiy1rDLONW7KNp-a3iRbPlxbCSlF2cDohXOh2SU8oW1A/viewformnope"><div class="primary-button bluebutton" id="contactform"><span>CONTACT FORM</span></div></a></div>
<div id="secondary-button"><a class="footer-contact" href="https://docs.google.com/forms/d/e/1FAIpQLSdee1kiy1rDLONW7KNp-a3iRbPlxbCSlF2cDohXOh2SU8oW1A/viewformnope"><div class="secondary-button bluebutton" id="contactform"><span>CONTACT FORM</span></div></a></div>
</div>
</div>
</div>