Removing search bar, adding semantic nav. to DRP landing page, and removing space below footer

[iannesbitt]

Changes included here reflect an attempt to make the DRP more navigable and easy to understand, as requested by DRP team members during the Nov 30-Dec 1, 2023 meeting. Below are before and after screenshots of the layout. Still to come: including a featuredData section to introduce the user to data produced by each of the teams involved in the project, similar to those on knb.ecoinformatics.org.

Before:

After:

[iannesbitt]

Added changes from #5 branch, which get rid of space below the DRP footer.

[iannesbitt]

Ah, good catch. It's because of this clause in DRP's metacatui.responsive.css:

@media only screen and (max-width: 768px) {
    #mainContent {
        margin: -40px -40px -160px -40px
    }
}

I've added a commit that solves that problem by changing the third position to 0 and then adding margin-bottom: 0px. I'm also adding font-size: 80%; to that clause to keep the text size within reason, and moving the container down out of the way of the navbar by adding another class modification to that @media clause that sets margin-top: 15%. All in all it looks like this:

@media only screen and (max-width: 768px) {
    #mainContent {
        margin: -40px -40px 0 -40px;
        margin-bottom: 0px;
        font-size: 80%;
    }
    #mainContent .container {
        margin-top: 15%
    }
}

I'm also adding two more small tweaks to keep the title from overlapping with the navbar objects and keeping the mainContent "semantic navigation" container as I call it in a reasonable position on the page. Those look like this:

The first in the theme's metacatui.responsive.css:

@media only screen and (min-width: 900px) and (max-width: 1050px){
    .navbar .title {
-       max-width: 200px;
+       max-width: 175px;
    }
}

This prevents a very jarring navbar height adjustment and replaces it with a mildly less jarring title width adjustment.

The second tweak is in metacatui.css:

#mainContent .container {
    width: auto;
-   margin-top: 5%;
+   margin-top: 8%;
    margin-right: calc(10% - 20px);
    margin-left: calc(10% + 20px);
    border-radius: 6px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: #0e689571;
    padding-bottom: 20px;
}

This causes the container to move slightly further away from the navbar to prevent an overlap at ~1100 pixel page width.

[iannesbitt]

Thank you Robyn! It means a lot coming from you!!