fixed all blur effects

5 files changed, 32 insertions, 33 deletions

diff --git a/index.html b/index.html
index ac6ca241..25b46fd8 100644
--- a/index.html
+++ b/index.html
@@ -27,7 +27,6 @@
         <div class="wrapper">
 
             <section class="indexPage">
-                <img class="background">
                 <div class="window slowScroll animate zoomIn animate--fast">
                     <div class="windowWrap tilt">
                         <div class="text">
diff --git a/pages/repo/github/repos.html b/pages/repo/github/repos.html
index 4a0f0fdc..c2c2e05f 100644
--- a/pages/repo/github/repos.html
+++ b/pages/repo/github/repos.html
@@ -7,13 +7,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
     <title>Github Projects</title>
     <link rel="icon" href="https://avatars.githubusercontent.com/u/97672521" type="image/png"></link>
-    <link rel="stylesheet" href="../../../src/css/ghrepo.css"></link>
-    <link rel="stylesheet" href="../../../src/css/style.css"></link>
+    <link rel="stylesheet" href="/src/css/style.css"></link>
+    <link rel="stylesheet" href="/src/css/ghrepo.css"></link>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css">
     <script src="/src/js/getrepo.js" defer></script>
 </head>
 
 <body class="animate reveal">
+    <section class="bgWrap">
     <!-- headers -->
     <div header page="GhRepo"></div>
 
@@ -22,7 +23,7 @@
         <section class="intro tilt">
             <div class="user-info animate animation--fast slideInTop"></div>
         </section>
-  
+
         <hr>
         <hr>
         <hr>
@@ -31,7 +32,8 @@
           <input type="text" class="filter-repos animate animate--slow slideInTop hide" placeholder="Search Projects"></input>
             <ul class="repo-list animate slideInTop", id="repo-list"></ul>
         </section>
-    </main>
+  <!--   </main> -->
+    </section>
     <script src="/src/js/tilt.js"></script>
     <script src="/src/js/tilt.conf.noglare.js"></script>
     <script src="/src/js/header.js"></script>
diff --git a/src/css/ghrepo.css b/src/css/ghrepo.css
index acdcb6fe..4496f66f 100644
--- a/src/css/ghrepo.css
+++ b/src/css/ghrepo.css
@@ -28,24 +28,36 @@
 
 
 body {
-    display: flex;
-    align-items: center;
-    justify-content: center;
     margin: 0;
     margin-top: (3em);
     font-family: 'Open Sans', sans-serif;
+}
+
+main {
+  margin-top: 3em
+}
+
+.bgWrap {
+      overflow: hidden;
+    top: 0;
+    left: 0;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
     background-color: rgb(48, 60, 100);
     background-image: url(/images/heigh-grass.jpg);
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    color: #F4E8C1;
+    z-index: 1;
     font-size: 16px;
 }
 
-main {
-  margin-top: 3em
-}
-
 .container {
     display: flex;
     justify-content: center;
@@ -55,9 +67,7 @@ main {
     width: 90%;
     max-width: 1280px;
     /* background: transparent; */
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
+    position: center;
 }
 
 .container small, h1 {
@@ -212,11 +222,11 @@ input:active,
     flex-wrap: wrap;
     justify-content: center;
     background: rgba(128, 128, 128, 0.2);
-    /* backdrop-filter:     -webkit-filter: blur(32px);
     -moz-filter: blur(32px);
     -o-filter: blur(32px);
     -ms-filter: blur(32px);
-    blur(2px); */
+    -webkit-backdrop-filter: blur(32px);
+    backdrop-filter: blur(32px);
     margin-top: 0;
     padding: 2em;
     /* border-bottom-left-radius: 20px; */
@@ -260,7 +270,6 @@ h3 {
     padding: 1em;
     text-align: center;
     background: transparent;
-    -webkit-filter: blur(20px);
     -moz-filter: blur(20px);
     -o-filter: blur(20px);
     -ms-filter: blur(20px);
@@ -312,7 +321,6 @@ h3 {
 
 .intro:hover,
 .user-info:hover {
-  -webkit-filter: blur(8px);
   -moz-filter: blur(8px);
   -o-filter: blur(8px);
   -ms-filter: blur(8px);
@@ -325,7 +333,6 @@ h3 {
 .user-info {
   /* background: transparent; */
   background: rgba(128, 128, 128, 0.2);
-  -webkit-filter: blur(2px);
   -moz-filter: blur(2px);
   -o-filter: blur(2px);
   -ms-filter: blur(2px);
@@ -352,7 +359,6 @@ h3 {
 }
 
 .repo {
-    -webkit-filter: blur(20px);
     -moz-filter: blur(20px);
     -o-filter: blur(20px);
     -ms-filter: blur(20px);
diff --git a/src/css/index.css b/src/css/index.css
index 05b0d2c1..1f1e240c 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -75,7 +75,10 @@
     height: 100%;
     border: 1px solid rgba(255,255,255, .15);
     border-radius: 1em;
-    -webkit-backdrop-filter: blur(16px);
+    -moz-filter: blur(16px);
+    -o-filter: blur(16px);
+    -ms-filter: blur(16px);
+     -webkit-backdrop-filter: blur(16px);
     backdrop-filter: blur(16px);
     box-shadow: 0 0 10mm rgba(0,0,0,1);
     display: flex;
diff --git a/src/css/style.css b/src/css/style.css
index f027cbf2..c5d35704 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -92,15 +92,6 @@ body::-webkit-scrollbar {
     backdrop-filter: blur(32px);
     transform: scale(2);
   }
-  100% {
-    -webkit-filter: blur(0px);
-    -moz-filter: blur(0px);
-    -o-filter: blur(0px);
-    -ms-filter: blur(0px);
-    -webkit-backdrop-filter: blur(0px);
-    backdrop-filter: blur(0px);
-    transform: scale(1);
-  }
 }
 
 /* animation: name duration timing-function delay iteration-count direction fill-mode; */
@@ -226,7 +217,6 @@ header {
 .navBar a:hover {
   /* background: rgba(255, 255, 255, 0.2); */
   /* outline: ridge rgba(128, 128, 128, .6); */
-  -webkit-filter: blur(5px);
   -moz-filter: blur(5px);
   -o-filter: blur(5px);
   -ms-filter: blur(5px);
@@ -255,7 +245,6 @@ header:hover,
 #navBarHeader:active
 {
   transform: scale(1.005);
-  -webkit-filter: blur(5px);
   -moz-filter: blur(5px);
   -o-filter: blur(5px);
   -ms-filter: blur(5px);