}
body {
- background-color: #111;
- background-image: url("../images/background.png");
+ background-color: #161616;
color: #C3C3C3;
- font-family: sans-serif;
- padding: none;
+ padding: 0;
margin: 0px;
height: 100%;
- font: 16px "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif;
- font-family:'Lato', sans-serif;
+ font: 16px 'Lato', 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
}
form {
/* text styles */
-h1{
- margin-bottom: 15px;
+h1,h2,h3,p {
+ margin-bottom: 20px;
+}
+
+h1,h2,h3 {
+ font-weight: bold;
+}
+
+h1 {
margin-top: 15px;
color: #fff;
font-size: 1.875em;
}
-h2{
+h2 {
font-size: 1.375em;
margin-top: 20px;
color: #fff;
}
-h3{
+h3 {
border-bottom: 1px solid #333;
font-size: 1.125em;
}
+p {
+ margin-top: 0px;
+}
+
a {
color: #86D4B1;
}
color: #fff;
}
+em {
+ font-style: italic;
+}
+
+strong {
+ font-weight: bold;
+}
+
+ul {
+ list-style: disc inside;
+}
+
+ol {
+ list-style: decimal inside;
+}
+
label {
font-weight: normal;
}
/* website structure */
-.mediagoblin_body {
+.container {
+ margin: auto;
+ width: 96%;
+ max-width: 940px;
+}
+
+header {
+ width: 100%;
+ 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;
+}
+
+.dropdown {
+ display: inline-block;
+ color: #c3c3c3;
+ background-color: #424242;
+ border: 1px solid;
+ border-color: #464646 #2B2B2B #252525;
+ border-radius: 4px;
+ padding: 3px 8px;
+ font-size: 16px;
+ text-decoration: none;
+ font-style: normal;
+ font-weight: bold;
+ cursor: pointer;
position: relative;
- min-height: 100%;
}
-.mediagoblin_header {
- height: 36px;
- padding-top: 14px;
- margin-bottom: 20px;
- border-bottom: 1px solid #333;
+.dropdown_items {
+ position: absolute;
+ right: 0px;
+ top: 25px;
+ background-color: #424242;
+ padding: 10px;
+ width: 160px;
+ border-radius: 5px 0 5px 5px;
+ box-shadow: 0 2px 1px black;
+}
+
+.dropdown_items a {
+ display: block;
}
-a.mediagoblin_logo{
+a.logo {
color: #fff;
font-weight: bold;
- margin-right: 8px;
}
-.mediagoblin_footer {
+.logo img {
+ vertical-align: middle;
+ margin: 6px 8px;
+}
+
+.mediagoblin_content {
+ width: 100%;
+ padding-bottom: 74px;
+}
+
+footer {
+ width: 100%;
height: 30px;
border-top: 1px solid #333;
bottom: 0px;
- padding-top: 8px;
+ padding: 8px 0;
text-align: center;
font-size: 0.875em;
+ clear: both;
}
-.mediagoblin_content {
- padding-bottom: 74px;
+.media_pane {
+ width: 640px;
+ margin-left: 0px;
+ margin-right: 10px;
+ float: left;
}
-.mediagoblin_header_right {
- float: right;
+.media_sidebar {
+ width: 280px;
+ margin-left: 10px;
+ float: left;
+}
+
+.profile_sidebar {
+ width: 340px;
+ margin-right: 10px;
+ float: left;
+}
+
+.profile_showcase {
+ width: 580px;
+ margin-left: 10px;
+ float: left;
}
/* common website elements */
-.button_action, .button_action_highlight {
+.button_action, .button_action_highlight, .button_form {
display: inline-block;
color: #c3c3c3;
background-color: #363636;
cursor: pointer;
}
-.button_action_highlight {
+.button_action_highlight, .button_form {
background-color: #86D4B1;
border-color: #A2DEC3 #6CAA8E #5C9179;
color: #283F35;
}
-.button_form, .cancel_link {
- height: 32px;
+.button_form {
min-width: 99px;
- background-color: #86d4b1;
- background-image: -webkit-gradient(linear, left top, left bottom, from(#86d4b1), to(#62caa2));
- background-image: -webkit-linear-gradient(top, #86d4b1, #62caa2);
- background-image: -moz-linear-gradient(top, #86d4b1, #62caa2);
- background-image: -ms-linear-gradient(top, #86d4b1, #62caa2);
- background-image: -o-linear-gradient(top, #86d4b1, #62caa2);
- background-image: linear-gradient(top, #86d4b1, #62caa2);
- box-shadow: 0px 0px 4px #000;
- border-radius: 3px;
- border: none;
- color: #272727;
margin: 10px 0px 10px 15px;
text-align: center;
- padding-left: 11px;
- padding-right: 11px;
- text-decoration: none;
font-family: 'Lato', sans-serif;
- font-weight: bold;
-}
-
-.cancel_link {
- background-color: #aaa;
- background-image: -webkit-gradient(linear, left top, left bottom, from(##D2D2D2), to(#aaa));
- background-image: -webkit-linear-gradient(top, #D2D2D2, #aaa);
- background-image: -moz-linear-gradient(top, #D2D2D2, #aaa);
- background-image: -ms-linear-gradient(top, #D2D2D2, #aaa);
- background-image: -o-linear-gradient(top, #D2D2D2, #aaa);
- background-image: linear-gradient(top, #D2D2D2, #aaa);
}
.pagination {
float: right;
}
-textarea#comment_content {
- resize: vertical;
- width: 634px;
- height: 90px;
- border: none;
- background-color: #f1f1f1;
- padding: 3px;
+.clear {
+ clear: both;
+ display: block;
+ overflow: hidden;
+ visibility: hidden;
+ width: 0;
+ height: 0;
+}
+
+.media_sidebar h3 {
+ font-size: 1em;
+ margin: 0 0 5px;
+ border: none;
+}
+
+.media_sidebar p {
+ margin-left: 8px;
}
/* forms */
-.form_box {
+.form_box,.form_box_xl {
background-color: #222;
- background-image: url("../images/background_lines.png");
- background-repeat: repeat-x;
- padding-bottom: 30px;
- padding-top: 30px;
- margin-left: auto;
- margin-right: auto;
+ border-top: 6px solid #D49086;
+ padding: 3% 5%;
display: block;
float: none;
+ width: 90%;
+ max-width: 340px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.form_box_xl {
+ max-width: 460px;
}
.edit_box {
- background-image: url("../images/background_edit.png");
+ border-top: 6px dashed #D49086
}
.form_field_input input, .form_field_input textarea {
width: 20px;
}
-textarea#description {
+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;
+ margin-left: 8px;
+ margin-top: 8px;
}
-.comment_content p {
- margin-bottom: 0px;
+textarea#comment_content {
+ resize: vertical;
+ width: 100%;
+ height: 90px;
+ border: none;
+ background-color: #f1f1f1;
+ padding: 3px;
+}
+
+#form_comment .form_field_input {
+ padding-right: 6px;
}
/* media galleries */
.media_thumbnail {
+ float: left;
padding: 0px;
width: 180px;
+ height: 156px;
overflow: hidden;
- float: left;
- margin: 0px 4px 10px 4px;
+ margin: 0px 4px 10px;
text-align: center;
font-size: 0.875em;
+ background-color: #222;
+ border-radius: 0 0 5px 5px;
+ padding: 0 0 6px;
}
.media_thumbnail a {
text-decoration: none;
}
+.media_thumbnail img {
+ max-height: 135px;
+}
+
/* media detail */
h2.media_title {
margin-bottom: 0px;
+ display: inline-block;
+}
+
+p.context {
+ display: inline-block;
+ padding-top: 4px;
}
p.media_specs {
/* navigation */
+.navigation {
+ float: right;
+}
+
.navigation_button {
width: 135px;
- display: block;
- float: left;
+ display: inline-block;
text-align: center;
background-color: #1d1d1d;
border: 1px solid;
border-color: #2c2c2c #232323 #1a1a1a;
border-radius: 4px;
text-decoration: none;
- padding: 12px 0 16px;
- font-size: 1.4em;
- margin: 0 0 20px
+ padding: 4px 0 8px;
+ margin: 0 0 6px;
}
.navigation_left {
ul.mediagoblin_messages {
list-style: none inside;
color: #f7f7f7;
+ padding: 0;
}
.mediagoblin_messages li {
font-family: Inconsolata, monospace;
line-height: 1em;
}
+
+/* Media queries and other responsivisivity */
+@media screen and (max-width: 940px) {
+ .media_pane {
+ width: 100%;
+ margin: 0px;
+ }
+
+ .media_sidebar {
+ width: 100%;
+ margin: 0px;
+ }
+
+ img.media_image {
+ width: 100%;
+ display: inline;
+ }
+
+ .media_thumbnail {
+ width: 21%;
+ }
+
+ .profile_sidebar {
+ width: 100%;
+ margin: 0px;
+ }
+
+ .profile_showcase {
+ 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 {
+ margin-right: 0;
+ float: 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%;
+ }
+}
projects / mediagoblin.git / blobdiff