From 527ed6857bd64162ee030c99343168174e778b3b Mon Sep 17 00:00:00 2001 From: JoBCB Date: Sat, 14 Nov 2020 13:01:55 +0000 Subject: [PATCH] added buttons in homepage and styled body text templates --- static/css/style.css | 256 +++++++++++++++++++++++++++++++++++-------- templates/home.html | 8 +- 2 files changed, 215 insertions(+), 49 deletions(-) diff --git a/static/css/style.css b/static/css/style.css index 12d2bf4..0ff544b 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -83,7 +83,6 @@ html { body { font-family: Roboto; font-size: calc(12px + (20 - 12) * ((100vw - 768px) / (1400 - 768))); - font-size: 16px; font-weight: normal; font-stretch: normal; font-style: normal; @@ -351,7 +350,7 @@ div#footer{ flex-wrap: wrap; } /*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.pagetitle{ +div.pagetitle, .mw-parser-output h1{ margin: 60px 80px 30px 80px; font-size: 25px; font-family: 'Roboto Condensed Bold', sans-serif; @@ -527,7 +526,7 @@ a.paginate_button.next:after { max-width: 365px; min-height: 48px; 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; font-weight: bold; font-stretch: condensed; @@ -541,19 +540,25 @@ a.paginate_button.next:after { background-color: var(--blue-blue); border-radius: 6px; } + .secondary-button { - width: 365px; - height: 48px; - font-family: Roboto; - font-size: 14px; + max-width: 365px; + min-height: 48px; + font-family: 'Roboto Condensed Bold', sans-serif; + font-size: calc(12px + (14 - 12) * ((100vw - 768px) / (1400 - 768))); + line-height: 16px; font-weight: bold; font-stretch: condensed; font-style: normal; line-height: normal; letter-spacing: 1.5px; text-align: center; - color: var(--blue-blue); + text-decoration: none; cursor: pointer; + background-color: #ffffff; + color: var(--blue-blue); + border: solid 1px var(--blue-blue); + border-radius: 6px; } .artwork-button { @@ -579,16 +584,51 @@ div#home-top-div{ height: 661px; width: 100%; border:blue solid 1px; - overflow-x: hidden; + overflow: hidden; 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 { position: absolute; + z-index: -1; width: 100%; - max-width: 350px; + max-width: 460px; left: -600px; - padding: 60px; + padding-right: 60px; + padding-left: 60px; animation-name: move; animation-duration: 20s; @@ -598,19 +638,22 @@ div#home-top-div{ animation-timing-function: linear; /* or ease*/ } -#home-top-div:nth-child(even) { padding-top: 60px;} -#home-top-div:nth-child(odd) { padding-top: 0px; } +#home-top-div img:nth-of-type(even) { } +#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) { animation-delay: 0s; + padding-top: 120px; } #home-top-div img:nth-of-type(2) { animation-delay: 6s; + padding-top: -60px; } #home-top-div img:nth-of-type(3) { animation-delay: 12s; - padding-top: 60px; + padding-top: 320px; } @keyframes move { @@ -716,35 +759,149 @@ div.home-show-wrapper{ } -/************ BROWSE THE ARCHIVE Pagination ************/ - -/*img.browsethearchive-imgs{ - width: 200px; +/************ ABOUT & TEXT TEMPLATES ************/ +.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); } - -div.browsethearchive-items{ - display: inline-block; - padding:10px; - font-size: 16px; - font-family: 'Roboto Condensed', sans-serif; - color: #7f7f7f; - margin: 0 auto; +.mw-parser-output blockquote{ + grid-column-start: 1; + grid-column-end: 8; + grid-row-start: 2; + grid-row-end: 2; + margin: 0 !important; } -div.browsethearchive-items a{ - font-size: 20px; - font-family: 'Roboto Condensed', sans-serif; - font-weight: bold; +.mw-parser-output blockquote p { + font-family: Roboto Condensed; + font-size: 32px; + 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; - color: #000000 + font-weight: normal; + font-stretch: normal; + font-style: normal; + line-height: 1.63; + letter-spacing: normal; + color: var(--black); } -div#browsethearchive-grid{ - max-width: 90%; - margin: 0 auto 60px auto; - display: grid; - grid-gap: 2rem; - text-align: center; -}*/ +a:link, a:visited, .mw-parser-output a { + 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: #163adc; +} +a:hover , .mw-parser-output a:hover { + color: var(--black); +} + +/************ BROWSE THE ARCHIVE Pagination ************/ .current { background-color: #1b42d8; @@ -778,6 +935,7 @@ ul#browsethearchive-pagin{ min-height: 48px; max-width: 376px; } + #browsethearchive-pagin li { display: flex; align-items: center; @@ -786,6 +944,7 @@ justify-content: center; height: 36px; border-radius: 6px; } + div#browsethearchive-pagination{ width: 100%; background-color: #e9e9e9; @@ -808,16 +967,17 @@ div.browsebycategory-categories{ display: flex; flex-direction: row; flex-wrap: wrap; + align-items: center; + justify-content: center; } div.browsebycategory-categories a { font-family: 'Roboto Condensed Bold', sans-serif; color: #ffffff; text-decoration: none; - margin: auto; - display: inline-block; -} + font-size: calc(12px + (14 - 12) * ((100vw - 768px) / (1400 - 768))); +} /************ SEARCH TOOLS ************/ @@ -867,16 +1027,17 @@ div#about-content{ } div#about-content-top{ - padding: 2% 5%; - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; + width: 100%; + padding: 0px 80px; + display: grid; + grid-gap: 1rem; margin-bottom: 60px; - grid-gap: 2%; } div#about-content-top-left{ - grid-column: 1/span 2; - font-size: 32px; + /*grid-column: 1/span 2;*/ + grid-template-columns: repeat(4, 1fr); + font-size: 32px; font-weight: normal; font-stretch: condensed; font-style: normal; @@ -884,7 +1045,6 @@ div#about-content-top{ color: blue; padding-right: 10%; align-self: center; - } div#about-content-top-right{ grid-column: 3/span 2; diff --git a/templates/home.html b/templates/home.html index 940ff15..16cefad 100644 --- a/templates/home.html +++ b/templates/home.html @@ -23,6 +23,12 @@ +

The Digital Archive of Artists Publishing is an interactive, user-driven, searchable database of Artist's Books and publications

+ +
SEE EXAMPLE SEARCH FOR ZINES
+ +
LEARN MORE ABOUT ADVANCED SEARCH TOOLS
+ @@ -67,7 +73,7 @@ -
SHOW MORE
+
BROWSE THE FULL ARCHIVE