wip

source/wp-content/themes/wporg-news-2021/sass/components/_footer-archive.scss

@@ -3,6 +3,7 @@
 	align-items: stretch !important;
 	margin-top: 0;
 	gap: 0;
+	background-color: white; /* var */
 
 	& > * {
 		padding-top: 50px;

source/wp-content/themes/wporg-news-2021/sass/components/_local-header.scss

@@ -1,50 +1,155 @@
+body.category-events,
+body.category-community,
+body.category-month-in-wordpress {
+	/* move this to better place, just here for example */
+	/* add other classes, eventually they'll have other colors */
+	/* community will have people images rather than bg color */
+
+	& .wp-site-blocks { /* this markup may need better class name */
+		background-color: #E5E5E5; /* var */
+	}
+}
+
+
 .local-header {
 	// Evidently strings for custom properties can't be concatenated inside a `url()`, which is why each of the
 	// color variations has to define its own version of the SVG.
-	--bar-background-image: url("assets/svg/brush-stroke-nav-bar-blue-1.svg"),
-	url("data:image/svg+xml,%3Csvg height='1000' width='1' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' height='1000' width='1' r='0' rx='0' ry='0' fill='%233e58e1'%3E%3C/rect%3E%3C/svg%3E");
+	// can delete ^ probably
+
+	/* if don't change, then document that using 2 images b/c ?
+	*/
+
+	/*--bar-background-image:
+	url("data:image/svg+xml,%3Csvg height='1000' width='1' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' height='1000' width='1' r='0' rx='0' ry='0' fill='%233e58e1'%3E%3C/rect%3E%3C/svg%3E")
+;*/
+	/*
+		/*url("assets/svg/brush-stroke-nav-bar-blue-1.svg")*/
+	// first is the white stroke
+	// second one is just a solid color ?
+
 	--bar-text-color: var(--wp--preset--color--white);
 	--bar-link-color: var(--wp--preset--color--white);
+	--bar-background-color: #2541D6;
+
+	background-color: var( --bar-background-color );
+	color: var(--bar-text-color);
+
+	/*& .local-header__categories,
+	& .local-header__breadcrumb {
+		display: none;
+	}*/
 
 	min-height: 56px;
-	background-image: var(--bar-background-image);
+
+	mask-image: url("assets/svg/brush-stroke-local-nav-narrow.svg");
+		/* the coral-red one works well
+		remove the red color from it
+		delete the others
+		*/
+
+	mask-repeat: no-repeat;
+	mask-position: -200px bottom;
+	/* prevent the tear strokes from covering "categories" when it wraps to a new row */
+		/* either the top isn't covered, or the bottom isn't :(
+		as a workaround, could just have no mask until 480px, or maybe a different image
+		or just position it left so the tears don't covers the words ------ YES THIS
+		*/
+
+
+	mask-size: cover;
+		/*100% 100%;*/
+		/*
+		 `cover` works to cover both rows, but it stretches image. i need to make 1t tall but the same width
+		 100% 100% (width, height) should work, but doensn't. width works but height is wrong
+		 */
+
+	/*mask-image: url('assets/svg/brush-stroke-local-nav.svg');*/
+
+	/*background-image: var(--bar-background-image);
 	background-position: 5% bottom, left calc( 100% - 56px );
-	background-repeat: repeat-x;
-	color: var(--bar-text-color);
+	background-repeat: repeat-x;*/
+
+
+	/* use existing vars b/c reused */
+
+	@include break-small  {
+		mask-position: -20px bottom;
+		/*	mask-image: url("assets/svg/brush-stroke-local-nav-wide.svg");*/
+
+		/* use the desktop image for mobile too, just use position on desktop so don't see the tears on the left? push those off screen
+
+		could play w/ size- and posisition- to maybe get a bit closer to the mockup, but this is good enough for  now
+		*/
+	}
+
+	@include break-medium  {
+		mask-position: left bottom;
+	}
+
+
+
 
 	.wp-site-blocks & {
 		margin-top: 0;
 	}
 
 	svg {
 		stroke: var(--bar-text-color);
+
+		/* this can make something easier? learn diff between stroke and fill */
+		/*stroke: red;
+		fill: orange;*/
 	}
 
 	// Color variations
-	.category-development & {
-		--bar-background-image: url("assets/svg/brush-stroke-nav-bar-green.svg"),
-		url("data:image/svg+xml,%3Csvg height='1000' width='1' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' height='1000' width='1' r='0' rx='0' ry='0' fill='%2372d1a7'%3E%3C/rect%3E%3C/svg%3E");
+		/* maybe make a separate file for this?
+		doensn't incluede the content bg color, just local nav, name _local-header-colors.scss or something
+		or maybe specific to mask/stroke/tear stuff b/c don't want to include other colors? probably do want text color though so probably all color in one file, maybe w/ a few exceptions
+		*/
+	.category-community & {
+		/* need a mask image w/ black instead of white?
+		or just a different mask-mode? or composition?
+		er no, it should stay white, but the content bg will be brown
+		so wait then the bg for this element has to be brown to match the content area
+		*/
+
+		--bar-background-color: var(--wp--preset--color--white);
 		--bar-text-color: var(--wp--preset--color--black);
-		--bar-link-color: var(--wp--preset--color--black);
+		--bar-link-color: var(--wp--preset--color--blue-1);
+		/* combine ^ w/ events?*/
+	}
+
+	.category-development & {
+		/*  these shouldn't be separate images, they should just have different `fill`s
+		or background color
+		 */
+		/*--bar-background-image: url("assets/svg/brush-stroke-nav-bar-green.svg"),
+		url("data:image/svg+xml,%3Csvg height='1000' width='1' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' height='1000' width='1' r='0' rx='0' ry='0' fill='%2372d1a7'%3E%3C/rect%3E%3C/svg%3E");*/
+		/* move to a  file  */
+
+		--bar-background-color: #72D1A7;
 	}
 
+	/* setup vars for colors if don't already have */
+
 	.category-events & {
-		--bar-background-image: url("assets/svg/brush-stroke-nav-bar-white.svg"),
-		url("data:image/svg+xml,%3Csvg height='1000' width='1' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' height='1000' width='1' r='0' rx='0' ry='0' fill='%23ffffff'%3E%3C/rect%3E%3C/svg%3E");
+		--bar-background-color: var(--wp--preset--color--white);
 		--bar-text-color: var(--wp--preset--color--black);
 		--bar-link-color: var(--wp--preset--color--blue-1);
 	}
 
 	.category-month-in-wordpress & {
-		--bar-background-image: url("assets/svg/brush-stroke-nav-bar-dark-grey.svg"),
-		url("data:image/svg+xml,%3Csvg height='1000' width='1' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' height='1000' width='1' r='0' rx='0' ry='0' fill='%2323282d'%3E%3C/rect%3E%3C/svg%3E");
-		--bar-text-color: var(--wp--preset--color--white);
-		--bar-link-color: var(--wp--preset--color--white);
+		--bar-background-color: #23282D;
+
 	}
 
 	.category-security & {
-		--bar-background-image: url("assets/svg/brush-stroke-nav-bar-coral-red.svg"),
-		url("data:image/svg+xml,%3Csvg height='1000' width='1' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' height='1000' width='1' r='0' rx='0' ry='0' fill='%23f86368'%3E%3C/rect%3E%3C/svg%3E");
+		background-color: #F86368;
+	}
+
+	.category-security &,
+	.category-development & {
+		/* maybe make these back to individual instead of combining */
 		--bar-text-color: var(--wp--preset--color--black);
 		--bar-link-color: var(--wp--preset--color--black);
 	}