diff --git a/static/css/style.css b/static/css/style.css index e6da0cf..f3a9810 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -106,44 +106,54 @@ div#header{ background-color: #FFFFFF; height: 134px; border-bottom: 3px solid #000; + display: flex; + width: 100%; +/* display: grid;*/ } div#header-top{ - display: grid; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +/* display: grid; grid-template-columns: 5% 67.5% 27.5%; grid-template-rows: 100%; grid-column-gap: 0px; grid-row-gap: 0px; align-items: center; +*/ border-bottom: 1px solid #000; } - +#title-nav{ + width: 100%; +} div#animatedlogo{ - grid-area: 1 / 1 / 2 / 2; + display: flex; +/* grid-area: 1 / 1 / 2 / 2;*/ } div#animatedlogo img{ - height: 43px; + width: auto; + max-height: 130px; justify-self: center; } div#header-title{ - grid-area: 1 / 2 / 2 / 3; +/* grid-area: 1 / 2 / 2 / 3;*/ font-family: 'Roboto Condensed', sans-serif; font-weight: bold; - font-size: 18px; + font-size: 25px; } div#header-title a:link, div#header-title a:visited { text-decoration: none; color: #000000; } div#header-keyword-search{ - grid-area: 1 / 3 / 2 / 4; +/* grid-area: 1 / 3 / 2 / 4;*/ } - div#header-keyword-search span { font-size: 20px; font-weight: bold; padding: 2px 10px; } - div#header-top div#header-keyword-search input[type=text]{ background-color: #e9e9e9; color: #7f7f7f; @@ -156,33 +166,75 @@ div#header-top div#header-keyword-search input[type=text]{ border: none; padding: 2px 2px 2px 12px; } - +div#header-top div#header-keyword-search:after { + display: inline-block; + content: ' '; + background-image: url('Icons/icn_search.svg'); + background-size: 16px 16px; + height: 16px; + width: 16px; + margin: 0px 16px 0px -32px; +} div#header-top, div#navigation{ width: 100%; height: 67px; + padding-right: 80px; } - div#navigation{ - display: grid; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; +/* display: grid; grid-template-columns: 8% repeat(2, 12%) 1fr repeat(2, 10%) 12.5%; grid-template-rows: 100%; grid-column-gap: 0px; grid-row-gap: 0px; padding-left: 5%; align-items: center; - +*/ + font-family: Roboto; + font-size: 18px; + font-weight: normal; + font-stretch: condensed; + font-style: normal; + line-height: 1.44; + letter-spacing: normal; + color: var(--black); +} +#nav-left { + display: flex; + flex-direction: row; +} +#nav-right { + display: flex; + flex-direction: row; +} +#nav-left div, #nav-right div { + padding: 0px 16px; } +#nav-left div:first-child, #nav-right div:first-child{ + padding-left: 0px; +} +#nav-right div:last-child { + padding-right: 0px; +} + div#navigation a{ font-family: 'Roboto Condensed', sans-serif; text-decoration: none; + font-weight: normal; color: black; font-size: 18px; line-height: 26px; height: 67px; - } -div#nav-about { +div#navigation a:hover { + color: #1b42d8; +} +/*div#nav-about { grid-area: 1 / 1 / 2 / 2; } div#nav-browse-archive { grid-area: 1 / 2 / 2 / 3; } @@ -196,7 +248,7 @@ div#nav-upload { grid-area: 1 / 6 / 2 / 7; justify-self: center; color: lightgrey;} div#nav-login { grid-area: 1 / 7 / 2 / 8; } - +*/ /*Footer*/ div#footer{ @@ -212,7 +264,6 @@ div#footer{ grid-column-gap: 0px; grid-row-gap: 0px; } - div#footer-title-br{ grid-area: 1 / 1 / 2 / 2; padding-left: 30%; @@ -223,11 +274,9 @@ div#footer-title-others{ div#footer-title-socials{ grid-area: 1 / 3 / 2 / 4; } - div#footer-title-contact{ grid-area: 1 / 4 / 2 / 5; } - 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; @@ -239,7 +288,6 @@ div#footer-title-br p, div#footer-title-others p, div#footer-title-contact p, di letter-spacing: 1.5px; color: var(--brown-grey); } - div#footer-img-br{ grid-area: 2 / 1 / 3 / 2; padding-left: 30%; @@ -302,9 +350,6 @@ div#footer-contact a{ color: #FFFFFF; font-weight: bold; } - - - div#footer div#footer-top div#footer-top-left, div#footer div#footer-top div#footer-top-right{ display: inline-flex; @@ -321,15 +366,11 @@ div#footer div#footer-right{ float: right; /*position: absolute;*/ } - - div#footer div#footer-left div, div#footer div#footer-right div{ display: inline-block; border:cyan 1px solid; } - - input#newslettersubs{ background-color: #000000; color:#FFFFFF; @@ -443,10 +484,10 @@ a.current { border-radius: 6px; background-color: #1B42D8; display: flex; - justify-content: center; align-content: baseline; - line-height: 36px; margin-top: 6px; + align-items: center; + justify-content: center; cursor: pointer; } .paginate_button{ @@ -477,8 +518,8 @@ a.paginate_button.next:after { /************ TEXT STYLES************/ .title { - width: 200px; - height: 26px; + /* width: 200px; + height: 26px;*/ font-family: Roboto Condensed; font-size: 18px; font-weight: bold; @@ -546,20 +587,20 @@ a.paginate_button.next:after { cursor: pointer; } -/************ HOME ************/ +/************ HOME & Browse Archive Layout ************/ -/*Top div*/ +/*Home Top div*/ div#home-top-div{ height: 661px; border:blue solid 1px; } -img.home-recent-imgs{ +img.home-recent-imgs, img.browsethearchive-imgs{ width: 100%; } -div.home-recent-items{ +div.home-recent-items, div.browsethearchive-items{ padding:10px; font-size: 16px; font-family: 'Roboto Condensed', sans-serif; @@ -571,7 +612,7 @@ div.home-recent-items{ height: 100%; } -div.home-recent-items a{ +div.home-recent-items a, div.browsethearchive-items a { font-size: 18px; line-height: 26px; font-family: 'Roboto Condensed Bold', sans-serif; @@ -579,13 +620,13 @@ div.home-recent-items a{ text-decoration: none; } -div.home-recent-items-top{ +div.home-recent-items-top, div.browsethearchive-items-top { display: flex; flex-direction: column; margin: auto; } -div.home-recent-items-bottom{ +div.home-recent-items-bottom, div.browsethearchive-items-bottom { display: flex; flex-direction: column; flex-shrink: 0; @@ -593,7 +634,7 @@ div.home-recent-items-bottom{ justify-content: flex-start; } -div#home-recent-grid{ +div#home-recent-grid, div#browsethearchive-grid{ width: 100%; padding: 0px 80px; display: grid; @@ -624,20 +665,37 @@ span.home-show{ } @media (min-width: 600px) { - #home-recent-grid { grid-template-columns: repeat(2, 1fr); } + #home-recent-grid, #browsethearchive-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { - #home-recent-grid { grid-template-columns: repeat(4, 1fr); } + #home-recent-grid, #browsethearchive-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1400px) { - #home-recent-grid { grid-template-columns: repeat(6, 1fr); - } + #home-recent-grid, #browsethearchive-grid { grid-template-columns: repeat(6, 1fr); } +} + + +/*@media (min-width: 300px) { + #browsethearchive-grid { grid-template-columns: repeat(2, 1fr); } +} + +@media (min-width: 700px) { + #browsethearchive-grid { grid-template-columns: repeat(2, 1fr); } +} + +@media (min-width: 1200px) { + #browsethearchive-grid { grid-template-columns: repeat(4, 1fr); } +} + +@media (min-width: 1600px) { + #browsethearchive-grid { grid-template-columns: repeat(6, 1fr); } } +*/ -/************ BROWSE THE ARCHIVE ************/ +/************ BROWSE THE ARCHIVE Pagination ************/ -img.browsethearchive-imgs{ +/*img.browsethearchive-imgs{ width: 200px; } @@ -662,9 +720,8 @@ div#browsethearchive-grid{ margin: 0 auto 60px auto; display: grid; grid-gap: 2rem; - /*border: 1px solid blue;*/ text-align: center; -} +}*/ .current { background-color: #1b42d8; @@ -703,23 +760,6 @@ height: 139px; text-align: center; } -@media (min-width: 300px) { - #browsethearchive-grid { grid-template-columns: repeat(2, 1fr); } -} - -@media (min-width: 700px) { - #browsethearchive-grid { grid-template-columns: repeat(2, 1fr); } -} - -@media (min-width: 1200px) { - #browsethearchive-grid { grid-template-columns: repeat(4, 1fr); } -} - -@media (min-width: 1600px) { - #browsethearchive-grid { grid-template-columns: repeat(6, 1fr); } -} - - /************ BROWSE BY CATEGORY ************/ diff --git a/templates/browsethearchive.html b/templates/browsethearchive.html index 87787b9..bfb7d50 100644 --- a/templates/browsethearchive.html +++ b/templates/browsethearchive.html @@ -7,7 +7,8 @@
{% for x in results['results']['bindings']%} -
+
+
{% if "image" in x %} @@ -17,13 +18,20 @@
{% endif %} - - {{ x["workLabel"]["value"]}} -
- {% if "date" in x %} - {{ x["date"]["value"] | replace("T00:00:00Z", "") }}
+
+ +
+ + {{ x["workLabel"]["value"]}} +
+ + {% if "date" in x %} + {{ x["date"]["value"] | replace("T00:00:00Z", "") }} + + + {% endif %} +
- {% endif %}
{% endfor %} diff --git a/templates/home.html b/templates/home.html index 1bcb6e1..c180164 100644 --- a/templates/home.html +++ b/templates/home.html @@ -1,9 +1,8 @@ {% extends "layout.html" %} {% block content %} -
- -
+
+
RECENTLY ADDED WORKS
@@ -24,12 +23,13 @@
- - {{ x["workLabel"]["value"]}} -
- - {% if "date" in x %} - {{ x["date"]["value"] | replace("T00:00:00Z", "") }} + + {{ x["workLabel"]["value"]}} +
+ + {% if "date" in x %} + {{ x["date"]["value"] | replace("T00:00:00Z", "") }} + {% endif %}
diff --git a/templates/layout.html b/templates/layout.html index b58c47b..949465c 100644 --- a/templates/layout.html +++ b/templates/layout.html @@ -12,30 +12,33 @@