0.0.13

stylesold/base.css

@@ -1,168 +1,66 @@
-body {
-    margin: 0;
-}
-
-header {
-    margin-bottom: 3rem;
-}
-
-h1 {
-    font-size: 2em;
-    margin: 0.67em 0;
-}
-
-/* Text-level semantics */
-a {
-    background-color: transparent;
-}
-
-abbr[title] {
-    border-bottom: none;
-    text-decoration: underline;
-    text-decoration: underline dotted;
-}
-
-b,
-strong {
-    font-weight: bolder;
-}
-
-code,
-kbd,
-samp {
-    font-family: monospace, monospace;
-    font-size: 1em;
-}
-
-small {
-    font-size: 80%;
-}
-
-sub,
-sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-}
-
-sub {
-    bottom: -0.25em;
-}
-
-sup {
-    top: -0.5em;
-}
-
-/* Embedded content */
-img {
-    border-style: none;
-}
-
-/* Forms */
-button,
-input,
-optgroup,
-select,
-textarea {
-    font-family: inherit;
-    font-size: 100%;
-    line-height: 1.15;
-    margin: 0;
-}
-
-button,
-input {
-    overflow: visible;
-}
-
-button,
-select {
-    text-transform: none;
-}
-
-button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
-    -webkit-appearance: button;
-}
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-    border-style: none;
-    padding: 0;
-}
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-    outline: 1px dotted ButtonText;
-}
-
-fieldset {
-    padding: 0.35em 0.75em 0.625em;
-}
-
-legend {
-    box-sizing: border-box;
-    color: inherit;
-    display: table;
-    max-width: 100%;
-    padding: 0;
-    white-space: normal;
-}
-
-progress {
-    vertical-align: baseline;
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
 }
 
-textarea {
-    overflow: auto;
+body {
+	font-family: "Sansita", sans-serif;
+    margin: 0; /* Added from snippet D */
 }
 
-[type="checkbox"],
-[type="radio"] {
-    box-sizing: border-box;
-    padding: 0;
+/* mobile **************************/
+header {
+	background-color: #bbb;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 20px;
+	border: 1px solid rgba(0, 0, 0, 0.1);
+	margin-bottom: 3rem; /* Added from snippet D */
 }
 
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-    height: auto;
+header,
+main {
+	max-width: 767px;
+	margin: 0 auto;
 }
 
-[type="search"] {
-    -webkit-appearance: textfield;
-    outline-offset: -2px;
+h1 {
+	font-size: 2rem;
+    margin: 0.67em 0; /* Added from snippet D */
 }
 
-[type="search"]::-webkit-search-decoration {
-    -webkit-appearance: none;
+nav {
+	background-color: #36454f;
+	margin: 0 auto;
+	max-width: 800px;
 }
-
-::-webkit-file-upload-button {
-    -webkit-appearance: button;
-    font: inherit;
+nav ul {
+	list-style-type: none;
 }
-
-/* Interactive */
-details {
-    display: block;
+nav a {
+	display: block;
+	color: #fff;
+	text-align: center;
+	padding: 1rem;
+	text-decoration: none;
 }
 
-summary {
-    display: list-item;
+nav a:hover {
+	border: 1px solid #fff;
 }
 
-/* Misc */
-template {
-    display: none;
+.active {
+	color: yellow;
 }
 
-[hidden] {
-    display: none;
+/* Larger Views ******************************/
+@media (min-width: 640px) {
+	nav ul {
+		display: flex;
+	}
+	nav ul li {
+		flex: 1 1 100%;
+	}
 }