Merge branch 'feature/tia-page' into dev

celestiaorg · Aug 18, 2023 · 8259d18 · 8259d18
2 parents 1573959 + e1afe45
commit 8259d18
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 45 deletions.
diff --git a/src/pages/what-is-tia.js b/src/pages/what-is-tia.js
@@ -113,25 +113,48 @@ const WhatIsTIA = () => {
 											Users that don’t reach the top 75 or don’t want to run a validator can delegate their TIA to an existing
 											validator that will stake it on their behalf. TIA delegations can always be retrieved from validators
 											after undergoing a 3-week unbonding period.
-											<div className='link-wrapper'>
-												<a className='link' href='https://docs.celestia.org/'>
-													View Documentation
-													<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'>
-														<path
-															stroke='#7B2BF9'
-															stroke-linecap='square'
-															stroke-width='1.5'
-															d='M3.61218 12.0721L11.0761 4.60823'
-														/>
-														<path
-															stroke='#7B2BF9'
-															stroke-linecap='square'
-															stroke-linejoin='bevel'
-															stroke-width='1.5'
-															d='M11.5254 11.0752V4.00413H4.45432'
-														/>
-													</svg>
-												</a>
+
+											<div className="link-list">
+												<div className='link-wrapper me-4'>
+													<a className='link' href='https://docs.celestia.org/'>
+														View Documentation
+														<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'>
+															<path
+																stroke='#7B2BF9'
+																stroke-linecap='square'
+																stroke-width='1.5'
+																d='M3.61218 12.0721L11.0761 4.60823'
+															/>
+															<path
+																stroke='#7B2BF9'
+																stroke-linecap='square'
+																stroke-linejoin='bevel'
+																stroke-width='1.5'
+																d='M11.5254 11.0752V4.00413H4.45432'
+															/>
+														</svg>
+													</a>
+												</div>
+												<div className='link-wrapper'>
+													<a className='link' href='https://docs.celestia.org/'>
+														View Documentation
+														<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'>
+															<path
+																stroke='#7B2BF9'
+																stroke-linecap='square'
+																stroke-width='1.5'
+																d='M3.61218 12.0721L11.0761 4.60823'
+															/>
+															<path
+																stroke='#7B2BF9'
+																stroke-linecap='square'
+																stroke-linejoin='bevel'
+																stroke-width='1.5'
+																d='M11.5254 11.0752V4.00413H4.45432'
+															/>
+														</svg>
+													</a>
+												</div>
 											</div>
 										</p>
 									</div>

diff --git a/src/scss/pages/page-what-is-tia.scss b/src/scss/pages/page-what-is-tia.scss
@@ -247,7 +247,7 @@
 				}
 			}
 		}
-		o .image-box--node {
+		.image-box--node {
 			margin-left: auto;
 			margin-right: auto;
 			@include media-breakpoint-down(lg) {
@@ -290,32 +290,39 @@
 				a {
 					box-shadow: inset 0 -2px 0 0 #414141;
 				}
-
-				.link-wrapper {
-					margin-top: 20px;
-					.link {
-						font-family: $ruberoid;
-						font-style: normal;
-						font-weight: 700;
-						font-size: 14px;
-						line-height: 1em;
-						padding: 8px 0;
-						margin: -8px 0;
-						color: #000000;
-						transition: all 0.2s ease-in-out;
-						box-shadow: none;
-						&:hover {
-							color: #393939;
-							& svg {
-								margin-left: 16px;
+				.link-list {
+					display: flex;
+					flex-wrap: wrap;
+					margin-top: 10px;
+					.link-wrapper {
+						flex-basis: auto;
+						min-width: 180px;
+						margin-top: 10px;
+
+						.link {
+							font-family: $ruberoid;
+							font-style: normal;
+							font-weight: 700;
+							font-size: 14px;
+							line-height: 1em;
+							padding: 8px 0;
+							margin: -8px 0;
+							color: #000000;
+							transition: all 0.2s ease-in-out;
+							box-shadow: none;
+							&:hover {
+								color: #393939;
+								& svg {
+									margin-left: 16px;
+								}
 							}
 						}
-					}
-					svg {
-						margin-left: 8px;
-						transition: all 0.2s ease-in-out;
-						will-change: margin;
-						margin-bottom: 2px;
+						svg {
+							margin-left: 8px;
+							transition: all 0.2s ease-in-out;
+							will-change: margin;
+							margin-bottom: 2px;
+						}
 					}
 				}
 			}
@@ -554,4 +561,4 @@
 			}
 		}
 	}
-}
+}