From 12ac382495634a299cae136a904259eea9706b4d Mon Sep 17 00:00:00 2001
From: Eric Fawcett <eric.fawcett@gmail.com>
Date: Sun, 17 Oct 2021 20:17:48 +0000
Subject: [PATCH] break out css

---
 index.html | 45 +--------------------------------------------
 style.css  | 42 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 44 deletions(-)
 create mode 100644 style.css

diff --git a/index.html b/index.html
index 99b90c2..06ffa0a 100644
--- a/index.html
+++ b/index.html
@@ -4,50 +4,7 @@
 		<meta name="viewport" content="width=device-width,initial-scale=1">
 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 		<title>Route 8 Cameras</title>
-		<style type="text/css">
-			body {
-				margin: auto;
-				background-color: #444444;
-				align-content: center;
-			}
-			.grid-item img {
-				display: inline-block;
-				width: 100%;
-			}
-			.title-wrapper{
-				text-align: center;
-				background-color: #000000;
-			}
-			.item-title {
-				color: #ffffff;
-				font-size: 1.5em;
-				text-transform: uppercase;
-			}
-			.grid-container { /* Default to single column for small screens */
-				margin: auto;
-				display: grid;
-				grid-template-columns: 100%;
-				grid-gap: 0.2em 0.2em;
-			}
-			@media only screen and (min-width: 40em){ /* screens >640px wide*/
-				.grid-container {
-					grid-template-columns: 49% 49%;
-				}
-			}
-			@media only screen and (min-width: 78.75em){ /* screens >1260px wide */
-				.grid-container {
-					grid-template-columns: 33% 33% 33%;
-				}
-				.item-title {
-					font-size: 1.7em;
-				}
-			}
-			@media only screen and (min-width: 118.75em){ /* screens >1900px wide */
-				.item-title {
-					font-size: 2.2em;
-				}
-			}
-		</style>
+		<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
 		<script>
 			$(document).ready(function(){
 				
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..012d3ef
--- /dev/null
+++ b/style.css
@@ -0,0 +1,42 @@
+body {
+	margin: auto;
+	background-color: #444444;
+	align-content: center;
+}
+.grid-item img {
+	display: inline-block;
+	width: 100%;
+}
+.title-wrapper{
+	text-align: center;
+	background-color: #000000;
+}
+.item-title {
+	color: #ffffff;
+	font-size: 1.5em;
+	text-transform: uppercase;
+}
+.grid-container { /* Default to single column for small screens */
+	margin: auto;
+	display: grid;
+	grid-template-columns: 100%;
+	grid-gap: 0.2em 0.2em;
+}
+@media only screen and (min-width: 40em){ /* screens >640px wide*/
+	.grid-container {
+		grid-template-columns: 49% 49%;
+	}
+}
+@media only screen and (min-width: 78.75em){ /* screens >1260px wide */
+	.grid-container {
+		grid-template-columns: 33% 33% 33%;
+	}
+	.item-title {
+		font-size: 1.7em;
+	}
+}
+@media only screen and (min-width: 118.75em){ /* screens >1900px wide */
+	.item-title {
+		font-size: 2.2em;
+	}
+}
\ No newline at end of file