diff --git a/static/css/Icons/icn-external-link.svg b/static/css/Icons/icn-external-link.svg
new file mode 100644
index 0000000..52235e9
--- /dev/null
+++ b/static/css/Icons/icn-external-link.svg
@@ -0,0 +1,11 @@
+
diff --git a/static/css/style.css b/static/css/style.css
index e7cbf74..f8c571e 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -16,7 +16,7 @@ font-style: normal;
}
-@font-face {
+/*@font-face {
font-family: 'Roboto';
src: url('webfonts/Roboto_Regular/Roboto-Regular.ttf') format('truetype');
font-weight: normal;
@@ -29,7 +29,7 @@ src: url('webfonts/Roboto_Regular/Roboto-Italic.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
-
+*/
/*new import font*/
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@@ -70,8 +70,8 @@ div.artwork-relatedworks-tile {
font-size: calc(18px + 12 * (100vw - 320px) / 1600);
line-height: 1.56;
}
-/* 40 */ .heading_A {
- font-size: 40px;
+/* 40 22 */ .heading_A {
+ font-size: calc(22px + 18 * (100vw - 320px) / 1600);
line-height: 1.45;
}
/* 20 25 */ .mw-parser-output h1, .Heading_B, .artwork-title, div.pagetitle,
@@ -185,16 +185,19 @@ img.artwork-mockuppage{
.web-dev-placeholder{
color: var(--blue-blue);
background-color: #ffff00;
- font-family: 'Roboto Condensed', sans-serif;
- font-size: calc(10px + 4 * (100vw - 320px) / 1600);
+ font-family: 'Roboto Condensed Bold', sans-serif;
+ font-size: calc(12px + 8 * (100vw - 320px) / 1600);
line-height: 1.44;
letter-spacing: 0.9px;
font-weight: bold;
text-transform: uppercase;
padding: 0px 20px;
}
+.web-dev-placeholder p {
+ margin: 12px;
+}
.soon {
- padding: 55px 80px;
+ margin: 55px 80px;
width: 100%;
}
.soon + #footer {
@@ -202,6 +205,10 @@ img.artwork-mockuppage{
bottom: 0;
left: 0;
}
+.soon-nofix {
+ margin: 80px 80px;
+ width: 100%;
+}
/************ LAYOUT ************/
:root {
--black: #000000;
@@ -268,7 +275,7 @@ div#animatedlogo{
display: flex;
}
div#animatedlogo img{
- width: auto;
+ width: 8vw; /*auto*/
max-height: 130px;
justify-self: center;
}
@@ -313,7 +320,7 @@ div#header-top div#header-keyword-search:after {
div#header-top, div#navigation{
width: 100%;
height: 67px;
- padding-right: 80px;
+ padding-right: 8vw;
}
div#navigation{
display: flex;
@@ -340,7 +347,6 @@ div#navigation{
#nav-right div:last-child {
padding-right: 0px;
}
-
div#navigation a{
font-family: 'Roboto Condensed', sans-serif;
text-decoration: none;
@@ -349,15 +355,41 @@ div#navigation a{
/* font-size: calc(12px + (18 - 12) * ((100vw - 320) / (1600 - 320)));
line-height: 26px;*/
}
-
div#navigation a:hover {
text-decoration: underline;
}
-
div#navigation a:active {
color: #1b42d8;
text-decoration: 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%);
+}
+div#home-top-div {
+/* margin: 10px auto;
+ width: 60%;
+ height: 100px;
+ border: 1px solid #333;
+ position:relative;
+ text-align:center*/
+}
/*Footer*/
div#footer{
@@ -366,7 +398,7 @@ div#footer{
flex-wrap: nowrap;
justify-content: space-between;
align-items: baseline;
- padding: 55px 80px;
+ padding: 55px 8vw;
width: 100%;
bottom: 0;
background-color: black;
@@ -507,7 +539,7 @@ div#footer{ flex-wrap: wrap; }
/*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 80px 30px 80px;
+ margin: 60px 8vw 30px 8vw;
/* font-size: 25px;
line-height: 35px;*/
font-family: 'Roboto Condensed Bold', sans-serif;
@@ -534,10 +566,10 @@ table, th, td {
#artistsindex-table_wrapper, #publishersindex-table_wrapper, #selfpublishedindex-table_wrapper, #zinesindex-table_wrapper {background-color: #E9E9E9;}
table {background-color: #fdfdfd}
-thead tr th:first-child { padding: 0px 0px 0px 80px }
-thead tr th:last-child { padding: 0px 80px 0px 0px }
+thead tr th:first-child { padding: 0px 0px 0px 8vw }
+thead tr th:last-child { padding: 0px 8vw 0px 0px }
-tr { padding: 10px 80px 10px 80px; }
+tr { padding: 10px 8vw 10px 8vw; }
th { padding: 16px; }
thead tr th{
@@ -563,7 +595,7 @@ tbody tr th a{
color: #000000;
}
.idnumber {
- padding: 16px 0px 16px 80px;
+ padding: 16px 0px 16px 8vw;
min-width: 56px;
max-width: 128px; /*56px * 2 + 16*/
}
@@ -579,7 +611,7 @@ tbody tr th a{
max-width: 272px;/*56px * 4 + 16 * 3*/
}
.description {
- padding: 16px 80px 16px 0px;
+ padding: 16px 8vw 16px 0px;
min-width: 128px;
max-width: 560px;/*56px * 8 + 16 * 7*/
}
@@ -741,7 +773,7 @@ a.paginate_button.next:after {
/*Home Top div*/
div#home-top-div{
- height: 75vh; /* 661px;*/
+ height: 60vh; /* 661px;*/
width: 100%;
overflow: hidden;
position: relative;
@@ -757,8 +789,8 @@ div#home-top-div{
font-style: normal;
letter-spacing: normal;
color: var(--black);
- margin-left: 150px;
- margin-bottom: 26px;
+ margin-top: 8vw;
+ margin-left: 8vw; /* 150px */
}
#home-top-div .heading_A {
position: relative;
@@ -776,15 +808,14 @@ div#home-top-div{
z-index: 99;
}
#home-top-div #wrapper-vid {
- margin: 0px 150px 0px 0px;
+ margin: 4vmin 8vw 0px 0px; /*8vmin*/
width: 50%;
}
#home-top-div #wrapper-bt{
- margin: 36px 26px 0px 150px;
+ margin: 36px 26px 0px 8vw;
width: 50%;
}
#home-top-div #wrapper-vid video {
- max-width: 600px;
width: 100%;
height: auto;
position: relative;
@@ -830,9 +861,9 @@ div#home-top-div{
animation-fill-mode: forwards;
animation-direction: normal;
animation-timing-function: linear; /* or ease*/
- opacity: 0.4; /* 0.3 */
+ 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) { }
@@ -923,7 +954,43 @@ div#home-top-div{
transform: translateX(1650px);
}
}
-
+.scroll-down {
+ font-family: Roboto Condensed Bold;
+ font-size: 14px;
+ font-weight: bold;
+ font-stretch: condensed;
+ font-style: normal;
+ line-height: normal;
+ letter-spacing: 1.5px;
+ color: var(--blue-blue);
+ display: 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;
+ transform: rotate(180deg);
+ text-align: end;
+ margin-top: -100px;
+ line-height: 0px;
+ line-height: 0px;
+ padding: 0px;
+ height: 160px;
+}
+.scroll-down:before {
+ content:"";
+ position: absolute;
+ z-index: -1;
+ top: 0;
+ bottom: 0;
+ border-left: 1px solid blue;
+ transform: translate(90%);
+}
/* ARCHIVE PREVIEW */
img.home-recent-imgs, img.browsethearchive-imgs, img.selfpublishedindex-imgs, img.zinesindex-imgs {
@@ -976,7 +1043,7 @@ div.browsethearchive-items-bottom, div.selfpublishedindex-items-bottom, div.zin
div#home-recent-grid, div#browsethearchive-grid, div#selfpublishedindex-grid, div#zinesindex-grid {
width: 100%;
- padding: 0px 80px;
+ padding: 0px 8vw 60px 8vw;
display: grid;
/*text-align: center;*/
grid-gap: 1rem;
@@ -1016,7 +1083,7 @@ div.home-show-wrapper a:hover {
.mw-parser-output {
width: 100%;
- padding: 0px 80px 60px 80px;
+ padding: 0px 8vw 60px 8vw;
display: grid;
row-gap: 0rem;
column-gap: 1rem;
@@ -1030,6 +1097,7 @@ div.home-show-wrapper a:hover {
margin: 60px 0px 30px 0px;
}
.mw-parser-output h1, .Heading_B {
+ margin-block-end: 1.5em;
font-family: Roboto Condensed Bold;
/* font-size: calc(22 + (25 - 22) * ((100vw - 320px) / (1600 - 320)));
line-height: 35px;*/
@@ -1172,8 +1240,8 @@ ul#browsethearchive-pagin, ul#zinesindex-pagin, ul#selfpublishedindex-pagin {
margin-right: auto;
padding-top: 42px;
padding-bottom: 52px;
- padding-left: 80px;
- padding-right: 80px;
+ padding-left: 8vw;
+ padding-right: 8vw;
font-family: Roboto Condensed;
font-size: 14px;
line-height: 48px;
@@ -1204,7 +1272,7 @@ div#browsethearchive-pagination, div#zinesindex-pagination, div#selfpublishedind
/************ BROWSE BY CATEGORY ************/
div#browsebycategory-listcategories{
- margin: 0px 80px 60px 80px;
+ margin: 0px 8vw 60px 8vw;
}
div.browsebycategory-categories{
margin: 22px 0px;
@@ -1259,14 +1327,14 @@ div.browsebycategory-categories:hover {
text-align: center;
color: var(--black);
border: solid 1px var(--black);
- margin: 30px 80px 0px 80px;
+ margin: 30px 8vw 0px 8vw;
padding: 6px 10px;
max-width: 96px;
}
.artwork-title {
- margin: 20px 80px 30px 80px;
+ margin: 20px 8vw 30px 8vw;
/* font-size: 25px; */
font-family: 'Roboto Condensed Bold', sans-serif;
font-weight: bold;
@@ -1284,7 +1352,7 @@ div.browsebycategory-categories:hover {
font-style: normal;
letter-spacing: normal;
color: var(--black);
- margin: 20px 80px 30px 80px;
+ margin: 20px 8vw 30px 8vw;
}
.artwork-nav {
@@ -1307,14 +1375,28 @@ div.browsebycategory-categories:hover {
color: var(--brown-grey);
}
+.artwork-nav-label .det-record:after {
+ display: inline-block;
+ content: ' ';
+ background-image: url('Icons/icn-external-link.svg');
+ background-size: 16px 16px;
+ height: 16px;
+ width: 16px;
+ margin: 0px 0px 0px 8px;
+ color: #e9e9e9;
+}
+
.artwork-nav .active {
color: var(--blue-blue);
}
-.artwork-nav-label a, .artwork-nav-label a:visited{
+.artwork-nav-label div, .artwork-nav-label a, .artwork-nav-label a:visited{
text-decoration: none;
color: var(--brown-grey);
}
-
+.artwork-nav-label div:hover, .artwork-nav-label a:hover {
+ color: var(--blue-blue);
+ cursor: pointer;
+}
.artwork-about, .artwork-copieswrapper, .artwork-relatedwrapper {
width: 100%;
display: grid;
@@ -1327,18 +1409,22 @@ div.browsebycategory-categories:hover {
"title title item1 item1 item1 item2 item2 item2 item3 item3 item3 item4 item4 item4 item5 item5 item5";
}*/
.artwork-about{
- padding: 30px 80px 60px 80px;
+ padding: 30px 8vw 60px 8vw;
}
-.artwork-copieswrapper, .artwork-relatedwrapper {
+.artwork-copieswrapper {
border-top: solid 3px var(--black);
- padding: 30px 80px 30px 80px;
+ border-bottom: solid 3px var(--black);
+ padding: 30px 8vw 30px 8vw;
+}
+.artwork-relatedwrapper {
+ padding: 30px 8vw 30px 8vw;
}
.artwork-leftcolumn {
grid-column-start: 1;
grid-column-end: 8;
grid-row-start: 1;
- grid-row-end: 1;
+ grid-row-end: 3;
margin: 0 !important;
}
.artwork-rightcolumn {
@@ -1369,7 +1455,7 @@ div.browsebycategory-categories:hover {
}
.artwork-rightcolumn-top-date {
- grid-column-start: 15;
+ grid-column-start: 14;
grid-column-end: 18;
grid-row-start: 1;
grid-row-end: 1;
@@ -1397,12 +1483,23 @@ div.browsebycategory-categories:hover {
.artwork-relatedwrapper .Heading_C , .artwork-copieswrapper .Heading_C {
grid-column-start: 1;
grid-column-end: 3;
- writing-mode: sideways-lr;
- margin-top: auto;
- margin-bottom: auto;
- max-height: 120px;
+ /* writing-mode: sideways-lr;
+ max-height: 120px; */
text-align: center;
align-self: center;
+ writing-mode: vertical-rl;
+ transform: rotate(180deg);
+ max-height: 120px;
+/* -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;
@@ -1420,6 +1517,7 @@ div.browsebycategory-categories:hover {
font-style: normal;
letter-spacing: 0.9px;
color: var(--blue-blue);
+ text-decoration-color:var(--blue-blue);
}
.label-item-date-artwork{
font-family: Roboto Condensed Bold;
@@ -1430,8 +1528,9 @@ div.browsebycategory-categories:hover {
margin-top: 0px;
margin-bottom: 30px;
}
-.metadata-link, .metadata-link a, .metadata-link a span:hover {
+.metadata-link:hover, .metadata-link a:hover, .metadata-link a span:hover {
color: black;
+ text-decoration-color: black;
}
.metadata-link p {
font-family: Roboto;
@@ -1443,7 +1542,7 @@ div.browsebycategory-categories:hover {
}
.artwork-rightcolumn-top-contributors p.label-item, .artwork-rightcolumn-top-date p.label-item,
.artwork-rightcolumn-top-contributors .metadata-link, .artwork-rightcolumn-top-date .metadata-link {
- margin-bottom: 30px;
+ margin-bottom: 1em;
margin-top: 0px !important;
}
.artwork-about-bottom .mw-parser-output, .artwork-about-bottom div.label-item, .artwork-about-bottom div.mw-parser-output {
diff --git a/templates/artwork.html b/templates/artwork.html
index 802588c..4ed08ce 100644
--- a/templates/artwork.html
+++ b/templates/artwork.html
@@ -29,7 +29,7 @@
ABOUT THIS WORK
RELATIONSHIPS
LISTS
-
+
diff --git a/templates/browsebycategory.html b/templates/browsebycategory.html
index 3686eea..baff94b 100644
--- a/templates/browsebycategory.html
+++ b/templates/browsebycategory.html
@@ -9,7 +9,8 @@
-More categories coming soon...
+More categories coming soon...
+
{% endblock content %}
\ No newline at end of file
diff --git a/templates/home.html b/templates/home.html
index ece4e33..3f8151e 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -37,9 +37,9 @@
-
+Scroll Down