styles as its own css file

Signed-off-by: Tyler M. Neher <[email protected]>
tylermneher · Feb 2, 2024 · 1a81556 · 1a81556
1 parent f14695e
commit 1a81556
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 99 deletions.
diff --git a/index.html b/index.html
@@ -3,20 +3,20 @@
 
 <head>
 	<!-- Matomo -->
-<script>
-  var _paq = window._paq = window._paq || [];
-  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-  _paq.push(['trackPageView']);
-  _paq.push(['enableLinkTracking']);
-  (function() {
-    var u="//matomo.neher.casa/";
-    _paq.push(['setTrackerUrl', u+'matomo.php']);
-    _paq.push(['setSiteId', '4']);
-    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-    g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
-  })();
-</script>
-<!-- End Matomo Code -->
+	<script>
+		var _paq = window._paq = window._paq || [];
+		/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+		_paq.push(['trackPageView']);
+		_paq.push(['enableLinkTracking']);
+		(function () {
+			var u = "//matomo.neher.casa/";
+			_paq.push(['setTrackerUrl', u + 'matomo.php']);
+			_paq.push(['setSiteId', '4']);
+			var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
+			g.async = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s);
+		})();
+	</script>
+	<!-- End Matomo Code -->
 
 	<meta charset="utf-8" />
 
@@ -25,85 +25,15 @@
 	<meta property="og:type" content="website" />
 	<meta property="og:url" content="https://skn-un.tylermneher.me/" />
 	<meta property="og:description" content="Saint Kitts and Nevis at the United Nations General Assembly" />
-	<meta property="og:image" content="https://raw.githubusercontent.com/tylermneher/skn-un.tylermneher.me/main/og-image-sknun.png" />
+	<meta property="og:image"
+		content="https://raw.githubusercontent.com/tylermneher/skn-un.tylermneher.me/main/og-image-sknun.png" />
 	<meta property="og:image:type" content="image/png" />
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 
 	<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
 
-	<style>
-		* {
-			box-sizing: border-box;
-			font-family: monospace;
-		}
-
-
-		/* Hide the links inside the navigation menu (except for logo/home) */
-		.topnav #myLinks {
-			display: none;
-		}
-
-
-		body {
-			margin: 0;
-			font-family: monospace;
-		}
-
-		/* Style the top navigation bar */
-		.topnav {
-			overflow: hidden;
-			background-color: #333;
-		}
-
-		/* Style the topnav links */
-		.topnav a {
-			float: left;
-			display: block;
-			color: #f2f2f2;
-			text-align: center;
-			padding: 14px 16px;
-			text-decoration: none;
-		}
-
-		/* Change color on hover */
-		.topnav a:hover {
-			background-color: #ddd;
-			color: black;
-		}
-
-		/* Style the content */
-		.content {
-			background-color: #ddd;
-			padding: 10px;
-			text-align: center;
-			-webkit-text-size-adjust: auto;
-			-moz-text-size-adjust: auto;
-			-ms-text-size-adjust: auto;
-			text-size-adjust: auto;
-			/* Should be removed. Only for demonstration */
-		}
-
-		/* Style the footer */
-		.footer {
-			background-color: #f1f1f1;
-			padding: 10px;
-			text-align: left;
-		}
-
-		img {
-			width: 80%;
-			height: auto;
-			padding: 5px;
-		}
-
-		/* Style the hamburger menu */
-		.topnav a.icon {
-			position: absolute;
-			right: 0;
-			top: 0;
-		}
-	</style>
+	<link rel="stylesheet" type="text/css" href="styles.css" />
 
 	<!-- <script>
 		function myFunction() {
@@ -118,11 +48,11 @@
 	<!-- Top Navigation Menu -->
 
 	<div class="topnav">
-        <a><b>| Tyler M. Neher |</b></a>
-        <a href="https://www.github.com/tylermneher">GitHub</a>
-        <a href="https://www.linkedin.com/in/tylermneher">Linkedin</a>
-        <a href="https://resume.tylermneher.me">Resume</a>
-    </div>
+		<a><b>| Tyler M. Neher |</b></a>
+		<a href="https://www.github.com/tylermneher">GitHub</a>
+		<a href="https://www.linkedin.com/in/tylermneher">Linkedin</a>
+		<a href="https://resume.tylermneher.me">Resume</a>
+	</div>
 
 </head>
 
@@ -140,11 +70,7 @@ <h2>Saint Kitts and Nevis at the United Nations General Assembly</h2>
 </div>
 
 <div class="footer">
-        <p> | Tyler M. Neher © 2024 | <a href="mailto:[email protected]">Contact Me</a> </p>
-    </div>
-
-</html>
-
-
-
+	<p> | Tyler M. Neher © 2024 | <a href="mailto:[email protected]">Contact Me</a> </p>
+</div>
 
+</html>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,70 @@
+* {
+	box-sizing: border-box;
+	font-family: monospace;
+}
+
+
+/* Hide the links inside the navigation menu (except for logo/home) */
+.topnav #myLinks {
+	display: none;
+}
+
+
+body {
+	margin: 0;
+	font-family: monospace;
+}
+
+/* Style the top navigation bar */
+.topnav {
+	overflow: hidden;
+	background-color: #333;
+}
+
+/* Style the topnav links */
+.topnav a {
+	float: left;
+	display: block;
+	color: #f2f2f2;
+	text-align: center;
+	padding: 14px 16px;
+	text-decoration: none;
+}
+
+/* Change color on hover */
+.topnav a:hover {
+	background-color: #ddd;
+	color: black;
+}
+
+/* Style the content */
+.content {
+	background-color: #ddd;
+	padding: 10px;
+	text-align: center;
+	-webkit-text-size-adjust: auto;
+	-moz-text-size-adjust: auto;
+	-ms-text-size-adjust: auto;
+	text-size-adjust: auto;
+	/* Should be removed. Only for demonstration */
+}
+
+/* Style the footer */
+.footer {
+	background-color: #f1f1f1;
+	padding: 10px;
+	text-align: left;
+}
+
+img {
+	width: 80%;
+	height: auto;
+	padding: 5px;
+}
+
+/* Style the hamburger menu */
+.topnav a.icon {
+	position: absolute;
+	right: 0;
+	top: 0;
+}