diff --git a/css/freepost.css b/css/freepost.css index dea0fb2..5695d0b 100644 --- a/css/freepost.css +++ b/css/freepost.css @@ -1,50 +1,56 @@ * { - margin: 0; - padding: 0; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + margin: 0; + padding: 0; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - -moz-box-sizing: border-box; + -moz-box-sizing: border-box; -webkit-box-sizing: border-box; - box-sizing: border-box; + box-sizing: border-box; } img { + /* Prevent images from taking up too much space in comments */ max-width: 100%; } html, body { - background-color: #fff; /* #f5f8fa; */ - font-size: 1em; - height: 100%; - line-height: 1em; - margin: 0; - padding: 0; - width: 100%; + background-color: #fff; /* #f5f8fa; */ + font-size: 1em; + height: 100%; + line-height: 1em; + margin: 0; + padding: 0; + width: 100%; } /* Page header */ .header { - padding: 1em 0; + padding: 1em 0; text-align: center; } - .header a.logo, .header a.logo:hover, .header a.logo:visited + /* Logo text */ + .header a.logo, + .header a.logo:hover, + .header a.logo:visited { - color: #000; - font-weight: bold; - text-decoration: none; + color: #000; + font-weight: bold; + text-decoration: none; } + /* Logo picture */ .header a.logo > img { - height: 1.5em; - margin: 0 1em; + height: 1.5em; + margin: 0 1em; vertical-align: middle; } - + + /* Menu under the logo */ .header > .menu { padding: 1em 0; @@ -57,19 +63,20 @@ html, body .header > .menu .new_messages { - background-color: rgb(255, 175, 50); - border-radius: 4px; - color: #fff; - font-weight: bold; - margin: 0 .5em 0 0; - padding: 0em 0.5em; - text-decoration: none; + background-color: rgb(255, 175, 50); + border-radius: 4px; + color: #fff; + font-weight: bold; + margin: 0 .5em 0 0; + padding: 0em 0.5em; + text-decoration: none; } - + + .content { - padding: 1em 0; - line-height: 1.5em; + padding: 1em 0; + line-height: 1.5em; } .content .vote @@ -79,34 +86,34 @@ html, body .content .vote > a { - display: inline-block; - margin: 0; - overflow: hidden; - padding: 0; - text-decoration: none; - vertical-align: middle; + display: inline-block; + margin: 0; + overflow: hidden; + padding: 0; + text-decoration: none; + vertical-align: middle; } .content .vote img { - cursor: pointer; - height: 1em; - margin: 0; - padding: .2em; - float: left; + cursor: pointer; + height: 1em; + margin: 0; + padding: .2em; + float: left; } .content .vote .upvoted { - background-color: #fff; - border: 1px solid #00E313; - border-radius: 999em; + background-color: #fff; + border: 1px solid #00E313; + border-radius: 999em; } .content .vote .downvoted { - background-color: #fff; - border: 1px solid #FF0000; - border-radius: 999em; + background-color: #fff; + border: 1px solid #FF0000; + border-radius: 999em; } .content .vote .count { @@ -120,7 +127,7 @@ html, body .content .posts .post { - margin: 0 0 2em 0; + margin: 0 0 2em 0; vertical-align: top; } @@ -136,16 +143,16 @@ html, body .content .posts .post > .info { - color: #666; - margin: .5em 0; - opacity: .8; + color: #666; + margin: .5em 0; + opacity: .8; } /* New submission */ .content > form.submit { - margin: auto; - max-width: 30em; + margin: auto; + max-width: 30em; } /* View a post */ @@ -156,36 +163,38 @@ html, body /* Style used to format Markdown tables */ .content > .post table { - background: #fff; - border-collapse: collapse; - text-align: left; - } - - .content > .post table th - { - border-bottom: 2px solid #6678b1; - color: #039; - font-weight: normal; - padding: 0 1em; - } - - .content > .post table td - { - border-bottom: 1px solid #ccc; - color: #669; - padding: .5em 1em; + background: #fff; + border-collapse: collapse; + text-align: left; } - .content > .post table tbody tr:hover td - { - color: #009; - } + .content > .post table th + { + border-bottom: 2px solid #6678b1; + color: #039; + font-weight: normal; + padding: 0 1em; + } + + .content > .post table td + { + border-bottom: 1px solid #ccc; + color: #669; + padding: .5em 1em; + } + + .content > .post table tbody tr:hover td + { + color: #009; + } + /* The post title */ .content > .post > .title { font-size: 1.5em; } + /* Info below post title */ .content > .post > .info { margin: 1em 0; @@ -194,15 +203,15 @@ html, body /* Post text */ .content > .post > .text { - margin: 1em 2.5em; - word-wrap: break-word; + margin: 1em 2.5em; + word-wrap: break-word; } /* Post "new comment" form */ .content > .post > .new_comment { - margin: 0 2.5em; - overflow: hidden; + margin: 0 2.5em; + overflow: hidden; } .content > .post > .new_comment > textarea @@ -210,7 +219,7 @@ html, body height: 2.5em; -webkit-transition: 1s; - transition: 1s; + transition: 1s; } .content > .post > .new_comment > textarea:focus @@ -220,11 +229,11 @@ html, body .content > .post > .new_comment > input[type=submit] { - float: right; + float: right; margin: 1em 0; } - /* Comments tree */ + /* Comments tree for the Post page */ .content > .post > .comments { margin: 5em 0 0 0; @@ -232,23 +241,23 @@ html, body .content > .post > .comments > .comment { - margin: 0 0 2em 0; - overflow: hidden; + margin: 0 0 2em 0; + overflow: hidden; } .content > .post > .comments > .comment > .pin { - color: #CD006B; - float: left; - font-size: .8em; - padding: 0 1em 0 0; + color: #CD006B; + float: left; + font-size: .8em; + padding: 0 1em 0 0; vertical-align: top; } .content > .post > .comments > .comment > .info { - font-size: .9em; - margin: 0 0 0 1em; + font-size: .9em; + margin: 0 0 0 1em; } .content > .post > .comments > .comment > .info .username > a, @@ -260,13 +269,13 @@ html, body .content > .post > .comments > .comment > .info .op > a, .content > .post > .comments > .comment > .info .op > a:hover { - background-color: rgb(255, 175, 50); - border-radius: 4px; - color: #fff; - font-weight: bold; - margin: 0 .5em 0 0; - padding: 0em 0.5em; - text-decoration: none; + background-color: rgb(255, 175, 50); + border-radius: 4px; + color: #fff; + font-weight: bold; + margin: 0 .5em 0 0; + padding: 0em 0.5em; + text-decoration: none; } .content > .post > .comments > .comment > .info > .vote @@ -276,7 +285,7 @@ html, body .content > .post > .comments > .comment > .text { - margin: .5em 0 0 1.5em; + margin: .5em 0 0 1.5em; word-wrap: break-word; } @@ -294,18 +303,18 @@ html, body * If two length specified: first sets the horizontal spacing, and * the second sets the vertical spacing */ - border-spacing: 2em 1em; - border-collapse: separate; - margin: auto; - width: 80%; + border-spacing: 2em 1em; + border-collapse: separate; + margin: auto; + width: 80%; } .content table.user td:first-child { - font-weight: bold; - text-align: right; + font-weight: bold; + text-align: right; vertical-align: top; - width: 30%; + width: 30%; } .content table.user td:last-child @@ -331,8 +340,8 @@ html, body /* Login page */ .content > .login { - margin: auto; - max-width: 20em; + margin: auto; + max-width: 20em; } .content > .login input[type=submit] @@ -368,28 +377,28 @@ html, body .footer { border-top: 1px solid #6ECFFF; - margin: 3em 0 0 0; - padding: 2em 0; + margin: 3em 0 0 0; + padding: 2em 0; } .footer img { - height: 1.2em; - margin: 0 .5em 0 0; + height: 1.2em; + margin: 0 .5em 0 0; vertical-align: middle; } .footer > ul { list-style: none; - margin: 0; - overflow: hidden; - padding: 0; + margin: 0; + overflow: hidden; + padding: 0; } .footer > ul > li { - float: left; + float: left; margin: 0 2em 0 0; } @@ -398,10 +407,9 @@ html, body */ .vote_sink { - height: 1px; - left: -10px; - position: fixed; - top: -10px; - width: 1px; - } - + height: 1px; + left: -10px; + position: fixed; + top: -10px; + width: 1px; + } \ No newline at end of file