diff --git a/assets/css/bobastyle.css b/assets/css/bobastyle.css index 25fedd5..346d520 100644 --- a/assets/css/bobastyle.css +++ b/assets/css/bobastyle.css @@ -1,66 +1,35 @@ -body { - background-color: black; - font-family: sans-serif; - margin: 0; - display: flex; - flex-direction: column; -} -a { - color: #4da6ff; -} -blockquote { - border-left: 5px solid #222; - padding-left: 10px; -} - +/* Layout */ .header { padding: 10px; - text-align: center; - background: #1a406b; - color: lightgray; } -.header h1 { - font-size: 40px; + +.page { + display: flex; +} + +.side, .content, .footer { + padding: 20px; } #navbar { overflow: hidden; - background-color: #222; } + #navbar a { float: left; display: block; - color: lightgray; - text-align: center; padding: 14px 20px; - text-decoration: none; } -#navbar a:hover { - background-color: #444; - color: white; + +body { + margin: 0; + display: flex; + flex-direction: column; } * { box-sizing: border-box; } -.page { - display: flex; -} -.side { - background-color: #111; - color: lightgray; - padding: 20px; -} -.content { - background-color: black; - color: lightgray; - padding: 20px; -} -.footer { - padding: 20px; - text-align: center; - background: #ddd; -} @media screen and (max-width: 700px) { .page { @@ -74,3 +43,52 @@ blockquote { width: 100%; } } + + + + +/* Styling */ +.header { + text-align: center; + background: #1a406b; + color: lightgray; +} +.header h1 { + font-size: 40px; +} + +#navbar { + background-color: #222; +} +#navbar a { + color: lightgray; + text-align: center; + text-decoration: none; +} +#navbar a:hover { + background-color: #444; + color: white; +} +.side { + background-color: #111; + color: lightgray; +} +.content { + color: lightgray; +} +.footer { + text-align: center; + background: #ddd; +} + +body { + background-color: black; + font-family: sans-serif; +} +a { + color: #4da6ff; +} +blockquote { + border-left: 5px solid #222; + padding-left: 10px; +}