From 2d5cf0ff0a455338cda395077eed7c3733bdf607 Mon Sep 17 00:00:00 2001
From: "Crom (Thibaut CHARLES)" <CromFr@gmail.com>
Date: Thu, 17 May 2018 12:38:41 +0200
Subject: [PATCH] Style fixes & cleaning

---
 css/main.css      | 57 ++++++++++++++++++++++--------------
 scss/section.scss | 74 ++++++++++++++++++++++++++++++-----------------
 2 files changed, 84 insertions(+), 47 deletions(-)

diff --git a/css/main.css b/css/main.css
index 41b523c..711a4d7 100644
--- a/css/main.css
+++ b/css/main.css
@@ -229,7 +229,7 @@ nav#top:hover, nav#top:active {
   border-color: #FAFAFA;
   border-radius: 20px;
   overflow: hidden;
-  animation: UnwrapHeader 1s;
+  animation: UnwrapHeader 1.5s;
   white-space: nowrap;
 }
 #section-main article {
@@ -241,7 +241,7 @@ nav#top:hover, nav#top:active {
   color: #202020;
   box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
   border-style: solid;
-  border-width: 3px;
+  border-width: 4px;
   border-color: #FFFFFF;
   border-radius: 20px;
   background-color: #FAFAFA;
@@ -253,17 +253,16 @@ nav#top:hover, nav#top:active {
 }
 #section-main article h1:first-child {
   margin: 0;
-  margin-left: -23px;
+  margin-top: -24px;
+  margin-left: -24px;
   width: 100%;
-  padding: 20px 23px;
-  margin-top: -23px;
-  border-radius: 18px 18px 0 0;
+  padding: 0.6em 24px;
+  border-radius: 20px 20px 0 0;
   background-color: #215D9C;
   background-image: url("/img/ui/stripes.png");
   color: #FAFAFA;
   font-family: "Croissant One", cursive;
   font-weight: bold;
-  font-style: italic;
   font-size: 1.7em;
   text-align: left;
   letter-spacing: -0.03em;
@@ -278,8 +277,8 @@ nav#top:hover, nav#top:active {
   height: 1em;
 }
 #section-main article h2 {
-  margin: 0 -23px;
-  padding: 10px 23px;
+  margin: 0-24px;
+  padding: 0.4em 24px;
   border-top: 1px solid #d5d5d5;
   border-bottom: 1px solid #d5d5d5;
   background-image: url("/img/ui/stripes.png");
@@ -293,12 +292,17 @@ nav#top:hover, nav#top:active {
 #section-main article h3 {
   color: #3A4145;
   font-family: "Croissant One", cursive;
-  padding-left: 10px;
+  margin-bottom: 0.5em;
   font-size: large;
 }
+#section-main article h4 {
+  color: #3A4145;
+  font-family: "Croissant One", cursive;
+  margin-bottom: 0.5em;
+}
 #section-main article hr {
-  margin-left: -23px;
-  width: calc(100% + 40px + 6px);
+  margin-left: -24px;
+  width: calc(100% + 24px24px);
   border-style: solid;
   border-width: 5px;
   border-color: rgba(0, 0, 0, 0.1);
@@ -360,9 +364,9 @@ nav#top:hover, nav#top:active {
 }
 #section-main article .cinema {
   margin: 0;
-  margin-left: -23px;
+  margin-left: -24px;
   width: 100%;
-  padding: 10px 23px;
+  padding: 10px 24px;
   border-top: 1px solid #000;
   border-bottom: 1px solid #000;
   color: #FAFAFA;
@@ -380,35 +384,46 @@ nav#top:hover, nav#top:active {
   border-color: #333;
 }
 #section-main article .cinema:first-child {
-  margin-top: -23px;
+  margin-top: -24px;
   padding-top: 20px;
   border-radius: 20px 20px 0 0;
 }
 #section-main article .cinema:last-child {
-  margin-bottom: -23px;
+  margin-bottom: -24px;
   padding-bottom: 20px;
   border-radius: 0 0 20px 20px;
 }
 #section-main article code {
   font-size: 0.9em;
-  padding: 0 0.45em;
+  padding: 0 0.3em;
   border-radius: 5px;
   background-color: #ccc;
   border: 1px solid #888;
 }
 #section-main article pre {
-  margin: 0;
-  margin-left: -23px;
-  width: 100%;
-  padding: 10px 23px;
   border-top: 1px solid #000;
   border-bottom: 1px solid #000;
+  padding: 0.5em;
+  border-radius: 10px;
+  display: inline-block;
+  vertical-align: top;
+  margin: 0;
   color: #FAFAFA;
   background-image: url("/img/ui/bggray.png");
   box-shadow: 0px 0px 10px #000 inset;
 }
 #section-main article pre code, #section-main article pre pre {
   margin-bottom: 0px;
+  padding: 0;
+  border-radius: 0;
+  background: none;
+  border: none;
+}
+#section-main article > pre {
+  display: block;
+  margin-left: -24px;
+  width: 100%;
+  padding: 10px 24px;
 }
 #section-main article figure {
   margin-bottom: 15px;
diff --git a/scss/section.scss b/scss/section.scss
index dbb59e4..c418728 100644
--- a/scss/section.scss
+++ b/scss/section.scss
@@ -13,6 +13,11 @@ $ArticleMaxWidth: 800px;
 }
 
 
