starting to look like something
This commit is contained in:
Sander Roosendaal
@@ -6,3 +6,11 @@
|
|||||||
<h1>Main</h1>
|
<h1>Main</h1>
|
||||||
<p>Vestibulum consectetur sit amet nisi ut consectetur. Praesent efficitur, nibh vitae fringilla scelerisque, est neque faucibus quam, in iaculis purus libero eget mauris. Curabitur et luctus sapien, ac gravida orci. Aliquam erat volutpat. In hac habitasse platea dictumst. Aenean commodo, arcu a commodo efficitur, libero dolor mollis turpis, non posuere orci leo eget enim. Curabitur sit amet elementum orci, pulvinar dignissim urna. Morbi id ex eu ex congue laoreet. Aenean tincidunt dolor justo, semper pretium libero luctus nec. Ut vulputate metus accumsan leo imperdiet tincidunt. Phasellus nec rutrum dolor. Cras imperdiet sollicitudin arcu, id interdum nibh fermentum in.</p>
|
<p>Vestibulum consectetur sit amet nisi ut consectetur. Praesent efficitur, nibh vitae fringilla scelerisque, est neque faucibus quam, in iaculis purus libero eget mauris. Curabitur et luctus sapien, ac gravida orci. Aliquam erat volutpat. In hac habitasse platea dictumst. Aenean commodo, arcu a commodo efficitur, libero dolor mollis turpis, non posuere orci leo eget enim. Curabitur sit amet elementum orci, pulvinar dignissim urna. Morbi id ex eu ex congue laoreet. Aenean tincidunt dolor justo, semper pretium libero luctus nec. Ut vulputate metus accumsan leo imperdiet tincidunt. Phasellus nec rutrum dolor. Cras imperdiet sollicitudin arcu, id interdum nibh fermentum in.</p>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block sidebar %}
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Link 1</a></li>
|
||||||
|
<li><a href="">Link 2</a></li>
|
||||||
|
<li><a href="">Link 3</a></li>
|
||||||
|
</ul>
|
||||||
|
{% endblock %}
|
||||||
|
|||||||
846
static/css/rowsandall2.css
Normal file
846
static/css/rowsandall2.css
Normal file
@@ -0,0 +1,846 @@
|
|||||||
|
#main {
|
||||||
|
background-color: transparent;
|
||||||
|
-webkit-background-size: cover;
|
||||||
|
-moz-background-size: cover;
|
||||||
|
-o-background-size: cover;
|
||||||
|
background-size: cover;
|
||||||
|
min-height: 759px;
|
||||||
|
min-width: 1024px;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.one {
|
||||||
|
background-image: url("/static/img/landing1.jpg");
|
||||||
|
}
|
||||||
|
|
||||||
|
.two {
|
||||||
|
background-image: url("/static/img/landing1.jpg");
|
||||||
|
}
|
||||||
|
|
||||||
|
.three {
|
||||||
|
background-image: url("/static/img/landing2.jpg");
|
||||||
|
}
|
||||||
|
|
||||||
|
.four {
|
||||||
|
background-image: url("/static/img/landing8b.jpg");
|
||||||
|
}
|
||||||
|
|
||||||
|
.watermark {
|
||||||
|
position: absolute;
|
||||||
|
float: center;
|
||||||
|
opacity: 0.25;
|
||||||
|
font-size: 3em;
|
||||||
|
width: 100%;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-25%) translateY(-50%);
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.invisible {
|
||||||
|
display: none
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 62.5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
/* background: #edc; */
|
||||||
|
color: #333;
|
||||||
|
font-size: 1.2em;
|
||||||
|
height: auto;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notyellow {
|
||||||
|
font-size: 1.2em;
|
||||||
|
height: auto;
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellow {
|
||||||
|
color: #cccc00;
|
||||||
|
font-size: 1.2em;
|
||||||
|
height: auto;
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
cox {
|
||||||
|
/* font-family: Georgia, serif; */
|
||||||
|
font-weight: normal;
|
||||||
|
/* padding-top: 20px; */
|
||||||
|
text-align: center;
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* `Tables
|
||||||
|
-------------------------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
|
||||||
|
th {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listtable tbody tr:nth-of-type(even) { background-color: #DDD; }
|
||||||
|
.listtable thead th {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.shortpadded td { padding: 3px 3px }
|
||||||
|
|
||||||
|
.paddedtable td { padding: 1px 20px }
|
||||||
|
|
||||||
|
.cortable {
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cortable td {
|
||||||
|
border: 1px solid #999;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
th.rotate {
|
||||||
|
/* Something you can count on */
|
||||||
|
height: 78px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
th.rotate > div {
|
||||||
|
transform:
|
||||||
|
/* Magic Numbers */
|
||||||
|
translate(18px, 51px)
|
||||||
|
/* 45 is really 360 - 45 */
|
||||||
|
rotate(315deg);
|
||||||
|
width: 30px;
|
||||||
|
}
|
||||||
|
th.rotate > div > span {
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
padding: 5px 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixtable table {
|
||||||
|
table-layout: fixed;
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message {
|
||||||
|
border: 1px solid #000;
|
||||||
|
background-color: #f88;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #000;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.midden { text-align: center }
|
||||||
|
|
||||||
|
.poscor {
|
||||||
|
background-color: #8f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.weakposcor {
|
||||||
|
background-color: #efe;
|
||||||
|
}
|
||||||
|
|
||||||
|
.negcor {
|
||||||
|
background-color:#f88;
|
||||||
|
}
|
||||||
|
|
||||||
|
.weaknegcor {
|
||||||
|
background-color: #fee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.successmessage {
|
||||||
|
border: 1px solid #000;
|
||||||
|
background-color: #8f8;
|
||||||
|
color: #000;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deletelink {
|
||||||
|
border: 1px solid #000;
|
||||||
|
background-color: #f88;
|
||||||
|
color: #000;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
border: 1px solid #666;
|
||||||
|
color: #000;
|
||||||
|
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #ddd;
|
||||||
|
/* padding: 10px 0; */
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbutton {
|
||||||
|
background-color: #ddd;
|
||||||
|
-moz-border-radius: 15px;
|
||||||
|
-webkit-border-radius: 15px;
|
||||||
|
border: 2px solid #666;
|
||||||
|
padding: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.transparentbutton {
|
||||||
|
padding: 1px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip .tooltiptext {
|
||||||
|
visibility: hidden;
|
||||||
|
width: 120px;
|
||||||
|
background-color: #ffff66;
|
||||||
|
color: black;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 5px 5px;
|
||||||
|
|
||||||
|
/* Position the tooltip */
|
||||||
|
position: absolute;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip:hover .tooltiptext {
|
||||||
|
visibility: visible;
|
||||||
|
transition-delay:1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.caption {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-announcement-box {
|
||||||
|
padding: .2em .5em .2em 0em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-announcement {
|
||||||
|
font: 1.1em/1.5em sans-serif;
|
||||||
|
text-decoration: none;
|
||||||
|
display: block;
|
||||||
|
padding: .2em .5em .2em .5em;
|
||||||
|
zoom: 1;
|
||||||
|
/* border-radius: .5em; */
|
||||||
|
/* -moz-border-radius: .5em; */
|
||||||
|
/* -webkit-border-radius: .5em; */
|
||||||
|
text-align: left;
|
||||||
|
border: solid 1px #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
border-radius: 50%;
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
border: solid 1px #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
font: 1.1em/1.5em sans-serif;
|
||||||
|
text-decoration: none;
|
||||||
|
display: block;
|
||||||
|
/* width: 100%; */
|
||||||
|
color: white;
|
||||||
|
padding: 0.2em 0.0em 0.2em 0.0em;
|
||||||
|
zoom: 1;
|
||||||
|
/* border-radius: .5em; */
|
||||||
|
/* -moz-border-radius: .5em; */
|
||||||
|
/* -webkit-border-radius: .5em; */
|
||||||
|
/* -box-shadow: 0 1px 3px rgba(0,0,0,0.5); */
|
||||||
|
/* -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); */
|
||||||
|
/* -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); /*
|
||||||
|
/* text-shadow: 0 -1px 1px rgba(0,0,0,0.25); */
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
font: 1.1em/1.5em sans-serif;
|
||||||
|
text-decoration: none;
|
||||||
|
display: block;
|
||||||
|
/* width: 100%; */
|
||||||
|
color: white;
|
||||||
|
padding: 0.2em 0.0em 0.2em 0.0em;
|
||||||
|
zoom: 1;
|
||||||
|
border-radius: .5em;
|
||||||
|
-moz-border-radius: .5em;
|
||||||
|
-webkit-border-radius: .5em;
|
||||||
|
/* -box-shadow: 0 1px 3px rgba(0,0,0,0.5); */
|
||||||
|
/* -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); */
|
||||||
|
/* -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); */
|
||||||
|
/* text-shadow: 0 -1px 1px rgba(0,0,0,0.25); */
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.button {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
background: #d8e6ff; /* old browsers */
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:active {
|
||||||
|
position: relative;
|
||||||
|
top: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bigrounded {
|
||||||
|
-webkit-border-radius: 2em;
|
||||||
|
-moz-border-radius: 2em;
|
||||||
|
border-radius: 2em;
|
||||||
|
}
|
||||||
|
.medium {
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
.small {
|
||||||
|
font-size: 1.0em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* black */
|
||||||
|
.black {
|
||||||
|
color: #d7d7d7;
|
||||||
|
border: solid 1px #333;
|
||||||
|
background: #333;
|
||||||
|
}
|
||||||
|
.black:hover {
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
.black:active {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* gray */
|
||||||
|
.blue {
|
||||||
|
color: #e9e9e9;
|
||||||
|
border: solid 1px #555;
|
||||||
|
background: #6e6e6e;
|
||||||
|
}
|
||||||
|
.blue:hover {
|
||||||
|
background: #616161;
|
||||||
|
}
|
||||||
|
.blue:active {
|
||||||
|
color: #afafaf;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* white */
|
||||||
|
.white {
|
||||||
|
color: #606060;
|
||||||
|
border: solid 1px #b7b7b7;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
.white:hover {
|
||||||
|
background: #ededed;
|
||||||
|
}
|
||||||
|
.white:active {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* orange */
|
||||||
|
.orange {
|
||||||
|
color: #fef4e9;
|
||||||
|
border: solid 1px #da7c0c;
|
||||||
|
background: #f78d1d;
|
||||||
|
}
|
||||||
|
.orange:hover {
|
||||||
|
background: #f47c20;
|
||||||
|
}
|
||||||
|
.orange:active {
|
||||||
|
color: #fcd3a5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* red */
|
||||||
|
.red {
|
||||||
|
color: #faddde;
|
||||||
|
border: solid 1px #980c10;
|
||||||
|
background: #d81b21;
|
||||||
|
}
|
||||||
|
.red:hover {
|
||||||
|
background: #b61318;
|
||||||
|
}
|
||||||
|
.red:active {
|
||||||
|
color: #de898c;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* blue */
|
||||||
|
.graytext {
|
||||||
|
color: #27aae2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gray {
|
||||||
|
color: #fae7e9;
|
||||||
|
border: solid 1px #27aae2;
|
||||||
|
background: #27aae2;
|
||||||
|
}
|
||||||
|
.gray:hover {
|
||||||
|
background: #1c74bb;
|
||||||
|
border: solid 1px #27aae2;
|
||||||
|
}
|
||||||
|
.gray:active {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* rosy */
|
||||||
|
.rosy {
|
||||||
|
color: #fae7e9;
|
||||||
|
border: solid 1px #b73948;
|
||||||
|
background: #da5867;
|
||||||
|
}
|
||||||
|
.rosy:hover {
|
||||||
|
background: #ba4b58;
|
||||||
|
}
|
||||||
|
.rosy:active {
|
||||||
|
color: #dca4ab;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* green */
|
||||||
|
.green {
|
||||||
|
color: #e8f0de;
|
||||||
|
border: solid 1px #538312;
|
||||||
|
background: #64991e;
|
||||||
|
}
|
||||||
|
.green:hover {
|
||||||
|
background: #538018;
|
||||||
|
}
|
||||||
|
.green:active {
|
||||||
|
color: #a9c08c;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* palegreen */
|
||||||
|
.palegreen {
|
||||||
|
background: palegreen;
|
||||||
|
box-shadow:inset 0px 0px 0px 6px #fff;
|
||||||
|
-moz-box-shadow:inset 0px 0px 0px 6px #fff;
|
||||||
|
box-shadow:inset 0px 0px 0px 6px #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* paleblue */
|
||||||
|
.paleblue {
|
||||||
|
# padding: 8px;
|
||||||
|
background: aliceblue;
|
||||||
|
box-shadow:inset 0px 0px 0px 6px #fff;
|
||||||
|
-moz-box-shadow:inset 0px 0px 0px 6px #fff;
|
||||||
|
box-shadow:inset 0px 0px 0px 6px #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* lightsalmon */
|
||||||
|
.lightsalmon {
|
||||||
|
# padding: 4px;
|
||||||
|
background: lightsalmon;
|
||||||
|
box-shadow:inset 0px 0px 0px 6px #fff;
|
||||||
|
-moz-box-shadow:inset 0px 0px 0px 6px #fff;
|
||||||
|
box-shadow:inset 0px 0px 0px 6px #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* filler */
|
||||||
|
.filler {
|
||||||
|
background: darkgray;
|
||||||
|
box-shadow:inset 0px 0px 0px 6px #fff;
|
||||||
|
-moz-box-shadow:inset 0px 0px 0px 6px #fff;
|
||||||
|
box-shadow:inset 0px 0px 0px 6px #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.padded {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* pink */
|
||||||
|
.pink {
|
||||||
|
color: #feeef5;
|
||||||
|
border: solid 1px #d2729e;
|
||||||
|
background: #f895c2;
|
||||||
|
}
|
||||||
|
.pink:hover {
|
||||||
|
background: #d57ea5;
|
||||||
|
}
|
||||||
|
.pink:active {
|
||||||
|
color: #f3c3d9;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.greenbar {
|
||||||
|
border: 1px solid #666;
|
||||||
|
color: #000;
|
||||||
|
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #8f8;
|
||||||
|
/* padding: 10px 0; */
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#footer {
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container_12,
|
||||||
|
.container_16,
|
||||||
|
.container_24 {
|
||||||
|
background-color: #fff;
|
||||||
|
background-repeat: repeat-y;
|
||||||
|
/* margin-bottom: 20px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.container_12 {
|
||||||
|
/* background-image: url(../img/12_col.gif); */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Style The Dropdown Button */
|
||||||
|
.dropbtn {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The container <div> - needed to position the dropdown content */
|
||||||
|
.dropdown {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dropdown Content (Hidden by Default) */
|
||||||
|
.dropdown-content {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
min-width: 160px;
|
||||||
|
/* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Links inside the dropdown */
|
||||||
|
.dropdown-content a {
|
||||||
|
text-decoration: none;
|
||||||
|
display: block;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Change color of dropdown links on hover */
|
||||||
|
/* .dropdown-content a:hover {background-color: #f1f1f1} */
|
||||||
|
|
||||||
|
/* Show the dropdown menu on hover */
|
||||||
|
.dropdown:hover .dropdown-content {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Change the background color of the dropdown button when the dropdown content is shown */
|
||||||
|
.dropdown:hover .dropbtn {
|
||||||
|
background-color: #3e8e41;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexplot {
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.wh:link {
|
||||||
|
color: #e9e9e9;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.wh:visited {
|
||||||
|
color: #e9e9e9;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.wh:hover {
|
||||||
|
color: #e9e9e9;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.bk-canvas-map {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* container */
|
||||||
|
.container {
|
||||||
|
padding: 5% 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CSS talk bubble */
|
||||||
|
.talk-bubble {
|
||||||
|
margin: 40px;
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
width: 200px;
|
||||||
|
height: auto;
|
||||||
|
background-color: lightyellow;
|
||||||
|
}
|
||||||
|
.border{
|
||||||
|
border: 8px solid #666;
|
||||||
|
}
|
||||||
|
.round{
|
||||||
|
border-radius: 30px;
|
||||||
|
-webkit-border-radius: 30px;
|
||||||
|
-moz-border-radius: 30px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Right triangle placed top left flush. */
|
||||||
|
.tri-right.border.left-top:before {
|
||||||
|
content: ' ';
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
left: -40px;
|
||||||
|
right: auto;
|
||||||
|
top: -8px;
|
||||||
|
bottom: auto;
|
||||||
|
border: 32px solid;
|
||||||
|
border-color: #666 transparent transparent transparent;
|
||||||
|
}
|
||||||
|
.tri-right.left-top:after{
|
||||||
|
content: ' ';
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
left: -20px;
|
||||||
|
right: auto;
|
||||||
|
top: 0px;
|
||||||
|
bottom: auto;
|
||||||
|
border: 22px solid;
|
||||||
|
border-color: lightyellow transparent transparent transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Right triangle, left side slightly down */
|
||||||
|
.tri-right.border.left-in:before {
|
||||||
|
content: ' ';
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
left: -40px;
|
||||||
|
right: auto;
|
||||||
|
top: 30px;
|
||||||
|
bottom: auto;
|
||||||
|
border: 20px solid;
|
||||||
|
border-color: #666 #666 transparent transparent;
|
||||||
|
}
|
||||||
|
.tri-right.left-in:after{
|
||||||
|
content: ' ';
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
left: -20px;
|
||||||
|
right: auto;
|
||||||
|
top: 38px;
|
||||||
|
bottom: auto;
|
||||||
|
border: 12px solid;
|
||||||
|
border-color: lightyellow lightyellow transparent transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Right triangle, placed bottom left side slightly in*/
|
||||||
|
.tri-right.border.btm-left:before {
|
||||||
|
content: ' ';
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
left: -8px;
|
||||||
|
right: auto;
|
||||||
|
top: auto;
|
||||||
|
bottom: -40px;
|
||||||
|
border: 32px solid;
|
||||||
|
border-color: transparent transparent transparent #666;
|
||||||
|
}
|
||||||
|
.tri-right.btm-left:after{
|
||||||
|
content: ' ';
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
left: 0px;
|
||||||
|
right: auto;
|
||||||
|
top: auto;
|
||||||
|
bottom: -20px;
|
||||||
|
border: 22px solid;
|
||||||
|
border-color: transparent transparent transparent lightyellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Right triangle, placed bottom left side slightly in*/
|
||||||
|
.tri-right.border.btm-left-in:before {
|
||||||
|
content: ' ';
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
left: 30px;
|
||||||
|
right: auto;
|
||||||
|
top: auto;
|
||||||
|
bottom: -40px;
|
||||||
|
border: 20px solid;
|
||||||
|
border-color: #666 transparent transparent #666;
|
||||||
|
}
|
||||||
|
.tri-right.btm-left-in:after{
|
||||||
|
content: ' ';
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
left: 38px;
|
||||||
|
right: auto;
|
||||||
|
top: auto;
|
||||||
|
bottom: -20px;
|
||||||
|
border: 12px solid;
|
||||||
|
border-color: lightyellow transparent transparent lightyellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Right triangle, placed bottom right side slightly in*/
|
||||||
|
.tri-right.border.btm-right-in:before {
|
||||||
|
content: ' ';
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
left: auto;
|
||||||
|
right: 30px;
|
||||||
|
bottom: -40px;
|
||||||
|
border: 20px solid;
|
||||||
|
border-color: #666 #666 transparent transparent;
|
||||||
|
}
|
||||||
|
.tri-right.btm-right-in:after{
|
||||||
|
content: ' ';
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
left: auto;
|
||||||
|
right: 38px;
|
||||||
|
bottom: -20px;
|
||||||
|
border: 12px solid;
|
||||||
|
border-color: lightyellow lightyellow transparent transparent;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
left: -8px;
|
||||||
|
right: auto;
|
||||||
|
top: auto;
|
||||||
|
bottom: -40px;
|
||||||
|
border: 32px solid;
|
||||||
|
border-color: transparent transparent transparent #666;
|
||||||
|
left: 0px;
|
||||||
|
right: auto;
|
||||||
|
top: auto;
|
||||||
|
bottom: -20px;
|
||||||
|
border: 22px solid;
|
||||||
|
border-color: transparent transparent transparent lightyellow;
|
||||||
|
|
||||||
|
/*Right triangle, placed bottom right side slightly in*/
|
||||||
|
.tri-right.border.btm-right:before {
|
||||||
|
content: ' ';
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
left: auto;
|
||||||
|
right: -8px;
|
||||||
|
bottom: -40px;
|
||||||
|
border: 20px solid;
|
||||||
|
border-color: #666 #666 transparent transparent;
|
||||||
|
}
|
||||||
|
.tri-right.btm-right:after{
|
||||||
|
content: ' ';
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
left: auto;
|
||||||
|
right: 0px;
|
||||||
|
bottom: -20px;
|
||||||
|
border: 12px solid;
|
||||||
|
border-color: lightyellow lightyellow transparent transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Right triangle, right side slightly down*/
|
||||||
|
.tri-right.border.right-in:before {
|
||||||
|
content: ' ';
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
left: auto;
|
||||||
|
right: -40px;
|
||||||
|
top: 30px;
|
||||||
|
bottom: auto;
|
||||||
|
border: 20px solid;
|
||||||
|
border-color: #666 transparent transparent #666;
|
||||||
|
}
|
||||||
|
.tri-right.right-in:after{
|
||||||
|
content: ' ';
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
left: auto;
|
||||||
|
right: -20px;
|
||||||
|
top: 38px;
|
||||||
|
bottom: auto;
|
||||||
|
border: 12px solid;
|
||||||
|
border-color: lightyellow transparent transparent lightyellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Right triangle placed top right flush. */
|
||||||
|
.tri-right.border.right-top:before {
|
||||||
|
content: ' ';
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
left: auto;
|
||||||
|
right: -40px;
|
||||||
|
top: -8px;
|
||||||
|
bottom: auto;
|
||||||
|
border: 32px solid;
|
||||||
|
border-color: #666 transparent transparent transparent;
|
||||||
|
}
|
||||||
|
.tri-right.right-top:after{
|
||||||
|
content: ' ';
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
left: auto;
|
||||||
|
right: -20px;
|
||||||
|
top: 0px;
|
||||||
|
bottom: auto;
|
||||||
|
border: 20px solid;
|
||||||
|
border-color: lightyellow transparent transparent transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* talk bubble contents */
|
||||||
|
.talktext{
|
||||||
|
padding: 1em;
|
||||||
|
text-align: left;
|
||||||
|
line-height: 1.5em;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
.talktext p{
|
||||||
|
/* remove webkit p margins */
|
||||||
|
-webkit-margin-before: 0em;
|
||||||
|
-webkit-margin-after: 0em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drop-files {
|
||||||
|
border: 1px solid #000;
|
||||||
|
color: #000;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapwords{
|
||||||
|
-ms-word-break: break-all;
|
||||||
|
word-break: break-all;
|
||||||
|
|
||||||
|
/* Non standard for webkit */
|
||||||
|
word-break: break-word;
|
||||||
|
|
||||||
|
-webkit-hyphens: auto;
|
||||||
|
-moz-hyphens: auto;
|
||||||
|
-ms-hyphens: auto;
|
||||||
|
hyphens: auto;
|
||||||
|
|
||||||
|
}
|
||||||
@@ -1,49 +1,95 @@
|
|||||||
@media (min-width: 768px) {
|
* {box-sizing: border-box;}
|
||||||
.container {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 200px 1fr 200px;
|
|
||||||
grid-template-rows: auto 1fr auto;
|
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
max-width: 1024px;
|
||||||
|
margin: 0 auto;
|
||||||
|
font: 1.2em Helvetica, arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper > * {
|
||||||
|
border: 2px solid #f08c00;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
header ul {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside ul {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-head {
|
||||||
|
grid-area: header;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
grid-area: content;
|
||||||
|
}
|
||||||
|
.main-nav {
|
||||||
|
grid-area: nav;
|
||||||
|
}
|
||||||
|
.side {
|
||||||
|
grid-area: sidebar;
|
||||||
|
}
|
||||||
|
.ad {
|
||||||
|
grid-area: ad;
|
||||||
|
}
|
||||||
|
.main-footer {
|
||||||
|
grid-area: footer;
|
||||||
|
}
|
||||||
|
.wrapper {
|
||||||
|
display: grid;
|
||||||
|
grid-gap: 20px;
|
||||||
|
grid-template-areas:
|
||||||
|
"header"
|
||||||
|
"nav"
|
||||||
|
"content"
|
||||||
|
"sidebar"
|
||||||
|
"ad"
|
||||||
|
"footer";
|
||||||
|
}
|
||||||
|
@media (min-width: 500px) {
|
||||||
|
.wrapper {
|
||||||
|
grid-template-columns: 1fr 3fr;
|
||||||
|
grid-template-areas:
|
||||||
|
"header header"
|
||||||
|
"nav nav"
|
||||||
|
"sidebar content"
|
||||||
|
"ad footer";
|
||||||
|
}
|
||||||
|
nav ul {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
header ul {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@media (min-width: 700px) {
|
||||||
|
.wrapper {
|
||||||
|
grid-template-columns: 1fr 4fr 1fr;
|
||||||
|
grid-template-areas:
|
||||||
|
"header header header"
|
||||||
|
"nav content sidebar"
|
||||||
|
"nav content ad"
|
||||||
|
"footer footer footer"
|
||||||
|
}
|
||||||
|
nav ul {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
header ul {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
header {
|
|
||||||
grid-column: span 3;
|
|
||||||
padding: 30px;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 1.4em;
|
|
||||||
background-color: #369;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
flex: 1;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
background-color: #f90;
|
|
||||||
padding: 20px;
|
|
||||||
grid-template-columns: 2fr;
|
|
||||||
grid-template-rows: auto 1ft auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
aside {
|
|
||||||
padding: 20px;
|
|
||||||
background-color: #936;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
grid-column: span 3;
|
|
||||||
padding: 30px;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 1.4em;
|
|
||||||
background-color: #690;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
margin-bottom: 1em;
|
|
||||||
font-size: 1.3em;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
}
|
||||||
|
|||||||
149
static/css/text2.css
Normal file
149
static/css/text2.css
Normal file
@@ -0,0 +1,149 @@
|
|||||||
|
/*
|
||||||
|
960 Grid System ~ Text CSS.
|
||||||
|
Learn more ~ http://960.gs/
|
||||||
|
|
||||||
|
Licensed under GPL and MIT.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* `Basic HTML
|
||||||
|
----------------------------------------------------------------------------------------------------*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
font: 1.3em/1.5 "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre,
|
||||||
|
code {
|
||||||
|
font-family: "DejaVu Sans Mono", Menlo, Consolas, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
border: 0 solid #ccc;
|
||||||
|
border-top-width: 0.1em;
|
||||||
|
clear: both;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* `Headings
|
||||||
|
----------------------------------------------------------------------------------------------------*/
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
h1 {
|
||||||
|
page-break-before: always;
|
||||||
|
page-break-after: avoid;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3, h4 {
|
||||||
|
page-break-after: avoid;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre, blockquote, table {
|
||||||
|
page-break-inside: avoid;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
/* font-family: Georgia, serif; */
|
||||||
|
font-weight: normal;
|
||||||
|
/* padding-top: 20px; */
|
||||||
|
text-align: left;
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
/* padding-top: 20px; */
|
||||||
|
font-weight: normal;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
/* padding-top: 20px; */
|
||||||
|
font-weight: normal;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
/* padding-top: 20px; */
|
||||||
|
font-weight: normal;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* `Spacing
|
||||||
|
----------------------------------------------------------------------------------------------------*/
|
||||||
|
|
||||||
|
ol {
|
||||||
|
list-style: decimal;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: disc;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-left: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p,
|
||||||
|
dl,
|
||||||
|
hr,
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
ol,
|
||||||
|
ul,
|
||||||
|
pre,
|
||||||
|
table,
|
||||||
|
address,
|
||||||
|
fieldset,
|
||||||
|
figure {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Links
|
||||||
|
----------------------------------------------
|
||||||
|
*/
|
||||||
|
|
||||||
|
a {
|
||||||
|
/* color: #fff; */
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
a:visited { color:#000; }
|
||||||
|
|
||||||
|
a:link { color: #000; }
|
||||||
|
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
/* border: 1px solid #666; */
|
||||||
|
overflow: hidden;
|
||||||
|
/* padding: 10px 0; */
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
@@ -38,6 +38,8 @@
|
|||||||
<link rel="icon" sizes="192x192" href="/static/img/favicon-192x192.png" type="image/png"/>
|
<link rel="icon" sizes="192x192" href="/static/img/favicon-192x192.png" type="image/png"/>
|
||||||
<link rel="icon" sizes="16x16" href="/static/img/favicon-16x16.png" type="image/png"/>
|
<link rel="icon" sizes="16x16" href="/static/img/favicon-16x16.png" type="image/png"/>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
|
{% block image_src %}<link rel="image_src" href="static/img/logo7.png" />{% endblock %}
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
@@ -55,7 +57,8 @@
|
|||||||
|
|
||||||
<link rel="stylesheet" href="/static/css/resetnew.css" />
|
<link rel="stylesheet" href="/static/css/resetnew.css" />
|
||||||
<link rel="stylesheet" href="/static/css/styles2.css">
|
<link rel="stylesheet" href="/static/css/styles2.css">
|
||||||
<link rel="stylesheet" href="/static/css/text.css" />
|
<link rel="stylesheet" href="/static/css/text2.css" />
|
||||||
|
<link rel="stylesheet" href="/static/css/rowsandall2.css" />
|
||||||
{% block meta %} {% endblock %}
|
{% block meta %} {% endblock %}
|
||||||
{% leaflet_js %}
|
{% leaflet_js %}
|
||||||
{% leaflet_css %}
|
{% leaflet_css %}
|
||||||
@@ -90,20 +93,63 @@
|
|||||||
{% analytical_head_bottom %}
|
{% analytical_head_bottom %}
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="container">
|
<body data-root="https://webapiv2.navionics.com/dist/webapi/images">
|
||||||
<header>Header</header>
|
<div class="wrapper">
|
||||||
<nav>
|
<header class="main-head">
|
||||||
<div>Navigation 1</div>
|
<ul>
|
||||||
<div>Navigation 2</div>
|
<li>
|
||||||
<div>Navigation 3</div>
|
<a href="/"><img src="/static/img/logo7.png"
|
||||||
|
alt="Rowsandall logo" width="300px"></a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>Free Data and Analysis. For Rowers. By Rowers.</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="">Help</a>
|
||||||
|
</li>
|
||||||
|
{% if user.is_authenticated %}
|
||||||
|
<li>
|
||||||
|
<p>
|
||||||
|
{% if user.first_name %}
|
||||||
|
<a href="/rowers/me/edit">{{ user.first_name }}</a>
|
||||||
|
{% else %}
|
||||||
|
<a href="/rowers/me/edit">{{ user }}</a>
|
||||||
|
{% endif %}
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="">Logout</a>
|
||||||
|
{% else %}
|
||||||
|
<li>
|
||||||
|
<p><a href="{% url 'login' %}">login</a> </p>
|
||||||
|
</li>
|
||||||
|
{% endif %}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</header>
|
||||||
|
<nav class="main-nav">
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Nav 1</a></li>
|
||||||
|
<li><a href="">Nav 2</a></li>
|
||||||
|
<li><a href="">Nav 3</a></li>
|
||||||
|
<li><a href="">Nav 4</a></li>
|
||||||
|
<li><a href="">Nav 5</a></li>
|
||||||
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
<main>
|
<main class="content">
|
||||||
{% block main %}
|
{% block main %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
</main>
|
</main>
|
||||||
<aside>Related links</aside>
|
<aside class="side">
|
||||||
<footer>Footer</footer>
|
{% block sidebar %}
|
||||||
{% analytical_body_bottom %}
|
Related links
|
||||||
{% block body_bottom %}{% endblock %}
|
{% endblock %}</aside>
|
||||||
|
<div class="ad">
|
||||||
|
{% block ad %}
|
||||||
|
Advertising
|
||||||
|
{% endblock %}</div>
|
||||||
|
<footer class="main-footer">Footer</footer>
|
||||||
|
{% analytical_body_bottom %}
|
||||||
|
{% block body_bottom %}{% endblock %}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user