src/content/style.css: Properly combine commented styles

1 files changed, 158 insertions, 217 deletions

diff --git a/src/content/style.css b/src/content/style.css
index e403b2c..57abebb 100644
--- a/src/content/style.css
+++ b/src/content/style.css
@@ -1,277 +1,218 @@
-/*
-// FIXME: remove
-body {
-	margin: 0px auto;
-	max-width: 750px;
-	padding: 1%;
-}
-
-pre, code {
-  background-color: #ddd;
-  border-radius: 5px;
-  padding: 5px;
+:root {
+	--white: #fbfbfb;
+	--black: #0c0c0c;
+	--ligth-gray: #F0F1F5;
+	--green: #1A7320;
+	--font-size-small: 15px;
+	--font-size-normal: 16px;
+	--font-size-large: 17px;
+	--font-size-big-1: 22px;
+	--font-size-big-2: 24px;
+	--font-size-big-3: 32px;
+	--font-size-big-4: 46px;
+	--font-size-big-5: 52px;
+	--fg: black;
+	--bg: white;
+	--prebg: #ddd;
+	--navlink: #333;
+	--navlink-visited: #222;
+	--separator: darkslategray;
+
+	color: var(--fg);
+	background-color: var(--bg);
 }
 
 @media(prefers-color-scheme: dark) {
-  :root {
-    color: white;
-    background-color: black;
-  }
-
-  a {
-    color: hsl(211, 100%, 60%);
-  }
-
-  a:visited {
-    color: hsl(242, 100%, 80%);
-  }
-
-  pre, code {
-    background-color: #222;
-  }
-}
-*/
-/*http://meyerweb.com/eric/tools/css/reset/
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-
-/*
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	font: inherit;
-	vertical-align: baseline;
-}
-*/
-/* HTML5 display-role reset for older browsers */
-/*
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-	display: block;
-}
-body {
-	line-height: 1;
-}
-ol, ul {
-	list-style: none;
-}
-blockquote, q {
-	quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
-	content: none;
-}
-table {
-	border-collapse: collapse;
-	border-spacing: 0;
-}
-*/
-* {
-    box-sizing: border-box;
-}
-
-
-
-html {
-    --white: #fbfbfb;
-    --black: #0c0c0c;
-    --gray: #333333;
-    --ligth-gray: #F0F1F5;
-    --green: #1A7320;
-    --font-size-small: 15px;
-    --font-size-normal: 16px;
-    --font-size-large: 17px;
-    --font-size-big-1: 22px;
-    --font-size-big-2: 24px;
-    --font-size-big-3: 32px;
-    --font-size-big-4: 46px;
-    --font-size-big-5: 52px;
-}
-
-a {
-    cursor: pointer;
-}
-
-body {
-    font-family: "Open Sans", sans-serif;
-    line-height: 1.6;
+	:root {
+		--fg: white;
+		--bg: black;
+		--prebg: #222;
+		--navlink: #aaa;
+		--navlink-visited: #bbb;
+		--separator: ghostwhite;
+	}
+
+	a {
+		color: hsl(211, 100%, 60%);
+		&:visited {
+			color: hsl(242, 100%, 80%);
+		}
+	}
+}
+
+main {
+	margin: 0px auto;
+	padding: 1%;
+	line-height: 1.6;
 }
 
 hr {
-  color: lightgray;
-  height: 1px;
+	color:            var(--separator);
+	background-color: var(--separator);
+	height: 1px;
 }
-/*
-header {
-    border-bottom: 1px solid lightgray;
+
+pre, code {
+	background-color: var(--prebg);
+	border-radius: 5px;
+	padding: 5px;
 }
-*/
 
 .icon {
-    width: 40px;
+	width: 40px;
+	vertical-align: middle;
 }
 
