diff options
| -rw-r--r-- | assets/css/style.css | 50 | ||||
| -rw-r--r-- | user_solutions.html | 38 |
2 files changed, 85 insertions, 3 deletions
diff --git a/assets/css/style.css b/assets/css/style.css index e176aef..ba596a3 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -140,9 +140,10 @@ main{ /* Changes - search is a flex container for h2 and bar, removed various attributes */ main .search { flex: 1; - width: 60%; - height: 100%; + min-width: 60%; + min-height: 100%; background-color: rgba(235,235,235, 0.6); + overflow: auto; } /* Changes - added h2 styiling for main */ @@ -226,6 +227,7 @@ main #solutions button#add-solution { main p#show-path { display: inline-block; margin-left: 30px; + color: #6f6f6f; } @@ -242,7 +244,12 @@ main #solutions { main [id^="sol-"] { color: #333; margin-top: 30px; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + margin-bottom: 30px; + -moz-border-radius: 15px; + border-radius: 15px; + -moz-box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);; + -webkit-box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);; } main [id^="sol-"] .post-info { @@ -333,6 +340,7 @@ main [id^="sol-"] div.comments { /* BORDER RADIUS ISN'T WORKING - sad :( */ background-color: #f0e9e1; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; + padding: 10px; } main [id^="sol-"] div.comments:hover { @@ -346,10 +354,46 @@ main [id^="sol-"] div.comments h3 { margin-bottom: 0; } +main [id^="sol-"] div.comments ul li img { + border-radius: 50%; + width: 40px; + vertical-align: top; +} +main [id^="sol-"] div.comments ul li { + background-color: white; + border-radius: 10px; + background-color: #F7D08A; + padding: 10px; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + -webkit-box-shadow: 0 2px 2px 0 #C2C2C2; + box-shadow: 0 2px 2px 0 #C2C2C2; + margin-bottom: 15px; +} +main [id^="sol-"] div.comments ul li p.comment-username { + margin-bottom: 0; + margin-top: 5px; +} + +main [id^="sol-"] div.comments ul li img.comment-user-image, li p.comment-username { + display: inline-block; +} +main [id^="sol-"] div.comments ul li p.comment-username, li p.user-comment { + vertical-align: top; +} +main [id^="sol-"] div.comments ul li * { + padding: 5px; +} + +main [id^="sol-"] div.comments ul li p.user-comment { + margin: 0; + background-color: white; + border-radius: 5px; +} /*************************** END OF USER SOLUTIONS - user_solutions.html *********************************/ diff --git a/user_solutions.html b/user_solutions.html index c57a9e8..fa0c85d 100644 --- a/user_solutions.html +++ b/user_solutions.html @@ -69,6 +69,27 @@ <div class="comments"> <h3><span>3</span> comments</h3> + <ul> + <li> + <img src="assets/images/user-default.png" class="comment-user-img"> + <p class="comment-username">janeDoe456</p> + <p class="user-comment"> This is a good answer!</p> + </li> + + <li> + <img src="assets/images/user-default.png" class="comment-user-img"> + <p class="comment-username">BenAfleckIsAnOkActor</p> + <p class="user-comment">Ben Affleck is indeed just an ok actor.</p> + </li> + + <li> + <img src="assets/images/user-default.png" class="comment-user-img"> + <p class="comment-username">morgana254</p> + <p class="user-comment">I mean, he's no Casey Affleck.</p> + </li> + + </ul> + </div> </section> @@ -96,6 +117,23 @@ <div class="comments"> <h3><span>2</span> comments</h3> + <ul> + <li> + <img src="assets/images/user-default.png" class="comment-user-img"> + <p class="comment-username">catherineTheGreat</p> + <p class="user-comment"> As a Portuguese, this was offensive and hilarious.</p> + </li> + + <li> + <img src="assets/images/user-default.png" class="comment-user-img"> + <p class="comment-username">alexStrav748</p> + <p class="user-comment">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> + </li> + + + + </ul> + </div> </section> |