feat: update certificates, improve lightbox layout styling

app/about.html

@@ -107,14 +107,86 @@ <h1 class="page-header__content__h1 page-header__content__h1--about" id="hero__t
 					<i class="far fa-3x fa-times-circle x"></i>
 				</div>
 				<div class="lightbox__img-container">
+					<img
+						srcset="
+							assets/images/Learn-Typescript_Codecademy_1200.jpg 1200w,
+							assets/images/Learn-Typescript_Codecademy_760.jpg   760w,
+							assets/images/Learn-Typescript_Codecademy_480.jpg   480w
+						"
+						class="lightbox__img-container__image"
+						alt="Learn TypeScript Course Certificate issued by Codecademy."
+					/>
+					<img
+						srcset="
+							assets/images/pass_the_technical_interview_certificate_1200.jpg 1200w,
+							assets/images/pass_the_technical_interview_certificate_760.jpg   760w,
+							assets/images/pass_the_technical_interview_certificate_480.jpg   480w
+						"
+						class="lightbox__img-container__image"
+						alt="Pass the Technical Interview Course Certificate issued by Codecademy."
+					/>
+					<img
+						srcset="
+							assets/images/Learn-ReactJS_Codecademy_1200.jpg 1200w,
+							assets/images/Learn-ReactJS_Codecademy_760.jpg   760w,
+							assets/images/Learn-ReactJS_Codecademy_480.jpg   480w
+						"
+						class="lightbox__img-container__image"
+						alt="Learn React JS Course Certificate issued by Codecademy."
+					/>
+					<img
+						srcset="
+							assets/images/Learn-ReactJS-II_Codecademy_1200.jpg 1200w,
+							assets/images/Learn-ReactJS-II_Codecademy_760.jpg   760w,
+							assets/images/Learn-ReactJS-II_Codecademy_480.jpg   480w
+						"
+						class="lightbox__img-container__image"
+						alt="Learn React JS 2 Course Certificate issued by Codecademy."
+					/>
+					<img
+						srcset="
+							assets/images/Learn-NodeJS_Codecademy_1200.jpg 1200w,
+							assets/images/Learn-NodeJS_Codecademy_760.jpg   760w,
+							assets/images/Learn-NodeJS_Codecademy_480.jpg   480w
+						"
+						class="lightbox__img-container__image"
+						alt="Learn Node JS Course Certificate issued by Codecademy."
+					/>
+					<img
+						srcset="
+							assets/images/Learn-JavaScript-Error-Handling_Codecademy_1200.jpg 1200w,
+							assets/images/Learn-JavaScript-Error-Handling_Codecademy_760.jpg   760w,
+							assets/images/Learn-JavaScript-Error-Handling_Codecademy_480.jpg   480w
+						"
+						class="lightbox__img-container__image"
+						alt="JavaScript Error Handling Course Certificate issued by Codecademy."
+					/>
+					<img
+						srcset="
+							assets/images/Google-Analytics-For-Beginners-Certificate_1200.jpg 1200w,
+							assets/images/Google-Analytics-For-Beginners-Certificate_760.jpg   760w,
+							assets/images/Google-Analytics-For-Beginners-Certificate_480.jpg   480w
+						"
+						class="lightbox__img-container__image"
+						alt="Google Analytics For Beginners Course certificate issued by Google."
+					/>
+					<img
+						srcset="
+							assets/images/Redux-saga-with-react-redux-cert_1200.jpg 1200w,
+							assets/images/Redux-saga-with-react-redux-cert_760.jpg   760w,
+							assets/images/Redux-saga-with-react-redux-cert_480.jpg   480w
+						"
+						class="lightbox__img-container__image"
+						alt="Redux Saga With React Redux Course certificate issued by Udemy."
+					/>
 					<img
 						srcset="
 							assets/images/build-web-apps-cert-1200.jpg 1200w,
 							assets/images/build-web-apps-cert-760.jpg   760w,
 							assets/images/build-web-apps-cert-480.jpg   480w
 						"
 						class="lightbox__img-container__image"
-						alt="Image of a certificate issued by a course I took."
+						alt="Build Web Apps Course certificate issued by Codecademy."
 					/>
 					<img
 						srcset="
@@ -123,7 +195,7 @@ <h1 class="page-header__content__h1 page-header__content__h1--about" id="hero__t
 							assets/images/build-website-ui-cert-480.jpg   480w
 						"
 						class="lightbox__img-container__image"
-						alt="Image of a certificate issued by a course I took."
+						alt="Build Website UI Course certificate issued by Codecademy."
 					/>
 					<img
 						srcset="
@@ -132,7 +204,7 @@ <h1 class="page-header__content__h1 page-header__content__h1--about" id="hero__t
 							assets/images/git-web-dev-job-cert-480.jpg   480w
 						"
 						class="lightbox__img-container__image"
-						alt="Image of a certificate issued by a course I took."
+						alt="Web Development Fundamentals Course certificate issued by Udemy."
 					/>
 					<img
 						srcset="
@@ -141,7 +213,7 @@ <h1 class="page-header__content__h1 page-header__content__h1--about" id="hero__t
 							assets/images/websites-from-scratch-cert-480.jpg   480w
 						"
 						class="lightbox__img-container__image"
-						alt="Image of a certificate issued by a course I took."
+						alt="Build Websites from Scratch Course certificate issued by Codecademy."
 					/>
 					<img
 						srcset="
@@ -150,7 +222,7 @@ <h1 class="page-header__content__h1 page-header__content__h1--about" id="hero__t
 							assets/images/wp-for-beginners-cert-480.jpg   480w
 						"
 						class="lightbox__img-container__image"
-						alt="Image of a certificate issued by a course I took."
+						alt="WordPress for Beginners Course certificate issued by Udemy."
 					/>
 
 					<div class="lightbox__img-container__prev" id="js-prev"></div>
@@ -162,6 +234,14 @@ <h1 class="page-header__content__h1 page-header__content__h1--about" id="hero__t
 						<div class="lightbox__img-container__dot-box__dot"></div>
 						<div class="lightbox__img-container__dot-box__dot"></div>
 						<div class="lightbox__img-container__dot-box__dot"></div>
+						<div class="lightbox__img-container__dot-box__dot"></div>
+						<div class="lightbox__img-container__dot-box__dot"></div>
+						<div class="lightbox__img-container__dot-box__dot"></div>
+						<div class="lightbox__img-container__dot-box__dot"></div>
+						<div class="lightbox__img-container__dot-box__dot"></div>
+						<div class="lightbox__img-container__dot-box__dot"></div>
+						<div class="lightbox__img-container__dot-box__dot"></div>
+						<div class="lightbox__img-container__dot-box__dot"></div>
 					</div>
 				</div>
 			</div>

app/assets/styles/base/_global.scss

@@ -2,6 +2,10 @@
 	box-sizing: border-box;
 }
 
+::selection {
+	background-color: $darkBlue;
+}
+
 html {
 	font-size: 16px;
 	color: $primaryTextLight;