-.navbar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    max-width: 1200px;
-    margin: 0 auto;
-    padding-top: 0.5rem;
-    color: var(--black);
-}
+header > nav {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: 1%;
 
-.nav_logo {
-    width: 120px;
-}
+	& > a > img {
+		width: 120px;
+	}
 
-.nav_links {
-    display: flex;
-    list-style: none;
-}
+	& > ol {
+		display: flex;
+		list-style: none;
 
-.nav_links li a {
-    color: var(--gray);
-    margin: 0 1rem;
-    text-decoration: none;
-    font-size: 1rem
-}
+		& > li > a {
+			color: var(--navlink);
+			margin: 0 1rem;
+			text-decoration: none;
+			font-size: 1rem;
 
-.nav_links li a:visited {
-    color: var(--gray);
-}
+			&:visited {
+				color: var(--navlink-visited);
+			}
 
-.nav_links li a:hover {
-    text-decoration: underline;
+			&:hover {
+				text-decoration: underline;
+			}
+		}
+	}
 }
 
 .basic-button {
-    height: 2rem;
-    font-family: "Open Sans", sans-serif;
-    border-radius: 3px;
-    cursor: pointer;
-    padding: 0 10px;
-    margin: 0 .2rem;
+	height: 2rem;
+	font-family: "Open Sans", sans-serif;
+	border-radius: 3px;
+	cursor: pointer;
+	padding: 0 10px;
+	margin: 0 .2rem;
 }
 
 .big_button {
-    height: 3rem;
-    width: 15rem;
-    margin-top: 2rem;
-    border-radius: 2rem;
-    font-size: var(--font-size-large);
-    align-self: center;
-    text-transform: uppercase;
+	height: 3rem;
+	width: 15rem;
+	margin-top: 2rem;
+	border-radius: 2rem;
+	font-size: var(--font-size-large);
+	align-self: center;
+	text-transform: uppercase;
 }
 
 .login {
-    color: var(--black);
-    border: 1px solid var(--green);
-    background-color: #fbfbfb;
+	color: var(--black);
+	border: 1px solid var(--green);
+	background-color: #fbfbfb;
 }
 
 .sign-up, .big_button {
-    border: none;
-    background-color: var(--green);
-    color: var(--white);
+	border: none;
+	background-color: var(--green);
+	color: var(--white);
 }
 
 .basic-button:hover {
-    text-decoration: underline;
+	text-decoration: underline;
 }
 
 .banner {
-    margin: 100px 0;
-    text-align: center;
-    color: var(--black);
-}
+	margin: 100px 0;
+	text-align: center;
+	color: var(--black);
 
-.banner h1 {
-    font-size: var(--font-size-big-5);
-}
+	h1 {
+		font-size: var(--font-size-big-5);
+	}
 
-.banner p {
-    font-size: var(--font-size-big-2);
-    margin-top: 8px;
-    margin-bottom: 1px;
+	p {
+		font-size: var(--font-size-big-2);
+		margin-top: 8px;
+		margin-bottom: 1px;
+	}
 }
 
 .why_papo {
-    background-color: var(--ligth-gray);
-    padding-bottom: 1.2rem;
-}
+	background-color: var(--ligth-gray);
+	padding-bottom: 1.2rem;
 
-.why_papo-container {
-    margin-right: auto;
-    margin-left: auto;
-    padding-top: 1rem;
-    padding-bottom: 3rem;
-    max-width: 1200px;
-    display: flex;
-    flex-direction: column;
-}
+	h2 {
+		font-size: var(--font-size-big-3);
+	}
 
-.why_papo h2 {
-    font-size: var(--font-size-big-3);
+	h3 {
+		font-size: var(--font-size-big-1);
+		margin-top: .5rem;
+	}
 }
 
-.why_papo h3 {
-    font-size: var(--font-size-big-1);
-    margin-top: .5rem;
+.why_papo-container {
+	margin-right: auto;
+	margin-left: auto;
+	padding-top: 1rem;
+	padding-bottom: 3rem;
+	max-width: 1200px;
+	display: flex;
+	flex-direction: column;
 }
 
 .why_papo-cards-container {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    padding: 1.3rem 0;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	padding: 1.3rem 0;
 }
 
 .why_papo-card {
-    margin: 0 1rem;
-    width: 30%;
-    padding: 1.5rem;
-    background-color: var(--white);
-    border-radius: 15px;
-    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+	margin: 0 1rem;
+	width: 25%;
+	padding: 1.5rem;
+	background-color: var(--white);
+	border-radius: 15px;
+	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
 }
 
 .features-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    max-width: 1200px;
-    margin: 0 auto;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	max-width: 1200px;
+	margin: 0 auto;
 }
 
-.features h2 {
-    font-size: var(--font-size-big-3);
-    margin-bottom: 0;
-}
+.features {
+	h2 {
+		font-size: var(--font-size-big-3);
+		margin-bottom: 0;
+	}
 
-.features h3 {
-    font-size: 20px;
-    font-weight: 500;
-    margin-top: .5rem;
+	h3 {
+		font-size: 20px;
+		font-weight: 500;
+		margin-top: .5rem;
+	}
 }
 
 footer {
-    margin-top: 200px;
+	margin-top: 200px;
+}
+
+body {
+	font-family: "Open Sans", sans-serif;
+	line-height: 1.6;
 }