updated parrlax effect and added hacktype to ghrepo title

Re-designed home page background to show random blob

1 files changed, 95 insertions, 75 deletions

diff --git a/src/css/index.css b/src/css/index.css
index f1e29f41..7f417533 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -2,50 +2,49 @@
 /*   --primary-color: mediumslateblue; */
 /* } */
 .wrapper {
-	height: 100vh;
-	width: 100%;
-	top: 0;
-	left: 0;
-	overflow-x: hidden;
-	-ms-overflow-style: none;
-	scrollbar-width: none;
-	z-index: -6;
+    height: 100vh;
+    width: 100%;
+    top: 0;
+    left: 0;
+    overflow-x: hidden;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+    z-index: -6;
 }
 .wrapper::-webkit-scrollbar {
-	display: none;
+    display: none;
 }
 
 /* main info window ======================================= */
 .indexPage {
-	overflow: hidden;
-	top: 0;
-	left: 0;
-	margin: 0;
-	padding: 0;
-	width: 100%;
-	height: 100%;
-	background-color: rgb(20, 53, 85);
-	background-image: url(/images/backgroundNightCity.jpg) ,url(/images/backgroundNightCity.webp);
-	background-position: center;
-	background-repeat: no-repeat;
-	background-size: cover;
-	color: #F4E8C1;
-	z-index: -10;
+    overflow: hidden;
+    top: 0;
+    left: 0;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    /* background-color: rgb(20, 53, 85);
+    background-image: url(/images/backgroundNightCity.jpg) ,url(/images/backgroundNightCity.webp); */
+    background-color: #05010d;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    color: #F4E8C1;
+    z-index: -10;
 }
 
 .window {
-	position: relative;
-	top: 15%;
-	left: 10%;
-	height: 70%;
-	width: 80%;
-	background: transparent;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	z-index: 999;
-	/* transform-style: preserve-3d; */
-	/* perspective: 1000px; */
+    position: relative;
+    top: 15%;
+    left: 10%;
+    height: 70%;
+    width: 80%;
+    background: transparent;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 999;
 }
 
 /* .window:after { */
@@ -72,66 +71,87 @@
 /* } */
 
 .window .windowWrap {
-	position: relative;
-	width: 100%;
-	height: 100%;
-	border: 1px solid rgba(255,255,255, .15);
-	border-radius: 1em;
-	-webkit-backdrop-filter: blur(16px);
-	backdrop-filter: blur(16px);
-	box-shadow: 0 0 10mm rgba(0,0,0,1);
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	text-align: center;
-	z-index: 11;
+    /* transform-style: preserve-3d; */
+    position: relative;
+    /* transform: perspective(1000px); */
+    width: 100%;
+    height: 100%;
+    border: 1px solid rgba(255,255,255,1);
+    border-radius: 1em;
+    -webkit-backdrop-filter: blur(16px);
+    backdrop-filter: blur(16px);
+    box-shadow: 0 0 10mm rgba(0,0,0,1);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    z-index: 11;
 }
 
+/* 
 .window:hover,
 .windowWrap:hover {
-	transform: scale(1.1);
-	-webkit-transition: all 0.3s;
-	transition: all 0.3s;
-}
+    transform: scale(1.1);
+    -webkit-transition: transform 0.3s;
+    transition: transform 0.3s;
+} */
 
 .window .windowWrap .text {
-	position: relative;
-	width: 100%;
-	text-align: center;
-	text-shadow: 10px 10px 10px black;
+    position: relative;
+    width: 100%;
+    text-align: center;
 }
 
 .window .windowWrap .text .title {
-	/* z-index: -1; */
-	/* transform: translateZ(30px); */
-	font-family: monoton;
-	font-size: 7vw;
-	text-transform: uppercase
+    /* z-index: -1; */
+    /* transform: translateZ(30px); */
+    font-family: monoton;
+    font-size: 7vw;
+    text-transform: uppercase;
 }
 
 .description {
-	/* z-index: -1; */
-	/* transform: translateZ(30px); */
-	font-family: rocksalt;
-	font-size: 1.75vw;
+    /* z-index: -1; */
+    /* transform: translateZ(30px); */
+    font-family: rocksalt;
+    font-size: 1.75vw;
 }
 
 
 .title {
-	text-shadow: 15px 15px 15px black;
-	-webkit-transition: all 0.5s;
-	transition: all 0.5s
+    text-shadow: 15px 15px 15px black;
+    -webkit-transition: all 0.5s;
+    transition: all 0.5s;
 }
 
 .title:hover {
-	transform: scale(1.1);
-	-webkit-transition: all 0.5s;
-	transition: all 0.5s
+    transform: scale(1.1);
+    -webkit-transition: all 0.5s;
+    transition: all 0.5s
 }
 
 .window .windowWrap .text .br {
-	display: block;
-	height: 0;
-	width: 0;
-	margin-bottom: 5vh;
+    display: block;
+    height: 0;
+    width: 0;
+    margin-bottom: 5vh;
+}
+
+.text {
+    transform: translateZ(200px);
+    text-shadow: 0 1px 0 #e9e6e6, 
+    0 2px 0 #e9e6e6, 
+    0 3px 0 #e9e6e6, 
+    0 4px 0 #e9e6e6, 
+    0 5px 0 #e9e6e6, 
+    0 6px 0 #e9e6e6, 
+    0 7px 0 #e9e6e6, 
+    0 8px 0 #e9e6e6, 
+    0 9px 0 #e9e6e6, 
+    0 10px 0 #e9e6e6, 
+    0 30px 10px rgba(0,0,0,.7);
 }
+.windowWrap, .tilt {
+    transform-style: preserve-3d;
+    perspective: 1000px;
+}
\ No newline at end of file