partial restyle

ui/css/mainstyle.css

@@ -1,58 +1,73 @@
+/*
+*
+*	janishutz.com - mainstyle.css
+*
+*
+*		Created 2023 by Janis Hutz
+*/
+
+/*
+	Set size of html and body to full width
+*/
 html, body {
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  background-color: rgba(70, 72, 167, 0.5);
-  font-family: Arial, Helvetica, sans-serif;
+	width: 100%;
+	height: 100%;
+	margin: 0;
+	padding: 0;
+	background-color: rgba(70, 72, 167, 0.5);
+	font-family: sans-serif;
 }
 
+/*
+	Style for quotes
+*/
 .bigquote {
-  width: 40%;
-  font-size: 300%;
+	width: 40%;
+	font-size: 300%;
 }
 
 .biggerquote {
-  font-size: 150%;
+	font-size: 150%;
 }
 
+/*
+	Styling for the main content element
+*/
 .mainstyle {
-  margin-right: 10%;
-  margin-left: 10%;
-  margin-top: 2%;
-  margin-bottom: 2%;
-  padding: 10%;
-  padding-top: 5%;
-  padding-bottom: 5%;
-  border-color: black;
-  border-style: inset;
-  border-radius: 50px;
-  background-color:dimgray;
-}
-
-
-h1 {
-  font-size: 300%;
+	margin-right: 10%;
+	margin-left: 10%;
+	margin-top: 2%;
+	margin-bottom: 2%;
+	padding: 10%;
+	padding-top: 5%;
+	padding-bottom: 5%;
+	border-color: black;
+	border-style: inset;
+	border-radius: 50px;
+	background-color:dimgray;
 }
 
+/*
+	Styling for links and buttons
+*/
 .textlink {
-  font-size: 100%;
-  text-decoration: none;
-  color: black;
+	font-size: 100%;
+	text-decoration: none;
+	color: black;
 }
 
 .textlink:hover {
-  color: darkblue;
-  font-size: 120%;
+	color: darkblue;
+	font-size: 120%;
 }
 
 .linkbutton {
-  text-decoration: none;
-  display: inline-block;
-  padding: 20px;
-  color: white;
-  background-color:blue;
-  border-radius: 20px;
+	text-decoration: none;
+	display: inline-block;
+	padding: 20px;
+	color: white;
+	background-color:blue;
+	border-radius: 20px;
 }
 
 .linkbutton:hover {
@@ -61,4 +76,93 @@ h1 {
 
 .references {
   color: gray;
+}
+
+/*
+	This styles the container for the home page
+*/
+.title-container {
+	background-image: url('/assets/codeSnippet.png');
+	background-repeat: no-repeat;
+	background-size: cover;
+	width: 100%;
+	height: 40vh;
+	border-radius: 20px;
+	color: white;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+}
+
+.title {
+	font-size: 350%;
+}
+
+.subtitle {
+	font-size: 200%;
+}
+
+.content {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	margin-top: 5%;
+	margin-bottom: 10%;
+}
+
+.content-title {
+	font-size: 300%;
+	text-align: center;
+}
+
+.content-title-small {
+	font-size: 200%;
+	text-align: center;
+}
+
+.pullquote-lines {
+	border-color: black;
+	margin-bottom: 2%;
+	margin-top: 2%;
+	width: 100%;
+}
+
+/*
+	Align content side by side
+*/
+.sidebyside {
+	width: 100%;
+	display: flex;
+	flex-grow: 1;
+	gap: 5%;
+}
+
+.element {
+	width: 47%;
+	text-align: center;
+}
+
+.itemsInline {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	gap: 5%;
+	margin-top: 3%;
+	margin-bottom: 3%;
+}
+
+/* 
+	Bottom container styling
+*/
+
+.bottom {
+	display: flex;
+	width: 100%;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
 }