From 4e090781fd67706689c13ef15b266c902e8b2eaa Mon Sep 17 00:00:00 2001 From: Sander Roosendaal Date: Tue, 18 Sep 2018 19:14:43 +0200 Subject: [PATCH 1/2] first cut at nav bar --- rowers/templates/.#list_workouts.html | 1 - rowers/templates/redesign.html | 6 +---- static/css/rowsandall2.css | 32 ++++++++++++++++++++++++++- static/css/styles2.css | 2 +- static/css/text2.css | 6 +++++ templates/newbase.html | 29 +++++++++++++----------- 6 files changed, 55 insertions(+), 21 deletions(-) delete mode 100644 rowers/templates/.#list_workouts.html diff --git a/rowers/templates/.#list_workouts.html b/rowers/templates/.#list_workouts.html deleted file mode 100644 index 00ba3850..00000000 --- a/rowers/templates/.#list_workouts.html +++ /dev/null @@ -1 +0,0 @@ -E408191@CZ27LT9RCGN72.11332:1537209963 \ No newline at end of file diff --git a/rowers/templates/redesign.html b/rowers/templates/redesign.html index 26944ae8..4898c27e 100644 --- a/rowers/templates/redesign.html +++ b/rowers/templates/redesign.html @@ -8,9 +8,5 @@ {% endblock %} {% block sidebar %} - +Context Related Links {% endblock %} diff --git a/static/css/rowsandall2.css b/static/css/rowsandall2.css index 60036977..49634e36 100644 --- a/static/css/rowsandall2.css +++ b/static/css/rowsandall2.css @@ -401,6 +401,30 @@ a.button { color: #ffffff; } +.rbluetext { + color: #27aae1; +} + +.rdarkbluetext { + color: #1c75bc; +} + +.rblue { + color: #fae7e9; + border: solid 1px #27aae1; + background: #27aae1; +} + +.rblue:active { + color: #ffffff; +} + +.rblue:hover { + background: #1c75bc; + border: solid 1px #27aae1; +} + + /* rosy */ .rosy { color: #fae7e9; @@ -845,6 +869,12 @@ a.wh:hover { } -.icon-link a:hover, a:visited, a:link, a:active { +.icon-link a { + text-decoration: none; + color: #27aae1; +} + +.icon-link a:hover, a:active, a:visited, a:link { + color: #1c75bc; text-decoration: none; } diff --git a/static/css/styles2.css b/static/css/styles2.css index b40f6c95..5ce8298c 100644 --- a/static/css/styles2.css +++ b/static/css/styles2.css @@ -1,7 +1,7 @@ * {box-sizing: border-box;} .wrapper { - max-width: 1024px; + max-width: 1400px; margin: 0 auto; font: 1.2em Helvetica, arial, sans-serif; } diff --git a/static/css/text2.css b/static/css/text2.css index f0cda6b7..c8331066 100644 --- a/static/css/text2.css +++ b/static/css/text2.css @@ -149,5 +149,11 @@ p { } i { + text-decoration: none; font-size: 2em; + color: #27aae1; +} + +i:hover { + color: #1c75bc; } diff --git a/templates/newbase.html b/templates/newbase.html index 83533660..8beeca71 100644 --- a/templates/newbase.html +++ b/templates/newbase.html @@ -112,29 +112,31 @@
@@ -144,7 +146,8 @@ + {% endblock %} +
{% block ad %} Advertising From 3834104a0b4d488b8ea2ad6a4c2bc7b7089a8010 Mon Sep 17 00:00:00 2001 From: Sander Roosendaal Date: Tue, 18 Sep 2018 21:39:06 +0200 Subject: [PATCH 2/2] second attempt --- rowers/templates/redesign.html | 3 +- static/css/style3.css | 125 +++++++++++++++++++++++++++++++++ static/css/styles2.css | 60 +++++++++++----- static/css/text2.css | 20 +----- templates/newbase.html | 31 +++++--- 5 files changed, 192 insertions(+), 47 deletions(-) create mode 100644 static/css/style3.css diff --git a/rowers/templates/redesign.html b/rowers/templates/redesign.html index 4898c27e..85bf97db 100644 --- a/rowers/templates/redesign.html +++ b/rowers/templates/redesign.html @@ -4,7 +4,8 @@ {% block main %}

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.

