aboutsummaryrefslogtreecommitdiff
path: root/css
diff options
context:
space:
mode:
Diffstat (limited to 'css')
-rw-r--r--css/base.css21
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;