diff options
| -rw-r--r-- | index.html | 1 | ||||
| -rw-r--r-- | pages/repo/github/repos.html | 10 | ||||
| -rw-r--r-- | src/css/ghrepo.css | 38 | ||||
| -rw-r--r-- | src/css/index.css | 5 | ||||
| -rw-r--r-- | src/css/style.css | 11 |
5 files changed, 32 insertions, 33 deletions
@@ -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); |