+

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 %} diff --git a/static/css/style3.css b/static/css/style3.css new file mode 100644 index 00000000..2c78de87 --- /dev/null +++ b/static/css/style3.css @@ -0,0 +1,125 @@ +* {box-sizing: border-box;} + + .wrapper { + max-width: 1400px; + 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; + display: flex; + justify-content: space-between; + } + + header ul { + list-style: none; + margin: 0; + padding: 0; + } + + aside ul { + list-style: none; + margin: 0; + padding: 0; + } + + user ul { + list-style: none; + margin: 0; + padding: 0; + display: flex; + justify-content: flex-end; + } + +.main-head { + grid-area: header; +} +.main-user { + grid-area: user; +} + +.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: 2px; + grid-template-areas: + "header" + "user" + "nav" + "content" + "sidebar" + "ad" + "footer"; +} + +@media (max-width: 449px) { + nav a { + font-size: 0px; + } + + nav a i { + font-size: 20px; + } +} + +@media (min-width: 450px) { + .wrapper { + grid-template-columns: 1fr 3fr; + grid-template-areas: + "header header" + "user user" + "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: 768px) { + .wrapper { + grid-template-columns: 1fr 5fr 1fr; + grid-template-areas: + "header header header user" + "nav nav nav nav" + "sidebar content content content" + "sidebar content content content" + "ad footer footer footer" + } + nav ul { + flex-direction: row; + } + header ul { + flex-direction: row; + } + +} diff --git a/static/css/styles2.css b/static/css/styles2.css index 5ce8298c..ccdd6c09 100644 --- a/static/css/styles2.css +++ b/static/css/styles2.css @@ -15,6 +15,8 @@ list-style: none; margin: 0; padding: 0; + display: flex; + justify-content: space-between; } header ul { @@ -33,6 +35,8 @@ list-style: none; margin: 0; padding: 0; + display: flex; + justify-content: flex-end; } .main-head { @@ -46,7 +50,7 @@ grid-area: content; } .main-nav { - grid-area: nav; + grid-area: nav; } .side { grid-area: sidebar; @@ -70,8 +74,17 @@ "footer"; } +@media (max-width: 449px) { + nav a { + font-size: 0px; + } -@media (min-width: 750px) { + nav a i { + font-size: 20px; + } +} + +@media (min-width: 450px) { .wrapper { grid-template-columns: 1fr 3fr; grid-template-areas: @@ -81,31 +94,42 @@ "sidebar content" "ad footer"; } + nav ul { - display: flex; - justify-content: space-between; + display: flex; + justify-content: space-between; } + header ul { - display: flex; - justify-content: space-between; +/* flex-direction: row;*/ + display: flex; + justify-content: space-between; } } -@media (min-width: 800px) { + + + +@media (min-width: 768px) { .wrapper { - grid-template-columns: 1fr 4fr 1fr; + grid-template-columns: 1fr 5fr 1fr; grid-template-areas: - "header header user" - "nav content sidebar" - "nav content ad" - "footer footer footer" - } - nav ul { - flex-direction: column; - } - header ul { - flex-direction: row; + "header header header user" + "nav nav nav nav" + "sidebar content content content" + "sidebar content content content" + "ad footer footer footer" } + nav ul { + flex-direction: row; +/* display: flex; + justify-content: space-between; */ + } + + header ul { + flex-direction: row; + } + } diff --git a/static/css/text2.css b/static/css/text2.css index c8331066..3e6772d8 100644 --- a/static/css/text2.css +++ b/static/css/text2.css @@ -126,20 +126,6 @@ figure { ---------------------------------------------- */ -a { -/* color: #fff; */ - text-decoration: none; -} - - -a:visited { color:#000; } - -a:link { color: #000; } - - -a:hover { - text-decoration: underline; -} p { /* border: 1px solid #666; */ @@ -148,12 +134,8 @@ p { text-align: left; } + i { - text-decoration: none; font-size: 2em; - color: #27aae1; } -i:hover { - color: #1c75bc; -} diff --git a/templates/newbase.html b/templates/newbase.html index 8beeca71..8e5021cb 100644 --- a/templates/newbase.html +++ b/templates/newbase.html @@ -115,28 +115,41 @@ - {% if user.is_authenticated %} - + + {% if user.is_authenticated %} +
  • + +
    • +
  • - {% else %} +
    • + {% else %} +
  • - {% endif %}
    • + {% endif %}