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

updated css

master
JoBCB 4 years ago
parent
70a5ee7ac0
commit
a415307f2c
2 changed files with 46 additions and 65 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 109
      static/css/style.css
  2. 2
      templates/layout.html

109
static/css/style.css
View File

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

2
templates/layout.html
View File

@ -75,7 +75,7 @@
</div> </div>
<div id="footer-contact-form"> <div id="footer-contact-form">
<div id="footer-title-contact"><p>EXPRESSION OF INTEREST</p></div> <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> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save