first commit

2023-04-08 12:19:53 -04:00
commit 7c8c8b1c76
4586 changed files with 2050693 additions and 0 deletions
@@ -0,0 +1,144 @@
+#searchform-overlay {
+	display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.9);
+    z-index: 9999;
+
+    .container {
+    	position: relative;
+    	max-width: 550px;
+    	height: 100%;
+    }
+
+    a.search-overlay-close {
+    	position: absolute;
+	    top: -50px;
+	    left: 50%;
+	    margin-left: -20px;
+	    width: 40px;
+	    height: 40px;
+	    background-color: rgba(255,255,255,0.2);
+	    text-align: center;
+	    @include border-radius( 2px );
+
+    	&:hover {
+    		background-color: rgba(255,255,255,0.3);
+    	}
+
+    	span {
+    		position: relative;
+		    display: inline-block;
+		    width: 24px;
+		    height: 24px;
+
+		    &:before,
+		    &:after {
+		    	content: '';
+			    position: absolute;
+			    top: 50%;
+			    left: 0;
+			    height: 2px;
+			    width: 100%;
+			    margin-top: 6px;
+			    background-color: $color-1;
+		    	@include border-radius( 5px );
+		    }
+
+		    &:before {
+			    @include transform( rotate(45deg) );
+		    }
+
+		    &:after {
+			    @include transform( rotate(-45deg) );
+		    }
+    	}
+    }
+
+    form {
+    	position: absolute;
+	    top: 50%;
+	    left: 0;
+	    margin-top: -33px;
+	    width: 100%;
+	    text-align: center;
+
+	    input, label {
+	    	font-size: 22px;
+		    line-height: 1.3;
+		    padding: 18px 0;
+		    margin: 0;
+		    min-height: 50px;
+		    color: $color-1;
+		    letter-spacing: 1px;
+		    text-transform: uppercase;
+		    text-align: center;
+	    }
+
+	    input {
+	    	position: relative;
+		    border: 0;
+		    background-color: transparent;
+		    border-bottom: 1px solid $color-14;
+		    z-index: 2;
+		    @include transition( border-color .3s ease );
+
+		    &:hover {
+		    	border-color: $color-15;
+		    }
+
+		    &:focus {
+		    	border-color: $color-1;
+		    }
+	    }
+
+		label {
+		    display: block;
+			position: absolute;
+		    top: 0;
+		    bottom: 0;
+		    left: 0;
+		    right: 0;
+		    cursor: text;
+		    @include opacity( .5 );
+		    z-index: 1;
+
+		    i {
+		    	display: inline-block;
+			    background-color: $color-1;
+			    width: 3px;
+			    height: 3px;
+			    margin-left: 3px;
+			    @include animation( blink 1s linear infinite );
+		    }
+
+		    i+i {
+			    @include animation-delay( .2s );
+			}
+
+			i+i+i {
+			    @include animation-delay( .4s );
+			}
+		}
+
+		&.search-filled label {
+			@include opacity( 0 );
+		    @include transition-duration( 150ms );
+		}
+    }
+}
+
+/*------------------------------------*
+	All Devices under 960px
+*------------------------------------*/
+@media only screen and (max-width: 959px) {
+			
+	/* header > search overlay */
+	#searchform-overlay {
+		display: none !important;
+	}
+	
+}