From a537699fe0fed8e5feb5dd6aac14feddde5d0d99 Mon Sep 17 00:00:00 2001 From: JoBCB Date: Thu, 26 Nov 2020 13:34:04 +0000 Subject: [PATCH] started mobile design layout --- static/css/style.css | 228 ++++++++++++++++++++++++++++++++++-------- templates/home.html | 1 + templates/layout.html | 14 ++- 3 files changed, 200 insertions(+), 43 deletions(-) diff --git a/static/css/style.css b/static/css/style.css index 554a040..e439db6 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -50,7 +50,7 @@ div#footer-title-socials p, thead tr th, .artwork-nav-label, .label-item { font-size: calc(12px + 6 * (100vw - 320px) / 1600); line-height: 16px; } -/* 12 18 line height diff */ div#footer-socials-links a { +/* 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: 28.4px; } @@ -59,11 +59,11 @@ div.artwork-relatedworks-tile { font-size: calc(14px + 8 * (100vw - 320px) / 1600); line-height: 1.44; } -/* 10 14 - line height 16 */ div#backend-data-button, div#container-backend-data-button, +/* 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 + 4 * (100vw - 320px) / 1600); + font-size: calc(10px + 6 * (100vw - 320px) / 1600); line-height: 16px; } /* 18 32 */ .mw-parser-output blockquote p { @@ -108,7 +108,7 @@ div#navigation a, .title, .metadata-link, .metadata-link a, .metadata-link a spa div.artwork-relatedworks-tile { font-size: 20px; } -div#footer-socials-links a { +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, @@ -373,6 +373,7 @@ div#navigation a:active { color: #1b42d8; text-decoration: none; } + #home-top-div:after { content:""; position: absolute; @@ -474,7 +475,7 @@ a#footer-img-br img { 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', sans-serif; - font-size: 16px; + /*font-size: 16px;*/ margin: 0; padding: 0; line-height: 26px; @@ -544,32 +545,6 @@ div#contactform:hover { max-width: 365px; } -@media screen and (min-width:0px) and (max-width: 1000px) { -div#footer{ flex-wrap: wrap; } -.footer-left{ justify-content: space-between;} -.footer-right{ justify-content: space-between; margin: 0px;} -#footer-title-others, #footer-title-contact {text-align: right;} -#footer-contact-form {margin: 30px 0px 0px 0px;} -#footer-credit, #footer-socials{ padding: 0px; } -} -@media screen and (min-width:0px) and (max-width: 768px) { - #footer-title-others {text-align: right;} - #footer-title-contact {text-align: left;} - #footer-socials {width: 100%; } - #footer-socials-links{ - display: flex; - flex-direction: row; - justify-content: space-between; - width: 100%; - } - div#contactform {width: 100%; max-width: none;} - #footer-contact-form { width: 100%; max-width: none;} - .footer-left, .footer-right { width: 100%; } - .footer-right { flex-wrap: wrap; } - #footer-credit, #footer-socials{ padding: 0px; } - #footer-right { margin: 0px; } - #footer-socials, #footer-contact-form {margin: 30px 0px 0px 0px;} -} /*Titles all pages*/ @@ -886,6 +861,11 @@ div#home-top-div{ box-shadow: 1px 1px 5px 3px #00000024; border-radius: 6px; } + #wrapper-vid a { + text-align: center; + width: 100%; + display: inline-grid; + } #home-top-div #wrapper-top-buttons{ display: flex; align-items: center; @@ -1139,16 +1119,6 @@ div.home-show-wrapper a:hover { background-color: black; } -@media (min-width: 768px) { - #home-recent-grid, #browsethearchive-grid, #selfpublishedindex-grid, #zinesindex-grid { grid-template-columns: repeat(2, 1fr); } -} -@media (min-width: 1000px) { - #home-recent-grid, #browsethearchive-grid, #selfpublishedindex-grid, #zinesindex-grid { grid-template-columns: repeat(4, 1fr); } -} -@media (min-width: 1400px) { - #home-recent-grid, #browsethearchive-grid, #selfpublishedindex-grid, #zinesindex-grid { grid-template-columns: repeat(6, 1fr); } -} - /************ ABOUT & TEXT TEMPLATES ************/ @@ -1730,7 +1700,7 @@ div.browsebycategory-categories:hover { margin-top: 0px; margin-bottom: 30px; } -.metadata-link:hover, .metadata-link a:hover, .metadata-link a span:hover { +.metadata-link:hover, .metadata-link a:hover, .metadata-link a span:hover, .metadata-link p { color: black; text-decoration-color: black; } @@ -1828,6 +1798,10 @@ img.artwork-relatedworks-imgs, .artwork-lists-img img{ margin: 0px -10px 0px 0px !important; } +/*.tns-item img { + width: inherit; +}*/ + /*************************************/ /************ WIKI PAGES ************/ /***********************************/ @@ -1845,4 +1819,174 @@ div#tutorials-intro h3, div#tutorials-intro p { margin: auto; } +/************ Disactive Mobile ************/ + +#navigation-mobile { + display: none; +} + + +/********************************** RESPONSIVE DESIGN *********************************/ + + +/***************** MOBILE ****************/ +@media (min-width: 320px) { + #home-recent-grid, #browsethearchive-grid, #selfpublishedindex-grid, #zinesindex-grid { grid-template-columns: repeat(2, 1fr); } + +} + +@media screen and (min-width:0px) and (max-width: 768px) { + +/********** NAV + + #navigation { + display: none !important; + } + div#header { + height: 60px !important; + } + div#header-top { + border-bottom: 0px !important; + } + #navigation-mobile { + display: block; + position: fixed; + top: 60px; + left: 0; + width: 100%; + z-index: 10000; + height: 100%; + background-color: rgba(255, 255, 255, 0.96); + overflow-y: hidden; + } + .navigation-mobile-items{ + margin: 100px 0px 0px 0px; + display: flex; + flex-direction: column; + align-items: center; + } + .navigation-mobile-items div a{ + font-family: Roboto Condensed; + font-size: 24px; + font-weight: normal; + font-stretch: condensed; + font-style: normal; + line-height: 1.58; + letter-spacing: 1.33px; + text-align: center; + color: var(--black); + text-decoration: none; + margin: 30px 0px; + } + + .navigation-mobile-items div a { + color: var(--blue); + } + .navigation-mobile-items #nav-login{ + margin: 100px 0px 0px 0px; + } + .navigation-mobile-items #nav-login a{ + font-size: 16px; + line-height: 2.38; + letter-spacing: 0.89px; + text-align: center; + color: var(--black); + } + +**********/ + +/********** MAIN **********/ + + #home-top-div > img , #wrapper-bt { + display: none; + } + div#home-top-div { + height: 50vh; + } + + #home-top-div #wrapper-vid { + margin-bottom: 5vw; + } + + #home-top-div .heading_A { + grid-column-start: 1; + grid-column-end: 19; + max-width: none; + margin-top: 3vw; + } + + #home-top-div #wrapper-vid { + grid-column-start: 1; + grid-column-end: 19; + grid-row-start: 1; + grid-row-end: 3; + margin-bottom: 2vw; + } + + div#footer { + display: flex; + flex-direction: column; + flex-wrap: wrap; + } + + #footer-title-others {text-align: right;} + #footer-title-contact {text-align: left;} + #footer-socials {width: 100%; } + #footer-socials-links{ + display: flex; + flex-direction: row; + justify-content: space-between; + width: 100%; + } + + a#footer-img-wiki { + padding-left: 20px; + } + + div#contactform {width: 100%; max-width: none;} + #footer-contact-form { width: 100%; max-width: none;} + .footer-left, .footer-right { width: 100%; justify-content: space-between;} + .footer-right { flex-wrap: wrap; margin: 0px;} + #footer-credit, #footer-socials{ padding: 0px; } + #footer-right { margin: 0px; } + #footer-socials, #footer-contact-form {margin: 30px 0px 0px 0px;} + + +/********** ABOUT **********/ + +.mw-parser-output blockquote, .mw-parser-output blockquote + p { + grid-column-start: 1; + grid-column-end: 19; +} + +.mw-parser-output p, .mw-parser-output ul, .mw-parser-output h2, .mw-parser-output h3 { + grid-column-start: 1; + grid-column-end: 19; +} + +} +/********* ARTWORK **********/ + + +/***************** LAPTOP MEDIUM ****************/ + +@media screen and (min-width: 769px) and (max-width: 1000px) { + div#footer{ flex-wrap: wrap; } + .footer-left{ justify-content: space-between;} + .footer-right{ justify-content: space-between; margin: 0px;} + #footer-title-others, #footer-title-contact {text-align: right;} + #footer-contact-form {margin: 30px 0px 0px 0px;} + #footer-credit, #footer-socials{ padding: 0px; } +} + + +@media (min-width: 1000px) { + #home-recent-grid, #browsethearchive-grid, #selfpublishedindex-grid, #zinesindex-grid { grid-template-columns: repeat(4, 1fr); } +} + +/***************** LAPTOP BIG ****************/ + +@media (min-width: 1400px) { + #home-recent-grid, #browsethearchive-grid, #selfpublishedindex-grid, #zinesindex-grid { grid-template-columns: repeat(6, 1fr); } +} diff --git a/templates/home.html b/templates/home.html index 4f83e4b..a0ef0ce 100644 --- a/templates/home.html +++ b/templates/home.html @@ -34,6 +34,7 @@ + Explore Data Visualization diff --git a/templates/layout.html b/templates/layout.html index c1d2fcd..9c66e04 100644 --- a/templates/layout.html +++ b/templates/layout.html @@ -10,6 +10,19 @@ + + + - {% block content %} {% endblock content %}