@pixelated-tech/components 3.1.4

package/dist/css/pixelated.global.css

@@ -0,0 +1,548 @@
+
+/* ========================================
+========  DEFAULT COLOR STYLES   ==========
+======================================== */
+
+:root {
+  --primary-color: #369;
+  --secondary-color: #BCD;
+  --accent1-color: #CCC;
+  --accent2-color: #EEE;	
+  --bg-color: #fff;
+  --font-color: #000;
+}
+body{
+	background-color: var(--bg-color) !important;
+	color: var(--font-color);
+}
+
+
+/* ========================================
+========  DEFAULT FONT STYLES   ===========
+======================================== */
+
+:root {	
+	--header-font: "Montserrat", Verdana, sans-serif;
+	--body-font: "Roboto", Arial, sans-serif;
+}
+body { 
+	font-family: var(--body-font); 
+}
+h1, h2, h3, h4, h5, h6 {
+	line-height: 1.1;
+}
+html { font-size: 1.0rem; /* 16px; */ }
+
+
+/* ========================================
+===========  DEFAULT STYLES   =============
+======================================== */
+
+* {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+	-moz-background-clip: padding-box !important;
+	-webkit-background-clip: padding-box !important;
+	background-clip: padding-box !important;
+	margin: 0px;
+	padding: 0px;
+	/* -ms-touch-action: none; */
+}
+
+body {
+	margin: 0px;
+	padding: 0px;
+}
+
+a:link,
+a:visited,
+a:active {
+	color: var(--primary-color);
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+img {
+    text-align: center;
+	max-width: 100%;
+	height: auto;
+}
+
+input {
+	font-size: 1.1em;
+	padding: 2px 5px;
+	margin: 1px 5px !important;
+}
+
+input, select, textarea, button {
+	/* why these dont inherit by default is beyond me */
+  	font-family: inherit;
+  	font-size: inherit; 
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+    outline: none;
+	border: 1px solid var(--accent1-color);
+	-webkit-box-shadow: 0 0 5px 2px var(--accent2-color);
+	-moz-box-shadow: 0 0 5px 2px var(--accent2-color);
+    box-shadow: 0 0 5px 2px var(--accent2-color);
+}
+
+ol, ul {
+	margin: 20px 0;
+	padding-left: 40px;
+}
+
+blockquote {
+	margin-top: 1em;
+    margin-bottom: 1em;
+    margin-left: 40px;
+    margin-right: 40px;
+    padding: 15px;
+    border-left: 3px solid var(--accent1-color);
+    border-right: 3px solid var(--accent1-color);
+    background-color: white;
+}
+
+blockquote p {
+	margin-bottom: 0px !important;
+}
+
+pre {
+	/* USED FOR SYNTAX HIGHLIGHTING */
+	white-space: pre-wrap;
+	width: 83.33%; /* grid10 */
+	display: inline-block;
+	margin: 10px 8.33%;
+	border: 1px solid var(--accent1-color);
+	background: var(--accent2-color);
+}
+
+
+
+
+/* ========================================
+===========  PAGE SCAFFOLDING   ===========
+======================================== */
+
+section {
+    position: relative;
+    overflow: hidden;
+	/* margin-bottom: 50px; */
+	padding: 30px 0;
+}
+
+.section-container {
+	margin: 0px auto;
+	padding: 0px 5px;
+	/* max-width: 1280px; */
+	max-width: 1024px;
+}
+
+@media screen and (max-width: 480px) {
+    .section-container {
+        padding: 0px 20px;
+    }
+}
+
+
+.fixed-header {
+	position: fixed;
+	left: 0;
+	top: 0;
+	width: 100%;
+	z-index: 1000;
+}
+
+#fixed-header-spacer {
+	margin-top: 60px;
+}
+
+#page-header {
+	background-color: var(--primary-color);
+    /* background-image: url(/images/pix/pix-bg.gif); */
+	color: white;
+	height: 60px;
+	padding: 10px 20px;
+	z-index: 2000;
+}
+
+#page-header .section-container {
+	display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-items: left;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+}
+
+#page-hero {
+	background-color: var(--accent2-color);
+    border: 1px solid #AAA;
+	height: 150px;
+	overflow: hidden;
+	position: relative;
+	z-index: 5;
+}
+
+@media screen and (max-width: 480px) {
+    #page-hero {
+		height: 125px;
+    }
+}
+
+#page-hero-overlay {
+	background: rgba(240,240,240,0.5);
+	font-size: 1.2em;
+	padding: 10px 0;
+	position: absolute;
+	text-align: center;
+	top: 15px;
+	z-index: 10;
+}
+
+@media screen and (max-width: 480px) {
+    #page-hero-overlay {
+		font-size: 1.0em;
+    }
+}
+
+#page-search {
+	min-height: 50px;
+}
+
+nav {
+	--do-nothing: true;
+}
+
+main {
+	min-height: 400px;
+}
+
+@media screen and (max-width: 480px) {
+    main {
+		/* margin-top: 10px; */
+		padding-top: 10px
+	}
+}
+
+main p {
+	margin-bottom: 20px;
+}
+
+footer {
+	min-height: 50px;
+}
+
+
+
+
+
+/* ========================================
+=============  PRESENTATION   =============
+======================================== */
+
+.button, 
+.centeredbutton {
+    /* background-image: url(/images/pix/pix-bg-sm-bw.gif); */
+	border: 1px solid #999;
+	display: inline-block;
+	font-size: 14px !important;
+	font-weight: bold;
+	margin: 10px;
+	padding: 5px 20px;
+	/* .rounded; */
+	-moz-border-radius: 5px;
+	-webkit-border-radius: 5px;
+	border-radius: 5px;
+}
+
+.centeredbutton {
+	display: block;
+	margin: 10px auto;
+    text-align: center;
+	max-width: 220px;
+	transition: all .2s ease ;
+}
+
+.centeredbutton:hover {
+	font-size: 16px;
+}
+
+.gradient {
+	background: var(--accent1-color);
+	background-image: linear-gradient(top, var(--accent2-color) 0%, var(--accent1-color) 100%);
+	background-image: -o-linear-gradient(top, var(--accent2-color) 0%, var(--accent1-color) 100%);
+	background-image: -moz-linear-gradient(top, var(--accent2-color) 0%, var(--accent1-color) 100%);
+	background-image: -webkit-linear-gradient(top, var(--accent2-color) 0%, var(--accent1-color) 100%);
+	background-image: -ms-linear-gradient(top, var(--accent2-color) 0%, var(--accent1-color) 100%);
+	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, var(--accent2-color)), color-stop(1, var(--accent1-color)));
+}
+
+.textOutline {
+	color: white;
+	text-shadow:
+		-1px 1px 1px black,
+		1px 1px 1px black,
+		1px -1px 1px black,
+		-1px -1px 1px black,
+		-1px 1px 5px black,
+		1px 1px 5px black,
+		1px -1px 5px black,
+		-1px -1px 5px black;
+}
+
+.textHalo {
+	color: black;
+	text-shadow:
+		-1px 1px 1px white,
+		1px 1px 1px white,
+		1px -1px 1px white,
+		-1px -1px 1px white,
+		-1px 1px 5px white,
+		1px 1px 5px white,
+		1px -1px 5px white,
+		-1px -1px 5px white;
+}
+
+.border-bottom {
+  	border-bottom: 1px solid #AAA;
+  	padding-bottom: 5px;
+}
+
+/* USE THE FIX VERSIONS TO PREVENT MEDIA QUERIES FROM REDRAWING THEM */
+
+.left, 
+.pull-left {
+	float: left !important;
+	position: relative;
+	text-align: left;
+}
+
+.right, 
+.push-right {
+	float: right !important;
+	position: relative;
+	text-align: right;
+}
+
+.margin {
+	margin: 5px;
+}
+
+.margin-horiz {
+	margin: 5px 0px;
+}
+
+.pad {
+	padding: 5px;
+}
+
+.bigpad {
+	padding: 10px;
+}
+
+.centered, .center {
+	float: none !important;
+	margin-left: auto !important;
+	margin-right: auto !important;
+	text-align: center !important;
+}
+
+.horizontal-centered {
+    position: absolute;
+    left: 50%;
+    -webkit-transform: translateX(-50%);
+    -ms-transform: translateX(-50%);
+    transform: translateX(-50%);
+}
+
+.vertical-centered {
+    position: absolute;
+    top: 50%;
+    -webkit-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+}
+
+.noSelect {
+  -webkit-user-select: none; /* Safari */
+  -ms-user-select: none; /* IE 10 and IE 11 */
+  user-select: none; /* Standard syntax */
+}
+
+
+
+
+/* ========================================
+   MEDIA QUERIES - PRINT
+   ======================================== */
+
+@media screen and (min-width: 480px) {
+    .mobileOnly {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .noMobile {
+        display: none;
+    }
+}
+
+
+
+
+/* ========================================
+   MEDIA QUERIES - PRINT
+   ======================================== */
+
+@media print {
+
+    .page-header,
+    .page-nav,
+    .page-footer {
+        display: none;
+    }
+
+    body {
+        background: none !important
+    }
+
+    /* THIS IS DONE TO MAINTAIN PAGE STRUCTURE AND LAYOUT */
+    .noPrint {
+        visibility: hidden;
+    }
+
+}
+
+
+
+
+/* ========================================
+============  GOOGLE SEARCH    ============
+======================================== */
+
+.gsib_a {
+    padding: 1px 8px !important;
+}
+
+.gsc-tabsArea {
+    border-color: var(--primary-color);
+}
+
+.gsc-tabHeader.gsc-tabhActive {
+    border-color: var(--primary-color);
+}
+
+input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
+    box-sizing: content-box;
+}
+
+input.gsc-input {
+	font-size: 1.0em !important;
+	background: none !important;
+}
+
+.gsc-control-cse {
+    border-color: transparent !important;
+    background-color: transparent !important;
+	padding: .5em !important;
+}
+
+
+
+
+
+/* ========================================
+===========  GALLERY CAROUSEL    ===========
+======================================== */
+
+#gallery-section {
+	--do-nothing: true;
+}
+#gallery-section .carouselContainer {
+	background: none;
+	border: none;
+}
+#gallery-section .carouselCardImage {
+    height: 550px !important;
+	margin-top: 5px !important;
+}
+#gallery-section .carouselCardImage .imgContain {
+	--do-nothing: true;
+}
+@media screen and (max-width: 480px) {
+    #gallery-section .carouselCardImage {
+        height: 300px !important;
+    }
+}
+#gallery-section .carouselCardHeader { 
+    display: none;
+}
+#gallery-section .carouselCardSubHeader { 
+    position: absolute;
+    bottom: 5px;
+    width: 100%;
+}
+#gallery-section .carouselCardSubHeader h4 {
+    text-align: center;
+    font-size: 11px !important;
+    font-weight: normal !important;
+    color: white;
+    text-shadow: -1px 1px 1px black, 
+        1px 1px 1px black, 
+        1px -1px 1px black, 
+        -1px -1px 1px black, 
+        -1px 1px 5px black, 
+        1px 1px 5px black, 
+        1px -1px 5px black, 
+        -1px -1px 5px black;
+}
+
+
+/* ========================================
+=========  FEEDBACK CAROUSEL    ===========
+======================================== */
+
+#feedback-section {
+	margin-bottom: 50px;
+}
+#feedback-section .carouselContainer {
+	background: none;
+	border: none;
+	height: 300px;
+}
+#feedback-section .carouselCardsContainer {
+	width: 60%;
+	height: 300px;
+	margin: 0 auto;
+}
+#feedback-section .carouselCardWrapper {
+	background-color: var(--accent1-color); /* white */
+	padding: 10px;
+}
+#feedback-section .carouselCardBody {
+	text-align: center;
+	padding-top: 40px;
+}
+@media screen and (max-width: 480px) {
+	#feedback-section .carouselCardsContainer {
+		width: 90%;
+		font-size: 0.9em;
+	}
+}
+#feedback-section .carouselCardHeader {
+	display: inline;
+	font-size: 1.2em;
+}
+#feedback-section .carouselButtons {
+	display: none;
+}

