Very rough sample in place

This commit is contained in:
Quad 2022-04-11 11:10:32 +02:00
parent ac32fa394f
commit a43e45b237
3 changed files with 52 additions and 3 deletions

View File

@ -1,10 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style rel="stylesheet" href="/static/css/master.css"></style>
<link rel="stylesheet" type="text/css" href="/static/css/base.css" />
<link rel="stylesheet" type="text/css" href="/static/css/master.css" />
</head>
<body>
<div>
<div id="header-block">
<h1> Example </h1>
</div>
<div id="content-block">
{% block content %}{% endblock %}
</div>
</body>

22
static/css/base.css Normal file
View File

@ -0,0 +1,22 @@
div {
box-sizing: border-box;
}
body, html, div, p, h1, h2, h3, h4, h5 {
margin: 0;
padding: 0;
font-family: sans-serif;
}
:root {
--site-width: 960px;
--bgcolor-1: rgb(225,220,220);
--bgcolor-2: rgb(250,250,250);
--bgcolor-3: rgb(245,65,45);
--header-height: 50px;
--shadow-size: 8px;
--shadow-color: rgba(0,0,0,0.35);
}

View File

@ -1 +1,23 @@
/* Nothing here yet */
body {
background-color: var(--bgcolor-1);
}
#header-block {
display: block;
width: 100vw;
height: var(--header-height);
background-color: var(--bgcolor-3);
box-shadow: 0px 0px var(--shadow-size) var(--shadow-color);
margin-bottom: translateY(-100%);
}
#content-block {
display: block;
max-width: var(--site-width);
width: 100vw;
padding: 10px;
background-color: var(--bgcolor-2);
margin-left: auto;
margin-right: auto;
box-shadow: 0px 0px var(--shadow-size) var(--shadow-color);
}