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;
}
}