design updates

_assets/css/main.scss

@@ -3,110 +3,105 @@
 */
 
 @font-face {
-	font-family: NotoSans;
-	src: asset_url("fonts/noto_sans.ttf");
-}
-
+  font-family: Cantarell;
+  src: url(/assets/fonts/Cantarell-Regular-332cc3bf7c53f2cfcb9b609ff0c994f737566f53166837d2b9c1e4d747a89ba8.otf); }
 @font-face {
-	font-family: Raleway;
-	font-weight: 200;
-	src: asset_url("fonts/raleway_200.ttf");
-}
-
-@font-face {
-	font-family: Raleway;
-	font-weight: 300;
-	src: asset_url("fonts/raleway_300.ttf");
-}
-
+  font-family: Cantarell;
+  font-weight: bold;
+  src: url(/assets/fonts/Cantarell-Bold-679d3ac28bb8d9d4c017d40e79ba2f2baea708fbfb9d8669c4b879a56ca996ed.otf); }
 
 /*
 	Global
 */
-
 body {
-	width: 100%; margin: 0; padding: 0;
-	background: #f0f0f0;
-}
-
+  width: 100%;
+  margin: 0 auto;
+  padding: 0;
+  background: #f0f0f0;
+  max-width: 950px;
+  font-family: Cantarell; }
 
 /*
 	Navbar
 */
-
 nav {
-	width: 95%; padding: 0 2.5%;
-	display: flex; align-items: center; flex-wrap: wrap;
-	background: #56b2f2; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
-}
+  padding: 0 32px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  background: #cc3434;
+  border: 1px solid rgba(0,0,0,.1); }
 
 nav div {
-	flex-grow: 1;
-	display: flex; justify-content: flex-end;
-}
+  flex-grow: 1;
+  display: flex;
+  justify-content: flex-end; }
 
 nav a {
-	margin: 0 5px; padding: 5px 15px;
-	font-family: NotoSans; font-size: 18px; text-decoration: none;
-	color: #ffffff; border-bottom: 2px solid rgba(255, 255, 255, 0);
-	transition: .15s ease;
-}
+  margin: 0 5px;
+  padding: 4px 12px;
+  font-size: 18px;
+  text-decoration: none;
+  color: #ffffff; }
 
 nav a:hover {
-	border-bottom-color: rgba(255, 255, 255, 1);
-}
+  background: white;
+  color: #aa2020; }
 
 nav .h {
-	margin: 20px 0; padding: 0 15px;
-	font-family: Raleway; font-size: 40px;
-	color: #ffffff; transition: .15s ease;
-	border-bottom: none;
-}
+  margin: 20px 0;
+  padding: 0;
+  font-size: 26px;
+  color: #ffffff;
+  font-weight: bold;
+  text-shadow: 0 0 6px rgba(0,0,0,.3); }
 
 nav .h:hover {
-	text-shadow: 0 0 6px rgba(0, 0, 0, .3);
-	border-bottom: none;
+  background: unset;
+  color: white;
 }
 
-
 /*
 	Content
 */
-
 article {
-	margin: 20px 2.5%; padding: 20px;
-	background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
-	font-family: NotoSans; color: #202020;
-}
+  padding: 24px 32px 16px 32px;
+  background: #ffffff;
+  color: #202020;
+  border: 1px solid rgba(0,0,0,.1);
+  border-top: none; }
 
 article h2 {
-	margin: 0 0 15px 0;
-	font-family: Raleway; font-size: 26px; color: #333333;
-}
+  margin: 0 0 24px 0;
+  font-size: 24px;
+  color: #333333;
+  text-align: center; }
 
 article h3 {
-	margin: 35px 0 15px 20px;
-	font-variant-caps: small-caps;
+  margin: 32px 0 16px 0;
+  font-size: 18px;
+  border-bottom: 1px solid #e8e8e8; }
+
+article p {
+  line-height: 21px;
 }
 
 article a {
-	text-decoration: none;
-	color: #56b2f2;
-}
+  text-decoration: none;
+  color: #cc3434; }
 
 article a:hover {
-	text-decoration: underline;
-}
+  text-decoration: underline; }
+
+article ul {
+  padding-left: 24px; }
 
 article li {
-	margin: 4px 0;
-}
+  margin: 8px 0; }
 
 /*
 	Miscelaneous
 */
-
 hr {
-	width: 95%;
-	color: rgba(0, 0, 0, .1);
-}
+  width: 100%;
+  color: #e8e8e8; }