Refresh of index page (#327)

* Update intro/mission statement * Change style of landing intro Responsife font size (inspired with Bootstrap) Make font size larger Have centered one column design * Use static hero image, put old images on features section * Update hero image * Remove caption, autoplay on viewport on intro carousel * Add smooth scroll on landing page * Update showcase images, make hero size smaller
ScratchAddons · Aug 27, 2023 · d4524a0 · d4524a0
1 parent c866885
commit d4524a0
Show file tree

Hide file tree

Showing 10 changed files with 185 additions and 179 deletions.
diff --git a/assets/assets/css/landing.scss b/assets/assets/css/landing.scss
@@ -1,80 +1,92 @@
 @import "variables";
 
-#intro {
-	// background: linear-gradient(to right bottom,#f7f5fb 50%,#fff 50%);
+#intro-carousel {
 
-	// background-color: $scratch-orange;
-	// color: white;
+	.carousel-item-wrapper {
+		> * {
+			max-height: 100%;
+			max-width: 100%;
+			box-shadow: 0px 0px 1rem 0px rgba(0,0,0,0.5);
+		}
+	}
 
-	min-height: calc(100vh - var(--navbar-height));
+	.carousel-caption {
+		background-color: black;
+		box-shadow: 0px 0px 5px black;
+		border-radius: 0.25rem;
+		opacity: 0;
+		transition: opacity .15s linear
+	}
 
-	.splide {
+	&:hover .carousel-caption {
+		opacity: 0.9;
+	}
 
-		.carousel-item-wrapper {
-			> * {
-				max-height: 100%;
-				max-width: 100%;
-				box-shadow: 0px 0px 1rem 0px rgba(0,0,0,0.5);
-			}
-		}
+	.splide__arrow {
+		margin-left: 1rem;
+		margin-right: 1rem;
+	}
 
-		.carousel-caption {
-			background-color: black;
-			box-shadow: 0px 0px 5px black;
-			border-radius: 0.25rem;
-			opacity: 0;
-			transition: opacity .15s linear
-		}
+	.splide__pagination__page {
+		background-color: var(--content-cnt);
+	}
 
-		&:hover .carousel-caption {
-			opacity: 0.9;
-		}
+}
 
-		.splide__arrow {
-			margin-left: 1rem;
-			margin-right: 1rem;
-		}
+#intro-info {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
 
-	}
-
-	#intro-info {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
+	h1 {
+		font-weight: 600;
+		line-height: 1.2;
+		font-size: calc(2rem + 2.42vw);
 
+		@media (min-width: $bs-breakpoint-lg) {
+			font-size: 3.5rem;
+		}
 	}
 
-	#install-intro {
-
-		&:not(:focus) {
-			box-shadow: 0 0 0.5rem 0 rgba(0,0,0,0.75);
+	.lead {
+		font-weight: 300;
+		font-size: calc(1rem + 0.8vw);
+
+		@media (min-width: $bs-breakpoint-lg) {
+			font-size: 1.6rem;
 		}
-
-		p {
-			margin-bottom: 0;
+	}
+}
 
-			&:nth-of-type(1) {
-				font-size: 1.5rem
-			}
-			&:nth-of-type(2) {
-				font-size: 0.75rem
-			}
+#install-intro {
+
+	&:not(:focus) {
+		box-shadow: 0 0 0.5rem 0 rgba(0,0,0,0.75);
+	}
+
+	p {
+		margin-bottom: 0;
 
+		&:nth-of-type(1) {
+			font-size: 1.5rem
+		}
+		&:nth-of-type(2) {
+			font-size: 0.75rem
 		}
 
 	}
 
-	#read-more {
-		background-color: transparent;
-		color: var(--intro-heading-cnt);
-		border-color: transparent !important;
-		box-shadow: none !important;
+}
 
-		:hover {
-			color: #e2e6ea;
-		}
+#read-more {
+	background-color: transparent;
+	color: var(--intro-heading-cnt);
+	border-color: transparent !important;
+	box-shadow: none !important;
+
+	:hover {
+		color: #e2e6ea;
 	}
-
 }
 
 #divider-1, #divider-2, #divider-3 {
@@ -163,14 +175,6 @@
 
 }
 
-main {
-	// padding-top: 0;
-
-	section {
-		// margin-bottom: 2.5rem
-	}
-}
-
 h2 {
 	margin-bottom: 1rem
 }
@@ -223,7 +227,12 @@ h2 {
 				opacity: 1;
 				transform: none;
 			}
-		  }
+		}
+	}
+
+	.splide__arrow {
+		background: white;
+		transition: opacity .15s linear
 	}
 
 }
@@ -277,3 +286,7 @@ body.dark.extension-styled {
 	}
 
 }
+
+html {
+	scroll-behavior: smooth;
+}
diff --git a/content/_index.html b/content/_index.html
@@ -1,5 +1,5 @@
 ---
-description: Scratch Addons is a browser extension that provides new features and themes for the Scratch (scratch.mit.edu) website and project editor. It has a mission to collect, archive, and put into use userstyles and userscripts, developed by several members of the Scratch community.
+description: Scratch Addons combines new and existing features and themes for the Scratch website and project editor into one easy-to-access and configurable browser extension.
 ignore_i18n: content
 
 # The contents of this file has been moved to layouts/_default/home.html. This file is left for description translation.

diff --git a/i18n/en.yaml b/i18n/en.yaml
@@ -97,7 +97,7 @@ PlayerModal:
 IndexPage:
   Intro:
     Tagline: All-in-one browser extension for Scratch
-    Description: Scratch Addons is a browser extension that provides new features and themes for the Scratch website and project editor. It has a mission to collect, archive, and put into use userstyles and userscripts, developed by several members of the Scratch community.
+    Description: Scratch Addons combines new and existing features and themes for the Scratch website and project editor into one easy-to-access and configurable browser extension.
     InstallButton:
       Loading: Loading...
       Description: free, open source
@@ -107,13 +107,10 @@ IndexPage:
         Caption: The trailer.
       Popup:
         Caption: The extension pop-up.
-        ImgAlt: Extension pop-up
       Settings:
         Caption: The settings page.
-        ImgAlt: Settings page
       Demo:
         Caption: Demonstration of the extension. ({{.Count}})
-        ImgAlt: Demonstration ({{.Count}})
   Features:
     Heading: Features
     AddonsHeading: Addons