Began laying out frontend interface

This commit is contained in:
Mike
2019-11-03 08:58:54 -05:00
parent 15a24cb615
commit 1bf1640156
5 changed files with 54 additions and 64 deletions

View File

@@ -1,3 +1,31 @@
body{
background-color: #f1f1
margin: 0px 10px 0px 10px;
padding: 0px;
}
#app{
display: grid;
grid-template-areas: "app_header"
"app_body"
"app_footer";
}
.app_header{
grid-area: app_header;
}
.app_body{
display: grid;
grid-area: app_body;
grid-template-columns: 10% 80% 10%;
grid-template-areas: "left_col shelf right_col"
}
.app_footer{
grid-area: app_footer;
}
.left_col{
grid-area: left_col
}
.shelf{
grid-area: shelf
}
.right_col{
grid-area: right_col
}

BIN
static/img/shelf.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@@ -9,8 +9,24 @@
</head>
<body>
<div id="app">
<h1 class="app_hdr">Welcome to pyShelf</h1>
<h2 class="app_subhdr">An Open Source E-book Server!</h2>
<div class="app_header" >
<h1 class="app_hdr">Welcome to pyShelf</h1>
<h2 class="app_subhdr">An Open Source E-book Server!</h2>
</div>
<div class="app_body" >
<div class="left_col">
left_col
</div>
<div class="shelf">
shelf
</div>
<div class="right_col" >
right_col
</div>
</div>
<div class="app_footer" >
Footer
</div>
</div>
</body>
</html>