package/dist/css/pixelated.grid.scss

@@ -0,0 +1,82 @@
+
+@mixin rowBase {
+    display: grid ;
+    gap: 10px; /* Spacing between grid items */
+    padding: 5px; /* Padding around the container */
+    /* border: 1px solid black; /* For visual clarity */
+}
+
+@for $i from 1 through 12 {
+	.row-#{$i}col { @include rowBase; grid-template-columns: repeat(#{$i}, 1fr); }
+	// FIX STYLES DONT RESIZE FOR MOBILE DEVICES
+	.rowfix-#{$i}col { @include rowBase; grid-template-columns: repeat(#{$i}, 1fr); }
+}
+
+@media screen and (max-width: 768px) {
+	.row-1col, .row-2col { grid-template-columns: repeat(1, 1fr); }
+	.row-3col, .row-4col { grid-template-columns: repeat(2, 1fr); }
+	.row-5col, .row-6col { grid-template-columns: repeat(3, 1fr); }
+	.row-7col, .row-8col { grid-template-columns: repeat(4, 1fr); }
+	.row-9col, .row-10col { grid-template-columns: repeat(5, 1fr); }
+	.row-11col, .row-12col { grid-template-columns: repeat(6, 1fr); }
+}
+
+@media screen and (max-width: 480px) {
+	.row-1col, .row-2col, .row-3col, .row-4col { grid-template-columns: repeat(1, 1fr); }
+	.row-5col, .row-6col, .row-7col, .row-8col { grid-template-columns: repeat(2, 1fr); }
+	.row-9col, .row-10col, .row-11col, .row-12col { grid-template-columns: repeat(3, 1fr); }
+}
+
+@media screen and (max-width: 480px) {
+	[class*="grid-s"] {
+		grid-column: 1 / -1 !important;
+	}
+}
+
+
+
+// GRID ITEM POSITIONING HELPERS
+// Start (S) and SPAN Width (W) position helpers for grid items
+@for $i from 1 through 12 {
+	@for $k from 1 through 12 {
+		.grid-s#{$i}-w#{$k} { display: grid ; grid-column: #{$i} / span #{$k}; }
+		/* @media screen and (max-width: 480px) {
+			.grid-s#{$i}-w#{$k} { grid-column: 1 / -1 ; }
+		} */
+	}
+}
+
+// GRID ITEM POSITIONING HELPERS
+// Start (S) and END (E) position helpers for grid items
+// END is an absolute position rather than a span
+// END position is exclusive, so grid-s1-e3 covers columns 1 and 2
+// END position of 13 is the same as span 12
+@for $i from 1 through 13 {
+	@for $k from 1 through 13 {
+		.grid-s#{$i}-e#{$k} { display: grid ; grid-column: #{$i} / #{$k}; }
+		/* @media screen and (max-width: 480px) {
+			.grid-s#{$i}-e#{$k} { grid-column: 1 / -1 ; }
+		} */
+	}
+}
+
+.grid-full,
+.grid-s1-e-1 {
+	display: grid ;
+	grid-column: 1 / -1 ;
+}
+
+.gridItem {
+	box-sizing: border-box;
+	display: grid ;
+	min-width: 0; // Prevents grid blowout
+	min-height: 0;
+	max-width: 100%;
+	max-height: 100%;
+	overflow: hidden;
+}
+
+  /* 
+  https://css-tricks.com/snippets/css/complete-guide-grid/
+  https://www.w3schools.com/css/css_grid.asp
+  */