From f8ee6ef722e6c560c4a1c879e04dbdf0b01f0316 Mon Sep 17 00:00:00 2001 From: littleblack111 Date: Sun, 5 Nov 2023 17:17:00 +0800 Subject: updates --- dest/css/index.css | 123 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 122 insertions(+), 1 deletion(-) (limited to 'dest/css/index.css') diff --git a/dest/css/index.css b/dest/css/index.css index 2f6abe69..9e10a113 100644 --- a/dest/css/index.css +++ b/dest/css/index.css @@ -1 +1,122 @@ -.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);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;transition:all .5s}.title:hover{transform:scale(1.1);transition:all .5s}.window .windowWrap .text .br{display:block;height:0;margin-bottom:5vh;width:0} \ No newline at end of file +/* :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; +} -- cgit v1.2.3