0.3.0 ui changes

This commit is contained in:
Mike Young
2019-12-14 23:27:58 -05:00
parent 567750fbb7
commit 1647c06417
3 changed files with 48 additions and 21 deletions

View File

@@ -3,14 +3,14 @@ body{
padding: 0px; padding: 0px;
background-color: #DCDCDD; background-color: #DCDCDD;
color: #fff; color: #fff;
overflow: hidden; overflow-x: hidden;
} }
#app{ #app{
display: grid; display: grid;
grid-template-areas: "app_header" grid-template-areas: "app_header"
"app_body" "app_body"
"app_footer"; "app_footer";
grid-template-rows: auto 84vh auto; grid-template-rows: auto auto auto;
max-height: 100%; max-height: 100%;
} }
.clear{ .clear{
@@ -74,22 +74,38 @@ body{
grid-template-rows: auto; grid-template-rows: auto;
grid-template-areas: "shelf"; grid-template-areas: "shelf";
justify-items: center; justify-items: center;
overflow-y: scroll;
background-color: dimgray; background-color: dimgray;
} }
.app_footer{ .app_footer{
grid-area: app_footer; grid-area: app_footer;
display: flex; display: grid;
flex-direction: row; grid-template-areas: "python_badge gplv3_badge contact";
grid-template-columns: 1fr 1fr 8fr;
justify-content: space-between; justify-content: space-between;
min-width: 100%; min-width: 100%;
background-color: #2b2b2b; background-color: #2b2b2b;
margin: 0px; margin: 0px;
font-family: Audiowide, cursive;
font-size: 15px;
}
.web_footer_link{
text-decoration: none;
color: #a5a3a3;
} }
.copyright{ .copyright{
grid-area: gplv3_badge;
display: grid;
align-content: center;
font-family: Audiowide, cursive;
font-size: 9px;
justify-self: left;
} }
.footer_contact{ .footer_contact{
grid-area: contact;
display: inline-grid;
align-content: center;
justify-items: right;
font-size: 12px;
} }
.nav_top{ .nav_top{
@@ -163,8 +179,14 @@ justify-content: right;
grid-area: right_col grid-area: right_col
} }
.python_logo{ .python_logo{
grid-area: python_badge;
display: grid;
align-content: center;
} }
p{
margin: 0px;
}
#python_logo{ #python_logo{
height: 37px; height: 37px;
width: 91px; width: 91px;
@@ -189,7 +211,7 @@ justify-content: right;
} }
.book_thumb{ .book_thumb{
width: 23vw; width: 23vw;
height: 75vh; height: 50vh;
} }
a.book_link{ a.book_link{
text-decoration: none; text-decoration: none;

View File

@@ -59,12 +59,16 @@
</div> </div>
</div> </div>
<div class="app_footer" > <div class="app_footer" >
<div class="python_logo"><img src="/static/img/py.png" id="python_logo" /></div> <div class="python_logo" >
<div class="copyright">pyShelf is an opensource project</div> <img src="/static/img/py.png" id="python_logo" />
<div class="footer_contact"> </div>
#pyshelf on freenode<br /> <div class="copyright">
<a href=http://pyshelf.com class="nav_link" alt="pyshelf.com">http://pyshelf.com</a> <a href="https://www.gnu.org/licenses/gpl-3.0.txt" class="web_footer_link"><img src="/static/img/gplv3-or-later.png" alt="GPLv3 or later" /></a>
</div> </div>
<div class="footer_contact">
<p>irc: <a href="irc://freenode.net/pyshelf" class="web_footer_link">#pyshelf</a> on freenode | discord: <a href="https://discord.gg/H9TbNJS" class="web_footer_link">discord.gg/H9TbNJS</a> | web: <a href=http://pyshelf.com class="web_footer_link" alt="pyshelf.com">http://pyshelf.com</a> | source: <a href="https://github.com/th3r00t/pyShelf" class="web_footer_link">github.com/th3r00t/pyShelf</a></p>
</div>
</div> </div>
</div> </div>
</body> </body>

View File

@@ -62,14 +62,15 @@
</div> </div>
</div> </div>
<div class="app_footer" > <div class="app_footer" >
<div class="python_logo" > <div class="python_logo" >
<img src="/static/img/py.png" id="python_logo" /> <img src="/static/img/py.png" id="python_logo" />
</div> </div>
<div class="copyright">pyShelf is an opensource project</div> <div class="copyright">
<div class="footer_contact"> <a href="https://www.gnu.org/licenses/gpl-3.0.txt" class="web_footer_link"><img src="/static/img/gplv3-or-later.png" alt="GPLv3 or later" /></a>
#pyshelf on freenode<br /> </div>
<a href=http://pyshelf.com class="web_footer_link" alt="pyshelf.com">http://pyshelf.com</a> <div class="footer_contact">
</div> <p>irc: <a href="irc://freenode.net/pyshelf" class="web_footer_link">#pyshelf</a> on freenode | discord: <a href="https://discord.gg/H9TbNJS" class="web_footer_link">discord.gg/H9TbNJS</a> | web: <a href=http://pyshelf.com class="web_footer_link" alt="pyshelf.com">http://pyshelf.com</a> | source: <a href="https://github.com/th3r00t/pyShelf" class="web_footer_link">github.com/th3r00t/pyShelf</a></p>
</div>
</div> </div>
</div> </div>
</body> </body>