diff --git a/client/scss/asset-display/_asset-display.scss b/client/scss/asset-display/_asset-display.scss index a4c6f1f9..b06bccb7 100644 --- a/client/scss/asset-display/_asset-display.scss +++ b/client/scss/asset-display/_asset-display.scss @@ -55,7 +55,7 @@ .visible-content { width: 100%; - margin: 0 0 40px; + margin: 0; padding-bottom: 25px; box-shadow: 0 1px 3px 2px rgba(169, 173, 186, 0.2); &.closed { @@ -69,12 +69,15 @@ .horizontal-split { justify-content: center; .column { + padding-top: 40px; &:first-child { padding-right: 40px; + margin-right: -1px; + border-right: 1px solid $grey-alt; } &:last-child { padding-left: 60px; - border-left: 1px solid #9095a54d; + border-left: 1px solid $grey-alt; } } } @@ -86,6 +89,10 @@ letter-spacing: 0; line-height: 18px; width: 360px; + padding-bottom: 80px; + @media (max-width: $break-point-medium) { + padding-bottom: 60px; + } } .asset-information { width: 320px; @@ -96,4 +103,8 @@ .asset-footer { padding-top: 30px; border-top: 1px solid $grey-alt; + padding-bottom: 80px; + @media (max-width: $break-point-medium) { + padding-bottom: 60px; + } } \ No newline at end of file diff --git a/client/scss/horizontal-split/_horizontal-split.scss b/client/scss/horizontal-split/_horizontal-split.scss index bd304c3c..c6be788f 100644 --- a/client/scss/horizontal-split/_horizontal-split.scss +++ b/client/scss/horizontal-split/_horizontal-split.scss @@ -2,7 +2,7 @@ display : flex; flex-direction : row; justify-content: space-between; - align-items : flex-start; + .column { width: 50%; } @@ -16,7 +16,7 @@ display : flex; flex-direction : column; justify-content: space-between; - align-items : flex-start; + .column { width: 100%; padding-left: 0; diff --git a/client/scss/share-buttons/_share-buttons.scss b/client/scss/share-buttons/_share-buttons.scss index 26be33a1..d74c263b 100644 --- a/client/scss/share-buttons/_share-buttons.scss +++ b/client/scss/share-buttons/_share-buttons.scss @@ -4,6 +4,35 @@ margin: 0 -7px; a { display: block; + width: 30px; + height: 30px; margin: 0 7px; + border-radius: 100%; + line-height: 30px; + text-align: center; + &.twitter { + background:#4DC2FE + } + + &.facebook { + background: #5487DE; + img { + margin-top: 6px; + } + } + + &.tumblr { + background: #274061; + img { + margin-top: 7px; + } + } + + &.reddit { + background: #FF4500; + img { + margin-top: 7px; + } + } } } diff --git a/client/scss/variables/_variables.scss b/client/scss/variables/_variables.scss index 5f19ce0e..efabfaa7 100644 --- a/client/scss/variables/_variables.scss +++ b/client/scss/variables/_variables.scss @@ -8,7 +8,7 @@ $failure-color: red; // $brand-color: #ff725d; $brand-color: #1944F9; $grey: #9095A5; -$grey-alt: #9095a54d; +$grey-alt: #DDDFE4; $primary-padding: 3em; $secondary-padding: 2em; diff --git a/client/scss/vertical-split/_vertical-split.scss b/client/scss/vertical-split/_vertical-split.scss index ebccf388..1271c83b 100644 --- a/client/scss/vertical-split/_vertical-split.scss +++ b/client/scss/vertical-split/_vertical-split.scss @@ -10,13 +10,6 @@ display: none; } -.collapse-content { - padding-bottom: 80px; - @media (max-width: $break-point-medium) { - padding-bottom: 60px; - } -} - .collapse-button { outline: none; background: none; diff --git a/client/src/components/AssetShareButtons/index.js b/client/src/components/AssetShareButtons/index.js index 6c9a165d..8e093bdc 100644 --- a/client/src/components/AssetShareButtons/index.js +++ b/client/src/components/AssetShareButtons/index.js @@ -4,32 +4,32 @@ const AssetShareButtons = ({ host, name, shortId }) => { return (
- + - + - + - +
); diff --git a/public/assets/img/facebook.svg b/public/assets/img/facebook.svg new file mode 100644 index 00000000..a8a55384 --- /dev/null +++ b/public/assets/img/facebook.svg @@ -0,0 +1,19 @@ + + + + facebook + Created with Sketch. + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/assets/img/reddit.svg b/public/assets/img/reddit.svg new file mode 100644 index 00000000..4291cd7e --- /dev/null +++ b/public/assets/img/reddit.svg @@ -0,0 +1,19 @@ + + + + reddit + Created with Sketch. + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/assets/img/tumblr.svg b/public/assets/img/tumblr.svg new file mode 100644 index 00000000..7cbb240e --- /dev/null +++ b/public/assets/img/tumblr.svg @@ -0,0 +1,19 @@ + + + + tumblr + Created with Sketch. + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/assets/img/twitter.svg b/public/assets/img/twitter.svg new file mode 100644 index 00000000..1325869f --- /dev/null +++ b/public/assets/img/twitter.svg @@ -0,0 +1,19 @@ + + + + twitter + Created with Sketch. + + + + + + + + + + + + + + \ No newline at end of file