feat: better OG styles

designerzen · Oct 14, 2024 · cb1d57f · cb1d57f
1 parent dd6f2d0
commit cb1d57f
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 12 deletions.
diff --git a/source/_base.pug b/source/_base.pug
@@ -74,7 +74,7 @@ html(lang="en-GB", class=classes)
 		meta(property="og:title", content=name)
 		meta(property="og:url", content=URL)
 
-		//- Twitter
+		//- Twitter specific og
 		meta(property="twitter:image", content="./assets/icons/og-image.jpg")
 		meta(property="twitter:site" content="@designerzen")
 		//- meta(property="twitter:card" content="summary_large_image")

diff --git a/source/assets/styles/gadgets/toast.scss b/source/assets/styles/gadgets/toast.scss
@@ -159,6 +159,9 @@
 		z-index:-1;
 		position:absolute;
 
+		border: inherit;
+		border-top:0;	// for arrow on base
+
 		// now we have a special case of when on the right hand side...
 		left: clamp( var(--pad, 0%), var(--triangle-x), calc(100% - var(--triangle-size) - var(--pad) ) );
 

diff --git a/source/assets/styles/sections/intro.scss b/source/assets/styles/sections/intro.scss
@@ -1,12 +1,7 @@
 // Top section that contains the header text and loader
 #intro {
 
-	// height is 100% - the margins
-	// min-height: calc(100% - 2 * var(--pad));
-	min-height: calc(100vh - 2 * var(--pad));
-	min-height: calc(100dvh - 2 * var(--pad));
-
-	max-width: 1080px;
+	max-width: var(--viewport-max-width, 1080px);
 
 	grid-gap: var(--pad);
 
@@ -19,12 +14,9 @@
 	border-radius: var(--curve);
 
 	// text-align: center;
-	display: grid;
 	flex-direction: column;
 	align-items: stretch;
 	justify-items: center;
-
-	// above the 
 	position: relative;
 	z-index: 909;
 
@@ -125,8 +117,18 @@
 		// margin-bottom:var(--pad);
 		margin-top: var(--pad); //auto;
 	}
+}
+
+.interface #intro {
+
+	// height is 100% - the margins
+	// min-height: calc(100% - 2 * var(--pad));
+	min-height: calc(100vh - 2 * var(--pad));
+	min-height: calc(100dvh - 2 * var(--pad));
+
+	// layouts	
+	display: grid;
 
-	// layouts
 	grid-template-areas: 
 		"heading"
 		"poster"

diff --git a/source/assets/styles/wallpapers.scss b/source/assets/styles/wallpapers.scss
@@ -55,7 +55,9 @@ html{
 
 // add some background textures
 body{
-	background-image:  linear-gradient( rgba($col-white, 0.9),rgba($col-white, 048),  rgba($col-dark, 0.2), rgba($col-dark, 0.98) );
+
+	background-image: 
+		linear-gradient( rgba($col-white, 0.9),rgba($col-white, 048),  rgba($col-dark, 0.2), rgba($col-dark, 0.98) );
 
 	// we have four layers of background
 	background-size: 	100%,