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

added flex layout on footer

master
JoBCB 4 years ago
parent
3b5763b8a2
commit
22db32fdd1
2 changed files with 76 additions and 184 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 221
      static/css/style.css
  2. 39
      templates/layout.html

221
static/css/style.css
View File

@ -45,14 +45,12 @@ div#backend-data-button span{
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
} }
div#container-backend-data-button{ div#container-backend-data-button{
height: 100px; height: 100px;
width: 100%; width: 100%;
border-bottom: 1px solid black; border-bottom: 1px solid black;
height: 70px; height: 70px;
} }
img.artwork-mockuppage{ img.artwork-mockuppage{
width: 80%; width: 80%;
padding: 0 10%; padding: 0 10%;
@ -67,7 +65,6 @@ img.artwork-mockuppage{
--brown-grey: #7f7f7f; --brown-grey: #7f7f7f;
--very-light-pink: #e9e9e9; --very-light-pink: #e9e9e9;
} }
html { html {
margin:0; margin:0;
padding:0; padding:0;
@ -79,15 +76,13 @@ html {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
*, *:before, *:after { *, *:before, *:after {
-webkit-box-sizing: inherit; -webkit-box-sizing: inherit;
-moz-box-sizing: inherit; -moz-box-sizing: inherit;
box-sizing: inherit; } box-sizing: inherit; }
body { body {
font-family: Roboto; font-family: Roboto;
font-size: calc(16px + (20 - 16) * ((100vw - 768px) / (1400 - 768)));
font-size: 16px; font-size: 16px;
font-weight: normal; font-weight: normal;
font-stretch: normal; font-stretch: normal;
@ -108,20 +103,12 @@ div#header{
border-bottom: 3px solid #000; border-bottom: 3px solid #000;
display: flex; display: flex;
width: 100%; width: 100%;
/* display: grid;*/
} }
div#header-top{ div#header-top{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
/* display: grid;
grid-template-columns: 5% 67.5% 27.5%;
grid-template-rows: 100%;
grid-column-gap: 0px;
grid-row-gap: 0px;
align-items: center;
*/
border-bottom: 1px solid #000; border-bottom: 1px solid #000;
} }
#title-nav{ #title-nav{
@ -129,7 +116,6 @@ div#header-top{
} }
div#animatedlogo{ div#animatedlogo{
display: flex; display: flex;
/* grid-area: 1 / 1 / 2 / 2;*/
} }
div#animatedlogo img{ div#animatedlogo img{
width: auto; width: auto;
@ -137,7 +123,6 @@ div#animatedlogo img{
justify-self: center; justify-self: center;
} }
div#header-title{ div#header-title{
/* grid-area: 1 / 2 / 2 / 3;*/
font-family: 'Roboto Condensed', sans-serif; font-family: 'Roboto Condensed', sans-serif;
font-weight: bold; font-weight: bold;
font-size: 25px; font-size: 25px;
@ -146,9 +131,7 @@ div#header-title a:link, div#header-title a:visited {
text-decoration: none; text-decoration: none;
color: #000000; color: #000000;
} }
div#header-keyword-search{
/* grid-area: 1 / 3 / 2 / 4;*/
}
div#header-keyword-search span { div#header-keyword-search span {
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
@ -186,22 +169,7 @@ div#navigation{
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
/* display: grid; align-content: center;
grid-template-columns: 8% repeat(2, 12%) 1fr repeat(2, 10%) 12.5%;
grid-template-rows: 100%;
grid-column-gap: 0px;
grid-row-gap: 0px;
padding-left: 5%;
align-items: center;
*/
font-family: Roboto;
font-size: 18px;
font-weight: normal;
font-stretch: condensed;
font-style: normal;
line-height: 1.44;
letter-spacing: normal;
color: var(--black);
} }
#nav-left { #nav-left {
display: flex; display: flex;
@ -225,58 +193,48 @@ div#navigation a{
font-family: 'Roboto Condensed', sans-serif; font-family: 'Roboto Condensed', sans-serif;
text-decoration: none; text-decoration: none;
font-weight: normal; font-weight: normal;
color: black; color: var(--black);
font-size: 18px; font-size: calc(16px + (20 - 16) * ((100vw - 768px) / (1400 - 768)));
line-height: 26px; line-height: calc(22px + (22 - 26) * ((100vw - 768px) / (1400 - 768)));
height: 67px;
} }
div#navigation a:hover { div#navigation a:hover {
color: #1b42d8; color: #1b42d8;
} }
/*div#nav-about {
grid-area: 1 / 1 / 2 / 2;
}
div#nav-browse-archive { grid-area: 1 / 2 / 2 / 3; }
div#nav-browse-category { grid-area: 1 / 3 / 2 / 4;
color: lightgrey;}
div#nav-search { grid-area: 1 / 4 / 2 / 5; }
div#nav-tutorials { grid-area: 1 / 5 / 2 / 6;
justify-self: end;
color: lightgrey;}
div#nav-upload { grid-area: 1 / 6 / 2 / 7;
justify-self: center;
color: lightgrey;}
div#nav-login { grid-area: 1 / 7 / 2 / 8; }
*/
/*Footer*/ /*Footer*/
div#footer{ div#footer{
padding: 55px 0px; display: flex;
/*max-height: 229px;*/ flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
padding: 55px 80px;
width: 100%; width: 100%;
bottom: 0; bottom: 0;
background-color: black; background-color: black;
color:white; color:white;
display: grid;
grid-template-columns: 20% 40% 15% 25%;
grid-template-rows: 20% 80%;
grid-column-gap: 0px;
grid-row-gap: 0px;
} }
div#footer-title-br{ .footer-left, .footer-right {
grid-area: 1 / 1 / 2 / 2; display: flex;
padding-left: 30%; flex-direction: row;
} }
div#footer-title-others{ .footer-left{ flex-wrap: nowrap;}
grid-area: 1 / 2 / 2 / 3;
#footer-credit , #footer-funds {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
} }
div#footer-title-socials{ #footer-socials-links {
grid-area: 1 / 3 / 2 / 4; display: flex;
flex-direction: column;
flex-wrap: nowrap;
} }
div#footer-title-contact{ #footer-credit , #footer-funds, #footer-socials-links, #footer-contact-form {
grid-area: 1 / 4 / 2 / 5; padding-right: 56px;
} }
div#footer-title-br p, div#footer-title-others p, div#footer-title-contact p, div#footer-title-socials p{ div#footer-title-br p, div#footer-title-others p, div#footer-title-contact p, div#footer-title-socials p{
text-transform: uppercase; text-transform: uppercase;
font-family: 'Roboto Condensed', sans-serif; font-family: 'Roboto Condensed', sans-serif;
@ -288,10 +246,6 @@ div#footer-title-br p, div#footer-title-others p, div#footer-title-contact p, di
letter-spacing: 1.5px; letter-spacing: 1.5px;
color: var(--brown-grey); color: var(--brown-grey);
} }
div#footer-img-br{
grid-area: 2 / 1 / 3 / 2;
padding-left: 30%;
}
div#footer-img-br img{ div#footer-img-br img{
width: 90px; width: 90px;
height: 90px; height: 90px;
@ -299,95 +253,55 @@ div#footer-img-br img{
} }
div#footer-img-others{ div#footer-img-others{
display: flex; display: flex;
grid-area: 2 / 2 / 3 / 3; flex-direction: row;
padding-top: 5%; flex-wrap: nowrap;
padding-top: 26px;
} }
div#footer-img-lottery{ div#footer-img-lottery{
padding-left: 10%; padding-left: 60px;
} }
div#footer-img-lottery img{ div#footer-img-lottery img{
width: 124px; width: 100%;
height: 81px; max-width: 124px;
height: auto;
} }
div#footer-img-wiki img{ div#footer-img-wiki img{
width: 56px; width: 100%;
height: 56px; max-width: 56px;
} height: auto;
div#footer-socials-links{
grid-area: 2 / 3 / 3 / 4;
}
div#footer-socials-links p{
margin-top: 0px;
margin-bottom: 0px;
} }
div#footer-socials-links a{ div#footer-socials-links a{
text-decoration: none; text-decoration: none;
color:#FFFFFF; color:#FFFFFF;
font-family: 'Roboto Regular', sans-serif; font-family: 'Roboto Regular', sans-serif;
font-size: 16px; font-size: calc(16px + (20 - 16) * ((100vw - 768px) / (1400 - 768)));
font-weight: normal; font-weight: normal;
font-stretch: normal; font-stretch: normal;
font-style: normal; font-style: normal;
line-height: 1.63;
letter-spacing: normal; letter-spacing: normal;
} }
div#footer-contact{
grid-area: 2 / 4 / 3 / 5;
padding-top: 5%;
}
div#contactform{ div#contactform{
background-color: #1B42D8;
width: 250px;
height: 55px;
border-radius: 6px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
div#footer-contact a{ #footer-contact a {
text-decoration: none; text-decoration: none;
color: #FFFFFF;
font-weight: bold;
}
div#footer div#footer-top div#footer-top-left,
div#footer div#footer-top div#footer-top-right{
display: inline-flex;
border:lime 1px solid;
}
div#footer div#footer-left{
left: 0px;
width: 30%;
/*display: contents;*/
}
div#footer div#footer-right{
right: 0px;
width: 30%;
float: right;
/*position: absolute;*/
}
div#footer div#footer-left div,
div#footer div#footer-right div{
display: inline-block;
border:cyan 1px solid;
}
input#newslettersubs{
background-color: #000000;
color:#FFFFFF; color:#FFFFFF;
border-radius: 6px;
height: 48px;
border: solid 1px;
}
input.submitemail{
background-color: #1B42D8;
color: #FFFFFF;
border:none;
border-radius: 6px;
height: 50px;
width: 50px;
} }
@media screen and (min-width:0px) and (max-width: 768px) {
#footer-title-others {margin-left: auto;}
#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%; }
}
/*Titles all pages*/ /*Titles all pages*/
@ -547,6 +461,7 @@ a.paginate_button.next:after {
min-height: 48px; min-height: 48px;
font-family: Roboto; font-family: Roboto;
font-size: 14px; font-size: 14px;
line-height: 16px;
font-weight: bold; font-weight: bold;
font-stretch: condensed; font-stretch: condensed;
font-style: normal; font-style: normal;
@ -555,8 +470,9 @@ a.paginate_button.next:after {
text-align: center; text-align: center;
color: #ffffff; color: #ffffff;
cursor: pointer; cursor: pointer;
background-color: var(--blue-blue);
border-radius: 6px;
} }
.secondary-button { .secondary-button {
width: 365px; width: 365px;
height: 48px; height: 48px;
@ -641,7 +557,6 @@ div#home-recent-grid, div#browsethearchive-grid{
text-align: center; text-align: center;
grid-gap: 2rem; grid-gap: 2rem;
} }
div#show-button-wrapper{ div#show-button-wrapper{
width: 100%; width: 100%;
} }
@ -649,7 +564,6 @@ div.home-show-wrapper{
width: 100%; width: 100%;
margin: 60px 0px; margin: 60px 0px;
} }
span.home-show{ span.home-show{
display: flex; display: flex;
margin: auto; margin: auto;
@ -664,7 +578,7 @@ span.home-show{
cursor: pointer; cursor: pointer;
} }
@media (min-width: 600px) { @media (min-width: 768px) {
#home-recent-grid, #browsethearchive-grid { grid-template-columns: repeat(2, 1fr); } #home-recent-grid, #browsethearchive-grid { grid-template-columns: repeat(2, 1fr); }
} }
@media (min-width: 1000px) { @media (min-width: 1000px) {
@ -675,24 +589,6 @@ span.home-show{
} }
/*@media (min-width: 300px) {
#browsethearchive-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 700px) {
#browsethearchive-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
#browsethearchive-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1600px) {
#browsethearchive-grid { grid-template-columns: repeat(6, 1fr); }
}
*/
/************ BROWSE THE ARCHIVE Pagination ************/ /************ BROWSE THE ARCHIVE Pagination ************/
/*img.browsethearchive-imgs{ /*img.browsethearchive-imgs{
@ -732,18 +628,15 @@ div#browsethearchive-grid{
text-decoration: none; text-decoration: none;
font-family: 'Roboto Condensed', sans-serif; font-family: 'Roboto Condensed', sans-serif;
} }
#browsethearchive-pagin li a{ #browsethearchive-pagin li a{
color: #000000; color: #000000;
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
font-family: 'Roboto Condensed', sans-serif; font-family: 'Roboto Condensed', sans-serif;
} }
ul#browsethearchive-pagin{ ul#browsethearchive-pagin{
display: inline-flex; display: inline-flex;
} }
#browsethearchive-pagin li { #browsethearchive-pagin li {
display: flex; display: flex;
align-items: center; align-items: center;

39
templates/layout.html
View File

@ -46,31 +46,30 @@
{% endblock content %} {% endblock content %}
<div id="footer"> <div id="footer">
<div id="footer-credit">
<!-- <div id="footer-br"> --> <div id="footer-title-br"><p>A project by</p></div>
<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> <div id="footer-img-br"><img src="{{ url_for('static', filename='/imgs/Logos/Banner-Repeater-logo.png') }}"></div>
<!-- </div> --> </div>
<!-- <div id="footer-others"> --> <div id="footer-funds">
<div id="footer-title-others"><p>With support from:</p></div> <div id="footer-title-others"><p>With support from</p></div>
<div id="footer-img-others"> <div id="footer-img-others">
<div id="footer-img-wiki"><img src="{{ url_for('static', filename='/imgs/Logos/wikimedia_logo.png') }}"></div> <div id="footer-img-wiki"><img src="{{ url_for('static', filename='/imgs/Logos/wikimedia_logo.png') }}"></div>
<div id="footer-img-lottery"><img src="{{ url_for('static', filename='/imgs/Logos/Lottery-white on black.png') }}"></div> <div id="footer-img-lottery"><img src="{{ url_for('static', filename='/imgs/Logos/Lottery-white on black.png') }}"></div>
</div> </div>
</div>
<div id="footer-socials">
<div id="footer-title-socials"><p>SOCIAL</p></div> <div id="footer-title-socials"><p>SOCIAL</p></div>
<div id="footer-socials-links"> <div id="footer-socials-links">
<p><a target="_blank" href="https://www.facebook.com/BannerRepeater">Facebook</a></p> <a target="_blank" href="https://www.facebook.com/BannerRepeater">Facebook</a>
<p><a target="_blank" href="https://twitter.com/BANNERREPEATER">Twitter</a></p> <a target="_blank" href="https://twitter.com/BANNERREPEATER">Twitter</a>
<p><a target="_blank" href="https://www.instagram.com/bannerrepeater/">Instagram</a></p> <a target="_blank" href="https://www.instagram.com/bannerrepeater/">Instagram</a>
<p><a target="_blank" href="mailto:daap.community@disroot.org">Email address</a></p> <a target="_blank" href="mailto:daap.community@disroot.org">Email address</a></p>
</div> </div>
</div>
<div id="footer-contact-form">
<div id="footer-title-contact"><p>EXPRESSION OF INTEREST</p></div> <div id="footer-title-contact"><p>EXPRESSION OF INTEREST</p></div>
<div id="footer-contact"><a href=""><div class="bluebutton" id="contactform">FILL UP CONTACT FORM<span></span></div></a></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