From 59d8bec69c8b4eb7bb624a33a3247e02b2dfe641 Mon Sep 17 00:00:00 2001 From: viymak Date: Wed, 4 Sep 2019 09:00:35 -0400 Subject: [PATCH] updated styling for resources page --- _includes/resources.html | 34 ---------- _sass/resources.scss | 139 +++++++++++++++++++++++++++++++-------- pages/resources.html | 12 ++-- 3 files changed, 121 insertions(+), 64 deletions(-) delete mode 100644 _includes/resources.html diff --git a/_includes/resources.html b/_includes/resources.html deleted file mode 100644 index 0c430ee..0000000 --- a/_includes/resources.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: resources -permalink: "/resources/" -layout: default ---- - -
-
-

Resources

-
-

"Resources: a source of supply or support : an available means —usually used in plural"

-
-
-
-

Discover Mappers Near You

-

https://mym.rtijn.org/

 - - - - -
-
-
-

More Resources

-
- {% assign resources = site.resources | sort: 'category' %} - {% for resource in resources %} - - - {% endfor %} -
-

-
diff --git a/_sass/resources.scss b/_sass/resources.scss index e658038..b811262 100644 --- a/_sass/resources.scss +++ b/_sass/resources.scss @@ -2,15 +2,18 @@ #resources-title { margin-top: 62px; margin-bottom: 200px; + max-width: 1000px; + margin: 100px auto; position: relative; #page-title { - font-size: 40px; - font-weight: bold; - font-family: "Anderson_Grotesk", sans-serif; - font-style: italic; - text-align: center; + font-size: 40px; + font-weight: bold; + font-family: "Anderson_Grotesk", sans-serif; + font-style: italic; + text-align: center; + margin-bottom: 30px; } #spotlight-card { @@ -18,14 +21,18 @@ display: block; margin: 0 auto; max-width: 1000px; - text-align: center; + text-align: left; p { - + font-size: 24px; padding: 10px; text-align: block; margin-left: 15%; margin-right: 15%; + + @media (max-width: $tablet-width) { + text-align: center; + } } } } @@ -46,7 +53,17 @@ height: 500px; position: absolute; z-index: 1; + + @media (max-width: $tablet-width) { + max-height: 200px; + width: 100%; + display: block; + position: relative; + } } + + /* 1200 breakpoint for mym section */ + #MYM-right { background-color: rgb(20,27,35);/*linear-gradient(to left,rgba(20,27,35,1), rgba(20,27,35, 0)) */ height: 500px; @@ -54,16 +71,32 @@ margin-left: 40%; padding: 100px; + @media (max-width: $tablet-width) { + width: 100%; + height: auto; + display: block; + position: relative; + margin-left: 0; + padding-top: 5px; + padding: 0; + padding-bottom: 5px; + } + a,h3 { - text-decoration: none; - color: $primary-color; - font-size: 15px; + text-decoration: none !important; + color: $primary-color !important; + font-size: 15px !important; } #mappers-title { - color: white; + color: $primary-color; text-align: center; - margin-bottom: 20px; + margin-bottom: 30px; + + @media screen and (max-width: $tablet-width) { + margin-top: 0; + padding-top: 21px; + } } #MYM-description { @@ -72,21 +105,34 @@ text-align: center; margin-bottom: 20px; margin: auto; + font-size: 20px; + + @media (max-width: $tablet-width) { + width: 100%; + margin: auto; + } } #MYM-map { position: relative; - margin-top: 10px; - height: 100px; - width: 100%; - - #MYM-button { - color: rgb(20,27,35); - text-align: center; - width: 150px; - max-width: 20%; - margin: 50px auto; + margin-top: 10px; + height: 100px; + width: 100%; + + #MYM-button { + font-size: 20px; + color: rgb(20,27,35); + text-align: center; + width: 150px; + max-width: 20%; + margin: 50px auto; + + @media (max-width: $tablet-width) { + font-size: 16px; + margin-left: auto !important; + margin-right: auto !important; } + } } } } @@ -96,6 +142,17 @@ height: 1200px; padding-top: 50px; + @media (max-width: $tablet-width) { + max-width: 40%; + margin: auto; + text-align: center; + text-decoration: none; + } + + @media (max-width: $mobile-width) { + max-width: 80%; + } + #more-resources-title { margin-left: 1.5%; } @@ -115,16 +172,29 @@ position: relative; color: black; + @media (max-width: $tablet-width) { + height: auto; + display: block; + position: relative; + width: 100%; + } + #summary-container { + color: black; position: relative; width: 100%; grid-column-start: 1; grid-column-end: 4; overflow-y: auto; + @media (max-width: $tablet-width) { + display: block; + position: relative; + width: 100%; + } + h3,h4,p { color: black; - } h3 { @@ -145,17 +215,34 @@ #photo-container { position: absolute; top: 50%; - transform: translateY(-50%); - grid-column-start: 5; - grid-column-end: 6; + transform: translateY(-50%); + grid-column-start: 4; + grid-column-end: 7; + + @media (max-width: $tablet-width) { + display: block; + position: relative; + top: auto; + transform: none; + width: 100%; + } + img { border-radius: 5%; height: auto; + max-height: 175px; margin: 0 auto; + margin-bottom: 16px; + margin-top: 16px; text-align: center; width: 100%; position: relative; } + + .card-tags { + border-top: 16px; + margin-bottom: 16px; + } } } } diff --git a/pages/resources.html b/pages/resources.html index c9fc465..27205ef 100644 --- a/pages/resources.html +++ b/pages/resources.html @@ -8,15 +8,17 @@

Resources

-

This guide should give you sufficient information about the OpenStreetMap platform so that you can incorporate it into your classroom. But once you and your students are comfortable using the platform, you will want to branch out and do more. This includes more advanced mapping topics, utilities for data quality, and pointers to the wider OpenStreetMap community.

+

This includes more advanced mapping topics, utilities for data quality, and pointers to the wider OpenStreetMap community.
- +
+ +

Discover Mappers Near You

-

https://mym.rtijn.org/

 +

"Meet Your Mapper (MYM) tells you who has mapped in your area, when, and how much. Use it for fun, curiosity, or to help you make a list of people to invite to a mapping party or some other OSM event."

@@ -38,9 +40,11 @@

{{resource.type}}

{% if resource.tags.size > 0 %} +
{% for tag in resource.tags %} -

{{tag}}

+ {{tag}} {% endfor %} +
{% endif %}