diff --git a/client/css/colors.styl b/client/css/colors.styl
index 040b77b..d2f8e94 100644
--- a/client/css/colors.styl
+++ b/client/css/colors.styl
@@ -50,3 +50,6 @@ $note-text-text-color = black
$first-note-point-color = orangered
$hovered-note-point-color = red
$hovered-first-note-point-color = red
+$safety-safe = #88D488
+$safety-sketchy = #F3D75F
+$safety-unsafe = #F3985F
diff --git a/client/css/comments.styl b/client/css/comment-control.styl
similarity index 84%
rename from client/css/comments.styl
rename to client/css/comment-control.styl
index 570148e..4a9075c 100644
--- a/client/css/comments.styl
+++ b/client/css/comment-control.styl
@@ -1,12 +1,5 @@
@import colors
-.comments>ul
- list-style-type: none
- margin: 0 0 2em 0
- padding: 0
-
-
-
.comment-form-container
&:not(.editing)
.tabs nav
@@ -107,7 +100,6 @@
margin: 1em 0
-
.comment-content
ul
list-style-position: inside
@@ -150,30 +142,3 @@
blockquote :last-child
margin-bottom: 0
-
-
-
-.global-comment-list
- text-align: left
-
- &>ul
- list-style-type: none
- margin: 1em 0
- padding: 0
-
- &>li
- display: flex
- margin-bottom: 2em
-
- .post-thumbnail
- float: left
- vertical-align: top
- margin-right: 1em
- .thumbnail
- width: 12em
- height: 8em
- a
- display: inline-block
-
- .comments-container
- width: 100%
diff --git a/client/css/comment-list-control.styl b/client/css/comment-list-control.styl
new file mode 100644
index 0000000..bba8a06
--- /dev/null
+++ b/client/css/comment-list-control.styl
@@ -0,0 +1,4 @@
+.comments>ul
+ list-style-type: none
+ margin: 0 0 2em 0
+ padding: 0
diff --git a/client/css/comment-list-view.styl b/client/css/comment-list-view.styl
new file mode 100644
index 0000000..da29a76
--- /dev/null
+++ b/client/css/comment-list-view.styl
@@ -0,0 +1,24 @@
+.global-comment-list
+ text-align: left
+
+ &>ul
+ list-style-type: none
+ margin: 1em 0
+ padding: 0
+
+ &>li
+ display: flex
+ margin-bottom: 2em
+
+ .post-thumbnail
+ float: left
+ vertical-align: top
+ margin-right: 1em
+ .thumbnail
+ width: 12em
+ height: 8em
+ a
+ display: inline-block
+
+ .comments-container
+ width: 100%
diff --git a/client/css/forms.styl b/client/css/core-forms.styl
similarity index 100%
rename from client/css/forms.styl
rename to client/css/core-forms.styl
diff --git a/client/css/main.styl b/client/css/core-general.styl
similarity index 78%
rename from client/css/main.styl
rename to client/css/core-general.styl
index dd9e2d4..6539712 100644
--- a/client/css/main.styl
+++ b/client/css/core-general.styl
@@ -192,62 +192,7 @@ a .access-key
margin-top: 0 !important
margin-bottom: 0 !important
-.pager
- nav
- .disabled
- opacity: .5
- .prev span,
- .next span
- opacity: 0
- position: absolute
- display: block
- width: 0
- height: 0
- .page
- position: relative
- .page-header
- margin: 0.5em 0.5em 0.5em 0
- position: relative
- &:before
- display: block
- content: ''
- position: absolute
- left: 0
- top: 50%
- right: 0
- height: 3px
- background: $top-navigation-color
- z-index: 1
- span
- position: relative
- background: white
- padding: 0 1em
- z-index: 2
-
/* hack to prevent text from being copied */
[data-pseudo-content]:before {
content: attr(data-pseudo-content)
}
-
-.expander
- &.collapsed
- margin-bottom: 1em
- &>*
- display: none
- &>header
- display: block
- header
- background: $active-tab-background-color
- line-height: 2em
- a
- padding: 0 0.5em
- display: block
- color: mix($text-color, $inactive-link-color)
- font-size: 120%
- i
- font-size: 12pt
- color: $inactive-link-color
- float: right
- line-height: 2em
- .expander-content
- padding: 0.5em 0.5em 2em 0.5em
diff --git a/client/css/expander-control.styl b/client/css/expander-control.styl
new file mode 100644
index 0000000..7f2e0b7
--- /dev/null
+++ b/client/css/expander-control.styl
@@ -0,0 +1,24 @@
+@import colors
+
+.expander
+ &.collapsed
+ margin-bottom: 1em
+ &>*
+ display: none
+ &>header
+ display: block
+ header
+ background: $active-tab-background-color
+ line-height: 2em
+ a
+ padding: 0 0.5em
+ display: block
+ color: mix($text-color, $inactive-link-color)
+ font-size: 120%
+ i
+ font-size: 12pt
+ color: $inactive-link-color
+ float: right
+ line-height: 2em
+ .expander-content
+ padding: 0.5em 0.5em 2em 0.5em
diff --git a/client/css/help.styl b/client/css/help-view.styl
similarity index 100%
rename from client/css/help.styl
rename to client/css/help-view.styl
diff --git a/client/css/home.styl b/client/css/home-view.styl
similarity index 100%
rename from client/css/home.styl
rename to client/css/home-view.styl
diff --git a/client/css/pager.styl b/client/css/pager.styl
new file mode 100644
index 0000000..9ce9757
--- /dev/null
+++ b/client/css/pager.styl
@@ -0,0 +1,34 @@
+@import colors
+
+.pager
+ nav
+ .disabled
+ opacity: .5
+ .prev span,
+ .next span
+ opacity: 0
+ position: absolute
+ display: block
+ width: 0
+ height: 0
+
+ .page
+ position: relative
+ .page-header
+ margin: 0.5em 0.5em 0.5em 0
+ position: relative
+ &:before
+ display: block
+ content: ''
+ position: absolute
+ left: 0
+ top: 50%
+ right: 0
+ height: 3px
+ background: $top-navigation-color
+ z-index: 1
+ span
+ position: relative
+ background: white
+ padding: 0 1em
+ z-index: 2
diff --git a/client/css/post-content-control.styl b/client/css/post-content-control.styl
new file mode 100644
index 0000000..db651d0
--- /dev/null
+++ b/client/css/post-content-control.styl
@@ -0,0 +1,27 @@
+.post-container
+ .post-content.transparency-grid img
+ background: url('/img/transparency_grid.png')
+
+ text-align: center
+ .post-content
+ text-align: left
+ margin: 0 auto
+ position: relative
+
+ img, object, video, .post-overlay
+ position: absolute
+ height: 100%
+ width: 100%
+ left: 0
+ right: 0
+ top: 0
+ bottom: 0
+
+ .post-overlay>*
+ position: absolute
+ left: 0
+ right: 0
+ top: 0
+ bottom: 0
+ width: 100%
+ height: 100%
diff --git a/client/css/posts.styl b/client/css/post-list-view.styl
similarity index 52%
rename from client/css/posts.styl
rename to client/css/post-list-view.styl
index 43ca731..04724e9 100644
--- a/client/css/posts.styl
+++ b/client/css/post-list-view.styl
@@ -1,49 +1,4 @@
@import colors
-$safety-safe = #88D488
-$safety-sketchy = #F3D75F
-$safety-unsafe = #F3985F
-
-.post-view
- width: 100%
- display: flex !important
- flex-direction: row
- >.sidebar
- margin-right: 1em
- max-width: 20em
- min-width: 20em
- line-height: 160%
-
- a:active
- border: 0
- outline: 0
-
- nav.buttons
- margin-top: 0
- display: flex
- flex-wrap: wrap
- article
- flex: 1 0 33%
- a
- display: inline-block
- width: 100%
- padding: 0.3em 0
- text-align: center
- vertical-align: middle
- transition: background 0.2s linear
- &:not(.inactive):hover
- background: lighten($main-color, 90%)
- i
- font-size: 140%
- text-align: center
-
- >.content
- width: 100%
-
- .post-container
- margin-bottom: 2em
-
- .post-content
- margin: 0
.post-list
ul
@@ -183,121 +138,3 @@ $safety-unsafe = #F3985F
border-color: @background-color
&.disabled
background-color: alpha(@background-color, 0.15)
-
-.post-container
- .post-content.transparency-grid img
- background: url('/img/transparency_grid.png')
-
- text-align: center
- .post-content
- text-align: left
- margin: 0 auto
- position: relative
-
- img, object, video, .post-overlay
- position: absolute
- height: 100%
- width: 100%
- left: 0
- right: 0
- top: 0
- bottom: 0
-
- .post-overlay>*
- position: absolute
- left: 0
- right: 0
- top: 0
- bottom: 0
- width: 100%
- height: 100%
-
-.post-view .readonly-sidebar
- .details
- i
- margin-right: 0.6em
- display: inline-block
- width: 1em
- text-align: center
-
- .safety-safe
- color: $safety-safe
- .safety-sketchy
- color: $safety-sketchy
- .safety-unsafe
- color: $safety-unsafe
-
- .upload-info
- .thumbnail
- width: 1em
- height: 1em
- margin: -0.1em 0.6em 0 0
-
- .zoom
- margin-top: 1em
- a
- display: inline-block
- .active
- text-decoration: underline
-
- .social
- margin-top: 1em
- .score-container
- float: left
- margin-right: 3em
- .downvote i
- text-align: right
- i
- text-align: left
- margin: 0
- .value
- text-align: center
- display: inline-block
- width: 2em
-
- .relations
- margin-top: 2em
- h1
- margin-bottom: 0.5em
- .thumbnail
- background-position: 50% 30%
- width: 4em
- height: 3em
- li
- margin: 0 0.3em 0.3em 0
- display: inline-block
-
- .tags
- margin-top: 2em
- h1
- margin-bottom: 0.5em
-
-.post-view .edit-sidebar
- .expander-content
- section:not(:last-child)
- margin-bottom: 1em
-
- .safety
- display: flex
- flex-wrap: wrap
- label:not(.radio)
- width: 100%
- .radio
- flex-grow: 1
- display: inline-block
-
- .management
- li
- margin: 0
-
- label
- margin-bottom: 0.3em
- display: block
-
- input[type=submit],
- input[type=button],
- button
- margin-top: 1em
- width: 100%
- &:focus
- border: 2px solid $text-color !important
diff --git a/client/css/notes.styl b/client/css/post-notes-overlay-control.styl
similarity index 100%
rename from client/css/notes.styl
rename to client/css/post-notes-overlay-control.styl
diff --git a/client/css/post-upload.styl b/client/css/post-upload.styl
index f6b6905..16c32f0 100644
--- a/client/css/post-upload.styl
+++ b/client/css/post-upload.styl
@@ -1,6 +1,6 @@
@import colors
-.post-upload
+#post-upload
form
width: 100%
max-width: 40em
diff --git a/client/css/post-view.styl b/client/css/post-view.styl
new file mode 100644
index 0000000..9f92bb6
--- /dev/null
+++ b/client/css/post-view.styl
@@ -0,0 +1,134 @@
+@import colors
+
+.post-view
+ width: 100%
+ display: flex !important
+ flex-direction: row
+ >.sidebar
+ margin-right: 1em
+ max-width: 20em
+ min-width: 20em
+ line-height: 160%
+
+ a:active
+ border: 0
+ outline: 0
+
+ nav.buttons
+ margin-top: 0
+ display: flex
+ flex-wrap: wrap
+ article
+ flex: 1 0 33%
+ a
+ display: inline-block
+ width: 100%
+ padding: 0.3em 0
+ text-align: center
+ vertical-align: middle
+ transition: background 0.2s linear
+ &:not(.inactive):hover
+ background: lighten($main-color, 90%)
+ i
+ font-size: 140%
+ text-align: center
+
+ >.content
+ width: 100%
+
+ .post-container
+ margin-bottom: 2em
+
+ .post-content
+ margin: 0
+
+
+.post-view .readonly-sidebar
+ .details
+ i
+ margin-right: 0.6em
+ display: inline-block
+ width: 1em
+ text-align: center
+
+ .safety-safe
+ color: $safety-safe
+ .safety-sketchy
+ color: $safety-sketchy
+ .safety-unsafe
+ color: $safety-unsafe
+
+ .upload-info
+ .thumbnail
+ width: 1em
+ height: 1em
+ margin: -0.1em 0.6em 0 0
+
+ .zoom
+ margin-top: 1em
+ a
+ display: inline-block
+ .active
+ text-decoration: underline
+
+ .social
+ margin-top: 1em
+ .score-container
+ float: left
+ margin-right: 3em
+ .downvote i
+ text-align: right
+ i
+ text-align: left
+ margin: 0
+ .value
+ text-align: center
+ display: inline-block
+ width: 2em
+
+ .relations
+ margin-top: 2em
+ h1
+ margin-bottom: 0.5em
+ .thumbnail
+ background-position: 50% 30%
+ width: 4em
+ height: 3em
+ li
+ margin: 0 0.3em 0.3em 0
+ display: inline-block
+
+ .tags
+ margin-top: 2em
+ h1
+ margin-bottom: 0.5em
+
+.post-view .edit-sidebar
+ .expander-content
+ section:not(:last-child)
+ margin-bottom: 1em
+
+ .safety
+ display: flex
+ flex-wrap: wrap
+ label:not(.radio)
+ width: 100%
+ .radio
+ flex-grow: 1
+ display: inline-block
+
+ .management
+ li
+ margin: 0
+
+ label
+ margin-bottom: 0.3em
+ display: block
+
+ input[type=submit],
+ input[type=button],
+ button
+ margin-top: 1em
+ width: 100%
+ &:focus
+ border: 2px solid $text-color !important
diff --git a/client/css/snapshots.styl b/client/css/snapshots-list-view.styl
similarity index 100%
rename from client/css/snapshots.styl
rename to client/css/snapshots-list-view.styl
diff --git a/client/css/tag-categories-view.styl b/client/css/tag-categories-view.styl
new file mode 100644
index 0000000..2905fe9
--- /dev/null
+++ b/client/css/tag-categories-view.styl
@@ -0,0 +1,23 @@
+@import colors
+
+.content-wrapper.tag-categories
+ width: 100%
+ max-width: 40em
+ table
+ border-spacing: 0
+ width: 100%
+ tr.default td
+ background: $default-tag-category-background-color
+ td, th
+ padding: .4em
+ &.color
+ text-align: center
+ &.usages
+ text-align: center
+ &.remove, &.set-default
+ white-space: pre
+ tfoot
+ display: none
+ .messages, form
+ width: auto
+
diff --git a/client/css/tag-input.styl b/client/css/tag-input-control.styl
similarity index 100%
rename from client/css/tag-input.styl
rename to client/css/tag-input-control.styl
diff --git a/client/css/tag-list-view.styl b/client/css/tag-list-view.styl
new file mode 100644
index 0000000..fe13176
--- /dev/null
+++ b/client/css/tag-list-view.styl
@@ -0,0 +1,52 @@
+@import colors
+
+.tag-list
+ table
+ width: 100%
+ border-spacing: 0
+ text-align: left
+ line-height: 1.3em
+ tr:hover td
+ background: $top-navigation-color
+ th, td
+ padding: 0.1em 0.5em
+ th
+ background: $top-navigation-color
+ .names
+ width: 28%
+ .implications
+ width: 28%
+ .suggestions
+ width: 28%
+ .usages
+ text-align: center
+ width: 8%
+ .edit-time
+ text-align: center
+ width: 8%
+ white-space: pre
+ ul
+ list-style-type: none
+ margin: 0
+ padding: 0
+ display: inline
+ li
+ padding: 0
+ display: inline
+ &:not(:last-child):after
+ content: ', '
+ @media (max-width: 800px)
+ .implications, .suggestions
+ display: none
+
+.tag-list-header
+ label
+ display: none
+ text-align: left
+ form
+ width: auto
+ input[name=search-text]
+ max-width: 15em
+ .append
+ font-size: 0.95em
+ color: $inactive-link-color
diff --git a/client/css/tag-view.styl b/client/css/tag-view.styl
new file mode 100644
index 0000000..e1b069c
--- /dev/null
+++ b/client/css/tag-view.styl
@@ -0,0 +1,33 @@
+#tag
+ width: 100%
+ max-width: 40em
+ h1
+ word-break: break-all
+ line-height: 130%
+ margin-top: 0
+ form, .messages
+ width: 100%
+ .tag-edit
+ textarea
+ height: 10em
+ .tag-summary
+ section
+ &.description
+ margin: 1.5em 0 0 0
+ &.details
+ vertical-align: top
+ padding-right: 0.5em
+ ul
+ margin: 0
+ padding: 0
+ list-style-type: none
+ li
+ display: inline
+ margin: 0
+ padding: 0
+ li:not(:last-of-type):after
+ content: ', '
+ ul:empty:after
+ content: '(none)'
+ section
+ margin-bottom: 1em
diff --git a/client/css/tags.styl b/client/css/tags.styl
deleted file mode 100644
index 524c6ca..0000000
--- a/client/css/tags.styl
+++ /dev/null
@@ -1,107 +0,0 @@
-@import colors
-
-.tag-list
- table
- width: 100%
- border-spacing: 0
- text-align: left
- line-height: 1.3em
- tr:hover td
- background: $top-navigation-color
- th, td
- padding: 0.1em 0.5em
- th
- background: $top-navigation-color
- .names
- width: 28%
- .implications
- width: 28%
- .suggestions
- width: 28%
- .usages
- text-align: center
- width: 8%
- .edit-time
- text-align: center
- width: 8%
- white-space: pre
- ul
- list-style-type: none
- margin: 0
- padding: 0
- display: inline
- li
- padding: 0
- display: inline
- &:not(:last-child):after
- content: ', '
- @media (max-width: 800px)
- .implications, .suggestions
- display: none
-
-.tag-list-header
- label
- display: none
- text-align: left
- form
- width: auto
- input[name=search-text]
- max-width: 15em
- .append
- font-size: 0.95em
- color: $inactive-link-color
-
-.content-wrapper.tag
- width: 100%
- max-width: 40em
- h1
- word-break: break-all
- line-height: 130%
- margin-top: 0
- form, .messages
- width: 100%
- .tag-edit
- textarea
- height: 10em
- .tag-summary
- section
- &.description
- margin: 1.5em 0 0 0
- &.details
- vertical-align: top
- padding-right: 0.5em
- ul
- margin: 0
- padding: 0
- list-style-type: none
- li
- display: inline
- margin: 0
- padding: 0
- li:not(:last-of-type):after
- content: ', '
- ul:empty:after
- content: '(none)'
- section
- margin-bottom: 1em
-
-.content-wrapper.tag-categories
- width: 100%
- max-width: 40em
- table
- border-spacing: 0
- width: 100%
- tr.default td
- background: $default-tag-category-background-color
- td, th
- padding: .4em
- &.color
- text-align: center
- &.usages
- text-align: center
- &.remove, &.set-default
- white-space: pre
- tfoot
- display: none
- .messages, form
- width: auto
diff --git a/client/css/user-list-view.styl b/client/css/user-list-view.styl
new file mode 100644
index 0000000..1f3ada3
--- /dev/null
+++ b/client/css/user-list-view.styl
@@ -0,0 +1,39 @@
+@import colors
+
+.user-list
+ ul
+ list-style-type: none
+ padding: 0
+ display: flex
+ align-content: flex-end
+ flex-wrap: wrap
+ margin: 0 -0.5em
+ li
+ flex-grow: 1
+ width: 20em
+ margin: 0 0.5em 1em 0.5em
+ padding: 0.75em
+ vertical-align: top
+ background: $top-navigation-color
+ text-align: left
+ .wrapper
+ display: flex
+ .details
+ font-size: 90%
+ line-height: 130%
+ .thumbnail
+ width: 3em
+ height: 3em
+ margin: 0.25em 0.6em 0 0
+
+.user-list-header
+ label
+ display: none
+ text-align: left
+ form
+ width: auto
+ input[name=search-text]
+ max-width: 15em
+ .append
+ font-size: 0.95em
+ color: $inactive-link-color
diff --git a/client/css/user-registration.styl b/client/css/user-registration.styl
new file mode 100644
index 0000000..a8642f1
--- /dev/null
+++ b/client/css/user-registration.styl
@@ -0,0 +1,24 @@
+@import colors
+
+#user-registration
+ form
+ float: left
+ .info
+ float: left
+ margin-left: 3em
+ border-radius: 0.2em
+ width: 20em
+ ul
+ line-height: 1.8em
+ list-style-type: none
+ margin: 0
+ padding: 0
+ li
+ margin: 0
+ padding: 0
+ i
+ margin-right: 0.5em
+ i.fa
+ color: $main-color
+ p:first-child
+ margin: 0 0 0.5em 0
diff --git a/client/css/user-view.styl b/client/css/user-view.styl
new file mode 100644
index 0000000..7693a95
--- /dev/null
+++ b/client/css/user-view.styl
@@ -0,0 +1,43 @@
+#user
+ width: 100%
+ max-width: 35em
+ nav.text-nav
+ margin-bottom: 1.5em
+
+ #user-summary
+ .thumbnail
+ width: 6em
+ height: 6em
+ margin: 0 1.5em 1.5em 0
+ float: left
+ .basic-info
+ list-style-type: none
+ margin: 0
+ div
+ clear: both
+ nav
+ float: left
+ width: 45%
+ margin-right: 1em
+
+ #user-edit
+ form, .messages
+ width: 100%
+ .avatar
+ #avatar-content
+ float: right
+ width: 65%
+ margin-top: .5em
+ #avatar-radio
+ float: left
+ width: 30%
+ &:after
+ content: ' '
+ display: block
+ height: 1px
+ clear: both
+
+ #user-delete form
+ width: 100%
+
+
diff --git a/client/css/users.styl b/client/css/users.styl
deleted file mode 100644
index 7035849..0000000
--- a/client/css/users.styl
+++ /dev/null
@@ -1,106 +0,0 @@
-@import colors
-
-#user-registration
- form
- float: left
- .info
- float: left
- margin-left: 3em
- border-radius: 0.2em
- width: 20em
- ul
- line-height: 1.8em
- list-style-type: none
- margin: 0
- padding: 0
- li
- margin: 0
- padding: 0
- i
- margin-right: 0.5em
- i.fa
- color: $main-color
- p:first-child
- margin: 0 0 0.5em 0
-
-
-#user
- width: 100%
- max-width: 35em
- nav.text-nav
- margin-bottom: 1.5em
-
- #user-summary
- .thumbnail
- width: 6em
- height: 6em
- margin: 0 1.5em 1.5em 0
- float: left
- .basic-info
- list-style-type: none
- margin: 0
- div
- clear: both
- nav
- float: left
- width: 45%
- margin-right: 1em
-
- #user-edit
- form, .messages
- width: 100%
- .avatar
- #avatar-content
- float: right
- width: 65%
- margin-top: .5em
- #avatar-radio
- float: left
- width: 30%
- &:after
- content: ' '
- display: block
- height: 1px
- clear: both
-
- #user-delete form
- width: 100%
-
-
-.user-list
- ul
- list-style-type: none
- padding: 0
- display: flex
- align-content: flex-end
- flex-wrap: wrap
- margin: 0 -0.5em
- li
- flex-grow: 1
- width: 20em
- margin: 0 0.5em 1em 0.5em
- padding: 0.75em
- vertical-align: top
- background: $top-navigation-color
- text-align: left
- .wrapper
- display: flex
- .details
- font-size: 90%
- line-height: 130%
- .thumbnail
- width: 3em
- height: 3em
- margin: 0.25em 0.6em 0 0
-
-.user-list-header
- label
- display: none
- text-align: left
- form
- width: auto
- input[name=search-text]
- max-width: 15em
- .append
- font-size: 0.95em
- color: $inactive-link-color
diff --git a/client/html/index.htm b/client/html/index.htm
index 8eeb8b8..f20ad46 100644
--- a/client/html/index.htm
+++ b/client/html/index.htm
@@ -2,7 +2,7 @@
-
+
<!-- configured in the config file -->
diff --git a/client/html/post_upload.tpl b/client/html/post_upload.tpl
index 1d79d88..26c6039 100644
--- a/client/html/post_upload.tpl
+++ b/client/html/post_upload.tpl
@@ -1,4 +1,4 @@
-