diff --git a/stylesold/base.css b/stylesold/base.css index 194f44e..74d01c6 100644 --- a/stylesold/base.css +++ b/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%; + } }