diff --git a/css/freepost.styl b/css/freepost.styl index a1248bd..9e0eacc 100644 --- a/css/freepost.styl +++ b/css/freepost.styl @@ -5,288 +5,316 @@ body margin auto max-width 80% - /* Page header */ - .header - padding 1em 0 - text-align center - - /* Logo text */ - a.logo, - a.logo:hover, - a.logo:visited - color #000 - font-weight bold - text-decoration none - - /* Logo picture */ - > img - height 1.5em - margin 0 1em - vertical-align middle - - /* Menu under the logo */ - > .menu - padding 1em 0 - - > * - margin 0 1em - - /* Highlight username if there are unread messages */ - .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 - - - .content - padding 1em 0 - line-height 1.5em - - .vote - margin 0 1.5em 0 0 - - > a - display: inline-block - margin: 0 - overflow: hidden - padding: 0 - text-decoration none - vertical-align middle - - /* up-down arrows are images */ - img - cursor pointer - height 1em - margin 0 - padding .2em - float left - - /* Arrow style if already upvoted (green) */ - .upvoted - background-color #fff - border 1px solid #00E313 - border-radius 999em - - /* Arrow style if already upvoted (red) */ - .downvoted - background-color #fff - border 1px solid #FF0000 - border-radius 999em + /* Page header */ + > .header + padding 1em 0 + text-align center - /* Votes counter */ - .count - margin 0 .5em - - /* Home page */ - .posts - - /* A singe post */ - .post - margin 0 0 2em 0 - vertical-align top + > .flex-container + display flex + flex-direction row + flex-wrap wrap + justify-content space-between + align-content stretch + align-items flex-start + + width 80% + margin auto + + > .flex-item + order 0 + flex 0 1 auto + align-self auto + + /* Logo text */ + a.logo, + a.logo:hover, + a.logo:visited + color #000 + font-weight bold + text-decoration none + + /* Logo picture */ + img + height 1.5em + margin 0 1em + vertical-align middle - > .title - font-size 1.5em + /* Menu under the logo */ + > .menu + display flex + flex-direction row + flex-wrap wrap + justify-content flex-end + align-content flex-start + align-items flex-start - > a - color #000 + margin 1em auto + width 80% + + > .flex-item + order 0 + flex 0 1 auto + align-self auto + + margin .5em 1em - /* Some post info showed below the title */ - > .info - color #666 - margin .5em 0 - opacity .8 + /* Highlight username if there are unread messages */ + .new_messages + background-color rgb(255, 175, 50) + border-radius 4px + color #fff + font-weight bold + margin 0 + padding .5em .5em + text-decoration none - /* New submission page */ - > form.submit - margin auto - max-width 30em - /* Page for a post */ - > .post - - /* Style used to format Markdown tables */ - table - background #fff - border-collapse collapse - text-align left + > .content + padding 1em 0 + line-height 1.5em + + .vote + margin 0 1.5em 0 0 - th - border-bottom 2px solid #6678b1 - color #039 - font-weight normal - padding 0 1em + > a + display: inline-block + margin: 0 + overflow: hidden + padding: 0 + text-decoration none + vertical-align middle - td - border-bottom 1px solid #ccc - color #669 - padding .5em 1em + /* up-down arrows are images */ + img + cursor pointer + height 1em + margin 0 + padding .2em + float left - tbody tr:hover td - color #009 - - /* The post title */ - > .title - font-size 1.5em + /* Arrow style if already upvoted (green) */ + .upvoted + background-color #fff + border 1px solid #00E313 + border-radius 999em + + /* Arrow style if already upvoted (red) */ + .downvoted + background-color #fff + border 1px solid #FF0000 + border-radius 999em + + /* Votes counter */ + .count + margin 0 .5em - /* Info below post title */ - .info - margin 1em 0 + /* Home page */ + .posts + + /* A singe post */ + .post + margin 0 0 2em 0 + vertical-align top + + > .title + font-size 1.5em + + > a + color #000 + + /* Some post info showed below the title */ + > .info + color #666 + margin .5em 0 + opacity .8 - /* Post text */ - > .text - margin 1em 2.5em - word-wrap break-word + /* New submission page */ + > form.submit + margin auto + max-width 30em - /* The "new comment" form for this post page */ - .new_comment - margin 0 2.5em - overflow hidden + /* Page for a post */ + > .post - > textarea - height 2.5em + /* Style used to format Markdown tables */ + table + background #fff + border-collapse collapse + text-align left + + th + border-bottom 2px solid #6678b1 + color #039 + font-weight normal + padding 0 1em + + td + border-bottom 1px solid #ccc + color #669 + padding .5em 1em - -webkit-transition 1s - transition 1s + tbody tr:hover td + color #009 - > textarea:focus - height 10em + /* The post title */ + > .title + font-size 1.5em - > input[type=submit] - float right - margin 1em 0 - - /* Comments tree for the Post page */ - > .comments - margin 5em 0 0 0 + /* Info below post title */ + .info + margin 1em 0 - /* A single comment in the tree */ - > .comment - margin 0 0 2em 0 + /* Post text */ + > .text + margin 1em 2.5em + word-wrap break-word + + /* The "new comment" form for this post page */ + .new_comment + margin 0 2.5em overflow hidden - /* This is just a mark to indicate the beginning - * of a new comment. The only reason for this is - * to make the thread more readable - */ - > .pin - color #f00 /* #CD006B */ - float left - font-size .5em - padding 0 1em 0 0 - vertical-align top + > textarea + height 2.5em + + -webkit-transition 1s + transition 1s - /* Some info about this comment */ - > .info - font-size .9em - margin 0 0 0 1em + > textarea:focus + height 10em - .username > a, - .username > a:hover - font-weight bold + > input[type=submit] + float right + margin 1em 0 + + /* Comments tree for the Post page */ + > .comments + margin 5em 0 0 0 + + /* A single comment in the tree */ + > .comment + margin 0 0 2em 0 + overflow hidden + + /* This is just a mark to indicate the beginning + * of a new comment. The only reason for this is + * to make the thread more readable + */ + > .pin + color #f00 /* #CD006B */ + float left + font-size .5em + padding 0 1em 0 0 + vertical-align top - .op > a, - .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 + /* Some info about this comment */ + > .info + font-size .9em + margin 0 0 0 1em + + .username > a, + .username > a:hover + font-weight bold + + .op > a, + .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 - > .vote - margin 0 1em + > .vote + margin 0 1em - /* The comment text */ - > .text - margin .5em 0 0 1.5em - word-wrap break-word + /* The comment text */ + > .text + margin .5em 0 0 1.5em + word-wrap break-word - /* Give the comment that's linked to in the URL location hash a lightyellow background color */ - .comment:target - background-color lightyellow - - /* User home page */ - table.user - /* If one length specified: both horizontal and vertical spacing - * 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% + /* Give the comment that's linked to in the URL location hash a lightyellow background color */ + .comment:target + background-color lightyellow - tr - > td:first-child - font-weight bold - text-align right - vertical-align top - width 30% + /* User home page */ + table.user + /* If one length specified: both horizontal and vertical spacing + * 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% + + tr + > td:first-child + font-weight bold + text-align right + vertical-align top + width 30% + + > td:last-child + text-align left - > td:last-child - text-align left + /* User activity */ + > .user_activity - /* User activity */ - > .user_activity - - > * - margin 0 0 2em 0 + > * + margin 0 0 2em 0 + + > .info + color #888 - > .info - color #888 - - /* Login page */ - > .login - margin auto - max-width 20em + /* Login page */ + > .login + margin auto + max-width 20em + + input[type=submit] + margin 1em 0 + + .title + line-height 2em - input[type=submit] - margin 1em 0 + /* Page to edit a post or a comment */ + > .edit + { + } - .title - line-height 2em - - /* Page to edit a post or a comment */ - > .edit - { - } - - /* Page to reply to a comment */ - > .reply - { - } - - /* About page */ - > .about - - > h3 - margin 1em 0 .5em 0 + /* Page to reply to a comment */ + > .reply + { + } - > p - line-height 1.5em - - .footer - border-top 1px solid #6ECFFF - margin 3em 0 0 0 - padding 2em 0 - - img - height 1.2em - margin 0 .5em 0 0 - vertical-align middle - - > ul - list-style none - margin 0 - overflow hidden - padding 0 - - > li - float left - margin 0 2em 0 0 \ No newline at end of file + /* About page */ + > .about + + > h3 + margin 1em 0 .5em 0 + + > p + line-height 1.5em + + > .footer + border-top 1px solid #6ECFFF + margin 3em 0 0 0 + padding 2em 0 + + img + height 1.2em + margin 0 .5em 0 0 + vertical-align middle + + > ul + list-style none + margin 0 + overflow hidden + padding 0 + + > li + float left + margin 0 2em 0 0 \ No newline at end of file diff --git a/template/header.twig b/template/header.twig index e3395d2..54f622e 100644 --- a/template/header.twig +++ b/template/header.twig @@ -13,48 +13,50 @@
-
+
- {#   is an extra space because "post" is displayed attached to the picture (not sure why) #} - 🐵  - - post - - -

-

- -
-

+
+
+ +
+
+
-

- Hot • - New • - About • +

+ Hot + New + About {% if user %} {% set unread_messages = new_messages() %} - Submit • + Submit {% if unread_messages %} - + {{ user.name }} ({{ unread_messages }}) {% else %} - + {{ user.name }} {% endif %} - • - - Log out + Log out {% else %} - Log in + Log in {% endif %} -

+
\ No newline at end of file