cssssssss

1 files changed, 73 insertions, 10 deletions

diff --git a/public/assets/css/bucky.css b/public/assets/css/bucky.css
index fbac5f3..697f6c7 100644
--- a/public/assets/css/bucky.css
+++ b/public/assets/css/bucky.css
@@ -52,6 +52,9 @@ h1 {
   margin-top: 5px;
   margin-bottom: 10px;
 }
+.subtitle:empty {
+  display: none;
+}
 .bluebox {
 	background-color: #d8e0ec;
 	color: #000000;
@@ -180,6 +183,14 @@ table, tr {
   font-weight: bold;
   font-size: 14px;
 }
+#threads .keyword td b a {
+  color: #211;
+  text-decoration: none;
+}
+.desktop #threads .keyword td b a:hover {
+  color: black;
+  text-decoration: underline;
+}
 #threads .keyword:first-child td:nth-child(2) {
   border-top: 0;
 }
@@ -305,7 +316,8 @@ tr:nth-child(even) td.black       { background-color: #eee; border-bottom-color:
   text-align: center;
 }
 #details {
-  display: inline-block;
+  display: flex;
+  flex-direction: row;
   text-align: left;
   width: 100%;
 }
@@ -335,7 +347,7 @@ tr:nth-child(even) td.black       { background-color: #eee; border-bottom-color:
   font-size: 11px;
   vertical-align: top;
 }
-#comments tr .user .avatar {
+#comments .avatar {
   box-shadow: 0 1px 0.5px rgba(32,16,16,0.4);
   width: 40px;
   height: 40px;
@@ -349,7 +361,6 @@ tr:nth-child(even) td.black       { background-color: #eee; border-bottom-color:
 }
 .comment div {
   font-size: 12px;
-  padding-top: 0px;
   padding-bottom: 3px;
 }
 .comment .edit-links {
@@ -360,6 +371,8 @@ tr:nth-child(even) td.black       { background-color: #eee; border-bottom-color:
   color: #d8cfcf;
   opacity: 0;
   transition: opacity 0.1s;
+  position: relative;
+  top: 4px;
 }
 .desktop .comment:hover .date,
 .mobile .date,
@@ -381,7 +394,8 @@ tr:nth-child(even) td.black       { background-color: #eee; border-bottom-color:
 tr:nth-child(2n) td.comment { background-color: #f3f1f2; }
 tr:nth-child(2n+1) td.comment { background-color: #fcf8f8; }
 
-code {
+code,
+pre {
   display: block;
   white-space: pre;
   width: 100%;
@@ -390,7 +404,8 @@ code {
   padding: 5px;
   border: 1px solid #ddd;
 }
-code br {
+code br,
+pre br {
   display: none;
 }
 
@@ -430,7 +445,6 @@ code br {
   text-align: right;
 }
 #comment_form form {
-  float: right;
   width: 100%;
   max-width: 530px;
   padding-top: 5px;
@@ -584,10 +598,10 @@ code br {
   display: block;
   padding: 10px;
 }
-#search_form {
+.search_form {
   margin-bottom: 10px;
 }
-#search_form .button {
+.search_form .button {
   background-image: url("data:image/svg+xml,%3C%3Fxml version=%221.0%22 encoding=%22UTF-8%22%3F%3E%0A%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2213%22%3E%0A%09%3Cg fill=%22none%22 stroke=%22%2354595d%22 stroke-width=%222%22%3E%0A%09%09%3Cpath d=%22M11.29 11.71l-4-4%22/%3E%0A%09%09%3Ccircle cx=%225%22 cy=%225%22 r=%224%22/%3E%0A%09%3C/g%3E%0A%3C/svg%3E%0A");
   background-position: center center;
   background-repeat: no-repeat;
@@ -596,7 +610,7 @@ code br {
   top: 3px;
   display: inline-block;
 }
-#search_form input[type='text'] {
+.search_form input[type='text'] {
   border-top: 0;
   border-left: 0;
   border-right: 0;
@@ -608,7 +622,7 @@ code br {
   outline: 0;
   width: 270px;
 }
-#search_form input[type='text']:focus {
+.search_form input[type='text']:focus {
   border-bottom: 1px solid #211;
   color: #211;
 }
@@ -659,7 +673,43 @@ code br {
   line-height: 15px;
   padding: 20px;
 }
+header .search_form {
+  display: none;
+}
 @media (max-width: 700px) {
+  body {
+    padding: 10px 10px;
+  }
+  h1 {
+    font-size: 20px;
+    margin-bottom: 10px;
+  }
+  #sidebar, #content {
+    float: none;
+  }
+  #content {
+    width: 100%;
+  }
+  #sidebar {
+    width: 100%;
+    margin-top: 20px;
+    margin-left: 0px;
+  }
+  #sidebar .search_form {
+    display: none;
+  }
+  header .search_form {
+    display: block;
+  }
+  .search_form input[type='text'] {
+    width: 250px;
+  }
+  #threads td:nth-child(1) {
+    display: none;
+  }
+  #threads td:nth-child(2) {
+    min-width: 200px;
+  }
   #threads td:nth-child(3) small {
     display: none;
   }
@@ -669,4 +719,17 @@ code br {
   #threads .size {
     display: none;
   }
+  #details > tr {
+    display: flex;
+    flex-direction: column;
+  }
+  #comments {
+  }
+  #comments .avatar {
+    width: 30px;
+    height: 30px;
+  }
+  .comment div {
+    padding-bottom: 3px;
+  }
 }