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

added buttons in homepage and styled body text templates

master
JoBCB 4 years ago
parent
f7df9b1dab
commit
527ed6857b
2 changed files with 215 additions and 49 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. 256
      static/css/style.css
  2. 8
      templates/home.html

256
static/css/style.css
View File

@ -83,7 +83,6 @@ html {
body { body {
font-family: Roboto; font-family: Roboto;
font-size: calc(12px + (20 - 12) * ((100vw - 768px) / (1400 - 768))); font-size: calc(12px + (20 - 12) * ((100vw - 768px) / (1400 - 768)));
font-size: 16px;
font-weight: normal; font-weight: normal;
font-stretch: normal; font-stretch: normal;
font-style: normal; font-style: normal;
@ -351,7 +350,7 @@ div#footer{ flex-wrap: wrap; }
/*Titles all pages*/ /*Titles all pages*/
/*div#home-recent-title, div#browsethearchive-title, div#artistsindex-title, div#publishersindex-title, div#selfpublishedindex-title, div#zinesindex-title, div#browseby-title */ /*div#home-recent-title, div#browsethearchive-title, div#artistsindex-title, div#publishersindex-title, div#selfpublishedindex-title, div#zinesindex-title, div#browseby-title */
div.pagetitle{ div.pagetitle, .mw-parser-output h1{
margin: 60px 80px 30px 80px; margin: 60px 80px 30px 80px;
font-size: 25px; font-size: 25px;
font-family: 'Roboto Condensed Bold', sans-serif; font-family: 'Roboto Condensed Bold', sans-serif;
@ -527,7 +526,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 + (16 - 12) * ((100vw - 768px) / (1400 - 768))); font-size: calc(12px + (14 - 12) * ((100vw - 768px) / (1400 - 768)));
line-height: 16px; line-height: 16px;
font-weight: bold; font-weight: bold;
font-stretch: condensed; font-stretch: condensed;
@ -541,19 +540,25 @@ a.paginate_button.next:after {
background-color: var(--blue-blue); background-color: var(--blue-blue);
border-radius: 6px; border-radius: 6px;
} }
.secondary-button { .secondary-button {
width: 365px; max-width: 365px;
height: 48px; min-height: 48px;
font-family: Roboto; font-family: 'Roboto Condensed Bold', sans-serif;
font-size: 14px; font-size: calc(12px + (14 - 12) * ((100vw - 768px) / (1400 - 768)));
line-height: 16px;
font-weight: bold; font-weight: bold;
font-stretch: condensed; font-stretch: condensed;
font-style: normal; font-style: normal;
line-height: normal; line-height: normal;
letter-spacing: 1.5px; letter-spacing: 1.5px;
text-align: center; text-align: center;
color: var(--blue-blue); text-decoration: none;
cursor: pointer; cursor: pointer;
background-color: #ffffff;
color: var(--blue-blue);
border: solid 1px var(--blue-blue);
border-radius: 6px;
} }
.artwork-button { .artwork-button {
@ -579,16 +584,51 @@ div#home-top-div{
height: 661px; height: 661px;
width: 100%; width: 100%;
border:blue solid 1px; border:blue solid 1px;
overflow-x: hidden; overflow: hidden;
position: relative; position: relative;
} }
.heading_A {
font-family: Roboto Condensed;
font-size: 40px;
font-weight: normal;
font-stretch: condensed;
font-style: normal;
line-height: 1.45;
letter-spacing: normal;
color: var(--black);
margin-left: 150px;
margin-bottom: 26px;
}
#home-top-div .heading_A {
position: static;
max-width: 634px;
}
#home-top-div #wrapper-top-buttons{
display: flex;
align-items: center;
justify-content: center;
}
#home-top-div .primary-button {
margin-left: 150px;
margin-bottom: 26px;
position: static;
}
#home-top-div .secondary-button {
margin-left: 150px;
position: static;
}
#home-top-div img { #home-top-div img {
position: absolute; position: absolute;
z-index: -1;
width: 100%; width: 100%;
max-width: 350px; max-width: 460px;
left: -600px; left: -600px;
padding: 60px; padding-right: 60px;
padding-left: 60px;
animation-name: move; animation-name: move;
animation-duration: 20s; animation-duration: 20s;
@ -598,19 +638,22 @@ div#home-top-div{
animation-timing-function: linear; /* or ease*/ animation-timing-function: linear; /* or ease*/
} }
#home-top-div:nth-child(even) { padding-top: 60px;} #home-top-div img:nth-of-type(even) { }
#home-top-div:nth-child(odd) { padding-top: 0px; } #home-top-div img:nth-of-type(odd) { }
#home-top-div img:nth-of-type(2n+1) {}
#home-top-div img:nth-of-type(1) { #home-top-div img:nth-of-type(1) {
animation-delay: 0s; animation-delay: 0s;
padding-top: 120px;
} }
#home-top-div img:nth-of-type(2) { #home-top-div img:nth-of-type(2) {
animation-delay: 6s; animation-delay: 6s;
padding-top: -60px;
} }
#home-top-div img:nth-of-type(3) { #home-top-div img:nth-of-type(3) {
animation-delay: 12s; animation-delay: 12s;
padding-top: 60px; padding-top: 320px;
} }
@keyframes move { @keyframes move {
@ -716,35 +759,149 @@ div.home-show-wrapper{
} }
/************ BROWSE THE ARCHIVE Pagination ************/ /************ ABOUT & TEXT TEMPLATES ************/
/*img.browsethearchive-imgs{
width: 200px;
.mw-parser-output {
width: 100%;
padding: 0px 80px 60px 80px;
display: grid;
row-gap: 0rem;
column-gap: 1rem;
grid-template-columns: repeat(18, 1fr);
}
.mw-parser-output h1, .mw-parser-output h2 {
grid-column-start: 1;
grid-column-end: 18;
}
.mw-parser-output h1 {
margin: 60px 0px 30px 0px;
}
.mw-parser-output h1, .Heading_B {
font-family: Roboto Condensed Bold;
font-size: calc(22 + (25 - 22) * ((100vw - 768px) / (1400 - 768)));
font-weight: bold;
font-stretch: condensed;
font-style: normal;
text-transform: uppercase;
line-height: 35px;
letter-spacing: 1.13px;
color: var(--black);
} }
.mw-parser-output blockquote{
div.browsethearchive-items{ grid-column-start: 1;
display: inline-block; grid-column-end: 8;
padding:10px; grid-row-start: 2;
font-size: 16px; grid-row-end: 2;
font-family: 'Roboto Condensed', sans-serif; margin: 0 !important;
color: #7f7f7f;
margin: 0 auto;
} }
div.browsethearchive-items a{ .mw-parser-output blockquote p {
font-size: 20px; font-family: Roboto Condensed;
font-family: 'Roboto Condensed', sans-serif; font-size: 32px;
font-weight: bold; font-weight: normal;
font-stretch: condensed;
font-style: normal;
line-height: 1.56;
letter-spacing: normal;
color: var(--blue-blue);
}
.mw-parser-output blockquote + p {
grid-column-start: 8;
grid-column-end: 18;
grid-row-start: 2;
grid-row-end: 2;
}
.mw-parser-output p {
margin: 0px 0px 30px 0px;
}
.mw-parser-output h2 {
font-family: Roboto Condensed;
font-size: calc(16px + (20 - 16) * ((100vw - 768px) / (1400 - 768)));
font-weight: normal;
font-stretch: condensed;
font-style: normal;
letter-spacing: 1.13px;
color: var(--black);
margin: 0px 0px 30px 0px;
}
h2:nth-of-type(1), .Heading_C {
font-family: Roboto Condensed;
font-size: calc(20px + (30 - 20) * ((100vw - 768px) / (1400 - 768)));
font-weight: normal;
font-stretch: condensed;
font-style: normal;
line-height: 40px;
letter-spacing: 1.13px;
color: var(--black);
}
h2:nth-of-type(2), .Heading_D {
font-family: Roboto Condensed;
font-size: calc(22px + (25 - 22) * ((100vw - 768px) / (1400 - 768)));
font-weight: normal;
font-stretch: condensed;
font-style: normal;
line-height: 35px;
letter-spacing: 1.13px;
color: var(--black);
}
h2:nth-of-type(3), .Heading_E, .mw-parser-output h3 {
font-family: Roboto Condensed;
font-size: calc(16px + (20 - 16) * ((100vw - 768px) / (1400 - 768)));
font-weight: normal;
font-stretch: condensed;
text-transform: uppercase;
font-style: normal;
line-height: 20px;
letter-spacing: 1.13px;
color: var(--black);
}
.mw-parser-output p, .mw-parser-output ul, .mw-parser-output h2, .mw-parser-output h3 {
grid-column-start: 4;
grid-column-end: 15;
}
.mw-parser-output ul {
font-family: Roboto Regular;
font-size: calc(12px + (20 - 12) * ((100vw - 768px) / (1400 - 768)));
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.63;
letter-spacing: normal;
color: var(--black);
margin: 0;
padding: 0;
list-style-type: circle;
margin: 0px 0px 30px 56px;
}
.mw-parser-output p a img {
width: 100%;
height: auto;
}
a img, a img::before {
font-family: Roboto Regular;
font-size: calc(12px + (20 - 12) * ((100vw - 768px) / (1400 - 768)));
text-decoration: none; text-decoration: none;
color: #000000 font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.63;
letter-spacing: normal;
color: var(--black);
} }
div#browsethearchive-grid{ a:link, a:visited, .mw-parser-output a {
max-width: 90%; font-family: Roboto Regular;
margin: 0 auto 60px auto; font-size: calc(12px + (20 - 12) * ((100vw - 768px) / (1400 - 768)));
display: grid; font-weight: normal;
grid-gap: 2rem; font-stretch: normal;
text-align: center; font-style: normal;
}*/ line-height: 1.63;
letter-spacing: normal;
color: #163adc;
}
a:hover , .mw-parser-output a:hover {
color: var(--black);
}
/************ BROWSE THE ARCHIVE Pagination ************/
.current { .current {
background-color: #1b42d8; background-color: #1b42d8;
@ -778,6 +935,7 @@ ul#browsethearchive-pagin{
min-height: 48px; min-height: 48px;
max-width: 376px; max-width: 376px;
} }
#browsethearchive-pagin li { #browsethearchive-pagin li {
display: flex; display: flex;
align-items: center; align-items: center;
@ -786,6 +944,7 @@ justify-content: center;
height: 36px; height: 36px;
border-radius: 6px; border-radius: 6px;
} }
div#browsethearchive-pagination{ div#browsethearchive-pagination{
width: 100%; width: 100%;
background-color: #e9e9e9; background-color: #e9e9e9;
@ -808,16 +967,17 @@ div.browsebycategory-categories{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center;
justify-content: center;
} }
div.browsebycategory-categories a { 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;
margin: auto; font-size: calc(12px + (14 - 12) * ((100vw - 768px) / (1400 - 768)));
display: inline-block;
}
}
/************ SEARCH TOOLS ************/ /************ SEARCH TOOLS ************/
@ -867,16 +1027,17 @@ div#about-content{
} }
div#about-content-top{ div#about-content-top{
padding: 2% 5%; width: 100%;
display: grid; padding: 0px 80px;
grid-template-columns: 1fr 1fr 1fr 1fr; display: grid;
grid-gap: 1rem;
margin-bottom: 60px; margin-bottom: 60px;
grid-gap: 2%;
} }
div#about-content-top-left{ div#about-content-top-left{
grid-column: 1/span 2; /*grid-column: 1/span 2;*/
font-size: 32px; grid-template-columns: repeat(4, 1fr);
font-size: 32px;
font-weight: normal; font-weight: normal;
font-stretch: condensed; font-stretch: condensed;
font-style: normal; font-style: normal;
@ -884,7 +1045,6 @@ div#about-content-top{
color: blue; color: blue;
padding-right: 10%; padding-right: 10%;
align-self: center; align-self: center;
} }
div#about-content-top-right{ div#about-content-top-right{
grid-column: 3/span 2; grid-column: 3/span 2;

8
templates/home.html
View File

@ -23,6 +23,12 @@
<!-- END LOOPS IMAGES --> <!-- END LOOPS IMAGES -->
<p class="heading_A">The Digital Archive of Artists Publishing is an interactive, user-driven, searchable database of Artist's Books and publications</p>
<div id="wrapper-top-buttons" class="primary-button" id=""><span>SEE EXAMPLE SEARCH FOR ZINES</span></div>
<div id="wrapper-top-buttons" class="secondary-button" id=""><span>LEARN MORE ABOUT ADVANCED SEARCH TOOLS</span></div>
</div> </div>
@ -67,7 +73,7 @@
</div> </div>
<div class="home-show-wrapper primary-button"><span class="home-show">SHOW MORE</span></div> <div class="home-show-wrapper primary-button"><span class="home-show">BROWSE THE FULL ARCHIVE</span></div>
</div> </div>

Write Preview
Loading…
Cancel
Save