[Whiteboard] Homepage update: flexbox, colors, Web 2.0

pica-whiteboard/default.css

+/* INIT */
 *{
 	margin: 0;
 	box-sizing: border-box;
 	font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  text-align: center;
 }
 
+:root {
+	--background: #303030;
+	--background-darker: #272727;
+	--background-lighter: #333333;
+	--background-header: #18684D;
+	--background-warning: #8C2424;
+  --color: #DDDDDD;
+}
+
+.flex-center-column {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.flex-row-spacearound {
+  display: flex;
+  width: 100%;
+  justify-content: space-around;
+}
+
+.margin-small {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.margin-medium {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+
+.margin-big {
+  margin-top: 4em;
+  margin-bottom: 4em;
+}
+
+/* SPECIFIC */
+
 body{
-	background-color: #303030;
-	color: white;
+	background-color: var(--background);
+	color: var(--color);
+  font-size: 1.2em;
 }
 
 header{
-	background-color: #1B7A5A;
+	background-color: var(--background-header);
 	padding: 5px;
 	padding-top: 10px;
-	text-align: center;
-}
-
-.logo{
-	display: block;
-	margin-top: 1em;
-  margin-left: auto;
-  margin-right: auto;
-  width: 8em;
 }
 
 header h1{
 	display: inline;
 }
 
-.warning{
-	background-color: #FFC0C0;
-	margin: auto;
-	margin-top: 25px;
-	margin-bottom: 25px;
-	padding: 10px;
-	color: #FF0000;
-	border-radius: 10px;
-	width: 40%;
-	border: solid red 1px;
-	text-align: center;
+article{
+  width: 100%;
 }
 
-.createForm{
-	display: block;
-	margin: auto;
-	width: 40%;
-	text-align: center;
+.logo{
+  width: 9em;
+}
+
+.main-center{
+	width: 85%;
+  max-width: 640px;
 }
 
-label{
-	display: block;
-	margin: 5px;
+.warning{
+	padding: 15px;
+	background-color: var(--background-warning);
+	border-radius: 10px;
 }
 
 input[type="text"]{
-	margin: 5px;
 	border: none;
 	border-radius: 5px;
 	width: 100%;
 	height: 3em;
 }
 
-.create {
-	display: flex;
-	width: 100%
-}
-
-.child {
-	flex: 50%;
-	padding-right: 10px;
-}
-
-#randomName, input[type="submit"]{
+.buttons * {
 	padding: 20px;
-	margin: 20px;
-	color: white;
-	background-color: #00AFEF;
-	width: 100%;
+	color: var(--color);
+  font-size: 1em;
+	background-color: #075C7B;
+	width: 11em;
+  max-width: 48%;
 	border: none;
 	border-radius: 10px;
-	transition: 0.5s;
+	transition: 0.2s;
 	font-weight: bold;
+	text-decoration: none;
 }
 
-input[type="submit"]:hover, .randomName:hover{
-	background-color: #00BFFF;
+.buttons *:hover{
+	background-color: #077299;
 }
 
-h1{
-	padding: 20px;
-	text-align: center;
-	padding-left: 40px;
+footer a {
+	color: #CCCCCC;
+	text-decoration: underline;
+	margin: 0 10px;
 }
 
-a{
-	color: #FFFFFF;
-	text-decoration: none;
+#help{
+	display: none;
 }
 
-.helpLink a:hover{
-	background-color: #00BFFF;
+#help:target{
+	display: flex;
+  align-items: center;
+	width: 80%;
+	margin-left: auto;
+	margin-right: auto;
 }
 
-p{
-	padding: 5px;
+#help thead tr th {
+  padding-bottom: 10px;
 }
 
-#help{
-	display: none;
+#help tr.odd {
+  background-color: var(--background-lighter);
 }
 
-#help:target{
-	display: block;
-	width: 70%;
-	margin: auto;
+#help tr.even {
+  background-color: var(--background-darker);
 }
 
-#footer {
-	text-align: center;
+#help td, #help th {
+  text-align: left;
+  padding: 5px 20px 5px 5px;
 }
 
-#footer a {
-	color: #C0C0C0;
-	text-decoration: underline;
-	margin: 0 10px;
+#help td:nth-child(1), #help th:nth-child(1) {
+  font-weight: bold;
+  width: 28vw;
+  max-width: 280px;
 }
+
+#help td:nth-child(2), #help th:nth-child(2),
+#help td:nth-child(3), #help th:nth-child(3) {
+  width: 28vw;
+  max-width: 220px;
+}
+