Forgot to add these layout changes. Everything should work now.

[mediagoblin.git] / mediagoblin / static / css / base.css

diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css
index 60e3c5b556284bb97912137527e36ec9a8581531..0889baed09d70b6a7ead982c67981b5766ee74e3 100644 (file)
--- a/mediagoblin/static/css/base.css
+++ b/mediagoblin/static/css/base.css
@@ -158,9 +158,7 @@ footer {
 }
 
 img.media_image {
-  margin-left: auto;
-  margin-right: auto;
-  display: block;
+  width: 100%;
 }
 
 .media_sidebar {
@@ -183,7 +181,7 @@ img.media_image {
 
 /* common website elements */
 
-.button_action, .button_action_highlight {
+.button_action, .button_action_highlight, .button_form {
   display: inline-block;
   color: #c3c3c3;
   background-color: #363636;
@@ -198,28 +196,17 @@ img.media_image {
   cursor: pointer;
 }
 
-.button_action_highlight {
+.button_action_highlight, .button_form {
   background-color: #86D4B1;
   border-color: #A2DEC3 #6CAA8E #5C9179;
   color: #283F35;
 }
 
 .button_form {
-  height: 32px;
   min-width: 99px;
-  background-color: #86D4B1;
-  border: 1px solid;
-  border-color: #A2DEC3 #6CAA8E #5C9179;
-  color: #283F35;
-  border-radius: 3px;
   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;
-  cursor: pointer;
 }
 
 .pagination {
@@ -252,12 +239,12 @@ text-align: center;
 }
 
 h3.sidedata {
-  border: none;
-  background-color: #212121;
-  border-radius: 4px 4px 0 0;
-  padding: 3px 8px;
-  margin: 20px 0 5px 0;
-  font-size: 1em;
+       border: none;
+       background-color: #212121;
+       border-radius: 4px 4px 0 0;
+       padding: 3px 8px;
+       margin: 20px 0 5px 0;
+       font-size: 1em;
 }
 
 /* forms */
@@ -350,7 +337,7 @@ textarea#comment_content {
 }
 
 #form_comment .form_field_input {
-  padding-right: 6px;
+       padding-right: 6px;
 }
 
 /* media galleries */
@@ -360,7 +347,7 @@ textarea#comment_content {
   padding: 0px;
   width: 180px;
   overflow: hidden;
-  margin: 0px 4px 10px 4px;
+  margin: 0px 5px 10px 5px;
   text-align: center;
   font-size: 0.875em;
   list-style: none;
@@ -379,8 +366,8 @@ h2.media_title {
 }
 
 p.context {
-  display: inline-block;
-  padding-top: 4px;
+       display: inline-block;
+       padding-top: 4px;
 }
 
 p.media_specs {
@@ -408,7 +395,7 @@ img.media_icon {
 /* navigation */
 
 .navigation {
-  float: right;
+       float: right;
 }
 
 .navigation_button {
@@ -421,7 +408,7 @@ img.media_icon {
   border-radius: 4px;
   text-decoration: none;
   padding: 4px 0 8px;
-  margin: 0 0 6px
+  margin: 0 0 6px;
 }
 
 .navigation_left {
@@ -506,7 +493,6 @@ table.media_panel th {
 }
 
 /* Media queries and other responsivisivity */
-
 @media screen and (max-width: 820px) {
   .media_pane {
     width: 100%;
@@ -514,15 +500,19 @@ table.media_panel th {
   }
   
   .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;
@@ -532,6 +522,20 @@ table.media_panel th {
     width: 100%;
     margin: 0px;
   }
+
+       .navigation {
+         float: none;
+       }
+
+       .navigation_button {
+         width: 49%;
+               float: right;
+       }
+
+       .navigation_left {
+         margin-right: 0;
+         float: left;
+  }
   
   .navigation {
     float: none;
@@ -540,10 +544,27 @@ table.media_panel th {
   .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;
+  }
+}
+
+@media screen and (max-width: 570px) {
+  .media_thumbnail {
+    width: 29%;
+  }
+}
+
+@media screen and (max-width: 380px) {
+  .media_thumbnail {
+    width: 46%;
+  }
 }