+$ArticleBorderWidth: 4px;
+$ArticlePadding: 20px;
+$ArticleBorderRadius: 20px;
+$ArticleFinalMargins: #{$ArticleBorderWidth + $ArticleBorderRadius};
+
 
 #section-main{
 	position: absolute;
@@ -40,14 +45,14 @@ $ArticleMaxWidth: 800px;
 		border-radius: 20px;
 
 		overflow: hidden;
-		animation: UnwrapHeader 1s;
+		animation: UnwrapHeader 1.5s;
 		white-space: nowrap;
 	}
 
 	article{
 		margin-left: auto;
 		margin-right: auto;
-		padding: 20px;
+		padding: $ArticlePadding;
 		padding-top: 0;
 		margin-bottom: 10vh;
 
@@ -55,9 +60,9 @@ $ArticleMaxWidth: 800px;
 
 		box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
 		border-style: solid;
-		border-width: 3px;
+		border-width: $ArticleBorderWidth;
 		border-color: #FFFFFF;
-		border-radius: 20px;
+		border-radius: $ArticleBorderRadius;
 		background-color: $ClrWhite;
 
 		max-width: $ArticleMaxWidth;
@@ -72,12 +77,12 @@ $ArticleMaxWidth: 800px;
 
 		h1:first-child{
 			margin: 0;
-			margin-left: -23px;
+			margin-top: -$ArticleFinalMargins;
+			margin-left: -$ArticleFinalMargins;
 			width: 100%;
-			padding: 20px 23px;
+			padding: 0.6em $ArticleFinalMargins;
 
-			margin-top: -23px;
-			border-radius: 18px 18px 0 0;
+			border-radius: $ArticleBorderRadius $ArticleBorderRadius 0 0;
 
 
 			background-color: #215D9C;
@@ -87,10 +92,8 @@ $ArticleMaxWidth: 800px;
 			color: $ClrWhite;
 			font-family: $FontTitle;
 			font-weight: bold;
-			font-style: italic;
 			font-size: 1.7em;
 			text-align: left;
-			// text-shadow: 0 0 5px $ClrBlack;
 
 			letter-spacing: -0.03em;
 
@@ -109,8 +112,8 @@ $ArticleMaxWidth: 800px;
 		}
 
 		h2{
-			margin: 0 -23px;
-			padding: 10px 23px;
+			margin: 0 -$ArticleFinalMargins;
+			padding: 0.4em $ArticleFinalMargins;
 			border-top: 1px solid #d5d5d5;
 			border-bottom: 1px solid #d5d5d5;
 
@@ -131,14 +134,21 @@ $ArticleMaxWidth: 800px;
 		{
 			color: $ClrText;
 			font-family: $FontTitle;
-			padding-left: 10px;
+			margin-bottom: 0.5em;
 			font-size: large;
 		}
 
+		h4
+		{
+			color: $ClrText;
+			font-family: $FontTitle;
+			margin-bottom: 0.5em;
+		}
+
 		hr
 		{
-			margin-left: -23px;
-			width: calc(100% + 40px + 6px);
+			margin-left: -$ArticleFinalMargins;
+			width: calc(100% + #{$ArticleFinalMargins + $ArticleFinalMargins});
 
 			border-style: solid;
 			border-width: 5px;
@@ -217,9 +227,9 @@ $ArticleMaxWidth: 800px;
 
 		.cinema{
 			margin: 0;
-			margin-left: -23px;
+			margin-left: -$ArticleFinalMargins;
 			width: 100%;
-			padding: 10px 23px;
+			padding: 10px $ArticleFinalMargins;
 
 			border-top: 1px solid #000;
 			border-bottom: 1px solid #000;
@@ -245,12 +255,12 @@ $ArticleMaxWidth: 800px;
 			}
 
 			&:first-child{
-				margin-top: -23px;
+				margin-top: -$ArticleFinalMargins;
 				padding-top: 20px;
 				border-radius: 20px 20px 0 0;
 			}
 			&:last-child{
-				margin-bottom: -23px;
+				margin-bottom: -$ArticleFinalMargins;
 				padding-bottom: 20px;
 				border-radius: 0 0 20px 20px;
 			}
@@ -259,7 +269,7 @@ $ArticleMaxWidth: 800px;
 
 		code {
 			font-size: 0.9em;
-			padding: 0 0.45em;
+			padding: 0 0.3em;
 			border-radius: 5px;
 
 			background-color: #ccc;
@@ -267,14 +277,15 @@ $ArticleMaxWidth: 800px;
 		}
 
 		// Code blocks
-		pre{
-			margin: 0;
-			margin-left: -23px;
-			width: 100%;
-			padding: 10px 23px;
-
+		pre {
 			border-top: 1px solid #000;
 			border-bottom: 1px solid #000;
+			padding: 0.5em;
+			border-radius: 10px;
+
+			display: inline-block;
+			vertical-align: top;
+			margin: 0;
 
 			color: $ClrWhite;
 
@@ -283,8 +294,19 @@ $ArticleMaxWidth: 800px;
 
 			code, pre{
 				margin-bottom: 0px;
+
+				padding: 0;
+				border-radius: 0;
+				background: none;
+				border: none;
 			}
 		}
+		> pre{
+			display: block;
+			margin-left: -$ArticleFinalMargins;
+			width: 100%;
+			padding: 10px $ArticleFinalMargins;
+		}