Bootstrap and colours

This commit is contained in:
Luke Murphy 2020-04-04 21:09:47 +02:00
parent 5305b0f49f
commit b461658c62
No known key found for this signature in database
GPG Key ID: 5E2EF5A63E3718CC
11 changed files with 3979 additions and 232 deletions

3899
hbbs/static/css/bootstrap-grid.css vendored Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

7
hbbs/static/css/bootstrap.min.css vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,31 @@
@font-face {
font-family: "Compagnon Roman";
src: url("fonts/Compagnon-Roman.woff") format("woff");
font-weight: bold;
font-style: normal;
}
@keyframes gradient {
0% {
background-color: pink;
}
25% {
background-color: lightgreen;
}
50% {
background-color: lightblue;
}
100% {
background-color: cornsilk;
}
}
body {
font-family: "Compagnon Roman", serif;
animation-name: gradient;
animation-duration: 120s;
}
html * {
border: 1px black solid;
}

View File

@ -1,221 +0,0 @@
/* Custom CSS styles */
@font-face {
font-family: "Signika Bold";
src: url("fonts/Signika-Bold.ttf") format("ttf");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "Signika";
src: url("fonts/Signika-Regular.ttf") format("ttf");
font-weight: normal;
font-style: normal;
}
body {
height: 100vh;
margin: 0px;
overflow: hidden;
}
a {
text-decoration: none;
color: #26b529;
}
a:hover {
font-style: italic;
}
canvas {
display: block;
}
img.perms {
width: 30%;
display: inline;
}
/* Button style */
img.button {
width: 4%;
cursor: pointer;
}
.record {
position: fixed;
top: 20px;
left: 20px;
}
.record:hover {
top: 22px;
left: 22px;
}
.stop {
position: fixed;
top: 100px;
left: 20px;
}
.stop:hover {
top: 102px;
left: 22px;
}
.leaf {
position: fixed;
top: 180px;
left: 20px;
}
.leaf:hover {
top: 182px;
left: 22px;
}
.about {
width: 3% !important;
position: fixed;
top: 260px;
left: 20px;
}
.about:hover {
top: 262px;
left: 22px;
}
.about-text {
height: 100vh;
padding: 1em;
width: 60%;
font-family: "Signika", sans-serif;
font-size: 1.5em;
line-height: 1.5em;
overflow: scroll;
}
h1 {
line-height: 1em;
}
h3 {
padding: 1em 0;
}
.backtoindex img {
width: 10%;
margin: 0 auto !important;
margin-left: 20vw;
padding: 3em 2em 0 10em;
float: left;
}
.button.button-about {
float: left;
padding-right: 2em;
cursor: auto;
}
/* Footer */
div.footer {
padding: 3em 0;
}
.ac {
width: 30%;
}
.stimu {
width: 12%;
}
.up {
width: 10%;
padding-left: 0.4em;
}
/* Other displays */
@media screen and (max-width: 770px) {
img.button {
width: 10%;
}
.backtoindex img {
padding: 3em 2em 0 11em;
}
.about {
width: 7% !important;
top: unset;
right: 25vw;
bottom: 2vh;
left: unset;
}
.about:hover {
width: 7% !important;
top: unset;
right: 25vw;
bottom: 2vh;
left: unset;
}
.leaf {
top: unset;
bottom: 3vh;
left: 55vw;
}
.leaf:hover {
top: unset;
bottom: 3vh;
left: 55vw;
}
.stop {
top: unset;
bottom: 3vh;
left: 40vw;
}
.stop:hover {
top: unset;
bottom: 3vh;
left: 40vw;
}
.record {
top: unset;
bottom: 3vh;
left: 25vw;
}
.record:hover {
top: unset;
bottom: 3vh;
left: 25vw;
}
.about-text {
height: 100vh;
padding: 3em;
width: 100%;
font-family: sans-serif;
font-size: 1em;
line-height: 1.5em;
overflow: scroll;
}
h1 {
line-height: 1em;
font-family: sans;
}
}

View File

@ -6,14 +6,33 @@
<title>hbbs.decentral1.se</title>
<link
rel="stylesheet"
href="/static/styles.css"
href="/static/css/bootstrap.min.css"
type="text/css"
media="screen"
/>
<link
rel="stylesheet"
href="/static/css/bootstrap-grid.min.css"
type="text/css"
media="screen"
/>
<link
rel="stylesheet"
href="/static/css/styles.css"
type="text/css"
media="screen"
/>
<link rel="icon" href="/static/images/favicon.ico" />
</head>
<body>
<div id="navigation">
<div class="container-fluid">
<div class="row">
<div id="navigation" class="col-md-4">
<img
class="img-fluid"
src="/static/images/logo.png"
alt="hbbs logo"
/>
<ul>
<li><a href="/">About</a></li>
<li><a href="/programmes">Programmes</a></li>
@ -21,8 +40,10 @@
<li><a href="/participate">Participate</a></li>
</ul>
</div>
<div id="content">
<div id="content" class="col-md-4">
{% block content %}{% endblock %}
</div>
</div>
</div>
</body>
</html>