Bootstrap and colours
This commit is contained in:
parent
5305b0f49f
commit
b461658c62
3899
hbbs/static/css/bootstrap-grid.css
vendored
Normal file
3899
hbbs/static/css/bootstrap-grid.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
1
hbbs/static/css/bootstrap-grid.css.map
Normal file
1
hbbs/static/css/bootstrap-grid.css.map
Normal file
File diff suppressed because one or more lines are too long
7
hbbs/static/css/bootstrap-grid.min.css
vendored
Normal file
7
hbbs/static/css/bootstrap-grid.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
hbbs/static/css/bootstrap-grid.min.css.map
Normal file
1
hbbs/static/css/bootstrap-grid.min.css.map
Normal file
File diff suppressed because one or more lines are too long
7
hbbs/static/css/bootstrap.min.css
vendored
Normal file
7
hbbs/static/css/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
hbbs/static/css/bootstrap.min.css.map
Normal file
1
hbbs/static/css/bootstrap.min.css.map
Normal file
File diff suppressed because one or more lines are too long
31
hbbs/static/css/styles.css
Normal file
31
hbbs/static/css/styles.css
Normal 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;
|
||||
}
|
@ -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;
|
||||
}
|
||||
}
|
@ -6,23 +6,44 @@
|
||||
<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">
|
||||
<ul>
|
||||
<li><a href="/">About</a></li>
|
||||
<li><a href="/programmes">Programmes</a></li>
|
||||
<li><a href="/collection">Collection</a></li>
|
||||
<li><a href="/participate">Participate</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content">
|
||||
{% block content %}{% endblock %}
|
||||
<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>
|
||||
<li><a href="/collection">Collection</a></li>
|
||||
<li><a href="/participate">Participate</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content" class="col-md-4">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
Loading…
Reference in New Issue
Block a user