diff options
Diffstat (limited to 'css')
-rw-r--r-- | css/base.css | 21 |
1 files changed, 21 insertions, 0 deletions
diff --git a/css/base.css b/css/base.css index 9acdaed..0a41b18 100644 --- a/css/base.css +++ b/css/base.css @@ -57,10 +57,14 @@ body { h1, h2, h3 { + /* Put some spacing with the things prior to this header. */ + padding-top: 1em; + /* Bring the headers closer to the text under them, this is a * complementary command with the margin-top in `p` tag styling */ padding-bottom: 0; margin-bottom: 0; + /* Set line-height for headers to prevent overlap when browser is * forced to wrap the words. */ line-height: 1; @@ -73,14 +77,23 @@ p { margin-top: 5px; } +ul, +ol { + /* Put some spacing with the things prior to this header. */ + padding-top: 0; + margin-top: 0; +} + /* Wrap the entire content of the page in this `div` - the navigation * bar is an exception, because of its fixed position. */ #container { /* Prevent additional horizontal spacing in smaller screens */ width: 100%; + /* Center the whole page into a narrow column. Keeps the webpage stylish * and easy to look at in the widest screens. */ max-width: 960px; + /* The container should always have a margin-top high enough to * prevent content overlapping with the navigation bar */ margin: 45px auto 0; @@ -91,6 +104,7 @@ p { /* Make sure `left`, `right`, and `width` values add up to 100% to * help keep the navigation bar in center for big screens */ margin: 0 auto; + /* Make the content a block to to put it in the center of the page */ display: block; } @@ -153,6 +167,7 @@ li > code { /* Stick to the top */ position: fixed; top: 0; + /* Make sure `left`, `right`, and `width` values add up to 100% to * help keep the navigation bar in center for big screens */ margin: 0 auto; @@ -161,8 +176,10 @@ li > code { width: 99%; max-width: 960px; /* same as the `#container` max-width */ margin: 0 auto; + /* Prevent sharp edges on the top navigation bar */ border-radius: 0 0 5px 5px; + /* Keep link texts center-aligned */ text-align: center; background: #030504; @@ -250,6 +267,7 @@ a:hover { * screens as specified at the end of this CSS file */ .banner div { display: inline-block; + /* Keep headers aligned in the middle next to Maneage logo */ vertical-align: middle; text-align: left; @@ -270,6 +288,7 @@ a:hover { min-height: 170px; max-width: 220px; max-height: 220px; + /* Keep headers aligned in the middle next to Maneage logo */ vertical-align: middle; } @@ -314,8 +333,10 @@ footer[role=contentinfo] { margin: 0 auto; max-width: 960px; /* same as the `#container` max-width */ padding: 5px 15px; + /* Prevent sharp edges on the bottom navigation bar */ border-radius: 5px 5px 0 0; + /* Keep link texts center-aligned */ text-align: left; font-size: small; |