Border Clean up + moved padding to individuals columns
This commit is contained in:
Minesh Mitha
parent
a188adc311
commit
a3c44b805c
10 changed files with 129 additions and 20 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -4,32 +4,32 @@ const AssetShareButtons = ({ host, name, shortId }) => {
|
|||
return (
|
||||
<div className='share-buttons'>
|
||||
<a
|
||||
className='link--primary'
|
||||
className='link--primary twitter'
|
||||
target='_blank'
|
||||
href={`https://twitter.com/intent/tweet?text=${host}/${shortId}/${name}`}
|
||||
>
|
||||
<img src='/assets/img/icn_twitter.svg' />
|
||||
<img src='/assets/img/twitter.svg' />
|
||||
</a>
|
||||
<a
|
||||
className='link--primary'
|
||||
className='link--primary facebook'
|
||||
target='_blank'
|
||||
href={`https://www.facebook.com/sharer/sharer.php?u=${host}/${shortId}/${name}`}
|
||||
>
|
||||
<img src='/assets/img/icn_facebook.svg' />
|
||||
<img src='/assets/img/facebook.svg' />
|
||||
</a>
|
||||
<a
|
||||
className='link--primary'
|
||||
className='link--primary tumblr'
|
||||
target='_blank'
|
||||
href={`http://tumblr.com/widgets/share/tool?canonicalUrl=${host}/${shortId}/${name}`}
|
||||
>
|
||||
<img src='/assets/img/icn_tumblr.svg' />
|
||||
<img src='/assets/img/tumblr.svg' />
|
||||
</a>
|
||||
<a
|
||||
className='link--primary'
|
||||
className='link--primary reddit'
|
||||
target='_blank'
|
||||
href={`https://www.reddit.com/submit?url=${host}/${shortId}/${name}&title=${name}`}
|
||||
>
|
||||
<img src='/assets/img/icn_reddit.svg' />
|
||||
<img src='/assets/img/reddit.svg' />
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
19
public/assets/img/facebook.svg
Normal file
19
public/assets/img/facebook.svg
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="10px" height="17px" viewBox="0 0 10 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>facebook</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Route-4---Expanded-Copy-2" transform="translate(-878.000000, -918.000000)" fill="#FFFFFF" fill-rule="nonzero">
|
||||
<g id="Group-11" transform="translate(0.000000, 656.000000)">
|
||||
<g id="Group-10" transform="translate(761.000000, 194.000000)">
|
||||
<g id="Group-5">
|
||||
<g id="Group-7" transform="translate(62.000000, 61.000000)">
|
||||
<path d="M55,16.2457933 L55,13.2217548 L57.6590693,13.2217548 L57.6590693,10.9945913 C57.6590693,9.72775809 58.0205601,8.74529596 58.7435525,8.04717548 C59.4665449,7.349055 60.4293617,7 61.6320317,7 C62.6539537,7 63.4464527,7.04086498 64.0095525,7.12259615 L64.0095525,9.81971154 L62.3724001,9.81971154 C61.774541,9.81971154 61.3713397,9.94230647 61.1627842,10.1875 C60.9542287,10.4326935 60.8499525,10.8004783 60.8499525,11.2908654 L60.8499525,13.2217548 L63.9052753,13.2217548 L63.4985941,16.2457933 L60.8499525,16.2457933 L60.8499525,24 L57.6590693,24 L57.6590693,16.2457933 L55,16.2457933 Z" id="facebook"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
19
public/assets/img/reddit.svg
Normal file
19
public/assets/img/reddit.svg
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="18px" height="16px" viewBox="0 0 18 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>reddit</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Route-4---Expanded-Copy-2" transform="translate(-961.000000, -918.000000)" fill="#FFFFFF" fill-rule="nonzero">
|
||||
<g id="Group-11" transform="translate(0.000000, 656.000000)">
|
||||
<g id="Group-10" transform="translate(761.000000, 194.000000)">
|
||||
<g id="Group-5">
|
||||
<g id="Group-7" transform="translate(62.000000, 61.000000)">
|
||||
<path d="M156.004898,15.1197594 C155.976483,14.3425491 155.494238,13.6545068 154.773348,13.3626486 C154.052458,13.0707904 153.227378,13.229551 152.666271,13.7680886 C151.12864,12.7228617 149.321161,12.1454075 147.462339,12.1055335 L148.340925,7.88832069 L151.2335,8.49657254 C151.304534,9.15687714 151.844729,9.66775963 152.507966,9.70188281 C153.171203,9.73600599 153.760976,9.2832597 153.8994,8.6337316 C154.037824,7.98420349 153.683886,7.33033854 153.064365,7.09108696 C152.444844,6.85183538 151.743293,7.09808364 151.409217,7.67205337 L148.097624,7.00973469 C147.988226,6.98573517 147.873773,7.00653061 147.77981,7.06747975 C147.685847,7.1284289 147.620195,7.22445834 147.597506,7.33413567 L146.597269,12.0244333 C144.715584,12.0528011 142.883246,12.6306923 141.325753,13.6869883 C140.756347,13.1512356 139.924346,13.0021476 139.204337,13.3068472 C138.484329,13.6115468 138.012088,14.3125756 138.000228,15.0943133 C137.988369,15.876051 138.439129,16.5910818 139.149563,16.9174815 C139.134345,17.1154345 139.134345,17.3142637 139.149563,17.5122166 C139.149563,20.5399592 142.677424,23 147.029804,23 C151.382184,23 154.910045,20.5399592 154.910045,17.5122166 C154.925264,17.3142637 154.925264,17.1154345 154.910045,16.9174815 C155.590785,16.5791323 156.016659,15.8798572 156.004898,15.1197594 Z M142.48819,16.4714301 C142.48819,15.724923 143.093354,15.1197594 143.839861,15.1197594 C144.586368,15.1197594 145.191532,15.724923 145.191532,16.4714301 C145.191532,17.2179373 144.586368,17.8231009 143.839861,17.8231009 C143.481376,17.8231009 143.137573,17.6806932 142.884086,17.4272057 C142.630598,17.1737183 142.48819,16.8299155 142.48819,16.4714301 Z M150.341398,20.1885248 C149.382418,20.9112013 148.202534,21.2790195 147.002771,21.2293113 C145.803007,21.2790195 144.623123,20.9112013 143.664144,20.1885248 C143.54506,20.0434288 143.555461,19.831664 143.688189,19.6989354 C143.820918,19.5662068 144.032683,19.5558062 144.177779,19.6748899 C144.990443,20.2709755 145.982418,20.5714295 146.989254,20.5264425 C147.997329,20.581264 148.993925,20.2903914 149.814246,19.7019233 C149.910827,19.6077567 150.050309,19.5722686 150.18015,19.608827 C150.309991,19.6453854 150.410466,19.7484362 150.443726,19.8791612 C150.476986,20.0098862 150.437979,20.148425 150.341398,20.2425916 L150.341398,20.1885248 Z M150.098097,17.8771677 C149.35159,17.8771677 148.746426,17.2720041 148.746426,16.525497 C148.746426,15.7789898 149.35159,15.1738262 150.098097,15.1738262 C150.844604,15.1738262 151.449768,15.7789898 151.449768,16.525497 C151.464606,16.8956141 151.326902,17.2556033 151.06884,17.5213305 C150.810779,17.7870576 150.454973,17.935236 150.08458,17.9312346 L150.098097,17.8771677 Z" id="reddit"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
19
public/assets/img/tumblr.svg
Normal file
19
public/assets/img/tumblr.svg
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="10px" height="16px" viewBox="0 0 10 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>tumblr</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Route-4---Expanded-Copy-2" transform="translate(-921.000000, -918.000000)" fill="#FFFFFF" fill-rule="nonzero">
|
||||
<g id="Group-11" transform="translate(0.000000, 656.000000)">
|
||||
<g id="Group-10" transform="translate(761.000000, 194.000000)">
|
||||
<g id="Group-5">
|
||||
<g id="Group-7" transform="translate(62.000000, 61.000000)">
|
||||
<path d="M98,13.3195248 L98,11.139339 C98.6412999,10.9383992 99.1874537,10.6570877 99.6384778,10.2953961 C100.089502,9.92700647 100.45243,9.48494557 100.727273,8.9692001 C101.002116,8.44675665 101.192388,7.79036318 101.298097,7 L103.613108,7 L103.613108,10.8982124 L107.460888,10.8982124 L107.460888,13.3195248 L103.613108,13.3195248 L103.613108,17.2780189 C103.613108,18.188946 103.662438,18.7649647 103.761099,19.0060925 C103.852714,19.2539182 104.035939,19.454855 104.310782,19.6089088 C104.663145,19.8165466 105.075403,19.9203639 105.547569,19.9203639 C106.372097,19.9203639 107.189566,19.665844 108,19.1567966 L108,21.5881559 C107.28118,21.9096595 106.653984,22.127341 106.118393,22.2412069 C105.575755,22.3684688 104.966177,22.4320988 104.289641,22.4320988 C103.549679,22.4320988 102.894295,22.3416772 102.323467,22.1608314 C101.773782,21.9933816 101.287529,21.7422106 100.864693,21.407311 C100.455953,21.0657133 100.177591,20.714074 100.029598,20.3523823 C99.8745588,19.9906907 99.7970402,19.4515104 99.7970402,18.7348251 L99.7970402,13.3195248 L98,13.3195248 Z" id="tumblr"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2 KiB |
19
public/assets/img/twitter.svg
Normal file
19
public/assets/img/twitter.svg
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="17px" height="13px" viewBox="0 0 17 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>twitter</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Route-4---Expanded-Copy-2" transform="translate(-830.000000, -920.000000)" fill="#FFFFFF" fill-rule="nonzero">
|
||||
<g id="Group-11" transform="translate(0.000000, 656.000000)">
|
||||
<g id="Group-10" transform="translate(761.000000, 194.000000)">
|
||||
<g id="Group-5">
|
||||
<g id="Group-7" transform="translate(62.000000, 61.000000)">
|
||||
<path d="M7,20.3784787 C7.23887844,20.4052125 7.50505328,20.4185791 7.79853251,20.4185791 C9.33417962,20.4185791 10.7025913,19.9574295 11.9038086,19.0351165 C11.1871733,19.0217496 10.5456237,18.8062123 9.97914051,18.3884981 C9.41265735,17.9707839 9.02363258,17.4377885 8.81205454,16.789496 C9.03728278,16.8229132 9.24544516,16.8396215 9.43654791,16.8396215 C9.73002714,16.8396215 10.0200895,16.8028632 10.3067436,16.7293455 C9.54233258,16.5756266 8.90931421,16.2030311 8.40766949,15.6115478 C7.90602476,15.0200644 7.65520616,14.3333525 7.65520616,13.5513915 L7.65520616,13.5112911 C8.11931284,13.7652614 8.61753755,13.9022696 9.14989521,13.9223199 C8.69943873,13.6282491 8.34112644,13.2439577 8.07494761,12.7694344 C7.80876877,12.294911 7.67568135,11.7802948 7.67568135,11.2255703 C7.67568135,10.6374287 7.82583126,10.0927375 8.12613559,9.59148039 C8.95197248,10.5873111 9.95695313,11.3842979 11.1411077,11.9824647 C12.3252622,12.5806315 13.5930052,12.913127 14.9443747,12.9799613 C14.8897739,12.725991 14.8624739,12.4787079 14.8624739,12.2381045 C14.8624739,11.3425252 15.184955,10.5789551 15.8299268,9.94737114 C16.4748986,9.31578722 17.2546543,9 18.1692175,9 C19.1247313,9 19.9300808,9.3408497 20.5852902,10.0225593 C21.3292259,9.88220734 22.028788,9.62155757 22.6839975,9.24060219 C22.4314688,10.0091964 21.9468941,10.6040125 21.2302588,11.0250685 C21.8649929,10.9582342 22.4997176,10.791151 23.1344517,10.5238139 C22.6771701,11.1787898 22.1243454,11.7368476 21.4759611,12.1980042 C21.4827862,12.2915721 21.4861987,12.431922 21.4861987,12.619058 C21.4861987,13.4879036 21.3565238,14.3550653 21.09717,15.2205692 C20.8378163,16.0860731 20.4436728,16.9164765 19.9147277,17.7118044 C19.3857826,18.5071323 18.7561767,19.2105525 18.0258912,19.8220862 C17.2956056,20.4336198 16.4151812,20.9215027 15.3845913,21.2857495 C14.3540015,21.6499963 13.2517646,21.832117 12.0778477,21.832117 C10.2282461,21.832117 8.53564712,21.3475758 7,20.3784787 L7,20.3784787 Z" id="twitter"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
Loading…
Reference in a new issue