Moving mixins to variables file

Signed-off-by: James Hunt <[email protected]>
cncf · Jun 16, 2024 · 7de1065 · 7de1065
1 parent efa4bd6
commit 7de1065
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 23 deletions.
diff --git a/web/wp-content/themes/cncf-twenty-two/source/scss/core/_tiles.scss b/web/wp-content/themes/cncf-twenty-two/source/scss/core/_tiles.scss
diff --git a/web/wp-content/themes/cncf-twenty-two/source/scss/core/_variables.scss b/web/wp-content/themes/cncf-twenty-two/source/scss/core/_variables.scss
@@ -56,8 +56,19 @@ $cookie-banner-bg: #bff3ff;
 $cookie-banner-text: $black;
 
 // font-stacks.
-$font-primary: 'Clarity City', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, Roboto,
-	Ubuntu, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+$font-primary:
+	'Clarity City',
+	-apple-system,
+	BlinkMacSystemFont,
+	'Segoe UI',
+	Helvetica,
+	Arial,
+	sans-serif,
+	Roboto,
+	Ubuntu,
+	'Apple Color Emoji',
+	'Segoe UI Emoji',
+	'Segoe UI Symbol';
 
 $font-code: Hack, 'Fira Code', Consolas, Menlo, Monaco, 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter',
 	'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', 'Courier New', Courier,
@@ -71,7 +82,9 @@ $font-serif: 'Source Serif Pro', 'Apple Garamond', 'Baskerville', 'Times New Rom
 	font-family: 'Clarity City';
 	font-weight: 400;
 	font-style: normal;
-	src: local('ClarityCity-Regular'), local('Clarity City'),
+	src:
+		local('ClarityCity-Regular'),
+		local('Clarity City'),
 		url('/wp-content/themes/cncf-twenty-two/source/fonts/ClarityCity-400.woff2') format('woff2'),
 		url('/wp-content/themes/cncf-twenty-two/source/fonts/ClarityCity-400.woff') format('woff'),
 		url('/wp-content/themes/cncf-twenty-two/source/fonts/ClarityCity-400.ttf') format('ttf');
@@ -82,7 +95,9 @@ $font-serif: 'Source Serif Pro', 'Apple Garamond', 'Baskerville', 'Times New Rom
 	font-family: 'Clarity City';
 	font-weight: 600;
 	font-style: normal;
-	src: local('ClarityCity-SemiBold'), local('Clarity City'),
+	src:
+		local('ClarityCity-SemiBold'),
+		local('Clarity City'),
 		url('/wp-content/themes/cncf-twenty-two/source/fonts/ClarityCity-600.woff2') format('woff2'),
 		url('/wp-content/themes/cncf-twenty-two/source/fonts/ClarityCity-600.woff') format('woff'),
 		url('/wp-content/themes/cncf-twenty-two/source/fonts/ClarityCity-600.ttf') format('ttf');
@@ -93,7 +108,9 @@ $font-serif: 'Source Serif Pro', 'Apple Garamond', 'Baskerville', 'Times New Rom
 	font-family: 'Clarity City';
 	font-weight: 700;
 	font-style: normal;
-	src: local('ClarityCity-Bold'), local('Clarity City'),
+	src:
+		local('ClarityCity-Bold'),
+		local('Clarity City'),
 		url('/wp-content/themes/cncf-twenty-two/source/fonts/ClarityCity-700.woff2') format('woff2'),
 		url('/wp-content/themes/cncf-twenty-two/source/fonts/ClarityCity-700.woff') format('woff'),
 		url('/wp-content/themes/cncf-twenty-two/source/fonts/ClarityCity-700.ttf') format('ttf');
@@ -104,7 +121,9 @@ $font-serif: 'Source Serif Pro', 'Apple Garamond', 'Baskerville', 'Times New Rom
 	font-family: 'Clarity City';
 	font-weight: 800;
 	font-style: normal;
-	src: local('ClarityCity-ExtraBold'), local('Clarity City'),
+	src:
+		local('ClarityCity-ExtraBold'),
+		local('Clarity City'),
 		url('/wp-content/themes/cncf-twenty-two/source/fonts/ClarityCity-800.woff2') format('woff2'),
 		url('/wp-content/themes/cncf-twenty-two/source/fonts/ClarityCity-800.woff') format('woff'),
 		url('/wp-content/themes/cncf-twenty-two/source/fonts/ClarityCity-800.ttf') format('ttf');
@@ -116,7 +135,8 @@ $font-serif: 'Source Serif Pro', 'Apple Garamond', 'Baskerville', 'Times New Rom
 	font-family: 'Source Serif Pro';
 	font-style: italic;
 	font-weight: 400;
-	src: local('SourceSerifPro-It'),
+	src:
+		local('SourceSerifPro-It'),
 		url('/wp-content/themes/cncf-twenty-two/source/fonts/source-serif-pro-v11-latin-italic.woff2') format('woff2'),
 		url('/wp-content/themes/cncf-twenty-two/source/fonts/source-serif-pro-v11-latin-italic.woff') format('woff'),
 		url('/wp-content/themes/cncf-twenty-two/source/fonts/source-serif-pro-v11-latin-italic.ttf') format('ttf');
@@ -128,9 +148,24 @@ $font-serif: 'Source Serif Pro', 'Apple Garamond', 'Baskerville', 'Times New Rom
 	font-family: 'Source Serif Pro';
 	font-style: italic;
 	font-weight: 700;
-	src: local('SourceSerifPro-BoldIt'),
+	src:
+		local('SourceSerifPro-BoldIt'),
 		url('/wp-content/themes/cncf-twenty-two/source/fonts/source-serif-pro-v15-latin-700italic.woff2')
 			format('woff2'),
 		url('/wp-content/themes/cncf-twenty-two/source/fonts/source-serif-pro-v15-latin-700italic.woff') format('woff'),
 		url('/wp-content/themes/cncf-twenty-two/source/fonts/source-serif-pro-v15-latin-700italic.ttf') format('ttf');
 }
+
+// for tiles that go 3-across on desktop.
+@mixin tiles3 {
+	background: $white;
+	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
+	border-radius: 5px;
+}
+
+// tiles that go 2-across on desktop need a larger radius.
+@mixin tiles2 {
+	background: $white;
+	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
+	border-radius: 10px;
+}
diff --git a/web/wp-content/themes/cncf-twenty-two/source/scss/styles.scss b/web/wp-content/themes/cncf-twenty-two/source/scss/styles.scss
@@ -10,7 +10,6 @@
 @import 'core/footer';
 @import 'core/buttons';
 @import 'core/forms';
-@import 'core/tiles';
 
 @import 'components/back-to-top';
 @import 'components/benefits';