melhorado o design do site

1 files changed, 104 insertions, 17 deletions

diff --git a/static/style.css b/static/style.css
index e4b74bf..5dfce6d 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,40 +1,127 @@
+* {
+    box-sizing: border-box;
+}
+
 body {
-	color: white;
-	background-color: black;
+	color: #999;
+	background-color: #000;
 
-	width: 80%;
+	width: 90%;
 	max-width: 1000px;
 	margin: 20px auto;
 	font-size: 16px;
 }
 
-.bottom-align { 
-	display: flex; 
-	flex-direction: column; 
-	justify-content: flex-end; 
-}
-
-.title {
-	display: flex;
-	flex-direction: column; 
+header {
+	margin: auto;
 }
 
-.title h1 {
+header h1 {
 	display: inline;
 	margin: 1px;
 }
 
-.title h2 {
+header h2 {
 	margin: 1px;
 }
 
+main {
+	display: flex;
+	flex-direction: column;
+	line-height: 1.6;
+}
+
+main > div {
+	margin: 5px;
+}
+
+footer {
+    font-size: 0.8rem;
+    text-align: center;
+    opacity: 0.7;
+}
+
+a, a:visited {
+	color: #0077aa;
+}
+
+a:hover {
+	color: #00aaee;
+}
+
+pre {
+	max-width: 100%;
+	overflow: auto;
+	background: #050505; 
+	padding: 10px;
+	border: 1px dashed #999;
+}
+
+.header-container {
+	display: flex;
+	flex-direction: column;
+}
+
+.content {
+	padding: 5px;
+	flex-grow: 1;
+	overflow: auto;
+	border: dashed 1px #999;
+	background: #050505;
+}
+
+.navbar {
+}
+
+.navbar ul {
+	list-style-type: none;
+	margin: 0px;
+	padding: 0px;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10px;
+}
+
+.navbar li a {
+	display: block;
+	color: #999;
+	text-decoration: none;
+	border: dashed 1px;
+	text-align: center;
+	padding: 5px 10px;
+}
+
+.navbar li a:hover {
+	display: block;
+	color: #000;
+	background-color: #999;
+}
+
+.bottom-align { 
+	display: flex; 
+	flex-direction: column; 
+	justify-content: flex-end; 
+}
+
 .esquizo {
 	width: 100px;
 	display: inline;
 }
 
-@media (min-width: 768px) {
-    .title {
-        flex-direction: row; /* Volta a ficar lado a lado */
+@media (min-width: 640px) {
+    .header-container {
+		justify-content: center;
+        flex-direction: row;
     }
+
+	.navbar ul {
+		display: flex;
+		flex-direction: column;
+		gap: 0px;
+		width: 125px;
+	}
+
+	main {
+		flex-direction: row;
+	}
 }