}
body {
- background-color: #111;
- background-image: url("../images/background.png");
+ background-color: #161616;
color: #C3C3C3;
- padding: none;
+ padding: 0;
margin: 0px;
height: 100%;
font: 16px 'Lato', 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
.container {
margin: auto;
width: 96%;
- max-width: 820px;
+ max-width: 940px;
}
header {
width: 100%;
- height: 36px;
- padding-top: 14px;
- margin-bottom: 20px;
- border-bottom: 1px solid #333;
+ padding: 0;
+ margin-bottom: 42px;
+ background-color: #303030;
+ border-bottom: 1px solid #252525;
}
.header_right {
+ margin: 8px;
+ display: inline-block;
float: right;
}
+.header_right ul {
+ display: none;
+ position: absolute;
+ top: 42px;
+ right: 0px;
+ background: #252525;
+ padding: 20px;
+}
+
+.header_right li {
+ list-style: none;
+}
+
a.logo {
color: #fff;
font-weight: bold;
- margin-right: 8px;
}
.logo img {
vertical-align: middle;
+ margin: 6px 8px;
}
.mediagoblin_content {
height: 30px;
border-top: 1px solid #333;
bottom: 0px;
- padding-top: 8px;
+ padding: 8px 0;
text-align: center;
font-size: 0.875em;
clear: both;
}
.media_pane {
- width: 560px;
+ width: 640px;
margin-left: 0px;
margin-right: 10px;
float: left;
}
-img.media_image {
- margin-left: auto;
- margin-right: auto;
- display: block;
-}
-
.media_sidebar {
- width: 240px;
+ width: 280px;
margin-left: 10px;
float: left;
}
height: 0;
}
-h3.sidedata {
- border: none;
- background-color: #212121;
- border-radius: 4px 4px 0 0;
- padding: 3px 8px;
- margin: 20px 0 5px 0;
- font-size: 1em;
+.hidden {
+ display: none;
+}
+
+.media_sidebar h3 {
+ font-size: 1em;
+ margin: 0 0 5px;
+ border: none;
+}
+
+.media_sidebar p {
+ margin-left: 8px;
}
/* forms */
text-align: right;
}
+.subform {
+ margin: 2em;
+}
+
#password_boolean {
margin-top: 4px;
width: 20px;
textarea#description, textarea#bio {
resize: vertical;
+ height: 100px;
}
/* comments */
+.comment_wrapper {
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+
+.comment_wrapper p {
+ margin-bottom: 2px;
+}
+
.comment_author {
- margin-bottom: 40px;
padding-top: 4px;
font-size: 0.9em;
}
.comment_content {
- margin-bottom: 30px;
-}
-
-.comment_content p {
- margin-bottom: 0px;
+ margin-left: 8px;
+ margin-top: 8px;
}
textarea#comment_content {
}
#form_comment .form_field_input {
- padding-right: 6px;
+ padding-right: 6px;
}
/* media galleries */
.media_thumbnail {
- display: inline-block;
+ float: left;
padding: 0px;
width: 180px;
overflow: hidden;
- margin: 0px 4px 10px 4px;
+ margin: 0px 3px 10px;
text-align: center;
font-size: 0.875em;
- list-style: none;
+ background-color: #222;
+ border-radius: 0 0 5px 5px;
+ padding: 0 0 6px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ border-color: #0D0D0D;
+ border-style: solid;
+ border-width: 1px 1px 2px;
}
.media_thumbnail a {
color: #eee;
text-decoration: none;
+ display: block;
+}
+
+a.thumb_entry_title {
+ padding: 8px;
+}
+
+.media_thumbnail img {
+ max-height: 135px;
+}
+
+.thumb_entry_last {
+ margin-right: 0px;
+}
+
+/* collection media */
+
+.collection_thumbnail {
+ float: left;
+ padding: 0px;
+ width: 180px;
+ margin: 0px 4px 10px;
+ text-align: left;
+ font-size: 0.875em;
+ background-color: #222;
+ border-radius: 0 0 5px 5px;
+ padding: 0 0 6px;
+ text-overflow: ellipsis;
+}
+
+.collection_thumbnail a {
+ color: #eee;
+ text-decoration: none;
+}
+
+.collection_thumbnail a.remove {
+ color: #86D4B1;
+}
+
+.collection_thumbnail img {
+ max-height: 135px;
}
/* media detail */
}
p.context {
- display: inline-block;
- padding-top: 4px;
+ display: inline-block;
+ padding-top: 4px;
}
p.media_specs {
}
.no_html5 {
- background: black;
- color: white;
- text-align: center;
- height: 160px;
- padding: 130px 10px 20px 10px;
+ background: black;
+ color: white;
+ text-align: center;
+ height: 160px;
+ padding: 130px 10px 20px 10px;
+}
+
+a img.media_image {
+ cursor: -webkit-zoom-in;
+ cursor: -moz-zoom-in;
+ cursor: zoom-in;
}
/* icons */
/* navigation */
.navigation {
- float: right;
+ float: right;
}
.navigation_button {
border-radius: 4px;
text-decoration: none;
padding: 4px 0 8px;
- margin: 0 0 6px
+ margin: 0 0 6px;
}
.navigation_left {
margin-left: 10px;
}
-/* ASCII art */
+/* ASCII art and code */
@font-face {
font-family: Inconsolata;
src: local('Inconsolata'), url('../fonts/Inconsolata.otf') format('opentype')
}
-.ascii-wrapper pre {
+pre, code {
font-family: Inconsolata, monospace;
line-height: 1em;
}
-/* Media queries and other responsivisivity */
+pre {
+ overflow: auto;
+ margin-bottom: 20px;
+}
+
+.comment_wrapper pre {
+ margin-bottom: 2px;
+}
+
+.ascii-wrapper pre {
+ /* but it should not affect the ASCII art */
+ margin: 0;
+}
-@media screen and (max-width: 820px) {
+/* Media queries and other responsivisivity */
+@media screen and (max-width: 940px) {
.media_pane {
width: 100%;
margin: 0px;
}
.media_sidebar {
- width: 100%;
- margin: 0px;
- }
-
+ width: 100%;
+ margin: 0px;
+ }
+
img.media_image {
width: 100%;
display: inline;
}
+ .media_thumbnail {
+ width: 21%;
+ }
+
.profile_sidebar {
width: 100%;
margin: 0px;
width: 100%;
margin: 0px;
}
+
+ .navigation {
+ float: none;
+ }
+
+ .navigation_button {
+ width: 49%;
+ float: right;
+ }
+
+ .navigation_left {
+ margin-right: 0;
+ float: left;
+ }
.navigation {
float: none;
.navigation_button {
width: 49%;
float: right;
+ padding: 10px 0 14px;
}
.navigation_left {
.button_action, .button_action_highlight, .button_form {
padding: 9px 14px;
}
+
+ header {
+ text-align: center;
+ }
+
+ .header_right {
+ margin-right: 2%;
+ float: none;
+ }
+
+ a.logo {
+ margin-left: 2%;
+ }
+}
+
+@media screen and (max-width: 570px) {
+ .media_thumbnail {
+ width: 29%;
+ }
+}
+
+@media screen and (max-width: 380px) {
+ .media_thumbnail {
+ width: 46%;
+ }
}