Improve style

app/assets/stylesheets/application.css.sass

@@ -17,16 +17,17 @@ body
 
 a
   text-decoration: none
-  color: white
+  color: #e7dede
   outline: none
   &:hover
-    color: yellow
+    color: gold
 
 p
-  margin: 0.4em 0
+  // margin: 0.4em 0
 
 h1
   font-size: 7vmin
+  margin-bottom: 0
 
 header
   font-size: 3vmin
@@ -55,7 +56,7 @@ header
   flex-wrap: wrap
   align-items: center
   background: #00ff0060
-  border-radius: 0 18em 0 0
+  border-radius: 0 13em 0 0
   font-size: 2em
   > h1
     padding-top: .6em
@@ -210,7 +211,7 @@ textarea
 .contain
   width: 100%
   max-width: 1200px
-  padding: 1em
+  padding: 0 1em
 
 @import doodads
 @import profiles

app/assets/stylesheets/profiles.sass

@@ -2,14 +2,21 @@
   text-align: center
   background: #ffffff33
   border-radius: 1rem
-  padding: 1rem
+  padding: .8em 1em .6em 1em
-  margin: 1rem
+  margin: 1em
   border: .1rem solid #333333
+  transition: background-color .2s, border-color .2s, box-shadow .2s, color .2s
   h1
-    margin: 0.35em 0
+    line-height: 1
+  p
+    line-height: 1.2
+  h1, p, span
+    margin: 0
 
-a .profile
+a.profile
-  span, p
+  &:hover
+    background: #ffffff55
+  span, p, .social-links
     color: black
 
 .social-links
@@ -18,14 +25,16 @@ a .profile
   position: relative
   background: #40a10b
   background: linear-gradient(90deg, rgba(0,0,0,0) 0%, #e1b02777 47%, rgba(0, 0, 0, 0) 95%)
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-evenly;
+  // padding-bottom: .3em
   > a
     padding: 0 1em
   .dscvr-logo, .x-logo
-    width: 1.2em
+    width: 1em
     vertical-align: middle
   .controls
-    position: absolute
-    top: -1em
-    margin-left: 0.8em
     a
       font-size: 0.6em

app/views/profiles/index.html.haml

@@ -1,21 +1,21 @@
-%h1 Listing profiles
+.contain
+  %h1 Listing profiles
 
-%div{style: "align-self: start; padding-left: .8em;"}
+  %div{style: "align-self: start;"}
-  - if policy(Profile).new?
+    - if policy(Profile).new?
-    = link_to '+ New Profile', new_profile_path
+      = link_to '+ New Profile', new_profile_path
-  - else 
+    - else 
-    = link_to 'Sign In', new_user_session_path 
+      = link_to 'Sign In', new_user_session_path 
-    to create a new Profile
+      to create a new Profile
 
 - @profiles.each do |profile|
-  = link_to profile do
+  = link_to profile, class: "profile" do
-    .profile
+    %h1= profile.name
-      %h1= profile.name
+    %span= profile.summary
-      %span= profile.summary
+    .social-links
-      .social-links{style: "margin-top: .4em;"}
+      - profile.social_links.each do |social_link|
-        - profile.social_links.each do |social_link|
+        = social_link.to_icon.html_safe
-          = social_link.to_icon.html_safe
+    %p= profile.about
-      %p= profile.about
     - if policy(profile).destroy?
       = link_to 'Edit', edit_profile_path(profile)
       = link_to 'Delete', profile, method: :delete, data: { confirm: 'Are you sure?' }

app/views/profiles/show.html.haml

@@ -1,19 +1,19 @@
-- if policy(@profile).edit?
+.contain
-  .contain
+  %h1
+    = @profile.name
+  - if policy(@profile).edit?
     = link_to 'Edit', edit_profile_path(@profile)
-
-%h1
-  = @profile.name
 %p
   = @profile.summary
 
 .social-links
   - @profile.social_links.each do |social_link|
-    - if policy(social_link).destroy?
+    .social-link
-      %span.controls
+      - if policy(social_link).destroy?
-        = link_to '📝', edit_social_link_path(social_link)
+        .controls
-        = link_to '❌', social_link, method: :delete, data: { confirm: 'Are you sure?' }
+          = link_to '📝', edit_social_link_path(social_link)
-    = link_to social_link.to_icon.html_safe, social_link.to_url
+          = link_to '❌', social_link, method: :delete, data: { confirm: 'Are you sure?' }
+      = link_to social_link.to_icon.html_safe, social_link.to_url
   - if policy(@profile).edit?
     %br= link_to '+ Add Social Link', new_social_link_path(profile_id: @profile.id)