diff --git a/static/css/style.css b/static/css/style.css index a4d1ca5..e4c312b 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -7,29 +7,24 @@ 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; } - - @font-face { font-family: 'Roboto Regular'; src: url('webfonts/Roboto_Regular/Roboto-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } - @font-face { font-family: 'Roboto Italic'; src: url('webfonts/Roboto_Regular/Roboto-Italic.ttf') format('truetype'); font-weight: normal; font-style: normal; } - @font-face { font-family: 'Roboto Bold'; src: url('webfonts/Roboto_Regular/Roboto-Bold.ttf') format('truetype'); @@ -37,12 +32,11 @@ font-weight: normal; font-style: normal; } -/*new import font*/ +/* import font */ @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto:ital@0;1&display=swap'); -/*test bold font import*/ @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); @@ -50,109 +44,114 @@ font-style: normal; @media screen and (min-width: 320px) { -/* 12 18 */ body, tbody tr th, .mw-parser-output ul, .mw-parser-output a, .artwork-intro, -.date, div.artwork-relatedworks-date, div#header-keyword-search span, .metadata-link p { - font-size: calc(12px + 6 * (100vw - 320px) / 1600); - line-height: 1.4em; + /* 12 18 */ + body, tbody tr th, .mw-parser-output ul, .mw-parser-output a, .artwork-intro, + .date, div.artwork-relatedworks-date, div#header-keyword-search span, .metadata-link p { + font-size: calc(12px + 6 * (100vw - 320px) / 1600); + line-height: 1.4em; } -/* 12 18 */ div#footer-title-br p, div#footer-title-others p, div#footer-title-contact p, -div#footer-title-socials p, thead tr th, .artwork-nav-label, .label-item, .tns-item p:first-of-type { - font-size: calc(12px + 6 * (100vw - 320px) / 1600); + /* 12 18 */ + div#footer-title-br p, div#footer-title-others p, div#footer-title-contact p, + div#footer-title-socials p, thead tr th, .artwork-nav-label, .label-item, .tns-item p:first-of-type { + font-size: calc(12px + 6 * (100vw - 320px) / 1600); + line-height: 1.4em; + } + /* 12 18 line height diff */ + div#footer-socials-links a, a#footer-img-br, a#footer-img-br figcaption, a#footer-img-br figcaption:hover, a#footer-img-br figcaption:visited, a#footer-img-wiki, a#footer-img-wiki figcaption, a#footer-img-wiki figcaption:hover, a#footer-img-wiki figcaption:visited { + font-size: calc(12px + 6 * (100vw - 320px) / 1600); + line-height: 1.4em; + } + /* 14 20 */ div#navigation a, .title, .metadata-link, .metadata-link a, .metadata-link a span, + div.artwork-relatedworks-tile { + font-size: calc(14px + 8 * (100vw - 320px) / 1600); + line-height: 1.4em; + } + /* 10 16 - line height 16 */ + div#backend-data-button, div#container-backend-data-button, + .primary-button, .secondary-button, .artwork-button, #home-top-div .primary-button a, + #home-top-div .primary-button a:visited, #home-top-div .secondary-button a, + #home-top-div .secondary-button a:visited, div.browsebycategory-categories a { + font-size: calc(10px + 6 * (100vw - 320px) / 1600); line-height: 1.4em; } -/* 12 18 line height diff */ div#footer-socials-links a, a#footer-img-br, a#footer-img-br figcaption, a#footer-img-br figcaption:hover, a#footer-img-br figcaption:visited, a#footer-img-wiki, a#footer-img-wiki figcaption, a#footer-img-wiki figcaption:hover, a#footer-img-wiki figcaption:visited { - font-size: calc(12px + 6 * (100vw - 320px) / 1600); + /* 18 32 */ + .mw-parser-output blockquote p { + font-size: calc(18px + 12 * (100vw - 320px) / 1600); line-height: 1.4em; } -/* 14 20 */ div#navigation a, .title, .metadata-link, .metadata-link a, .metadata-link a span, -div.artwork-relatedworks-tile { - font-size: calc(14px + 8 * (100vw - 320px) / 1600); - line-height: 1.4em; + /* 40 22 */ + .heading_A { + font-size: calc(22px + 18 * (100vw - 320px) / 1600); + line-height: 1.4em; } -/* 10 16 - line height 16 */ div#backend-data-button, div#container-backend-data-button, -.primary-button, .secondary-button, .artwork-button, #home-top-div .primary-button a, -#home-top-div .primary-button a:visited, #home-top-div .secondary-button a, -#home-top-div .secondary-button a:visited, div.browsebycategory-categories a { - font-size: calc(10px + 6 * (100vw - 320px) / 1600); - line-height: 1.4em; - } -/* 18 32 */ .mw-parser-output blockquote p { - font-size: calc(18px + 12 * (100vw - 320px) / 1600); - line-height: 1.4em; + /* 20 25 */ .mw-parser-output h1, .Heading_B, .artwork-title, div.pagetitle, + .mw-parser-output h1, div#header-title { + font-size: calc(20px + 5 * (100vw - 320px) / 1600); + line-height: 1.4em; } -/* 40 22 */ .heading_A { - font-size: calc(22px + 18 * (100vw - 320px) / 1600); - line-height: 1.4em; + /* 18 30 */ h2, .artbase-logo, .Heading_C, .mw-parser-output h2 { + font-size: calc(18px + 12 * (100vw - 320px) / 1600); + line-height: 1.4em; } -/* 20 25 */ .mw-parser-output h1, .Heading_B, .artwork-title, div.pagetitle, -.mw-parser-output h1, div#header-title { - font-size: calc(20px + 5 * (100vw - 320px) / 1600); - line-height: 1.4em; + /* 20 25 */ h3, .Heading_D, .mw-parser-output h3 { + font-size: calc(20px + 5 * (100vw - 320px) / 1600); + line-height: 1.4em; } -/* 18 30 */ h2, .artbase-logo, .Heading_C, .mw-parser-output h2 { - font-size: calc(18px + 12 * (100vw - 320px) / 1600); - line-height: 1.4em; - } -/* 20 25 */ h3, .Heading_D, .mw-parser-output h3 { - font-size: calc(20px + 5 * (100vw - 320px) / 1600); - line-height: 1.4em; - } -/* 14 20 */ .Heading_E { - font-size: calc(14px + 6 * (100vw - 320px) / 1600); - line-height: 1.4em; + /* 14 20 */ .Heading_E { + font-size: calc(14px + 6 * (100vw - 320px) / 1600); + line-height: 1.4em; } } /* - * - * - * - * - * - * - * - * - */ @media screen and (min-width: 1920px) { -body, tbody tr th, .mw-parser-output ul, .mw-parser-output a, .artwork-intro, -.date, div.artwork-relatedworks-date, div#header-keyword-search span, .metadata-link p { - font-size: 18px; + body, tbody tr th, .mw-parser-output ul, .mw-parser-output a, .artwork-intro, + .date, div.artwork-relatedworks-date, div#header-keyword-search span, .metadata-link p { + font-size: 18px; } -div#footer-title-br p, div#footer-title-others p, div#footer-title-contact p, -div#footer-title-socials p, thead tr th, .artwork-nav-label, .label-item, .tns-item p:first-of-type { - font-size: font-size: 18px; + div#footer-title-br p, div#footer-title-others p, div#footer-title-contact p, + div#footer-title-socials p, thead tr th, .artwork-nav-label, .label-item, .tns-item p:first-of-type { + font-size: font-size: 18px; } -div#navigation a, .title, .metadata-link, .metadata-link a, .metadata-link a span, -div.artwork-relatedworks-tile { - font-size: 20px; + div#navigation a, .title, .metadata-link, .metadata-link a, .metadata-link a span, + div.artwork-relatedworks-tile { + font-size: 20px; } -div#footer-socials-links a, a#footer-img-br, a#footer-img-br figcaption, a#footer-img-br figcaption:hover, a#footer-img-br figcaption:visited, a#footer-img-wiki, a#footer-img-wiki figcaption, a#footer-img-wiki figcaption:hover, a#footer-img-wiki figcaption:visited { - font-size: 18px; + div#footer-socials-links a, a#footer-img-br, a#footer-img-br figcaption, a#footer-img-br figcaption:hover, a#footer-img-br figcaption:visited, a#footer-img-wiki, a#footer-img-wiki figcaption, a#footer-img-wiki figcaption:hover, a#footer-img-wiki figcaption:visited { + font-size: 18px; } -div#backend-data-button, div#container-backend-data-button, .primary-button, -.secondary-button, .artwork-button, #home-top-div .primary-button a, -#home-top-div .primary-button a:visited, #home-top-div .secondary-button a, -#home-top-div .secondary-button a:visited, div.browsebycategory-categories a { - font-size: 14px; + div#backend-data-button, div#container-backend-data-button, .primary-button, + .secondary-button, .artwork-button, #home-top-div .primary-button a, + #home-top-div .primary-button a:visited, #home-top-div .secondary-button a, + #home-top-div .secondary-button a:visited, div.browsebycategory-categories a { + font-size: 14px; } -.mw-parser-output blockquote p { - font-size: 32px; + .mw-parser-output blockquote p { + font-size: 32px; } -.heading_A { - font-size: 40px; + .heading_A { + font-size: 40px; } -.mw-parser-output h1, .Heading_B, .artwork-title, div.pagetitle, .mw-parser-output h1, -div#header-title { - font-size: 25px; -} -h2, .artbase-logo, .Heading_C, .mw-parser-output h2 { - font-size: 30px; - } -h3, .Heading_D, .mw-parser-output h3 { - font-size: 25px; - } -.Heading_E { - font-size: 20px; + .mw-parser-output h1, .Heading_B, .artwork-title, div.pagetitle, .mw-parser-output h1, + div#header-title { + font-size: 25px; + } + h2, .artbase-logo, .Heading_C, .mw-parser-output h2 { + font-size: 30px; + } + h3, .Heading_D, .mw-parser-output h3 { + font-size: 25px; + } + .Heading_E { + font-size: 20px; } } /***************** EMERGENCY BUTTON AND MOCKUPS****************/ + div#backend-data-button { font-family: 'Roboto Condensed Bold', sans-serif; -/* font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320))); - line-height: 16px;*/ font-weight: bold; font-stretch: condensed; font-style: normal; @@ -182,7 +181,7 @@ div#container-backend-data-button a{ text-decoration: none; } div#backend-data-button span{ - color: #FFFFFF; + color: #FFFFFF; text-decoration: none; font-family: 'Roboto Condensed', sans-serif; font-weight: bold; @@ -224,10 +223,12 @@ img.artwork-mockuppage{ } } -br{ +br { display: none; } + /************ LAYOUT ************/ + :root { --black: #000000; --blue-blue: #1b42d8; @@ -251,12 +252,9 @@ html { -moz-box-sizing: inherit; box-sizing: inherit; margin: 0 - } - +} body { font-family: 'Roboto Regular', 'Roboto Condensed', sans-serif; -/*font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320))); - line-height: 1.63;*/ font-weight: normal; font-stretch: normal; font-style: normal; @@ -273,6 +271,7 @@ body i { } /*Header*/ + div#header{ width: 100%; background-color: #FFFFFF; @@ -294,7 +293,6 @@ div#header-top{ div#animatedlogo{ display: flex; width: 8.5vw; - /*min-width: 130px;*/ } div#animatedlogo img{ width: 8.5vw; /*auto*/ @@ -305,17 +303,13 @@ div#animatedlogo img{ div#header-title{ font-family: 'Roboto Condensed Bold', sans-serif; font-weight: bold; -/* font-size: 25px; - line-height: 35px;*/ letter-spacing: 1.88px; } div#header-title a:link, div#header-title a:visited { text-decoration: none; color: #000000; } - div#header-keyword-search span { -/* font-size: 20px;*/ font-weight: bold; padding: 2px 10px; } @@ -375,8 +369,6 @@ div#navigation a{ text-decoration: none; font-weight: normal; color: var(--black); -/* font-size: calc(12px + (18 - 12) * ((100vw - 320) / (1600 - 320))); - line-height: 26px;*/ } div#navigation a:hover { text-decoration: underline; @@ -388,51 +380,24 @@ div#navigation a:active { a#link-search{ text-decoration: none; - } - - +} a#nav-heart { display: flex; align-self: baseline; } - a#nav-heart > img { height: 24px; width: 24px; - } - +} a#nav-heart > img { filter: invert(23%) sepia(99%) saturate(2460%) hue-rotate(225deg) brightness(82%) contrast(108%); - } - +} a#nav-heart > img:hover { filter: none; - } - - -/*#home-top-div:after { - content:""; - position: absolute; - z-index: -1; - top: 0; - bottom: 0; - left: 25%; - border-left: 2px solid rgba(233,233,233, 1); - transform: translate(-50%); -} -#home-top-div:before { - content:""; - position: absolute; - z-index: -1; - top: 0; - bottom: 0; - left: 75%; - border-left: 2px solid rgba(233,233,233, 1); - transform: translate(-50%); } -*/ -/*Footer*/ +/* Footer */ + div#footer{ display: flex; flex-direction: row; @@ -466,15 +431,12 @@ div#footer{ #footer-credit, #footer-socials{ padding: 0px 56px 0px 0px; } - div#footer-title-contact { margin-bottom: 20px !important; } - div#footer-title-contact p{ font-size: 18ps; letter-spacing: 0.12em; } - #footer-socials-links { display: flex; flex-direction: column; @@ -485,8 +447,6 @@ div#footer-title-contact p{ 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 - 320px) / (1600 - 320))); - line-height: 1.5;*/ font-weight: normal; font-stretch: condensed; font-style: normal; @@ -500,8 +460,6 @@ a#footer-img-br img { margin-right: auto; padding-top: 15px; display: block; -/* - margin-left: 22px;*/ } a#footer-img-wiki img { width: 75px; @@ -510,7 +468,9 @@ a#footer-img-br img { margin-right: auto; display: block; } -/* Banner Repeater Logo*/ + +/* LOGO Banner Repeater */ + a#footer-img-br, a#footer-img-br figcaption , a#footer-img-br figcaption:hover, a#footer-img-br figcaption:visited, a#footer-img-wiki, a#footer-img-wiki figcaption, a#footer-img-wiki figcaption:hover, a#footer-img-wiki figcaption:visited { font-family: 'Roboto Condensed', sans-serif; @@ -557,8 +517,6 @@ div#footer-socials-links a{ text-decoration: none; color:#FFFFFF; font-family: 'Roboto Condensed', sans-serif; -/* font-size: calc(12px + (18 - 12) * ((100vw - 320px) / (1600 - 320))); - line-height: 28.4px;*/ font-weight: normal; font-stretch: normal; font-style: normal; @@ -571,27 +529,22 @@ div#contactform{ } #contactform span, a.footer-contact { text-decoration: none; -/* color:#FFFFFF;*/ } - div#contactform:hover { color: white; background-color: var(--blue-blue); } - #footer-contact-form { width: 100%; max-width: 365px; } -/*Titles all pages*/ +/* TITLE 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, .mw-parser-output h1{ margin: 60px 8vw 30px 8vw; -/* font-size: 25px; - line-height: 35px;*/ font-family: 'Roboto Condensed Bold', sans-serif; font-weight: bold; text-transform: uppercase; @@ -604,6 +557,7 @@ div.pagetitle, .mw-parser-output h1{ /************ INDEXES ************/ + table, th, td { border-bottom: 1px solid black; border-collapse: collapse; @@ -625,17 +579,12 @@ th { padding: 16px; } thead tr th{ text-transform: uppercase; color:#7f7f7f; -/* font-size: 16px; - letter-spacing: 1.5px;*/ line-height: 24px; font-family: 'Roboto Condensed', sans-serif; font-weight: normal; border-bottom: black 3px solid; } - tbody tr th{ -/* font-size: calc(12px + (18 - 12) * ((100vw - 320px) / (1600 - 320))); - line-height: 26px;*/ font-family: 'Roboto Condensed', sans-serif; font-weight: normal; } @@ -647,8 +596,6 @@ tbody tr th a{ .idnumber { padding: 16px 0px 16px 8vw; width: 10%; -/*min-width: 56px; - max-width: 128px; */ } .label { width: 20%; @@ -657,7 +604,7 @@ tbody tr th a{ font-family: Roboto Condensed Bold, sans-serif; font-weight: bold; color: #000000; - } +} .altaliases { width: 20%; } @@ -672,78 +619,9 @@ tbody tr th a{ background-color: #E9E9E9; } -/* Pagination Numbers */ -.dataTables_paginate { - display: flex; - flex-direction: row; - justify-content: space-between; - align-content: baseline; - margin-left: auto; - margin-right: auto; - padding-top: 42px; - padding-bottom: 52px; - font-family: Roboto Condensed, sans-serif; - font-size: 14px; - line-height: 48px; - font-weight: bold; - font-stretch: condensed; - min-height: 48px; - max-width: 376px; -} - -.dataTables_paginate > span { - display: flex; - flex-direction: row; - justify-content: space-around; - width: 100%; -} - -a.current { - height: 36px; - width: 36px; - border-radius: 6px; - background-color: #1B42D8; - color: white; - display: flex; - align-content: baseline; - margin-top: 6px; - align-items: center; - justify-content: center; - cursor: pointer; -} -.paginate_button { - cursor: pointer; -} -a.paginate_button.previous, a.paginate_button.next{ - display: flex; - flex-direction: row; - font-size: 0; -} -a.paginate_button.previous:before { - display: inline-block; - content: ' '; - background-image: url('Icons/icn_arrow_left.svg'); - background-size: 16px 16px; - height: 16px; - width: 16px; - margin: 16px 16px 0px 0px; -} -a.paginate_button.next:after { - display: inline-block; - content: ' '; - background-image: url('Icons/icn_arrow_right.svg'); - background-size: 16px 16px; - height: 16px; - width: 16px; - margin: 16px 0px 0px 16px; -} - /************ TEXT STYLES************/ + .title, .artwork-relatedworks-tile { - /* width: 200px; - height: 26px; - font-size: 18px; - line-height: 1.44;*/ font-family: Roboto Condensed, sans-serif; font-weight: bold; font-stretch: condensed; @@ -753,8 +631,6 @@ a.paginate_button.next:after { } .date, div.artwork-relatedworks-date { font-family: 'Roboto Regular', 'Roboto Condensed', sans-serif; -/*font-size: 16px; - line-height: 1.63;*/ font-weight: normal; font-stretch: normal; font-style: normal; @@ -768,8 +644,6 @@ 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 - 320px) / (1600 - 320))); - line-height: 16px;*/ font-weight: bold; font-stretch: condensed; font-style: normal; @@ -782,13 +656,10 @@ a.paginate_button.next:after { background-color: var(--blue-blue); border-radius: 6px; } - .secondary-button { max-width: 365px; min-height: 48px; font-family: 'Roboto Condensed Bold', sans-serif; -/* font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320))); - line-height: 16px;*/ font-weight: bold; font-stretch: condensed; font-style: normal; @@ -802,13 +673,10 @@ a.paginate_button.next:after { border: solid 1px var(--blue-blue); border-radius: 6px; } - .artwork-button { width: 76px; height: 24px; font-family: Roboto Condensed, sans-serif; -/* font-size: 16px; - line-height: 1.5;*/ font-weight: normal; font-stretch: condensed; font-style: normal; @@ -818,9 +686,9 @@ a.paginate_button.next:after { cursor: pointer; } -/************ HOME & Browse Archive Layout ************/ +/************ HOME & BROWSE ARCHIVE Layout ************/ -/*Home Top div*/ +/* Home Top Banner */ div#home-top-div{ height: 40vh; /* 661px;*/ @@ -839,27 +707,23 @@ div#home-top-div{ } .heading_A { font-family: Roboto Condensed, sans-serif; -/* font-size: 40px; - line-height: 1.45;*/ font-weight: normal; font-stretch: condensed; font-style: normal; letter-spacing: normal; color: var(--black); margin-top: 2vw; - margin-left: 0vw; /* 150px 8vw */ + margin-left: 0vw; } #home-top-div .heading_A { position: relative; - /*max-width: 634px;*/ - z-index: 1000; /*99*/ + z-index: 1000; grid-column-start: 1; grid-column-end: 11; grid-row-start: 1; grid-row-end: 1; align-self: center; max-width: 800px; - /*margin-top: 6vw;*/ } #home-top-div p { margin-bottom: 0px; @@ -872,8 +736,7 @@ div#home-top-div{ z-index: 99; } #home-top-div #wrapper-vid { - margin: 0vmin 0vw 0px 0px; /*8vmin*/ - /*width: 50%;*/ + margin: 0vmin 0vw 0px 0px; z-index: 99; grid-column-start: 9; grid-column-end: 17; @@ -885,8 +748,6 @@ div#home-top-div{ justify-self: center; } #home-top-div #wrapper-bt{ - /* margin: 36px 26px 0px 0vw; 8vmin*/ - /*width: 50%;*/ z-index: 1000; grid-column-start: 1; grid-column-end: 9; @@ -916,8 +777,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 - 320px) / (1600 - 320))); -*/} +} #home-top-div .primary-button:hover, #home-top-div .primary-button a:hover { color: white; background-color: black; @@ -925,21 +785,17 @@ 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 - 320px) / (1600 - 320))); -*/} - +} #home-top-div .secondary-button:hover, #home-top-div .secondary-button a:hover { color: white; background-color: var(--blue-blue); } - #home-top-div img { position: absolute; width: 100%; z-index: 0; max-width: 400px; left: -360px; - /*left: -600px;*/ padding-right: 60px; padding-left: 60px; animation-name: move; @@ -951,6 +807,7 @@ div#home-top-div{ filter: contrast(40%); opacity: 0.9; } + #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) { } @@ -1015,34 +872,17 @@ div#home-top-div{ @keyframes move { 0% { left: -330px; -/* -webkit-transform: translateX(0vw); - -ms-transform: translateX(0vw); - -moz-transform: translateX(0vw); - transform: translateX(0vw);*/ } 100% { left: 200vw; -/* -webkit-transform: translateX(2600px); - -ms-transform: translateX(2600px); - -moz-transform: translateX(2600px); - transform: translateX(2600px);*/ } } - @-webkit-keyframes move{ 0% { left: -330px; -/* -webkit-transform: translateX(0px); - -ms-transform: translateX(0px); - -moz-transform: translateX(0px); - transform: translateX(0px);*/ } 100% { left: 200vw; -/* -webkit-transform: translateX(1650px); - -ms-transform: translateX(1650px); - -moz-transform: translateX(1650px); - transform: translateX(1650px);*/ } } .scroll-down { @@ -1054,14 +894,14 @@ div#home-top-div{ line-height: normal; letter-spacing: 1.5px; color: var(--blue-blue); - display: none; /*flex*/ - flex-direction: row; - justify-content: right; - width: 96%; - text-align: end; - z-index: 99; - position: absolute; - margin-top: -40px; + display: none; /*flex*/ + flex-direction: row; + justify-content: right; + width: 96%; + text-align: end; + z-index: 99; + position: absolute; + margin-top: -40px; } .scroll-down span { writing-mode: vertical-rl; @@ -1082,21 +922,17 @@ div#home-top-div{ border-left: 1px solid blue; transform: translate(90%); } + + /* ARCHIVE PREVIEW */ -/*.home-recent-items-top a, .browsethearchive-items-top a, .zinesindex-items-top a, .selfpublishedindex-items-top a { - max-height: 450px; -} -*/ + img.home-recent-imgs, img.browsethearchive-imgs, img.selfpublishedindex-imgs, img.zinesindex-imgs { width: 100%; max-height: 450px; object-fit: contain; } - div.home-recent-items, div.browsethearchive-items, div.zinesindex-items, div.selfpublishedindex-items { - /* align-content: start; center; - font-size: 16px; */ font-family: 'Roboto Condensed', sans-serif; margin: 0 auto; display: flex; @@ -1104,28 +940,16 @@ div.home-recent-items, div.browsethearchive-items, div.zinesindex-items, div.sel justify-content: space-between; height: 100%; } - div.home-recent-items a, div.browsethearchive-items a, div.zinesindex-items a, div.selfpublishedindex-items a, .artwork-relatedworks-tile a, .artwork-lists-title a { - /* font-size: 18px; - line-height: 26px; - display: flex; - justify-content: left;*/ font-family: 'Roboto Condensed Bold', sans-serif; color: #000000; text-decoration: none; } - -/*div.home-recent-items span, div.browsethearchive-items span { - display: flex; - justify-content: left; -} -*/ div.home-recent-items-top, div.browsethearchive-items-top, div.selfpublishedindex-items-top, div.zinesindex-items-top { display: flex; flex-direction: column; margin: auto; } - div.home-recent-items-bottom, div.browsethearchive-items-bottom, div.selfpublishedindex-items-bottom, div.zinesindex-items-bottom { display: flex; flex-direction: column; @@ -1133,24 +957,16 @@ div.home-recent-items-bottom, div.browsethearchive-items-bottom, div.selfpublish flex-basis: 100px; justify-content: flex-start; } - -div.browsethearchive-items-bottom, div.selfpublishedindex-items-bottom, div.zinesindex-items-bottom { -/* padding: 20px 0px 0px 0px;*/ -} - div#home-recent-grid, div#browsethearchive-grid, div#selfpublishedindex-grid, div#zinesindex-grid { width: 100%; padding: 0px 8vw 60px 8vw; display: grid; - /*text-align: center;*/ grid-gap: 1rem; } - .browsethearchive-items-bottom a.title:hover, .browsethearchive-items-bottom a.title:hover ~ .date , .home-recent-items-bottom a.title:hover, .home-recent-items-bottom a.title:hover ~ .date { color: var(--blue-blue); } - div.home-show-wrapper{ width: 100%; margin: 0px auto 60px auto; @@ -1159,14 +975,12 @@ div.home-show-wrapper{ align-items: center; justify-content: center; } - div.home-show-wrapper a{ display: flex; align-items: center; justify-content: center; width: 100%; } - div.home-show-wrapper a:hover { color: white; background-color: black; @@ -1193,8 +1007,6 @@ div.home-show-wrapper a:hover { .mw-parser-output h1, .Heading_B { margin-block-end: 1.5em; font-family: 'Roboto Condensed Bold', sans-serif; -/* font-size: calc(22 + (25 - 22) * ((100vw - 320px) / (1600 - 320))); - line-height: 35px;*/ font-weight: bold; font-stretch: condensed; font-style: normal; @@ -1211,8 +1023,6 @@ div.home-show-wrapper a:hover { } .mw-parser-output blockquote p { font-family: 'Roboto Condensed', sans-serif; -/* font-size: calc(20px + (30 - 20) * ((100vw - 320px) / (1600 - 320))); - line-height: 1.56;*/ font-weight: normal; font-stretch: condensed; font-style: normal; @@ -1231,9 +1041,6 @@ div.home-show-wrapper a:hover { .Heading_C, .mw-parser-output h2, h2 { font-family: 'Roboto Condensed', sans-serif; -/* font-size: calc(20px + (30 - 20) * ((100vw - 320px) / (1600 - 320))); - line-height: 40px; - margin: 0px 0px 30px 0px; */ font-weight: normal; font-stretch: condensed; font-style: normal; @@ -1243,8 +1050,6 @@ div.home-show-wrapper a:hover { } .Heading_D, .mw-parser-output h3, h3 { font-family: 'Roboto Condensed', sans-serif; -/* font-size: calc(22px + (25 - 22) * ((100vw - 320px) / (1600 - 320))); - line-height: 35px;*/ font-weight: normal; font-stretch: condensed; font-style: normal; @@ -1254,8 +1059,6 @@ div.home-show-wrapper a:hover { } .Heading_E { font-family: 'Roboto Condensed', sans-serif; -/* font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (1600 - 320))); - line-height: 20px;*/ font-weight: normal; font-stretch: condensed; text-transform: uppercase; @@ -1270,8 +1073,6 @@ div.home-show-wrapper a:hover { } .mw-parser-output ul { font-family: 'Roboto Regular', 'Roboto Condensed', sans-serif; -/* font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320))); - line-height: 1.63;*/ font-weight: normal; font-stretch: normal; font-style: normal; @@ -1288,8 +1089,6 @@ div.home-show-wrapper a:hover { } .mw-parser-output img { font-family: 'Roboto Condensed', sans-serif; -/* font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320))); - line-height: 1.63;*/ text-decoration: none; font-weight: normal; font-stretch: normal; @@ -1299,8 +1098,6 @@ div.home-show-wrapper a:hover { } .mw-parser-output a { font-family: 'Roboto Regular', 'Roboto Condensed', sans-serif; -/* font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320))); - line-height: 1.63;*/ font-weight: normal; font-stretch: normal; font-style: normal; @@ -1344,10 +1141,7 @@ ul#browsethearchive-pagin, ul#zinesindex-pagin, ul#selfpublishedindex-pagin { line-height: 48px; font-weight: bold; font-stretch: condensed; - /*min-height: 48px; - max-width: 376px;*/ } - #browsethearchive-pagin li, #zinesindex-pagin li, #selfpublishedindex-pagin li { display: flex; align-items: center; @@ -1356,7 +1150,6 @@ ul#browsethearchive-pagin, ul#zinesindex-pagin, ul#selfpublishedindex-pagin { height: 36px; border-radius: 6px; } - div#browsethearchive-pagination, div#zinesindex-pagination, div#selfpublishedindex-pagination { width: 100%; background-color: #e9e9e9; @@ -1365,7 +1158,7 @@ div#browsethearchive-pagination, div#zinesindex-pagination, div#selfpublishedind text-align: center; } -/* new pagination*/ +/* PAGINATION */ ul.browsethearchive-pagination { width: 100%; @@ -1383,7 +1176,6 @@ ul.browsethearchive-pagination { padding-left: 8vw; padding-right: 8vw; } - ul.browsethearchive-pagination li { display: flex; justify-content: center; @@ -1393,7 +1185,6 @@ ul.browsethearchive-pagination li { list-style: none; text-align: center; } - ul.browsethearchive-pagination li a, ul.browsethearchive-pagination li a:visited { font-family: Roboto Condensed, sans-serif; font-size: 14px; @@ -1403,13 +1194,11 @@ ul.browsethearchive-pagination li a, ul.browsethearchive-pagination li a:visited text-decoration: none; color: #000; } - ul.browsethearchive-pagination li.prev, ul.browsethearchive-pagination li.next { display: flex; flex-direction: row; font-size: 0; } - ul.browsethearchive-pagination li.prev::before { display: inline-block; content: ' '; @@ -1420,7 +1209,6 @@ ul.browsethearchive-pagination li.prev::before { margin: 16px 16px 0px 0px; cursor: pointer; } - ul.browsethearchive-pagination li.next::after { display: inline-block; content: ' '; @@ -1431,7 +1219,6 @@ ul.browsethearchive-pagination li.next::after { margin: 16px 0px 0px 16px; cursor: pointer; } - ul.browsethearchive-pagination li a.current { height: 36px; width: 36px; @@ -1462,15 +1249,11 @@ div.browsebycategory-categories{ align-items: center; justify-content: center; } - div.browsebycategory-categories a { font-family: 'Roboto Condensed Bold', sans-serif; color: #ffffff; text-decoration: none; -/* font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320))); -*/ } - div.browsebycategory-categories:hover { color: white; background-color: black; @@ -1479,11 +1262,6 @@ div.browsebycategory-categories:hover { /************ SEARCH TOOLS ************/ - -/*********************************************/ -/************ PERSON ************/ -/*******************************************/ - /************ ARTWORK ************/ .artwork-box span { @@ -1493,7 +1271,6 @@ div.browsebycategory-categories:hover { justify-content: center; text-transform: uppercase; } - .artwork-box { font-family: 'Roboto Condensed', sans-serif; font-size: 16px; @@ -1509,22 +1286,16 @@ div.browsebycategory-categories:hover { padding: 6px 10px; max-width: 140px; } - - .artwork-title { margin: 30px 8vw 0px 8vw; -/* font-size: 25px; */ font-family: 'Roboto Condensed Bold', sans-serif; font-weight: bold; text-transform: uppercase; letter-spacing: 1.88px; line-height: 35px; } - .artwork-intro { font-family: 'Roboto Regular', 'Roboto Condensed', sans-serif; -/* font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320))); - line-height: 1.63;*/ font-weight: normal; font-stretch: normal; font-style: normal; @@ -1533,12 +1304,7 @@ div.browsebycategory-categories:hover { margin: 20px 8vw 0px 8vw; min-height: 30px; } - .artwork-nav { -/* display: flex; - flex-direction: row; - width: 100%; - justify-content: space-evenly;*/ width: 100%; display: grid; row-gap: 0rem; @@ -1555,8 +1321,7 @@ div.browsebycategory-categories:hover { .artwork-nav-label, .label-item, .tns-item p:first-of-type { margin: 25px 0 12px 1px; font-family: 'Roboto Condensed', sans-serif; -/* font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320))); -*/ font-weight: normal; + font-weight: normal; font-stretch: condensed; font-style: normal; line-height: normal; @@ -1612,7 +1377,6 @@ div.browsebycategory-categories:hover { margin: 0px 0px 0px 8px; color: #e9e9e9; } - .artwork-nav .active { color: var(--blue-blue); } @@ -1638,11 +1402,6 @@ div.browsebycategory-categories:hover { column-gap: 1rem; grid-template-columns: repeat(10, 1fr); } -/*.artwork-relatedwrapper{ - grid-template-areas: - "title title item1 item1 item1 item2 item2 item2 item3 item3 item3 item4 item4 item4 item5 item5 item5"; -}*/ - .artwork-about, .artwork-lists{ padding: 30px 8vw 60px 8vw; } @@ -1657,7 +1416,6 @@ div.browsebycategory-categories:hover { padding: 30px 8vw 30px 8vw; border-top: solid 3px var(--black); } - .artwork-leftcolumn { grid-column-start: 1; grid-column-end: 8; @@ -1671,20 +1429,16 @@ div.browsebycategory-categories:hover { grid-row-start: 1; grid-row-end: 1; margin: 0 !important; - /*display: grid;*/ } - .artwork-about-img img { width: 100%; } - .artwork-about-bottom{ grid-column-start: 9; grid-column-end: 18; grid-row-start: 2; grid-row-end: 2; } - .artwork-rightcolumn-top, .artwork-rightcolumn-bottom { margin: 0 0 0 0 !important; display: grid; @@ -1699,7 +1453,6 @@ div.browsebycategory-categories:hover { grid-row-start: 1; grid-row-end: 1; } - .artwork-rightcolumn-top-date { grid-column-start: 6; grid-column-end: 12; @@ -1742,11 +1495,6 @@ div.browsebycategory-categories:hover { padding: 20px 0; border-bottom: 0.5px solid var(--brown-grey); } -/*.artwork-rightcolumn-bottom:nth-of-type(2) { - padding: 20px 0 0 0; - border-top: 0.5px solid var(--brown-grey); -}*/ - .artwork-rightcolumn-description + .artwork-rightcolumn-exhibition { grid-column-start: 9; grid-column-end: 18; @@ -1757,7 +1505,6 @@ div.browsebycategory-categories:hover { .artwork-rightcolumn-exhibition, .artwork-rightcolumn-description { display: grid; grid-row-gap: 0rem; - /*column-gap: 1rem;*/ grid-template-columns: repeat(9, 1fr); grid-template-rows: min-content auto; } @@ -1772,7 +1519,6 @@ div.browsebycategory-categories:hover { margin: 0px; padding: 20px 0 0 0; } - .des-exh-section .des { margin-top: 40px; border-top: 3px solid #000; @@ -1782,13 +1528,10 @@ div.browsebycategory-categories:hover { margin: 0px; padding: 20px 0 0 0 !important; } - p.des + p, p.exh + p { padding-top: 10px !important; padding-bottom: 30px !important; } - - .text-description { grid-column-start: 1; grid-column-end: 8; @@ -1819,15 +1562,12 @@ p.des + p, p.exh + p { border-bottom: 1px solid black; } .text-date-author .label-item:nth-of-type(1) { -/* margin-top: 0px;*/ margin: 0 0; } .artwork-lists { padding: 30px 8vw 30px 8vw; } .artwork-copiesincollection { -/* grid-column-start: 2; - grid-column-end: 6;*/ border-right: solid 0.5px var(--black); display: flex; flex-direction: column; @@ -1841,24 +1581,12 @@ p.des + p, p.exh + p { grid-column-start: 1; grid-column-end: 2; grid-row: 1 / span all; - /* writing-mode: sideways-lr; - max-height: 120px; */ text-align: center; align-self: center; writing-mode: vertical-rl; transform: rotate(180deg); max-height: 160px; padding-top: 0; -/* -webkit-transform: rotate(-90deg); - -moz-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - -o-transform: rotate(-90deg); - transform: rotate(-90deg); - -webkit-transform-origin: 50% 50%; - -moz-transform-origin: 50% 50%; - -ms-transform-origin: 50% 50%; - -o-transform-origin: 50% 50%; - transform-origin: 50% 50%;*/ } .artwork-copiesincollection-img-div { max-width: 55px; @@ -1869,8 +1597,6 @@ p.des + p, p.exh + p { } .metadata-link, .metadata-link a, .metadata-link a span { font-family: 'Roboto Condensed Bold', sans-serif; -/* font-size: 18px; - line-height: 1.44;*/ font-weight: bold; font-stretch: condensed; font-style: normal; @@ -1886,11 +1612,9 @@ p.des + p, p.exh + p { letter-spacing: 0.9px; margin-top: 0px; } - .artwork-rightcolumn-top-date p.label-item > .label-item-date-artwork { margin-bottom: 30px; } - .metadata-link:hover, .metadata-link a:hover, .metadata-link a span:hover, .metadata-link p { color: black; text-decoration-color: black; @@ -1908,7 +1632,6 @@ p.des + p, p.exh + p { margin-bottom: 1em; margin-top: 0px !important; } - .artwork-rightcolumn-top-date p.label-item:first-of-type, .artwork-rightcolumn-top-contributors p.label-item:first-of-type { margin-bottom: 1em; margin-top: 0px !important; @@ -1932,31 +1655,6 @@ p.des + p, p.exh + p { padding: 0px; display: initial; } -/*.artwork-relatedworks:nth-of-type(2) { - grid-column-start: 3; - grid-column-end: 6; - margin: 0 !important; -} -.artwork-relatedworks:nth-of-type(3) { - grid-column-start: 6; - grid-column-end: 9; - margin: 0 !important; -} -.artwork-relatedworks:nth-of-type(4) { - grid-column-start: 9; - grid-column-end: 12; - margin: 0 !important; -} -.artwork-relatedworks:nth-of-type(5) { - grid-column-start: 12; - grid-column-end: 15; - margin: 0 !important; -} -.artwork-relatedworks:nth-of-type(6) { - grid-column-start: 15; - grid-column-end: 18; - margin: 0 !important; -}*/ .artwork-relatedworks-tile a:hover, .artwork-relatedworks-tile a:hover ~ .artwork-relatedworks-date, .artwork-lists-title a:hover { color: var(--blue-blue); } @@ -1969,9 +1667,6 @@ img.artwork-relatedworks-imgs, .artwork-lists-img img{ display: flex; align-items: center; } - -.artwork-lists-img {} - .artwork-about-under-img a , .artwork-about-under-img a:visited{ color: #000; text-decoration: none; @@ -1987,12 +1682,12 @@ img.artwork-relatedworks-imgs, .artwork-lists-img img{ align-items: center; display: flex; } - .facsimile > a , .artefact > a, .distri-links div > a { padding: 0 10px 0 0; } -/* LIBRARY CAROUSEL */ +/* LIBRARY IMAGE CAROUSEL */ + .tns-controls { text-align: center; margin-bottom: 10px; } .tns-controls [aria-controls] { display: none; @@ -2019,7 +1714,6 @@ img.artwork-relatedworks-imgs, .artwork-lists-img img{ #tns1-iw { margin: 0px -10px 0px 0px !important; } - .tns-item p:nth-of-type(1) { text-transform: uppercase; margin: 10px 0 0px 0px !important; @@ -2073,7 +1767,6 @@ div#tutorials-intro h3, div#tutorials-intro p { #navigationmobile, #message-mobile { display: none; } - #mobtop{ display: none; } @@ -2095,12 +1788,12 @@ div#tutorials-intro h3, div#tutorials-intro p { padding: 0px 10px; margin-right: 30px; } + /********** NAV **********/ #mobtop{ display: initial; } - #link-search{ padding-right: 26px; text-decoration: none; @@ -2126,7 +1819,6 @@ div#tutorials-intro h3, div#tutorials-intro p { width: 16px; color: var(--blue-blue); } - a.mob-close-icon:after { cursor: pointer; text-decoration: none; @@ -2139,14 +1831,12 @@ div#tutorials-intro h3, div#tutorials-intro p { color: var(--blue-blue); z-index: 99; } - div#header { height: 60px !important; } div#header-top { border-bottom: 0px !important; } - input[type="checkbox"]:checked ~ #navigation-mobile { transform: translateY(0); } @@ -2193,7 +1883,6 @@ div#tutorials-intro h3, div#tutorials-intro p { text-decoration: none; cursor: pointer; } - .navigation-mobile-items div a { color: var(--blue); } @@ -2207,17 +1896,14 @@ div#tutorials-intro h3, div#tutorials-intro p { text-align: center; color: var(--black); } - #nav-support a { } - div#animatedlogo img { width: 8.5vw; min-width: 32px; margin-top: 10px; margin-right: 10px; } - div#header-top div.primary-button { display: none; } @@ -2305,6 +1991,7 @@ div#tutorials-intro h3, div#tutorials-intro p { /********* ARTWORK **********/ + .artwork-relatedwrapper,.artwork-copieswrapper, .artwork-lists { display: none; } .artwork-nav { display: none; } diff --git a/static/js/paginationgrid.js b/static/js/paginationgrid.js new file mode 100644 index 0000000..6a427b6 --- /dev/null +++ b/static/js/paginationgrid.js @@ -0,0 +1,94 @@ +// PAGINATION — BROWSE THE ARCHIVES PAGES — GRID LAYOUT + +// pagination script w/ support from @biberman on stackoverflow - big thanks! + +let startPage; +const pageSize = 24; +const totalSlidePage = 5; +const pageCount = Math.ceil($(".browsethearchive-items").length / pageSize); +const slideRange = Math.floor(totalSlidePage / 2); + +slide = function() { +startPage = $("#pagin li a.current").parent().index(); +let paginationStart = (startPage - slideRange) <= 1 ? 0 : +(startPage >= (pageCount - slideRange) ? (pageCount - totalSlidePage) : +(startPage - slideRange - 1)); + + +$("#pagin li").hide(); +for (let t = paginationStart; t < (paginationStart + totalSlidePage); t++) { + $("#pagin li").eq(t + 1).show(); + } + + next.show(); + prev.show(); + + if (startPage == 1) { + prev.hide(); + } + if (startPage == pageCount ) { + next.hide(); + } +} + +showPage = function() { +console.log(startPage); + $(".browsethearchive-items").hide(); + $(".browsethearchive-items").each(function(n) { + if (n >= pageSize * (startPage - 1) && n < pageSize * startPage) + $(this).show(); + }); +} + +for (let i = 0 ; i < pageCount; i++) { + $("#pagin").append('
  • ' + (i + 1) + '
    • '); + + if (i > pageSize) { + $("#pagin li").eq(i).hide(); + } +} + +let prev = $("
  • ").addClass("prev").html("Prev").click(function() { +let prevLi = $("#pagin li a.current").parent().prev().find("a"); + +if (prevLi[0]) { + $("#pagin li a.current").removeClass("current"); + prevLi.addClass("current"); +} + +slide(); + +if (startPage != 0) { +showPage(); +} +}); + +let next = $("
  • ").addClass("next").html("Next").click(function() { + let nextLi = $("#pagin li a.current").parent().next().find("a"); + + if (nextLi[0]) { + $("#pagin li a.current").removeClass("current"); + nextLi.addClass("current"); + } + + slide(); + + if (startPage <= pageCount) { + showPage(); + } +}); + +$("#pagin").prepend(prev).append(next); + +$("#pagin li a").click(function() { + $('#pagin li a').removeClass('current'); + $(this).addClass('current'); + + slide(); + showPage(); +}); + +$("#pagin li a").eq(0).addClass("current"); + +slide(); +showPage(); diff --git a/static/js/paginationtable.js b/static/js/paginationtable.js new file mode 100644 index 0000000..294526c --- /dev/null +++ b/static/js/paginationtable.js @@ -0,0 +1,94 @@ +// PAGINATION — BROWSE THE ARCHIVES — TABLE LAYOUT + +// pagination script w/ support from @biberman on stackoverflow - big thanks! + +let startPage; +const pageSize = 24; +const totalSlidePage = 5; +const pageCount = Math.ceil($("tr").length / pageSize); +const slideRange = Math.floor(totalSlidePage / 2); + +slide = function() { + startPage = $("#pagin li a.current").parent().index(); + let paginationStart = (startPage - slideRange) <= 1 ? 0 : + (startPage >= (pageCount - slideRange) ? (pageCount - totalSlidePage) : + (startPage - slideRange - 1)); + + $("#pagin li").hide(); + + for (let t = paginationStart; t < (paginationStart + totalSlidePage); t++) { + $("#pagin li").eq(t + 1).show(); + } + + next.show(); + prev.show(); + + if (startPage == 1) { + prev.hide(); + } + if (startPage == pageCount ) { + next.hide(); + } +} + +showPage = function() { + console.log(startPage); + $("tr").hide(); + $("tr").each(function(n) { + if (n >= pageSize * (startPage - 1) && n < pageSize * startPage) + $(this).show(); + }); +} + +for (let i = 0 ; i < pageCount; i++) { + $("#pagin").append('
  • ' + (i + 1) + '
    • '); + + if (i > pageSize) { + $("#pagin li").eq(i).hide(); + } +} + +let prev = $("
  • ").addClass("prev").html("Prev").click(function() { + let prevLi = $("#pagin li a.current").parent().prev().find("a"); + + if (prevLi[0]) { + $("#pagin li a.current").removeClass("current"); + prevLi.addClass("current"); + } + + slide(); + + if (startPage != 0) { + showPage(); + } +}); + +let next = $("
  • ").addClass("next").html("Next").click(function() { + let nextLi = $("#pagin li a.current").parent().next().find("a"); + + if (nextLi[0]) { + $("#pagin li a.current").removeClass("current"); + nextLi.addClass("current"); + } + + slide(); + + if (startPage <= pageCount) { + showPage(); + } +}); + +$("#pagin").prepend(prev).append(next); + +$("#pagin li a").click(function() { + $('#pagin li a').removeClass('current'); + $(this).addClass('current'); + + slide(); + showPage(); +}); + +$("#pagin li a").eq(0).addClass("current"); + +slide(); +showPage(); \ No newline at end of file diff --git a/static/js/scripts.js b/static/js/scripts.js new file mode 100644 index 0000000..9e64837 --- /dev/null +++ b/static/js/scripts.js @@ -0,0 +1,59 @@ +// --> custom scripts + +// MAIN NAVIGATION MENU — MOBILE + +function showMenu(navigationmobile){ + var e = document.getElementById('navigationmobile'); + var element = document.getElementById("mobtop"); + if(e.style.display == 'block') + e.style.display = 'none'; + else + e.style.display = 'block'; + document.querySelector('body').style.overflow = 'hidden'; + element.classList.toggle("mob-close-icon"); +} + +// HOMEPAGE — RECENTLY ADDED ITEMS GRID + + $ShowHideMore = $('#home-recent-grid'); +$ShowHideMore.each(function() { + var $times = $(this).children('.home-recent-items'); + if ($times.length > 13) { + $ShowHideMore.children(':nth-of-type(n+13)').addClass('moreShown').hide(); + $(this).find('span.home-show').addClass('more-times').html('SHOW MORE'); + } +}); + +$(document).on('click', '#home-recent-grid > span', function() { + var that = $(this); + var thisParent = that.closest('#home-recent-grid'); + if (that.hasClass('more-times')) { + thisParent.find('.moreShown').show(); + that.toggleClass('more-times', 'less-times').html('SHOW LESS'); + } else { + thisParent.find('.moreShown').hide(); + that.toggleClass('more-times', 'less-times').html('SHOW MORE'); + } +}); + + +// SLIDER — ARTWORK TEMPLATE + + var slider = tns({ + container: '.my-slider', + items: 1, + responsive: { + 640: { + edgePadding: 20, + gutter: 20, + items: 1 + }, + 700: { + gutter: 30 + }, + 900: { + items: 1 + } + } + }); + \ No newline at end of file diff --git a/templates/artwork.html b/templates/artwork.html index dd32bbe..e7db604 100644 --- a/templates/artwork.html +++ b/templates/artwork.html @@ -473,26 +473,10 @@ + + - + + {% endblock content %} \ No newline at end of file diff --git a/templates/copy.html b/templates/copy.html index 24daa3d..ddf43fd 100644 --- a/templates/copy.html +++ b/templates/copy.html @@ -200,28 +200,11 @@ + - + + {% endblock content %} \ No newline at end of file diff --git a/templates/home.html b/templates/home.html index 21eae2c..5deb67c 100644 --- a/templates/home.html +++ b/templates/home.html @@ -22,14 +22,6 @@ BROWSE THE ARCHIVE FROM A-Z CAROLEE SCHNEEMANN CASE STUDY - @@ -82,7 +74,6 @@ - + + + {% endblock content %} \ No newline at end of file diff --git a/templates/item.html b/templates/item.html index c4d0752..360bb3b 100644 --- a/templates/item.html +++ b/templates/item.html @@ -547,27 +547,10 @@ + + - + {% endblock content %} \ No newline at end of file diff --git a/templates/layout.html b/templates/layout.html index 6cefa7e..179b603 100644 --- a/templates/layout.html +++ b/templates/layout.html @@ -115,29 +115,9 @@ - - + + \ No newline at end of file diff --git a/templates/orderindex.html b/templates/orderindex.html index bfc1863..1e0df22 100644 --- a/templates/orderindex.html +++ b/templates/orderindex.html @@ -42,110 +42,12 @@ - - - - + -{% endblock content %} - + + +{% endblock content %} diff --git a/templates/peopleindex.html b/templates/peopleindex.html index c8a9181..1197ecf 100644 --- a/templates/peopleindex.html +++ b/templates/peopleindex.html @@ -63,109 +63,10 @@ - - - - + - + {% endblock content %} \ No newline at end of file