From 05f5b91ed5135646cca3f1b4f09adee728df36c6 Mon Sep 17 00:00:00 2001 From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com> Date: Mon, 19 Sep 2022 16:35:42 -0400 Subject: [PATCH] Added grid for medium screens --- src/layouts/page/style-guide.html | 24 ++++++ src/static/Images/medium-grid.svg | 139 ++++++++++++++++++++++++++++++ src/static/css/style.css | 4 +- 3 files changed, 165 insertions(+), 2 deletions(-) create mode 100644 src/static/Images/medium-grid.svg diff --git a/src/layouts/page/style-guide.html b/src/layouts/page/style-guide.html index 85b9855..1c0abc6 100644 --- a/src/layouts/page/style-guide.html +++ b/src/layouts/page/style-guide.html @@ -40,6 +40,30 @@ } +@media only screen and (min-width: 576px) and (max-width: 768px) { + + .style-guide-container{ + background-image: url("/Images/medium-grid.svg"); + background-attachment: fixed; + background-position: top; + background-repeat: repeat; + background-size: contain; + } + +} + +@media only screen and (max-width: 576px) { + + .style-guide-container{ + background-image: url("/Images/large-grid.svg"); + background-attachment: fixed; + background-position: top; + background-repeat: repeat; + background-size: contain; + } + +} + {{ end }} diff --git a/src/static/Images/medium-grid.svg b/src/static/Images/medium-grid.svg new file mode 100644 index 0000000..46ab741 --- /dev/null +++ b/src/static/Images/medium-grid.svg @@ -0,0 +1,139 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/static/css/style.css b/src/static/css/style.css index 0237532..0aa291a 100644 --- a/src/static/css/style.css +++ b/src/static/css/style.css @@ -76,7 +76,7 @@ body{ } .nav-logo{ - width: 4.4vw; + width: 4.9vw; } .nav-logo:hover{ @@ -86,7 +86,7 @@ body{ .nav-item{ font-family: "pp-neue-machina", sans-serif; text-transform: uppercase; - font-size: .8vw; + font-size: 1.2vw; } }