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);
|
||||
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); }
|
||||
}
|
||||
|
||||
|
||||
@ -34,6 +34,7 @@
|
||||
<video preload="meta" autoplay="" loop="">
|
||||
<source src="{{ url_for('static', filename='/vid/DAAP_video_reduced.mp4') }}" type="video/mp4">
|
||||
</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>
|
||||
|
||||
|
||||
@ -10,6 +10,19 @@
|
||||
</head>
|
||||
<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="animatedlogo">
|
||||
<a href="{{ url_for('home') }}">
|
||||
@ -44,7 +57,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{% block content %}
|
||||
{% endblock content %}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user