diff options
| author | littleblack111 <littleblack11111@gmail.com> | 2023-11-05 17:23:37 +0800 |
|---|---|---|
| committer | littleblack111 <littleblack11111@gmail.com> | 2023-11-05 17:23:37 +0800 |
| commit | 2cdf0cb352ab6a2d0f8cb25120e4ebc92c5316e3 (patch) | |
| tree | 6b088c99810bd013f17b80522c936ca6dfc09858 /dest/css | |
| parent | f8ee6ef722e6c560c4a1c879e04dbdf0b01f0316 (diff) | |
removed autoprefix hover as it will have a high chance of making hover stopped working
Diffstat (limited to 'dest/css')
| -rw-r--r-- | dest/css/404.css | 113 | ||||
| -rw-r--r-- | dest/css/about.css | 56 | ||||
| -rw-r--r-- | dest/css/ghrepo.css | 381 | ||||
| -rw-r--r-- | dest/css/index.css | 123 | ||||
| -rw-r--r-- | dest/css/style.css | 447 |
5 files changed, 5 insertions, 1115 deletions
diff --git a/dest/css/404.css b/dest/css/404.css index 8bf0c088..08720623 100644 --- a/dest/css/404.css +++ b/dest/css/404.css @@ -1,112 +1 @@ -* {
- box-sizing: border-box;
-}
-
-body {
- padding: 0;
- margin: 0;
- transition: transform 0.5s;
-}
-
-.using-mouse .using-mouse body:hover {
- transform: scale(1.1);
- transition: transform 0.5s;
-}
-
-#notfound {
- position: relative;
- height: 100vh;
- background: #030005;
-}
-
-#notfound .notfound {
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
-}
-
-.notfound {
- max-width: 767px;
- width: 100%;
- line-height: 1.4;
- text-align: center;
-}
-
-.notfound .notfound-404 {
- position: relative;
- height: 180px;
- margin-bottom: 20px;
- z-index: -1;
-}
-
-.notfound .notfound-404 h1 {
- font-family: 'Montserrat', sans-serif;
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50% , -50%);
- font-size: 224px;
- font-weight: 900;
- margin-top: 0px;
- margin-bottom: 0px;
- margin-left: -12px;
- color: #030005;
- text-transform: uppercase;
- text-shadow: -2px -2px 0px #8400ff, 2px 2px 0px #ff005a;
- letter-spacing: -20px;
-}
-
-.notfound .notfound-404 h2 {
- font-family: 'Montserrat', sans-serif;
- position: absolute;
- left: 0;
- right: 0;
- top: 110px;
- font-size: 42px;
- font-weight: 700;
- color: #fff;
- text-transform: uppercase;
- text-shadow: 0px .5px 0px #ff005a, 0px 2px 0px #8400ff;
- letter-spacing: 13px;
- margin: 0;
-}
-
-.notfound a {
- font-family: 'Montserrat', sans-serif;
- display: inline-block;
- text-transform: uppercase;
- color: #ff005a;
- -webkit-text-decoration: none;
- text-decoration: none;
- border: 2px solid;
- background: transparent;
- padding: 10px 40px;
- font-size: 14px;
- font-weight: 700;
- transition: 0.2s all;
-}
-
-.using-mouse .using-mouse .notfound a:hover {
- color: #8400ff;
- transform: scale(1.01);
- box-shadow: 0 0 25mm #8400ff;
- transition: transform 0.5s;
-}
-
-.using-mouse .using-mouse .notfound:hover:has(a:hover) a:not(:hover) {
- transform: scale(0.99);
- transition: transition 0.5s;
-}
-
-@media only screen and (max-width: 767px) {
- .notfound .notfound-404 h2 {
- font-size: 24px;
- }
-}
-
-@media only screen and (max-width: 480px) {
- .notfound .notfound-404 h1 {
- font-size: 182px;
- }
-}
+*{-webkit-box-sizing:border-box;box-sizing:border-box}body{margin:0;padding:0;transition:transform .5s}body:hover{transform:scale(1.1);transition:transform .5s}#notfound{background:#030005;height:100vh;position:relative}#notfound .notfound{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.notfound{line-height:1.4;max-width:767px;text-align:center;width:100%}.notfound .notfound-404{height:180px;margin-bottom:20px;position:relative;z-index:-1}.notfound .notfound-404 h1{color:#030005;font-size:224px;font-weight:900;left:50%;letter-spacing:-20px;margin-bottom:0;margin-left:-12px;margin-top:0;text-shadow:-2px -2px 0 #8400ff,2px 2px 0 #ff005a;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.notfound .notfound-404 h1,.notfound .notfound-404 h2{font-family:Montserrat,sans-serif;position:absolute;text-transform:uppercase}.notfound .notfound-404 h2{color:#fff;font-size:42px;font-weight:700;left:0;letter-spacing:13px;margin:0;right:0;text-shadow:0 .5px 0 #ff005a,0 2px 0 #8400ff;top:110px}.notfound a{background:transparent;border:2px solid;color:#ff005a;display:inline-block;font-family:Montserrat,sans-serif;font-size:14px;font-weight:700;padding:10px 40px;text-decoration:none;text-transform:uppercase;-webkit-transition:all .2s;transition:all .2s}.notfound a:hover{box-shadow:0 0 25mm #8400ff;color:#8400ff;transform:scale(1.01);transition:transform .5s}.notfound:hover:has(a:hover) a:not(:hover){transform:scale(.99);transition:transition .5s}@media only screen and (max-width:767px){.notfound .notfound-404 h2{font-size:24px}}@media only screen and (max-width:480px){.notfound .notfound-404 h1{font-size:182px}}
\ No newline at end of file diff --git a/dest/css/about.css b/dest/css/about.css index 0f8a159a..a8c1bcd3 100644 --- a/dest/css/about.css +++ b/dest/css/about.css @@ -1,55 +1 @@ -/* .aboutPage { */ -/* */ -/* } */ -body { - margin: 0; - padding: 0; -} -.container { - display: flex; - align-items: center; - justify-content: center; - height: 100vh; -} -.left { - top: 50%; -transform: translateY(-50%); - display: flex; - overflow: hidden; - align-items: center; -margin: 0; - justify-content: center; - margin-top: 4em; - /* background-color: #f1f1f1; */ -} -.left img { - max-width: 100%; -} -.right { - /* flex: 1; */ -display: flex; -height: 100%; -margin-top: 10em; -} -.main { -margin: auto; -} -.main h2 { - font-size: 24px; - margin-bottom: 10px; -} -.main p { - font-size: 16px; - margin: 0; -} -.info { -height: 80%; -} -.name { -font-family: smooth; -font-size: 10vw; -} -.background { - width: 100%; -height: 100vh; -} +body{margin:0;padding:0}.container{height:100vh}.container,.left{align-items:center;display:flex;justify-content:center}.left{margin:4em 0 0;overflow:hidden;top:50%;-ms-transform:translateY(-50%);transform:translateY(-50%)}.left img{max-width:100%}.right{display:flex;height:100%;margin-top:10em}.main{margin:auto}.main h2{font-size:24px;margin-bottom:10px}.main p{font-size:16px;margin:0}.info{height:80%}.name{font-family:smooth;font-size:10vw}.background{height:100vh;width:100%}
\ No newline at end of file diff --git a/dest/css/ghrepo.css b/dest/css/ghrepo.css index 28315d87..d1e819a2 100644 --- a/dest/css/ghrepo.css +++ b/dest/css/ghrepo.css @@ -1,380 +1 @@ -/* @media (prefers-color-scheme: light) { */ -/* :root { */ -/* --text: #151515; */ -/* --accent: #1688f0; */ -/* --bg-main: #fff; */ -/* --bg-repo: #f0f0f0; */ -/* --bg-user: #f5f5f5; */ -/* } */ -/* } */ -/* @media (prefers-color-scheme: dark) { */ -html { - --text: #e5e5e5; - --accent: #1688f0; - --bg-main: #000; - --bg-repo: #0f0f1a; - --bg-user: #0a0a0f; - --purple: rgb(123, 31, 162); - --violet: rgb(103, 58, 183); - --pink: rgb(244, 143, 177); - --light-yellow: rgb(255, 255, 204); - --pale-yellow: rgb(255, 255, 153); - --lemon-yellow: rgb(255, 250, 205); - } -/* } */ -* { - box-sizing: border-box; - /* background-image: url(/images/backgroundNightCity.jpg); */ - background: transparent; - transition: transform 0.5s; -} -body { - 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), url(/images/heigh-grass.webp); - 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; -} -.container { - display: flex; - justify-content: center; - flex-direction: row; - flex-wrap: wrap; - align-items: center; - width: 90%; - max-width: 1280px; - /* background: transparent; */ - position: center; -} -.container small, h1 { -background: transparent; -} -.hide { - display: none !important; -} -.hide { - /* '!important' is to make sure that when we add the class using JS, it takes precendence */ -} -h1 { - color: #1688f0; - color: var(--accent); - margin-bottom: 4px; -} -small { - width: 100%; - text-align: center; - display: block; - margin-bottom: 20px; -} -h2 { - width: 100%; - text-align: center; - color: #e5e5e5; - color: var(--text); - margin: 0; -} -a { - background: transparent; - color: #1688f0; - color: var(--accent); - -webkit-text-decoration: none; - text-decoration: none; - transition: background 0.5s -} -.github-img { - width: 45px; - margin-right: 8px; -} -ul { - list-style: none; - padding: 0; -} -.user-info * { -background: transparent; -} -.user-info { - display: flex; - flex-wrap: wrap; - justify-content: center; - /* background-image: url(/images/backgroundNightCity.jpg); */ - background: transparent; - background-position: center; - background-repeat: no-repeat; - background-size: cover; - color: #e5e5e5; - color: var(--text); - font-size: 18px; - padding: 2em; - border-radius: 16px; - /* border: 0.1px solid var(--accent); */ -} -.user-info figure { - width: 90%; - max-width: 250px; - background: transparent; -} -.user-info img { - border: 2px solid #1688f0; - border: 2px solid var(--accent); - box-shadow: 0 0px 6px #1688f0, 0 0px 6px #1688f0; - box-shadow: 0 0px 6px var(--accent), 0 0px 6px var(--accent); - max-width: 100%; - height: auto; - box-shadow: 0 0 10mm rgba(0,0,0,.7); - border-radius: 100%; -} -.using-mouse .using-mouse .user-info img:hover { - border-radius: 5%; -} -.using-mouse .using-mouse .user-info img:hover { -transform: scale(1.1); -box-shadow: 0 0 100mm rgba(255, 238, 16,.7); -} -.user-info div { - display: flex; - text-align: center; - flex-wrap: wrap; - align-items: center; - width: 100%; - padding-left: 5%; -} -.user-info div p { - width: 100%; - margin: 0; - padding: 0; - border-bottom: 1px solid #e5e5e5; - border-bottom: 1px solid var(--text); - padding-bottom: 18px; - background: transparent; -} -.using-mouse .using-mouse .user-info *:hover { - transform: scale(1.1); -} -.user-info .usertitle { - font-family: audiowide; - text-transform: uppercase; - font-size: 2vw; -} -.filter-repos, -input { - background: #0a0a0f; - background: rgba(10, 10, 15, 0.3); - width: 50%; - border-radius: 20px; - min-width: 300px; - margin-top: 1em; - padding: 1em; - margin-bottom: 1em; - border: 2px solid #1688f0; - border: 2px solid var(--accent); - box-shadow: 0 0 10mm rgba(0,0,0,.7); - text-align: center; - transition: all 0.5s -} -.using-mouse .using-mouse input:hover, -.using-mouse .using-mouse .filter-repos:hover { - /* background: rgba(10, 10, 15, 0.5); */ - transition: all 0.5s; - -webkit-backdrop-filter: blur(5px); - backdrop-filter: blur(5px); - box-shadow: 0 0 50mm rgba(0,0,0,.7); - transform: scale(1.1); - transition: all 0.5s; -} -input:active, -.filter-repos:active { - /* background: #F4E8C1; */ - box-shadow: 0 0 10mm rgba(0,0,0,.7); - background: #f4e8c1; - background: rgba(244, 232, 193, 0.3); -} -.repos { - display: flex; - flex-wrap: wrap; - justify-content: center; - background: #808080; - background: rgba(128, 128, 128, 0.2); - margin-top: 0; - padding: 2em; - /* border-bottom-left-radius: 20px; */ - /* border-bottom-right-radius: 20px; */ - border-radius: 16px; - /* border: 0.1px solid var(--accent); */ - margin-bottom: 4em; - /* box-shadow: 0 0 10mm rgba(0,0,0,.7); */ -} -.using-mouse .using-mouse .repos:hover { - background: #000000; - background: rgba(0, 0, 0, 0.3); - box-shadow: 0 0 10mm rgba(0,0,0,.7); - transform: scale(1.01); - box-shadow: 0 0 20mm rgba(128,128,128,.7); - transition: all 0.5s; -} -.repo-title { - margin: 4px; - width: 100%; - font-weight: bold; - text-align: center; - color: #1688f0; - color: var(--accent); -} -.repo-list { - width: 100%; - display: flex; - flex-wrap: wrap; - justify-content: center; - align-items: flex-start; - background: transparent; - -ms-scroll-snap-type: y mandatory; - scroll-snap-type: y mandatory; - /* background: rgba(128, 128, 128, 0.2); */ -} -.repo-list li { - width: 100%; - min-height: 180px; - border-radius: 16px; - margin: 1em 0; - border: 1px solid #1688f0; - border: 1px solid var(--accent); - padding: 1em; - text-align: center; - background: transparent; - -webkit-backdrop-filter: blur(20px); - backdrop-filter: blur(20px); - transition: all 0.5s; - scroll-snap-align: center - /* box-shadow: 0 0 10mm rgba(0,0,0,.7); */ - /* background: rgba(128, 128, 128, 0.1); */ -} -.repo-list h3, span{ - background: transparent; -} -.using-mouse .using-mouse .repo:hover { - /* box-shadow: 0 3px 6px var(--accent), 0 3px 6px var(--accent); */ - box-shadow: 0 0 50mm rgba(255, 238, 16,.7); - background: #000000; - background: rgba(0, 0, 0, 0.5); - border-radius: 10px; - transform: scale(1.05); - transition: background 0.5s, transform 1s, boarder 1.5s, all 0.3s -} -.using-mouse .using-mouse .repo-list:hover:has(li:hover) li:not(:hover) { - /* background: rgba(0, 0, 0, 0.3); */ - background: #000000; - background: rgba(0, 0, 0, 0.3); - transform: scale(0.95); - -webkit-animation-duration: 0.5s; - animation-duration: 0.5s; - transition: background 0.5s, transform 1s, all 0.3s; -} -.link-btn { - padding: 10px 20px; - /* background: var(--bg-main); */ - /* background: rgba(0, 0, 0, 0.5); */ - background: #808080; - background: rgba(128, 128, 128, 0.1); - border-radius: 30px; - border: 2px solid #1688f0; - border: 2px solid var(--accent); - color: #e5e5e5; - color: var(--text); - transition: background 0.5s, transform 0.5s, border 0.5, all 0.3s; -} -.using-mouse .using-mouse .link-btn:hover { - background: #1688f0; - background: rgba(22, 136, 240, 0.5); - border: 2px solid #e5e5e5; - border: 2px solid var(--text); - border-radius: 16px; - transform: scale(1.1); - box-shadow: 0 0 50mm rgba(0, 156, 255,.7); - transition: background 0.5s, transform 0.5s, border 0.5s, all 0.5s; -} -.repo-list p { - padding: 0em 0.5em; - margin: 0.5em 0; - background: transparent; -} -.using-mouse .using-mouse .intro:hover, -.using-mouse .using-mouse .user-info:hover { - -webkit-backdrop-filter: blur(8px); - backdrop-filter: blur(8px); - transform: scale(1.1); - transition: all 0.5s; -} -.user-info { - /* background: transparent; */ - background: #808080; - background: rgba(128, 128, 128, 0.2); - -webkit-backdrop-filter: blur(2px); - backdrop-filter: blur(2px); - /* box-shadow: 0 0 10mm rgba(0,0,0,.7); */ -} -.repo { - -webkit-backdrop-filter: blur(20px); - backdrop-filter: blur(20px); - box-shadow: 0 0 10mm rgba(0,0,0,.7); - overflow: auto; - overflow-x: hidden; -} -.rdescription { - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 3; - overflow: hidden; -} -.using-mouse .using-mouse .rdescription:hover { - -webkit-line-clamp: unset; -} -@media (min-width: 700px) { - .user-info div { - width: 45%; - text-align: left; - /* background: rgba(10, 10, 15, 0.1); */ - background: transparent; - } - - .user-info div p { - margin: 10px; - } - - .repo-list { - justify-content: space-around; - } - - .repo-list li { - width: 48%; - margin-right: 1.5%; - margin-left: 1.5%; - margin-top: 2%; - margin-bottom: 2%; - } -} -@media (min-width: 1200px) { - .repo-list li { - width: 30%; - } -} -/* TODO: Make all webkit-transition do with normal transition as well */ +html{--text:#e5e5e5;--accent:#1688f0;--bg-main:#000;--bg-repo:#0f0f1a;--bg-user:#0a0a0f;--purple:#7b1fa2;--violet:#673ab7;--pink:#f48fb1;--light-yellow:#ffc;--pale-yellow:#ff9;--lemon-yellow:#fffacd}*{background:transparent;box-sizing:border-box;transition:transform .5s}body{font-family:Open Sans,sans-serif;margin:(3em) 0 0}main{margin-top:3em}.bgWrap{background-color:#303c64;background-image:url(/images/heigh-grass.jpg),url(/images/heigh-grass.webp);background-position:50%;background-repeat:no-repeat;background-size:cover;color:#f4e8c1;font-size:16px;height:100%;left:0;margin:0;overflow:hidden;padding:0;top:0;width:100%;z-index:-1}.bgWrap,.container{align-items:center;display:flex;justify-content:center}.container{flex-direction:row;flex-wrap:wrap;max-width:1280px;position:center;width:90%}.container small,h1{background:transparent}.hide{display:none!important}h1{color:var(--accent);margin-bottom:4px}small{display:block;margin-bottom:20px}h2,small{text-align:center;width:100%}h2{color:var(--text);margin:0}a{background:transparent;color:var(--accent);text-decoration:none;-webkit-transition:background .5s;transition:background .5s}.github-img{margin-right:8px;width:45px}ul{list-style:none;padding:0}.user-info,.user-info *{background:transparent}.user-info{background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:16px;color:var(--text);display:flex;flex-wrap:wrap;font-size:18px;justify-content:center;padding:2em}.user-info figure{background:transparent;max-width:250px;width:90%}.user-info img{border:2px solid var(--accent);border-radius:100%;box-shadow:0 0 6px var(--accent),0 0 6px var(--accent);box-shadow:0 0 10mm rgba(0,0,0,.7);height:auto;max-width:100%}.user-info img:hover{border-radius:5%}.user-info img:hover{box-shadow:0 0 100mm rgba(255,238,16,.7);transform:scale(1.1)}.user-info div{align-items:center;display:flex;flex-wrap:wrap;padding-left:5%;text-align:center;width:100%}.user-info div p{background:transparent;border-bottom:1px solid var(--text);margin:0;padding:0 0 18px;width:100%}.user-info :hover{transform:scale(1.1)}.user-info .usertitle{font-family:audiowide;font-size:2vw;text-transform:uppercase}.filter-repos,input{background:#0a0a0f;background:rgba(10,10,15,.3);border:2px solid var(--accent);border-radius:20px;box-shadow:0 0 10mm rgba(0,0,0,.7);margin-bottom:1em;margin-top:1em;min-width:300px;padding:1em;text-align:center;-webkit-transition:all .5s;transition:all .5s;width:50%}.filter-repos:hover,input:hover{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:0 0 50mm rgba(0,0,0,.7);transform:scale(1.1);transition:all .5s}.filter-repos:active,input:active{background:#f4e8c1;background:hsla(46,70%,86%,.3);box-shadow:0 0 10mm rgba(0,0,0,.7)}.repos{background:grey;background:hsla(0,0%,50%,.2);border-radius:16px;display:flex;flex-wrap:wrap;justify-content:center;margin-bottom:4em;margin-top:0;padding:2em}.repos:hover{background:#000;background:rgba(0,0,0,.3);box-shadow:0 0 10mm rgba(0,0,0,.7);box-shadow:0 0 20mm hsla(0,0%,50%,.7);transform:scale(1.01);transition:all .5s}.repo-title{color:var(--accent);font-weight:700;margin:4px;text-align:center;width:100%}.repo-list{align-items:flex-start;display:flex;flex-wrap:wrap;justify-content:center;scroll-snap-type:y mandatory}.repo-list,.repo-list li{background:transparent;width:100%}.repo-list li{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--accent);border-radius:16px;margin:1em 0;min-height:180px;padding:1em;scroll-snap-align:center;text-align:center;-webkit-transition:all .5s;transition:all .5s}.repo-list h3,span{background:transparent}.repo:hover{background:#000;background:rgba(0,0,0,.5);border-radius:10px;box-shadow:0 0 50mm rgba(255,238,16,.7);transform:scale(1.05);transition:background .5s,transform 1s,boarder 1.5s,all .3s}.repo-list:hover:has(li:hover) li:not(:hover){animation-duration:.5s;background:#000;background:rgba(0,0,0,.3);transform:scale(.95);transition:background .5s,transform 1s,all .3s}.link-btn{background:grey;background:hsla(0,0%,50%,.1);border:2px solid var(--accent);border-radius:30px;color:var(--text);padding:10px 20px;-webkit-transition:background .5s,transform .5s,border .5s,all .5s;transition:background .5s,transform .5s,border .5,all .3s}.link-btn:hover{background:#1688f0;background:rgba(22,136,240,.5);border:2px solid var(--text);border-radius:16px;box-shadow:0 0 50mm rgba(0,156,255,.7);transform:scale(1.1);-webkit-transition:background .5s,transform .5s,border .5s,all .5s;transition:background .5s,transform .5s,border .5s,all .5s}.repo-list p{background:transparent;margin:.5em 0;padding:0 .5em}.intro:hover,.user-info:hover{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transform:scale(1.1);transition:all .5s}.user-info{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:grey;background:hsla(0,0%,50%,.2)}.repo{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 0 10mm rgba(0,0,0,.7);overflow:auto;overflow-x:hidden}.rdescription{-webkit-box-orient:vertical;-webkit-line-clamp:3;display:-webkit-box;overflow:hidden}.rdescription:hover{-webkit-line-clamp:unset}@media (min-width:700px){.user-info div{background:transparent;text-align:left;width:45%}.user-info div p{margin:10px}.repo-list{justify-content:space-around}.repo-list li{margin:2% 1.5%;width:48%}}@media (min-width:1200px){.repo-list li{width:30%}}
\ No newline at end of file diff --git a/dest/css/index.css b/dest/css/index.css index 9e10a113..82c3443c 100644 --- a/dest/css/index.css +++ b/dest/css/index.css @@ -1,122 +1 @@ -/* :root { */ -/* --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; -} -.wrapper::-webkit-scrollbar { - 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; -} -.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; */ -} -/* .window:after { */ -/* content: ""; */ -/* height: 70px; */ -/* width: 1px; */ -/* position: absolute; */ -/* left: -1px; */ -/* top: 65%; */ -/* transition: top, opacity; */ -/* transition-duration: 600ms; */ -/* transition-timing-function: ease; */ -/* background: linear-gradient( */ -/* transparent, */ -/* var(--primary-color), */ -/* transparent */ -/* ); */ -/* opacity: 0; */ -/* } */ -/* .window:hover:after { */ -/* top: 25%; */ -/* opacity: 1; */ -/* } */ -.window .windowWrap { - position: relative; - width: 100%; - height: 100%; - border: 1px solid #ffffff; - 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; -} -.using-mouse .window:hover, -.using-mouse .windowWrap:hover { - transform: scale(1.1); - transition: all 0.3s; -} -.window .windowWrap .text { - position: relative; - width: 100%; - text-align: center; - text-shadow: 10px 10px 10px black; -} -.window .windowWrap .text .title { - /* 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; -} -.title { - text-shadow: 15px 15px 15px black; - transition: all 0.5s -} -.using-mouse .title:hover { - transform: scale(1.1); - transition: all 0.5s -} -.window .windowWrap .text .br { - display: block; - height: 0; - width: 0; - margin-bottom: 5vh; -} +.wrapper{-ms-overflow-style:none;height:100vh;left:0;overflow-x:hidden;scrollbar-width:none;top:0;width:100%;z-index:-6}.wrapper::-webkit-scrollbar{display:none}.indexPage{background-color:#143555;background-image:url(/images/backgroundNightCity.jpg),url(/images/backgroundNightCity.webp);background-position:50%;background-repeat:no-repeat;background-size:cover;color:#f4e8c1;height:100%;left:0;margin:0;overflow:hidden;padding:0;top:0;width:100%;z-index:-10}.window{background:transparent;height:70%;left:10%;top:15%;width:80%;z-index:999}.window,.window .windowWrap{align-items:center;display:flex;justify-content:center;position:relative}.window .windowWrap{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid #fff;border:1px solid hsla(0,0%,100%,.15);border-radius:1em;box-shadow:0 0 10mm #000;height:100%;text-align:center;width:100%;z-index:11}.window:hover,.windowWrap:hover{transform:scale(1.1);-webkit-transition:all .3s;transition:all .3s}.window .windowWrap .text{position:relative;text-align:center;text-shadow:10px 10px 10px #000;width:100%}.window .windowWrap .text .title{font-family:monoton;font-size:7vw;text-transform:uppercase}.description{font-family:rocksalt;font-size:1.75vw}.title{text-shadow:15px 15px 15px #000;-webkit-transition:all .5s;transition:all .5s}.title:hover{transform:scale(1.1);-webkit-transition:all .5s;transition:all .5s}.window .windowWrap .text .br{display:block;height:0;margin-bottom:5vh;width:0}
\ No newline at end of file diff --git a/dest/css/style.css b/dest/css/style.css index 0776c4dd..e21ba531 100644 --- a/dest/css/style.css +++ b/dest/css/style.css @@ -1,446 +1 @@ -html { - --topBarHeight: 10%; -} - -@font-face { - font-family: hacked; - src: url(/fonts/Hacked-KerX.ttf); -} - -@font-face { - font-family: smooth; - src: url(/fonts/SmoothElegantRegular-ZLv3.ttf); -} - -@font-face { - font-family: liga; - src: url(/fonts/LigaJetBrainsMonoNerdFont-Regular.ttf); -} - -@font-face { - font-family: big; - src: url(/fonts/Big500-8MLOM.ttf); -} - -@font-face { - font-family: monoton; - src: url(/fonts/Monoton.ttf); -} - -@font-face { - font-family: rocksalt; - src: url(/fonts/RockSalt-Regular.ttf); -} - -@font-face { -font-family: audiowide; -src: url(/fonts/audiowide.ttf); -} - -/* page setup ============================================= */ - -* { - box-sizing: border-box; - padding: 0; - margin: 0; - font-family: liga; - text-shadow: 0px 0px 1px black; - transition: all 0.3s; -} - -body { - top: 0; - left: 0; - transition: background 1s ease-in-out; -} - -body::-webkit-scrollbar { -display: none; -} - -/* animation ============================================== */ - -@-webkit-keyframes slideInTop { -from { - transform: translateY(-300px); -} -to { - transform: translateY(0); -} -} - -@keyframes slideInTop { -from { - transform: translateY(-300px); -} -to { - transform: translateY(0); -} -} - -@-webkit-keyframes bounce { -0%, 20%, 50%, 80%, 100% { - transform: translateY(0px); -} -40% { - transform: translateY(30px); -} -80% { - transform: translateY(-15px); -} -} - -@keyframes bounce { -0%, 20%, 50%, 80%, 100% { - transform: translateY(0px); -} -40% { - transform: translateY(30px); -} -80% { - transform: translateY(-15px); -} -} - -@-webkit-keyframes zoomIn { -0% { - transform: scale(0.01); -} -85% { - transform: scale(1.1); -} -100% { - transform: scale(1); -} -} - -@keyframes zoomIn { -0% { - transform: scale(0.01); -} -85% { - transform: scale(1.1); -} -100% { - transform: scale(1); -} -} - -@-webkit-keyframes zoomOut { -0% { - transform: scale(1); -} -100% { - transform: scale(0.01); -} -} - -@keyframes zoomOut { -0% { - transform: scale(1); -} -100% { - transform: scale(0.01); -} -} - -@-webkit-keyframes reveal { -0% { - -webkit-filter: blur(32px); - -moz-filter: blur(32px); - -o-filter: blur(32px); - -ms-filter: blur(32px); - filter: blur(32px); - -webkit-backdrop-filter: blur(32px); - backdrop-filter: blur(32px); - transform: scale(2); -} - -} - -@keyframes reveal { -0% { - -webkit-filter: blur(32px); - -moz-filter: blur(32px); - -o-filter: blur(32px); - -ms-filter: blur(32px); - filter: blur(32px); - -webkit-backdrop-filter: blur(32px); - backdrop-filter: blur(32px); - transform: scale(2); -} - -} - -@-webkit-keyframes shake { - 0% { transform: rotate(0deg); } - 25% { transform: rotate(.5deg); } - 50% { transform: rotate(0eg); } - 75% { transform: rotate(-.5deg); } - 100% { transform: rotate(0deg); } -} - -@keyframes shake { - 0% { transform: rotate(0deg); } - 25% { transform: rotate(.5deg); } - 50% { transform: rotate(0eg); } - 75% { transform: rotate(-.5deg); } - 100% { transform: rotate(0deg); } -} - -@-webkit-keyframes background-pan { - from { - background-position: 0% center; - } - to { - background-position: -200% center; - } -} - -@keyframes background-pan { - from { - background-position: 0% center; - } - to { - background-position: -200% center; - } -} - -/* animation: name duration timing-function delay iteration-count direction fill-mode; */ - -/* animate class */ - -.animate { - -webkit-animation-duration: 0.5s; - animation-duration: 0.5s; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; -} - -.animate.animate--infinite { - -webkit-animation-iteration-count: infinite; - animation-iteration-count: infinite; -} - -.animate.animation--delay-1s { - -webkit-animation-delay: 1s; - animation-delay: 1s; -} - -.animate.animation--delay-p5s { - -webkit-animation-duration: 0.5s; - animation-duration: 0.5s; - -webkit-animation-delay: 0.5s; - animation-delay: 0.5s; -} - -.animate.animation--delay-p3s { - -webkit-animation-duration: 0.3s; - animation-duration: 0.3s; - -webkit-animation-delay: 0.3s; - animation-delay: 0.3s; -} - -.animate.animation--fast { - -webkit-animation-duration: 0.3s; - animation-duration: 0.3s; -} - -.animate.animation--slow { - -webkit-animation-duration: 1s; - animation-duration: 1s; -} - -/* real utility classes */ - -.animate.slideInTop { - -webkit-animation-name: slideInTop; - animation-name: slideInTop; - transition-timing-function: ease-in; - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; -} - -.animate.bounce { - -webkit-animation-name: bounce; - animation-name: bounce; -} - -.animate.zoomIn { - transition-timing-function: linear; - -webkit-animation-name: reveal; - animation-name: zoomIn; - -webkit-animation-name: zoomIn; - animation-name: zoomIn; -} - -.animate.zoomOut { - transition-timing-function: linear; - -webkit-animation-name: zoomOut; - animation-name: zoomOut; -} - -.animate.reveal { - transition-timing-function: linear; - -webkit-animation-name: reveal; - animation-name: reveal; -} - -.animate.shake { - -webkit-animation-name: shake; - animation-name: shake; -} - -/* transition */ - -* { - transition: all 0.3s; -} - -.js-tilt-glare { - border-radius: 18px; - overflow: hidden; -} - -/* topbar styles ========================================== */ - -header { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 3em; - justify-content: space-between; - align-items:center; - /* background: color(0, 0, 0, .1); */ - z-index: 1000; - background: #808080; - background: rgba(128, 128, 128, 0.2) -} - -.navBar a { - position: relative; - height: 100%; - font-size: 5mm; - text-transform: capitalize; - text-align: center; - -webkit-text-decoration: none; - text-decoration: none; - margin-left: 5mm; - margin-right: 5mm; - padding-top: 3mm; - padding-bottom: 3mm; - border-radius: 8px; - color: #F4E8C1; -} - -.navBar .hleft a {float: left;} - -.navBar .hright a {float: right;} - -.navBar a:after { - content: ''; - position: absolute; - left: 0; - bottom: 0; - width: 100%; - height: 1mm; - background: #808080; - background: rgba(128, 128, 128, 0.2); - border-radius: 1mm; - transform: scaleX(0); - transition: all 0.3s; -} - -.using-mouse .using-mouse .navBar a:hover:after { - transform: scaleX(1.1); -} - -.using-mouse .using-mouse .navBar a:hover { - /* background: rgba(255, 255, 255, 0.2); */ - /* outline: ridge rgba(128, 128, 128, .6); */ - -webkit-backdrop-filter: blur(10px); - backdrop-filter: blur(10px); - transition: all 1s -} - -.navBar a.active:after { - content: ''; - position: absolute; - left: 0; - bottom: 0; - width: 100%; - height: 1mm; - background: #808080; - background: rgba(128, 128, 128, .9); - border-radius: 1mm; - transform: scaleX(1); -} - -.navBar:active, -.using-mouse .using-mouse .navBar:hover, -header:active, -.using-mouse .using-mouse header:hover, -.using-mouse .using-mouse #navBarHeader:hover, -#navBarHeader:active -{ - transform: scale(1.005); - -webkit-backdrop-filter: blur(10px); - backdrop-filter: blur(10px); - transition: all 0.5s -} - -.navBar, -header, -#navBarHeader { - -webkit-backdrop-filter: blur(2.5px); - backdrop-filter: blur(2.5px); -} - -/* other ================================================== */ - -.contents { - margin: 0; - padding: 0; - width: 100%; - height: 100%; -} - -section { - position: relative; -} - -.wrapper { -height: 100vh; -overflow-y: auto; -overflow-x: hidden; -perspective: 10px; -} - -.using-mouse .using-mouse a:hover { - font-weight: bold; - -webkit-text-decoration: underline; - text-decoration: underline; - text-decoration-thickness: 3px; - -webkit-text-decoration-line: underline; - text-decoration-line: underline; - cursor: pointer; - transition-timing-function: cubic-bezier(.4,0,.2,1); - transition-duration: .15s; - text-underline-offset: 1px; - position: relative; - height: 100%; - font-size: 5mm; - text-transform: capitalize; - text-align: center; - margin-left: 5mm; - margin-right: 5mm; - padding-top: 3mm; - padding-bottom: 3mm; - font-weight: bold; - transition: all .5s; - /* border-radius: 8px; */ - /* color: #F4E8C1; */ -} - -/* TODO: Check dest if it compatible all browser */
\ No newline at end of file +html{--topBarHeight:10%}@font-face{font-family:hacked;src:url(/fonts/Hacked-KerX.ttf)}@font-face{font-family:smooth;src:url(/fonts/SmoothElegantRegular-ZLv3.ttf)}@font-face{font-family:liga;src:url(/fonts/LigaJetBrainsMonoNerdFont-Regular.ttf)}@font-face{font-family:big;src:url(/fonts/Big500-8MLOM.ttf)}@font-face{font-family:monoton;src:url(/fonts/Monoton.ttf)}@font-face{font-family:rocksalt;src:url(/fonts/RockSalt-Regular.ttf)}@font-face{font-family:audiowide;src:url(/fonts/audiowide.ttf)}*{box-sizing:border-box;font-family:liga;margin:0;padding:0;text-shadow:0 0 1px #000}body{left:0;top:0;transition:background 1s ease-in-out}body::-webkit-scrollbar{display:none}@keyframes slideInTop{0%{transform:translateY(-300px)}to{transform:translateY(0)}}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(30px)}80%{transform:translateY(-15px)}}@keyframes zoomIn{0%{transform:scale(.01)}85%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes zoomOut{0%{transform:scale(1)}to{transform:scale(.01)}}@keyframes reveal{0%{-webkit-backdrop-filter:blur(32px);backdrop-filter:blur(32px);-webkit-filter:blur(32px);-moz-filter:blur(32px);-o-filter:blur(32px);-ms-filter:blur(32px);filter:blur(32px);transform:scale(2)}}@keyframes shake{0%{transform:rotate(0deg)}25%{transform:rotate(.5deg)}50%{transform:rotate(0eg)}75%{transform:rotate(-.5deg)}to{transform:rotate(0deg)}}@keyframes background-pan{0%{background-position:0}to{background-position:-200%}}.animate{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animate.animate--infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animate.animation--delay-1s{-webkit-animation-delay:1s;animation-delay:1s}.animate.animation--delay-p5s{animation-delay:.5s;-webkit-animation-duration:.5s;animation-duration:.5s}.animate.animation--delay-p3s{animation-delay:.3s}.animate.animation--delay-p3s,.animate.animation--fast{-webkit-animation-duration:.3s;animation-duration:.3s}.animate.animation--slow{-webkit-animation-duration:1s;animation-duration:1s}.animate.slideInTop{animation-name:slideInTop;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}.animate.bounce{-webkit-animation-name:bounce;animation-name:bounce}.animate.zoomIn{-webkit-animation-name:reveal;animation-name:zoomIn}.animate.zoomIn,.animate.zoomOut{-webkit-transition-timing-function:linear;transition-timing-function:linear}.animate.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}.animate.reveal{-webkit-animation-name:reveal;animation-name:reveal;-webkit-transition-timing-function:linear;transition-timing-function:linear}.animate.shake{-webkit-animation-name:shake;animation-name:shake}*{-webkit-transition:all .3s;transition:all .3s}.js-tilt-glare{border-radius:18px;overflow:hidden}header{align-items:center;background:grey;background:hsla(0,0%,50%,.2);height:3em;justify-content:space-between;left:0;position:fixed;top:0;width:100%;z-index:1000}.navBar a{border-radius:8px;color:#f4e8c1;font-size:5mm;height:100%;margin-left:5mm;margin-right:5mm;padding-bottom:3mm;padding-top:3mm;position:relative;text-align:center;text-decoration:none;text-transform:capitalize}.navBar .hleft a{float:left}.navBar .hright a{float:right}.navBar a:after{background:grey;background:hsla(0,0%,50%,.2);border-radius:1mm;bottom:0;content:"";height:1mm;left:0;position:absolute;transform:scaleX(0);-webkit-transition:all .3s;transition:all .3s;width:100%}.navBar a:hover:after{transform:scaleX(1.1)}.navBar a:hover{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-transition:all 1s;transition:all 1s}.navBar a.active:after{background:grey;background:hsla(0,0%,50%,.9);border-radius:1mm;bottom:0;content:"";height:1mm;left:0;position:absolute;transform:scaleX(1);width:100%}#navBarHeader:active,#navBarHeader:hover,.navBar:active,.navBar:hover,header:active,header:hover{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transform:scale(1.005);transition:all .5s}#navBarHeader,.navBar,header{-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px)}.contents{height:100%;margin:0;padding:0;width:100%}section{position:relative}.wrapper{height:100vh;overflow-x:hidden;overflow-y:auto;perspective:10px}a:hover{cursor:pointer;font-size:5mm;font-weight:700;height:100%;margin-left:5mm;margin-right:5mm;padding-bottom:3mm;padding-top:3mm;position:relative;text-align:center;text-decoration:underline;-webkit-text-decoration-line:underline;text-decoration-line:underline;text-decoration-thickness:3px;text-transform:capitalize;text-underline-offset:1px;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);-webkit-transition:all .5s;transition:all .5s}
\ No newline at end of file |
