From 5abb5537c8ea7f78f0e145c79188fe4b62e54b50 Mon Sep 17 00:00:00 2001 From: nanalelfe Date: Mon, 11 Jul 2016 04:56:45 -0400 Subject: Added dummy data to demonstrate posted user solutions --- assets/css/style.css | 84 +++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 64 insertions(+), 20 deletions(-) (limited to 'assets/css/style.css') diff --git a/assets/css/style.css b/assets/css/style.css index a91d984..e176aef 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -210,11 +210,14 @@ main .search img { /*************************** USER SOLUTIONS - user_solutions.html *********************************/ +main div { + background: none; +} main #solutions button#add-solution { display: inline-block; border-radius: 10px; - background-color: #F79F79; + background-color: #87B6A7; color: white; width: 110px; @@ -223,58 +226,64 @@ main #solutions button#add-solution { main p#show-path { display: inline-block; margin-left: 30px; + } main #solutions { - margin-top: 2%; + padding-top: 2%; text-align: left; width: 86%; height: 100%; - border-top: 1px solid black; - border-left: 1px solid black; - border-right: 1px solid black; margin-left: 7%; + } -[id^="sol-"] { - border-radius: 10px; - padding-top: 30px; +main [id^="sol-"] { + color: #333; + margin-top: 30px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } -[id^="sol-"] .post-info { +main [id^="sol-"] .post-info { + display: flex; + justify-content: space-between; background: #F79F79; + padding-top: 2%; + border-top-right-radius: 15px; + border-top-left-radius: 15px; + padding-bottom: 5px; } -[id^="sol-"] .left{ +main [id^="sol-"] .left{ float: left; display: inline-block; } -[id^="sol-"] .right { +main [id^="sol-"] .right { float: right; display: inline-block; } -[id^="sol-"] img.user-image { +main [id^="sol-"] img.user-image { border-radius: 50%; border: 2px solid darkgray; margin-left: 25px; } -[id^="sol-"] img.user-image, [id^="sol-"] p.username { +main [id^="sol-"] img.user-image, [id^="sol-"] p.username { display: inline-block; } -[id^="sol-"] p.username { +main [id^="sol-"] p.username { vertical-align: top; } -[id^="sol-"] p.num-upvotes, [id^="sol-"] p.num-downvotes, [id^="sol-"] button { +main [id^="sol-"] p.num-upvotes, [id^="sol-"] p.num-downvotes, [id^="sol-"] button { display: inline-block; } -[id^="sol-"] button.upvote, [id^="sol-"] button.downvote { +main [id^="sol-"] button.upvote, [id^="sol-"] button.downvote { background-color: transparent; background-repeat:no-repeat; border: none; @@ -283,24 +292,59 @@ main #solutions { outline:none; } -[id^="sol-"] button.upvote img, [id^="sol-"] button.downvote img { +main [id^="sol-"] button.upvote img, [id^="sol-"] button.downvote img { width: 30px; height: 30px; } -[id^="sol-"] p.num-downvotes, [id^="sol-"] p.num-upvotes { +main [id^="sol-"] p.num-downvotes, [id^="sol-"] p.num-upvotes { vertical-align: top; } -[id^="sol-"] p.username { +main [id^="sol-"] p.username { margin-left: 10px; } -[id^="sol-"] p.num-downvotes { +main [id^="sol-"] p.num-downvotes { margin-right: 25px; } +main [id^="sol-"] div.user-sol h3 { + background-color: #f0e9e1; + padding: 10px; + padding-left: 20px; + margin-top: 0; + margin-bottom: 0; +} + +main [id^="sol-"] div.user-sol p{ + padding: 10px; + margin: 0; + background-color: white; +} + +main [id^="sol-"] div.user-sol p img { + width: 60%; + height: auto; +} + +main [id^="sol-"] div.comments { /* BORDER RADIUS ISN'T WORKING - sad :( */ + background-color: #f0e9e1; + border-bottom-right-radius: 15px; + border-bottom-left-radius: 15px; +} + +main [id^="sol-"] div.comments:hover { + +} + +main [id^="sol-"] div.comments h3 { + padding: 10px; + padding-left: 20px; + margin-top: 0; + margin-bottom: 0; +} -- cgit v1.2.3