jules
/
DAAP_interface
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

completed footer responsive layout and adjust alignment index books

master
JoBCB 4 years ago
parent
475df48c35
commit
b00691b3a4
4 changed files with 75 additions and 21 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 85
      static/css/style.css
  2. 1
      templates/artistsindex.html
  3. 2
      templates/browsebycategory.html
  4. 6
      templates/layout.html

85
static/css/style.css
View File

@ -206,7 +206,7 @@ div#navigation a:hover {
div#footer{
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex-wrap: nowrap;
justify-content: space-between;
align-items: baseline;
padding: 55px 80px;
@ -218,27 +218,34 @@ div#footer{
.footer-left, .footer-right {
display: flex;
flex-direction: row;
width: 100%;
}
.footer-left{ flex-wrap: nowrap;}
.footer-left{ flex-wrap: nowrap; justify-content: start;}
.footer-right{
flex-wrap: wrap;
justify-content: end;
flex-wrap: nowrap;
margin: 0px 0px 0px 56px;
}
#footer-credit , #footer-funds {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
#footer-credit, #footer-socials{
padding: 0px 56px 0px 0px;
}
#footer-socials-links {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
#footer-credit , #footer-funds, #footer-socials-links, #footer-contact-form {
padding-right: 56px;
}
div#footer-title-br p, div#footer-title-others p, div#footer-title-contact p, div#footer-title-socials p{
text-transform: uppercase;
font-family: 'Roboto Condensed', sans-serif;
font-size: 16px;
font-size: calc(16px + (20 - 16) * ((100vw - 768px) / (1400 - 768)));
font-weight: normal;
font-stretch: condensed;
font-style: normal;
@ -247,8 +254,9 @@ div#footer-title-br p, div#footer-title-others p, div#footer-title-contact p, di
color: var(--brown-grey);
}
div#footer-img-br img{
width: 90px;
height: 90px;
width: 100%;
max-width: 90px;
height: auto;
padding-top: 20px;
}
div#footer-img-others{
@ -290,22 +298,41 @@ div#contactform{
color:#FFFFFF;
}
#footer-contact-form {
width: 100%;
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 {margin-left: auto;}
#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%;}
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*/
/*div#home-recent-title, div#browsethearchive-title, div#artistsindex-title, div#publishersindex-title, div#selfpublishedindex-title, div#zinesindex-title, */
/*div#home-recent-title, div#browsethearchive-title, div#artistsindex-title, div#publishersindex-title, div#selfpublishedindex-title, div#zinesindex-title, div#browseby-title */
div.pagetitle{
margin: 60px 80px 30px 80px;
font-size: 25px;
@ -517,14 +544,13 @@ img.home-recent-imgs, img.browsethearchive-imgs{
}
div.home-recent-items, div.browsethearchive-items{
padding:10px;
font-size: 16px;
font-family: 'Roboto Condensed', sans-serif;
margin: 0 auto;
display: flex;
flex-direction: column;
align-content: center;
/*justify-content: space-between;*/
/* align-content: start; center;*/
justify-content: space-between;
height: 100%;
}
@ -534,8 +560,15 @@ div.home-recent-items a, div.browsethearchive-items a {
font-family: 'Roboto Condensed Bold', sans-serif;
color: #000000;
text-decoration: none;
/* display: flex;
justify-content: left;*/
}
/*div.home-recent-items span, div.browsethearchive-items span {
display: flex;
justify-content: left;
}
*/
div.home-recent-items-top, div.browsethearchive-items-top {
display: flex;
flex-direction: column;
@ -546,16 +579,18 @@ div.home-recent-items-bottom, div.browsethearchive-items-bottom {
display: flex;
flex-direction: column;
flex-shrink: 0;
flex-basis: 100px;
flex-basis: 140px;
justify-content: flex-start;
}
div.browsethearchive-items-bottom { padding: 20px 0px 0px 0px;}
div#home-recent-grid, div#browsethearchive-grid{
width: 100%;
padding: 0px 80px;
display: grid;
text-align: center;
grid-gap: 2rem;
/*text-align: center;*/
grid-gap: 1rem;
}
div#show-button-wrapper{
width: 100%;
@ -635,7 +670,21 @@ div#browsethearchive-grid{
font-family: 'Roboto Condensed', sans-serif;
}
ul#browsethearchive-pagin{
display: inline-flex;
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: baseline;
margin-left: auto;
margin-right: auto;
padding-top: 42px;
padding-bottom: 52px;
font-family: Roboto Condensed;
font-size: 14px;
line-height: 48px;
font-weight: bold;
font-stretch: condensed;
min-height: 48px;
max-width: 376px;
}
#browsethearchive-pagin li {
display: flex;

1
templates/artistsindex.html
View File

@ -38,7 +38,6 @@
<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('#artistsindex-table').dataTable({

2
templates/browsebycategory.html
View File

@ -1,6 +1,8 @@
{% extends "layout.html" %}
{% block content %}
<div class="pagetitle" id="browsethearchive-title">BROWSE BY</div>
<div id="browsebycategory-listcategories">
<div class="browsebycategory-categories primary-button"><a href="{{ url_for('artistsindex') }}">BROWSE BY CREATOR/CONTRIBUTOR</a></div>
<div class="browsebycategory-categories primary-button"><a href="{{ url_for('publishersindex') }}">BROWSE BY PUBLISHER</a></div>

6
templates/layout.html
View File

@ -46,6 +46,7 @@
{% endblock content %}
<div id="footer">
<div class="footer-left">
<div id="footer-credit">
<div id="footer-title-br"><p>A project by</p></div>
<div id="footer-img-br"><img src="{{ url_for('static', filename='/imgs/Logos/Banner-Repeater-logo.png') }}"></div>
@ -57,19 +58,22 @@
<div id="footer-img-lottery"><img src="{{ url_for('static', filename='/imgs/Logos/Lottery-white on black.png') }}"></div>
</div>
</div>
</div>
<div class="footer-right">
<div id="footer-socials">
<div id="footer-title-socials"><p>SOCIAL</p></div>
<div id="footer-socials-links">
<a target="_blank" href="https://www.facebook.com/BannerRepeater">Facebook</a>
<a target="_blank" href="https://twitter.com/BANNERREPEATER">Twitter</a>
<a target="_blank" href="https://www.instagram.com/bannerrepeater/">Instagram</a>
<a target="_blank" href="mailto:daap.community@disroot.org">Email address</a></p>
<a target="_blank" href="mailto:daap.community@disroot.org">Email</a></p>
</div>
</div>
<div id="footer-contact-form">
<div id="footer-title-contact"><p>EXPRESSION OF INTEREST</p></div>
<div id="footer-contact"><a href=""><div class="primary-button bluebutton" id="contactform">CONTACT FORM<span></span></div></a></div>
</div>
</div>
</div>

Write Preview
Loading…
Cancel
Save