mobile layout artwork andadjustment on landingpage
This commit is contained in:
parent
e44fbd1c31
commit
af78fded69
1
static/css/Icons/icn_bars-solid.svg
Normal file
1
static/css/Icons/icn_bars-solid.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>
|
||||
|
After Width: | Height: | Size: 569 B |
@ -237,9 +237,11 @@ html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
*, *:before, *:after {
|
||||
-webkit-box-sizing: inherit;
|
||||
-moz-box-sizing: inherit;
|
||||
box-sizing: inherit; }
|
||||
-webkit-box-sizing: inherit;
|
||||
-moz-box-sizing: inherit;
|
||||
box-sizing: inherit;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Roboto;
|
||||
@ -374,7 +376,7 @@ div#navigation a:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#home-top-div:after {
|
||||
/*#home-top-div:after {
|
||||
content:"";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
@ -394,14 +396,7 @@ div#navigation a:active {
|
||||
border-left: 2px solid rgba(233,233,233, 1);
|
||||
transform: translate(-50%);
|
||||
}
|
||||
div#home-top-div {
|
||||
/* margin: 10px auto;
|
||||
width: 60%;
|
||||
height: 100px;
|
||||
border: 1px solid #333;
|
||||
position:relative;
|
||||
text-align:center*/
|
||||
}
|
||||
*/
|
||||
|
||||
/*Footer*/
|
||||
div#footer{
|
||||
@ -784,19 +779,19 @@ a.paginate_button.next:after {
|
||||
/*Home Top div*/
|
||||
|
||||
div#home-top-div{
|
||||
height: 60vh; /* 661px;*/
|
||||
height: 40vh; /* 661px;*/
|
||||
min-height: 400px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border-bottom: solid black 3px;
|
||||
background-color: rgba(233,233,233, 0.5);
|
||||
|
||||
padding: 0vw 8vw;
|
||||
display: grid;
|
||||
row-gap: 2rem;
|
||||
column-gap: 1rem;
|
||||
grid-template-columns: repeat(18, 1fr);
|
||||
grid-template-rows: min-content auto;
|
||||
grid-template-rows: auto auto;
|
||||
}
|
||||
.heading_A {
|
||||
font-family: Roboto Condensed;
|
||||
@ -815,12 +810,12 @@ div#home-top-div{
|
||||
/*max-width: 634px;*/
|
||||
z-index: 1000; /*99*/
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 10;
|
||||
grid-column-end: 11;
|
||||
grid-row-start: 1;
|
||||
grid-row-end: 1;
|
||||
align-self: center;
|
||||
max-width: 800px;
|
||||
margin-top: 6vw;
|
||||
/*margin-top: 6vw;*/
|
||||
}
|
||||
#home-top-div p {
|
||||
margin-bottom: 0px;
|
||||
@ -1176,7 +1171,7 @@ div.home-show-wrapper a:hover {
|
||||
grid-row-end: 2;
|
||||
}
|
||||
.mw-parser-output p {
|
||||
margin: 0px 0px 30px 0px;
|
||||
margin: 0px 0px 1em 0px;
|
||||
}
|
||||
|
||||
.Heading_C, .mw-parser-output h2, h2 {
|
||||
@ -1408,7 +1403,7 @@ div.browsebycategory-categories:hover {
|
||||
display: grid;
|
||||
row-gap: 0rem;
|
||||
margin: 30px 0px;
|
||||
padding-bottom: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
column-gap: 1rem;
|
||||
grid-template-columns: repeat(18, 1fr);
|
||||
border-bottom: 3px solid #000;
|
||||
@ -1443,9 +1438,9 @@ div.browsebycategory-categories:hover {
|
||||
bottom: 0;
|
||||
border-left: 3px solid blue;
|
||||
transform: translate(90%);
|
||||
height: 45px;
|
||||
height: 40px;
|
||||
max-width: 2px;
|
||||
margin-top: 410px;
|
||||
margin-top: 390px;
|
||||
left: 24.5%;
|
||||
}
|
||||
.artwork-nav-label-record:before {
|
||||
@ -1456,13 +1451,13 @@ div.browsebycategory-categories:hover {
|
||||
bottom: 0;
|
||||
border-left: 3px solid var(--brown-grey);
|
||||
transform: translate(90%);
|
||||
height: 45px;
|
||||
height: 40px;
|
||||
max-width: 2px;
|
||||
margin-top: 410px;
|
||||
left: 46.5%;
|
||||
margin-top: 390px;
|
||||
left: 44%;
|
||||
}
|
||||
.artwork-nav-label-record {
|
||||
grid-column-start: 8;
|
||||
grid-column-start: 7;
|
||||
grid-column-end: 11;
|
||||
grid-row-start: 1;
|
||||
grid-row-end: 1;
|
||||
@ -1489,12 +1484,19 @@ div.browsebycategory-categories:hover {
|
||||
color: var(--blue-blue);
|
||||
cursor: pointer;
|
||||
}
|
||||
.artwork-about, .artwork-copieswrapper, .artwork-relatedwrapper, .artwork-lists {
|
||||
.artwork-about {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
row-gap: 0rem;
|
||||
column-gap: 1rem;
|
||||
grid-template-columns: repeat(18, 1fr);
|
||||
grid-template-columns: repeat(19, 1fr);
|
||||
}
|
||||
.artwork-relatedwrapper,.artwork-copieswrapper, .artwork-lists {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
row-gap: 2rem;
|
||||
column-gap: 1rem;
|
||||
grid-template-columns: repeat(10, 1fr);
|
||||
}
|
||||
/*.artwork-relatedwrapper{
|
||||
grid-template-areas:
|
||||
@ -1521,15 +1523,15 @@ div.browsebycategory-categories:hover {
|
||||
grid-column-end: 8;
|
||||
grid-row-start: 1;
|
||||
grid-row-end: 3;
|
||||
margin: 0 !important;
|
||||
margin: -15px 0 0 0 !important;
|
||||
}
|
||||
.artwork-rightcolumn {
|
||||
grid-column-start: 9;
|
||||
grid-column-end: 18;
|
||||
grid-column-end: 19;
|
||||
grid-row-start: 1;
|
||||
grid-row-end: 1;
|
||||
margin: 0 !important;
|
||||
display: grid;
|
||||
/*display: grid;*/
|
||||
}
|
||||
|
||||
.artwork-about-img img {
|
||||
@ -1547,18 +1549,20 @@ div.browsebycategory-categories:hover {
|
||||
margin: 0 0 0 0 !important;
|
||||
display: grid;
|
||||
padding: 0 0 20px 0;
|
||||
grid-template-columns: repeat(10, 1fr);
|
||||
column-gap: 1rem;
|
||||
}
|
||||
|
||||
.artwork-rightcolumn-top-contributors {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 10;
|
||||
grid-column-end: 6;
|
||||
grid-row-start: 1;
|
||||
grid-row-end: 1;
|
||||
}
|
||||
|
||||
.artwork-rightcolumn-top-date {
|
||||
grid-column-start: 10;
|
||||
grid-column-end: 18;
|
||||
grid-column-start: 6;
|
||||
grid-column-end: 12;
|
||||
grid-row-start: 1;
|
||||
grid-row-end: 1;
|
||||
|
||||
@ -1585,6 +1589,8 @@ div.browsebycategory-categories:hover {
|
||||
|
||||
.text-description .mw-parser-output, .artwork-rightcolumn-exhibition .mw-parser-output, .text-exhibition .mw-parser-output{
|
||||
display: initial;
|
||||
grid-template-columns: none;
|
||||
padding: 0px;
|
||||
}
|
||||
.artwork-rightcolumn-exhibition {
|
||||
grid-column-start: 9;
|
||||
@ -1626,11 +1632,12 @@ div.browsebycategory-categories:hover {
|
||||
border-top: 3px solid #000;
|
||||
margin: 0px;
|
||||
padding: 20px 0;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.text-description {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 8;
|
||||
grid-column-end: 6;
|
||||
grid-row-start: 2;
|
||||
grid-row-end: 2;
|
||||
}
|
||||
@ -1639,7 +1646,7 @@ div.browsebycategory-categories:hover {
|
||||
}
|
||||
.text-exhibition {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 8;
|
||||
grid-column-end: 6;
|
||||
grid-row-start: 2;
|
||||
grid-row-end: 2;
|
||||
|
||||
@ -1659,19 +1666,20 @@ div.browsebycategory-categories:hover {
|
||||
padding: 30px 8vw 30px 8vw;
|
||||
}
|
||||
.artwork-copiesincollection {
|
||||
grid-column-start: 3;
|
||||
grid-column-end: 6;
|
||||
/* grid-column-start: 2;
|
||||
grid-column-end: 6;*/
|
||||
border-right: solid 0.5px var(--black);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
.artwork-copiesincollection-title-div {
|
||||
text-align: center;
|
||||
}
|
||||
.artwork-lists .Heading_C , .artwork-relatedwrapper .Heading_C , .artwork-copieswrapper .Heading_C {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
grid-column-end: 2;
|
||||
/* writing-mode: sideways-lr;
|
||||
max-height: 120px; */
|
||||
text-align: center;
|
||||
@ -1761,7 +1769,7 @@ div.browsebycategory-categories:hover {
|
||||
padding: 0px;
|
||||
display: initial;
|
||||
}
|
||||
.artwork-relatedworks:nth-of-type(2) {
|
||||
/*.artwork-relatedworks:nth-of-type(2) {
|
||||
grid-column-start: 3;
|
||||
grid-column-end: 6;
|
||||
margin: 0 !important;
|
||||
@ -1785,7 +1793,7 @@ div.browsebycategory-categories:hover {
|
||||
grid-column-start: 15;
|
||||
grid-column-end: 18;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}*/
|
||||
.artwork-relatedworks-tile a:hover, .artwork-relatedworks-tile a:hover ~ .artwork-relatedworks-date, .artwork-lists-title a:hover {
|
||||
color: var(--blue-blue);
|
||||
}
|
||||
@ -1807,17 +1815,21 @@ img.artwork-relatedworks-imgs, .artwork-lists-img img{
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.artwork-about-under-img a:hover {
|
||||
.artwork-about-under-img .distri-links a, .artwork-about-under-img .distri-links a:visited{
|
||||
color: #000;
|
||||
}
|
||||
.artwork-about-under-img a:hover, .artwork-about-under-img .distri-links a:hover {
|
||||
color: var(--blue-blue);
|
||||
}
|
||||
.artwork-about-under-img .distri-links a, .artwork-about-under-img .distri-links a:visited{
|
||||
color: var(--blue-blue);
|
||||
}
|
||||
.artefact, .facsimile {
|
||||
.artefact, .facsimile, .distri-links div {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.facsimile > a , .artefact > a, .distri-links div > a {
|
||||
padding: 0 10px 0 0;
|
||||
}
|
||||
|
||||
/* LIBRARY */
|
||||
.tns-controls { text-align: center; margin-bottom: 10px; }
|
||||
.tns-controls [aria-controls] {
|
||||
@ -1825,16 +1837,18 @@ img.artwork-relatedworks-imgs, .artwork-lists-img img{
|
||||
}
|
||||
.tns-nav {
|
||||
text-align: center;
|
||||
margin: 10px 0;
|
||||
margin: 0px;
|
||||
padding-bottom: 20px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
.tns-nav > [aria-controls] {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding: 0;
|
||||
margin: 0 5px 0 0;
|
||||
margin: 0 10px 0 0;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #000;
|
||||
background: #FFF;
|
||||
/*background: #FFF;*/
|
||||
}
|
||||
.tns-nav-active {
|
||||
background: #000 !important;
|
||||
@ -1845,6 +1859,7 @@ img.artwork-relatedworks-imgs, .artwork-lists-img img{
|
||||
|
||||
.tns-item p:nth-of-type(1) {
|
||||
text-transform: uppercase;
|
||||
margin: 10px 0 0px 0px !important;
|
||||
}
|
||||
.tns-item p{
|
||||
text-align: center;
|
||||
@ -1867,6 +1882,8 @@ img.artwork-relatedworks-imgs, .artwork-lists-img img{
|
||||
max-width: inherit;
|
||||
}
|
||||
|
||||
.artwork-nav-label-mobile, .artwork-about-under-img-mobile { display: none; }
|
||||
|
||||
|
||||
/*************************************/
|
||||
/************ WIKI PAGES ************/
|
||||
@ -1887,10 +1904,13 @@ div#tutorials-intro h3, div#tutorials-intro p {
|
||||
|
||||
/************ Disactive Mobile ************/
|
||||
|
||||
#navigation-mobile, #message-mobile {
|
||||
#navigationmobile, #message-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#mobtop{
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/********************************** RESPONSIVE DESIGN *********************************/
|
||||
@ -1929,11 +1949,52 @@ div#tutorials-intro h3, div#tutorials-intro p {
|
||||
overflow: hidden;
|
||||
position: static;
|
||||
}
|
||||
/********** NAV
|
||||
|
||||
.web-dev-placeholder {
|
||||
padding: 0px 10px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
/********** NAV **********/
|
||||
|
||||
#mobtop{
|
||||
display: initial;
|
||||
}
|
||||
|
||||
#navigation {
|
||||
display: none !important;
|
||||
}
|
||||
a.mobile-nav-icon, a.mobile-nav-icon:visited, a.mobile-nav-icon:hover {
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin-right: 8vw;
|
||||
}
|
||||
a.mobile-nav-icon:after {
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
content: ' ';
|
||||
background-image: url('Icons/icn_bars-solid.svg');
|
||||
background-size: 16px 16px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
color: var(--blue-blue);
|
||||
}
|
||||
|
||||
a.mob-close-icon:after {
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
content: ' ';
|
||||
background-image: url('Icons/icn_close_large.svg');
|
||||
background-size: 16px 16px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
color: var(--blue-blue);
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
div#header {
|
||||
height: 60px !important;
|
||||
}
|
||||
@ -1950,12 +2011,11 @@ div#tutorials-intro h3, div#tutorials-intro p {
|
||||
input[type="checkbox"]:checked ~ .sidebarIconToggle > .icon-cross {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebarIconToggle {
|
||||
cursor: pointer;
|
||||
}
|
||||
#navigation-mobile {
|
||||
display: block;
|
||||
#navigationmobile {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
left: 0;
|
||||
@ -1966,8 +2026,6 @@ div#tutorials-intro h3, div#tutorials-intro p {
|
||||
overflow-y: hidden;
|
||||
transition: transform 250ms ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
.navigation-mobile-items{
|
||||
margin: 100px 0px 0px 0px;
|
||||
display: flex;
|
||||
@ -2003,13 +2061,21 @@ div#tutorials-intro h3, div#tutorials-intro p {
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
**********/
|
||||
div#animatedlogo img {
|
||||
width: 8.5vw;
|
||||
min-width: 32px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/********** MAIN **********/
|
||||
|
||||
#home-top-div > img , #wrapper-bt {
|
||||
#home-top-div > img {
|
||||
display: none;
|
||||
}
|
||||
#home-top-div #wrapper-bt {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 19;
|
||||
}
|
||||
div#home-top-div {
|
||||
height: 50vh;
|
||||
}
|
||||
@ -2074,10 +2140,34 @@ div#tutorials-intro h3, div#tutorials-intro p {
|
||||
grid-column-end: 19;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/********* ARTWORK **********/
|
||||
.artwork-relatedwrapper,.artwork-copieswrapper, .artwork-lists { display: none; }
|
||||
|
||||
.artwork-nav { display: none; }
|
||||
|
||||
.artwork-nav-label-mobile {
|
||||
display: flex;
|
||||
padding: 0px 0px 60px 8vw;
|
||||
}
|
||||
.artwork-nav-label-record::before {display: none;}
|
||||
|
||||
.artwork-leftcolumn {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 19;
|
||||
grid-row-start: 1;
|
||||
grid-row-end: 3;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.artwork-rightcolumn {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 19;
|
||||
grid-row-start: 3;
|
||||
grid-row-end: 3;
|
||||
}
|
||||
.artwork-about-under-img { margin: 0 0 20px 0; }
|
||||
|
||||
}
|
||||
/***************** LAPTOP MEDIUM ****************/
|
||||
|
||||
@media screen and (min-width: 769px) and (max-width: 1000px) {
|
||||
@ -2087,16 +2177,23 @@ div#tutorials-intro h3, div#tutorials-intro p {
|
||||
#footer-title-others, #footer-title-contact {text-align: right;}
|
||||
#footer-contact-form {margin: 30px 0px 0px 0px;}
|
||||
#footer-credit, #footer-socials{ padding: 0px; }
|
||||
|
||||
.artwork-relatedwrapper,.artwork-copieswrapper, .artwork-lists { grid-template-columns: repeat(5, 1fr); }
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
#home-recent-grid, #browsethearchive-grid, #selfpublishedindex-grid, #zinesindex-grid { grid-template-columns: repeat(4, 1fr); }
|
||||
|
||||
.artwork-relatedwrapper,.artwork-copieswrapper, .artwork-lists { grid-template-columns: repeat(5, 1fr); }
|
||||
}
|
||||
|
||||
/***************** LAPTOP BIG ****************/
|
||||
|
||||
@media (min-width: 1400px) {
|
||||
#home-recent-grid, #browsethearchive-grid, #selfpublishedindex-grid, #zinesindex-grid { grid-template-columns: repeat(6, 1fr); }
|
||||
.artwork-relatedwrapper,.artwork-copieswrapper, .artwork-lists { grid-template-columns: repeat(10, 1fr); }
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -358,11 +358,6 @@
|
||||
<!-- end of about -->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<!-- END OF ABOUT -->
|
||||
|
||||
@ -462,6 +457,7 @@
|
||||
</div>
|
||||
<!-- END OF LISTS -->
|
||||
|
||||
<div class="artwork-nav-label-mobile artwork-nav-label artwork-nav-label-record"><a class="det-record" target="_blank" href="https://daap.bannerrepeater.org/wiki/Item:{{ artwork_id }}">DETAILED RECORD</a></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@ -30,14 +30,14 @@
|
||||
<a id="wrapper-top-buttons" class="primary-button" href="{{ url_for('zinesindex') }}">SEE EXAMPLE SEARCH FOR ZINES</a>
|
||||
<a id="wrapper-top-buttons" class="secondary-button" href="{{ url_for('casestudy') }}">CAROLEE SCHNEEMANN CASE STUDY</a>
|
||||
</div>
|
||||
<div id="wrapper-vid">
|
||||
<!-- <div id="wrapper-vid">
|
||||
<video preload="meta" autoplay="" loop="">
|
||||
<source src="{{ url_for('static', filename='/vid/DAAP_video_reduced.mp4') }}" type="video/mp4">
|
||||
</video>
|
||||
<p>
|
||||
<a class="metadata-link" target="_blank" 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">See Live Data Visualization</a>
|
||||
</p>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<div class="scroll-down"><span>Scroll Down</span></div>
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="navigation-mobile">
|
||||
<div id="navigationmobile">
|
||||
<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>
|
||||
@ -37,15 +37,17 @@
|
||||
<a href="{{ url_for('home') }}">DAAP</a>
|
||||
</div>
|
||||
<!-- <div id="header-keyword-search">
|
||||
<input type="text" id="fname" name="fname" value="" placeholder="Keyword search">
|
||||
<input type="text" id="fname" name="fname" value="" placeholder="Keyword search">
|
||||
</div>
|
||||
<div class="container" onclick="myFunction(this)">
|
||||
|
||||
</div>
|
||||
-->
|
||||
</div> -->
|
||||
|
||||
<div class="web-dev-placeholder">
|
||||
<p>WEBSITE IN DEVELOPMENT</p>
|
||||
</div>
|
||||
|
||||
<a id="mobtop" class="mobile-nav-icon mob-menu-icon" onclick="showMenu('navigationmobile'); toggleMenu();"></a>
|
||||
</div>
|
||||
|
||||
<div id="navigation">
|
||||
@ -108,9 +110,24 @@
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function menutoggle(x) {
|
||||
x.classList.toggle("change");
|
||||
|
||||
function showMenu(navigationmobile){
|
||||
var e = document.getElementById('navigationmobile');
|
||||
var element = document.getElementById("mobtop");
|
||||
if(e.style.display == 'block')
|
||||
e.style.display = 'none';
|
||||
else
|
||||
e.style.display = 'block';
|
||||
document.querySelector('body').style.overflow = 'hidden';
|
||||
element.classList.toggle("mob-close-icon");
|
||||
}
|
||||
|
||||
// element.classList.add("mobile-nav-icon");
|
||||
// element.classList.remove("mob-close-icon");
|
||||
|
||||
|
||||
// element.classList.remove("mobile-nav-icon");
|
||||
// element.classList.add("mob-close-icon");
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user