added static to dockerfile. Started setting up css grid, with nav on left and large main window

This commit is contained in:
Dan
2020-07-30 00:54:54 -04:00
parent 422b2a111c
commit a728d630a0
3 changed files with 45 additions and 23 deletions

View File

@@ -2,6 +2,7 @@ FROM python:3
ADD main.py / ADD main.py /
ADD requirements.txt / ADD requirements.txt /
ADD templates /templates ADD templates /templates
ADD static /static
VOLUME /download/ VOLUME /download/

View File

@@ -6,13 +6,37 @@
text-decoration: none; text-decoration: none;
font-size: 16px font-size: 16px
} }
body{ .grid-container{
background: white; display: grid;
grid-template-columns: auto auto auto auto;
grid-template-rows: auto auto auto auto;
grid-gap: 10px;
// background-color: #2196F3;
padding: 10px;
} }
.wrapper{ .grid-container > div {
display: block; // background-color: rgba(255,255,0.9);
text-align: center;
padding: 20px 0;
fonrt-size: 30px;
} }
.header{
.main { grid-column-start: 2;
float:right grid-column-end: 4;
}
.nav{
grid-column:1;
border-style: dotted;
}
ul{
list-style: none;
text-align:left;
padding-left:2px;
}
.main{
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 4;
background-color: rgba(255,255,0,0.9);
} }

View File

@@ -6,21 +6,18 @@
<title>Title</title> <title>Title</title>
</head> </head>
<body> <body>
<div class="container"> <dev class="grid-container">
<Header> <div class="header">Super Awesome Mange Downloading and Viewing Thing</div>
<h1>Test</h1> <div class="nav" align="left">
</header> <ul>
<div class=wrapper> <li><a href="/active"><button class=button>Active</button></a></li>
<nav> <li><a href="/download"><button class=button>Download</button></a></li>
<ul> <li><a href="http://google.com"><button class=button>Test</button></a></li>
<li><a href="/active"><button class=button>Active</button></a></li> <li><button class=button>asdfl</button></li>
<li><a href="/download"><button class=button>Download</button></a></li> </ul>
<li><a href="http://google.com"><button class=button>Test</button></a></li> </div>
<li><button class=button>asdfl</button></li> <div class="main">
</nav> main
<section>
HIIIIIII
<section>
</div> </div>
</div> </div>
</body> </body>