Redo index.html and now.html for more modern format

1 files changed, 81 insertions, 162 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index e31408d..1e387b5 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -17,217 +17,136 @@
     url('../fonts/source-code-pro-v14-latin-regular.ttf') format('truetype'),
     /* Safari, Android, iOS */
     url('../fonts/source-code-pro-v14-latin-regular.svg#SourceCodePro') format('svg');
-  /* Legacy iOS */
-}
-
-/* source-sans-pro-regular - latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  src: url('../fonts/source-sans-pro-v14-latin-regular.eot');
-  /* IE9 Compact Modes */
-  src: local(''),
-    url('../fonts/source-sans-pro-v14-latin-regular.eot?#iefix') format('embedded-opentype'),
-    /* IE6-IE8 */
-    url('../fonts/source-sans-pro-v14-latin-regular.woff2') format('woff2'),
-    /* Super Modern Browsers */
-    url('../fonts/source-sans-pro-v14-latin-regular.woff') format('woff'),
-    /* Modern Browsers */
-    url('../fonts/source-sans-pro-v14-latin-regular.ttf') format('truetype'),
-    /* Safari, Android, iOS */
-    url('../fonts/source-sans-pro-v14-latin-regular.svg#SourceSansPro') format('svg');
-  /* Legacy iOS */
-}
-
-ul#nav {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-}
-
-body#home header ul#nav {
-  width: 550px;
-}
-
-body#about header ul#nav {
-  width: 450px;
-}
-
-ul#nav li {
-  font-size: 16px;
-  width: 25%;
-  /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
-  /* If you want the text to be centered */
-  text-align: left;
-  white-space: nowrap;
-}
-
-p#position {
-  font-size: 16px;
-}
-
-body#home {
-  max-width: 600px;
-}
-
-body#about {
-  max-width: 600px;
-}
-
-li.nostyle {
-  list-style-type: none;
+/* Add a black background color to the top navigation */
 }
 
 body {
-  font-size: 14px;
-  margin: 0 auto;
+  max-width: 80% !important; /* sorry water.css */
 }
 
-p {
-  font-family: 'Source Sans Pro';
+.topnav {
+    background-color: #333;
+    overflow: hidden;
 }
 
-section#resume h1:after {
-  content: ' // Dylan Bolger';
-  color: #d3d3d3;
+* {
+  font-family: 'Source Code Pro';
 }
 
-section#intro h1:after {
-  content: ' // Software Engineer';
-  color: #d3d3d3;
+/* Style the links inside the navigation bar */
+.topnav a, .topnav p {
+  float: left;
+  color: #f2f2f2;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+  font-size: 17px;
+  margin: 0;
 }
 
-div.project.cura h3:after {
-  font-style: normal;
-  content: ' # Python (FastAPI), requests';
-  color: #d3d3d3;
+/* Change the color of links on hover */
+.topnav a:hover {
+  background-color: #ddd;
+  color: black;
+  text-decoration: none;
 }
 
-div.project.strengthy h3:after {
-  font-style: normal;
-  content: ' # Python (Flask), HTML, CSS and JS';
-  color: #d3d3d3;
-}
 
-div.project.streamfinder h3:after {
-  font-style: normal;
-  content: ' // Node.js, Angular, MongoDB, Puppeteer';
-  font-size: 0.82em;
-  color: #d3d3d3;
+ul.experience {
+  padding-left: 0;
 }
 
-div.project.js h3:after {
-  font-style: normal;
-  content: ' // JavaScript';
-  color: #d3d3d3;
+li.experience-item {
+  list-style: none;
+  padding-left: 0;
+  font-size: 20px;
 }
 
-div.project.shell h3:after {
-  font-style: normal;
-  content: ' # Shell';
-  color: #d3d3d3;
+span.exp-title {
+  font-weight: bold;
 }
 
-div.project.css h3:after {
-  font-style: normal;
-  content: ' /* CSS */';
-  color: #d3d3d3;
+span.exp-sub-title {
+  font-size: 14px;
 }
 
-div.project.htmlcss h3:after {
-  font-style: normal;
-  content: ' <!-- HTML and CSS -->';
-  color: #d3d3d3;
+div.exp-title-company-top {
+  margin-top: 10px;
 }
 
-div.project.swift h3:after {
-  font-style: normal;
-  content: ' // Swift';
-  color: #d3d3d3;
+div.exp-title-company, div.exp-skills-dates {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 4px;
 }
 
-div.project.objc h3:after {
-  font-style: normal;
-  content: ' // Objective-C';
-  color: #d3d3d3;
+li.project {
+  margin-bottom: 10px;
 }
 
-div.project a {
-  font-family: 'Source Code Pro';
+div.project-desc {
+  font-size: 16px;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: 'Source Code Pro';
+div.project-title-stack {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 6px;
 }
 
-a {
-  color: blue;
+span.exp-company {
+  text-align: right;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  font-weight: bold;
 }
 
-a:active {
-  color: gray;
+li.project {
+  list-style: none;
+  font-size: 20px;
 }
 
-section {
-  padding-bottom: 50px;
-  line-height: 20px;
+span.project-title {
+  font-weight: bold;
 }
 
-div.project {
-  margin-bottom: 1.4em;
+span.exp-date {
+  font-weight: bold;
+  font-size: 16px;
 }
 
-div.project h2 {
-  font-style: italic;
+span.exp-skills {
+  margin-left: 0px;
+  font-size: 16px;
 }
 
-section#projects p#description {
-  margin-bottom: 1.5em;
-}
 
-header {
-  padding-left: 0px;
-  margin: auto;
+p.umami {
+  font-size: 12px;
+  color: #64748b;
 }
 
-/*make uls clean*/
-section ul {
-  padding-left: 0px;
-  list-style-type: none;
-  line-height: 20px;
+/* Add a color to the active/current link */
+.topnav a.active {
+  background-color: gray;
+  color: white;
 }
 
-div.project h1 {
-  margin-bottom: 200px;
+/* Right-aligned section inside the top navigation */
+.topnav-right {
+  float: right;
 }
 
-section h1 {
-  font-weight: bold;
-  font-size: 28px;
-  line-height: 30px;
+ul.navlist {
+  display: flex;
+  list-style: none;
+  width: 100%;
+  margin: 0;
+  padding: 0;
 }
 
-@media (prefers-color-scheme: dark) {
-  html {
-    background-color: #313134;
-  }
-
-  body {
-    color: white;
-  }
-
-  a {
-    color: #0074d9;
-  }
-
-  a:hover {
-    color: white;
-  }
+li.left-item {
+  margin-right: auto;
 }