started mobile design layout
This commit is contained in:
parent
655a2b110c
commit
a537699fe0
@ -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); }
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@ -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>
|
||||||
|
|
||||||
|
|||||||
@ -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…
Reference in New Issue
Block a user