From 0eb6273fa063bbe987a3b20bc02684db5c1e6eef Mon Sep 17 00:00:00 2001 From: Sander Roosendaal Date: Tue, 18 Sep 2018 13:27:49 +0200 Subject: [PATCH] starting to look like something --- rowers/templates/redesign.html | 8 + static/css/rowsandall2.css | 846 +++++++++++++++++++++++++++++++++ static/css/styles2.css | 134 ++++-- static/css/text.css | 2 +- static/css/text2.css | 149 ++++++ templates/newbase.html | 72 ++- 6 files changed, 1153 insertions(+), 58 deletions(-) create mode 100644 static/css/rowsandall2.css create mode 100644 static/css/text2.css diff --git a/rowers/templates/redesign.html b/rowers/templates/redesign.html index 8b39513b..26944ae8 100644 --- a/rowers/templates/redesign.html +++ b/rowers/templates/redesign.html @@ -6,3 +6,11 @@

Main

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.

{% endblock %} + +{% block sidebar %} + +{% endblock %} diff --git a/static/css/rowsandall2.css b/static/css/rowsandall2.css new file mode 100644 index 00000000..9efef471 --- /dev/null +++ b/static/css/rowsandall2.css @@ -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
- 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; + +} diff --git a/static/css/styles2.css b/static/css/styles2.css index 8baf3fd4..a9ea15c7 100644 --- a/static/css/styles2.css +++ b/static/css/styles2.css @@ -1,49 +1,95 @@ -@media (min-width: 768px) { - .container { - display: grid; - grid-template-columns: 200px 1fr 200px; - grid-template-rows: auto 1fr auto; +* {box-sizing: border-box;} + .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; } diff --git a/static/css/text.css b/static/css/text.css index eee176d9..6c0a5713 100644 --- a/static/css/text.css +++ b/static/css/text.css @@ -83,4 +83,4 @@ address, fieldset, figure { margin-bottom: 20px; -} \ No newline at end of file +} diff --git a/static/css/text2.css b/static/css/text2.css new file mode 100644 index 00000000..2ed88a3c --- /dev/null +++ b/static/css/text2.css @@ -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; +} diff --git a/templates/newbase.html b/templates/newbase.html index 0c907d5d..f6e27d06 100644 --- a/templates/newbase.html +++ b/templates/newbase.html @@ -38,6 +38,8 @@ + {% block image_src %}{% endblock %} + @@ -55,7 +57,8 @@ - + + {% block meta %} {% endblock %} {% leaflet_js %} {% leaflet_css %} @@ -90,20 +93,63 @@ {% analytical_head_bottom %} - -
Header
-