Browse Source

started mobile design layout

master
JoBCB 4 years ago
parent
commit
a537699fe0
  1. 228
      static/css/style.css
  2. 1
      templates/home.html
  3. 14
      templates/layout.html

228
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); font-size: calc(12px + 6 * (100vw - 320px) / 1600);
line-height: 16px; 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); font-size: calc(12px + 6 * (100vw - 320px) / 1600);
line-height: 28.4px; line-height: 28.4px;
} }
@ -59,11 +59,11 @@ div.artwork-relatedworks-tile {
font-size: calc(14px + 8 * (100vw - 320px) / 1600); font-size: calc(14px + 8 * (100vw - 320px) / 1600);
line-height: 1.44; 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, .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 .primary-button a:visited, #home-top-div .secondary-button a,
#home-top-div .secondary-button a:visited, div.browsebycategory-categories 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; line-height: 16px;
} }
/* 18 32 */ .mw-parser-output blockquote p { /* 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 { div.artwork-relatedworks-tile {
font-size: 20px; 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; font-size: 18px;
} }
div#backend-data-button, div#container-backend-data-button, .primary-button, div#backend-data-button, div#container-backend-data-button, .primary-button,
@ -373,6 +373,7 @@ div#navigation a:active {
color: #1b42d8; color: #1b42d8;
text-decoration: none; text-decoration: none;
} }
#home-top-div:after { #home-top-div:after {
content:""; content:"";
position: absolute; 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-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 { 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-family: 'Roboto', sans-serif;
font-size: 16px; /*font-size: 16px;*/
margin: 0; margin: 0;
padding: 0; padding: 0;
line-height: 26px; line-height: 26px;
@ -544,32 +545,6 @@ div#contactform:hover {
max-width: 365px; 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*/ /*Titles all pages*/
@ -886,6 +861,11 @@ div#home-top-div{
box-shadow: 1px 1px 5px 3px #00000024; box-shadow: 1px 1px 5px 3px #00000024;
border-radius: 6px; border-radius: 6px;
} }
#wrapper-vid a {
text-align: center;
width: 100%;
display: inline-grid;
}
#home-top-div #wrapper-top-buttons{ #home-top-div #wrapper-top-buttons{
display: flex; display: flex;
align-items: center; align-items: center;
@ -1139,16 +1119,6 @@ div.home-show-wrapper a:hover {
background-color: black; 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 ************/ /************ ABOUT & TEXT TEMPLATES ************/
@ -1730,7 +1700,7 @@ div.browsebycategory-categories:hover {
margin-top: 0px; margin-top: 0px;
margin-bottom: 30px; 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; color: black;
text-decoration-color: black; text-decoration-color: black;
} }
@ -1828,6 +1798,10 @@ img.artwork-relatedworks-imgs, .artwork-lists-img img{
margin: 0px -10px 0px 0px !important; margin: 0px -10px 0px 0px !important;
} }
/*.tns-item img {
width: inherit;
}*/
/*************************************/ /*************************************/
/************ WIKI PAGES ************/ /************ WIKI PAGES ************/
/***********************************/ /***********************************/
@ -1845,4 +1819,174 @@ div#tutorials-intro h3, div#tutorials-intro p {
margin: auto; 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); }
}

1
templates/home.html

@ -34,6 +34,7 @@
<video preload="meta" autoplay="" loop=""> <video preload="meta" autoplay="" loop="">
<source src="{{ url_for('static', filename='/vid/DAAP_video_reduced.mp4') }}" type="video/mp4"> <source src="{{ url_for('static', filename='/vid/DAAP_video_reduced.mp4') }}" type="video/mp4">
</video> </video>
<a class="metadata-link" href="https://query.daap.bannerrepeater.org/embed.html#%23defaultView%3AGraph%0ASELECT%20%3Fwork%20%3FworkLabel%20%3Fimage_on_Commons%20%3Fplace_of_publication%20%3Fplace_of_publicationLabel%20%3Fcreator_of%20%3Fcreator_ofLabel%20WHERE%20%7B%0A%20%20SERVICE%20wikibase%3Alabel%20%7B%20bd%3AserviceParam%20wikibase%3Alanguage%20%22%5BAUTO_LANGUAGE%5D%2Cen%22.%20%7D%0A%20%20%3Fwork%20wdt%3AP9%20wd%3AQ421.%0A%20%20OPTIONAL%20%7B%20%3Fwork%20wdt%3AP31%20%3Fimage_on_Commons.%20%7D%0A%20%20OPTIONAL%20%7B%20%3Fwork%20wdt%3AP12%20%3Fplace_of_publication.%20%7D%0A%20%20OPTIONAL%20%7B%20%3Fwork%20wdt%3AP9%20%3Fcreator_of.%20%7D%0A%7D%0ALIMIT%20100">Explore Data Visualization</a>
</div> </div>
</div> </div>

14
templates/layout.html

@ -10,6 +10,19 @@
</head> </head>
<body> <body>
<div id="navigation-mobile">
<div class= "navigation-mobile-items">
<div id="nav-about"><a href="{{ url_for('about') }}">About</a></div>
<div id="nav-browse-archive"><a href="{{ url_for('browsethearchive') }}">Browse the archive</a></div>
<div id="nav-browse-category"><a href="{{ url_for('browsebycategory') }}">Browse by category</a></div>
<div id="nav-search"><a href="{{ url_for('searchtools') }}">Search tools</a></div>
<div id="nav-tutorials"><a href="{{ url_for('tutorials') }}">Tutorials</a></div>
<div id="nav-upload"><a href="{{ url_for('upload') }}">Upload</a></div>
<div id="nav-login"><a href="https://daap.bannerrepeater.org/w/index.php?title=Special:UserLogin&returnto=Main+Page">To log-in, please view on desktop</a></div>
</div>
</div>
<div id="header"> <div id="header">
<div id="animatedlogo"> <div id="animatedlogo">
<a href="{{ url_for('home') }}"> <a href="{{ url_for('home') }}">
@ -44,7 +57,6 @@
</div> </div>
</div> </div>
{% block content %} {% block content %}
{% endblock content %} {% endblock content %}

Loading…
Cancel
Save