first commit

cladonia-cn · Feb 25, 2024 · cbe6007 · cbe6007
commit cbe6007
Show file tree

Hide file tree

Showing 3 changed files with 310 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,62 @@
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Rexwe - 为生活 大焕新</title>
+    <link rel="stylesheet" type="text/css" href="./style/univar.css">
+    <link rel="stylesheet" type="text/css" href="./style/style.css">
+    <link rel="icon" href="./source/logo-primary.png">
+</head>
+
+<body class="body">
+    <header class="header">
+        <div class="leftbar">
+            <span class="logobox" onclick="window.open('./index.html','_self');">
+                <svg width="20" height="20" viewBox="0 0 112 112">
+                    <g>
+                        <path id="code-right" fill-rule="evenodd"
+                            d="M74.8574 109C80.5592 108.796 85.4461 107.499 89.5041 105.12C93.9335 102.522 97.3823 98.9451 99.8639 94.3799C102.331 89.84 103.573 84.6281 103.573 78.7467L103.573 63.1033C103.573 62.5005 103.74 61.9152 104.067 61.4012L111.957 49L98.4245 49C97.5163 49 96.6821 49.4673 96.2285 50.2259L90.7754 59.3343C90.0336 60.5749 89.6407 61.9855 89.6407 63.4174L89.6407 78.7467C89.6407 82.2544 88.9769 85.3035 87.6443 87.8956C86.3253 90.4581 84.5254 92.4743 82.2332 93.9443C80.1209 95.3057 77.633 96.0403 74.7733 96.1327L67.6916 96.1327C66.7562 96.1327 66 96.8619 66 97.7639L66 109L74.8363 109L74.8574 109Z">
+                        </path>
+                        <path id="code-left" fill-rule="evenodd"
+                            d="M12.0935 17.6201C9.62718 22.1598 8.38455 27.3724 8.38455 33.2533L8.38455 48.8967C8.38455 49.4995 8.21764 50.085 7.89072 50.5988L0 63L13.1547 63C14.0407 63 14.858 62.5642 15.3191 61.8349L21.077 52.7264C21.8864 51.446 22.3168 49.9808 22.3168 48.4813L22.3168 33.2533C22.3168 29.7464 22.9806 26.6964 24.3131 24.1044C25.6319 21.5416 27.4407 19.5271 29.7347 18.0557C31.845 16.6957 34.3245 15.96 37.1841 15.8673L44.2658 15.8673C45.2012 15.8673 45.9574 15.138 45.9574 14.2361L45.9574 3L37.1316 3L37.1001 3C31.3982 3.20471 26.5114 4.50143 22.4534 6.88045C18.0245 9.47831 14.5755 13.0549 12.0935 17.6201Z">
+                        </path>
+                        <path id="solidus" fill-rule="evenodd"
+                            d="M69.83 18.43L24 95L38.25 95C39.6497 95 40.9453 94.2675 41.67 93.07L87.5 16.5L73.25 16.5C71.8503 16.5 70.5547 17.2324 69.83 18.43Z">
+                        </path>
+                    </g>
+                </svg>
+            </span>
+        </div>
+        <div class="leftbarmask"></div>
+    </header>
+    <div class="container">
+        <div class="card" id="title">
+            <h1>Relmagine your design to be more perfect.</h1>
+        </div>
+        <div class="card" id="title">
+            <h1>Relmagine your design to be more perfect.</h1>
+        </div>
+        <div class="card" id="title">
+            <h1>Relmagine your design to be more perfect.</h1>
+        </div>
+        <footer class="card" id="rightbar">
+            <svg width="135" height="20" viewBox="0 0 746.6300048828125 112.5999755859375" fill="none">
+                <path fill-rule="evenodd" style="fill:var(--font-color)"
+                    d="M628.12 89.04L628.12 78.59C626.208 81.7311 623.822 84.303 620.98 86.32C616.962 89.1713 612.233 90.6 606.79 90.6C600.915 90.6 595.793 89.1713 591.43 86.32C587.067 83.4687 583.662 79.4978 581.2 74.4C578.738 69.3022 577.5 63.3794 577.5 56.64C577.5 49.8142 578.738 43.8746 581.2 38.82C583.662 33.7654 587.067 29.8113 591.43 26.96C595.793 24.1087 600.915 22.69 606.79 22.69C612.233 22.69 616.962 24.1087 620.98 26.96C623.788 28.953 626.149 31.4906 628.05 34.56L628.05 3.92L640.23 0L640.23 89.04L628.12 89.04ZM118.48 3.85L118.48 88.46L130.66 88.46L130.58 78.08C132.476 81.203 134.829 83.7568 137.65 85.76C141.628 88.5845 146.32 90 151.71 90C157.441 90 162.487 88.5845 166.85 85.76C171.213 82.9355 174.612 78.999 177.05 73.95C179.488 68.9007 180.71 63.0353 180.71 56.36C180.71 49.5991 179.488 43.7265 177.05 38.72C174.612 33.7135 171.213 29.7942 166.85 26.97C162.487 24.1458 157.441 22.73 151.71 22.73C146.32 22.73 141.628 24.1458 137.65 26.97C134.87 28.944 132.542 31.4498 130.66 34.49L130.58 0L118.48 3.85ZM268.75 85.04C272.257 88.3347 277.194 89.96 283.61 89.96L294.38 89.96L293.38 78.81L284 78.81C281.443 78.6647 279.472 77.8692 278.05 76.37C276.467 74.7005 275.59 72.2665 275.59 69.1L275.59 34.76L293.88 34.76L293.88 24.27L275.59 24.27L275.59 4L263.4 7.85L263.4 24.27L249.48 24.28L253.72 34.76L263.4 34.76L263.4 70.91C263.4 77.0712 265.243 81.7445 268.75 85.04ZM472.77 85.04C476.276 88.3347 481.214 89.96 487.63 89.96L498.4 89.96L497.4 78.81L488.02 78.81C485.463 78.6647 483.492 77.8692 482.07 76.37C480.487 74.7005 479.61 72.2665 479.61 69.1L479.61 34.76L497.9 34.76L497.9 24.27L479.61 24.27L479.61 4L467.42 7.85L467.42 24.27L453.5 24.28L457.74 34.76L467.42 34.76L467.42 70.91C467.42 77.0712 469.262 81.7445 472.77 85.04ZM15.4 26.91C21.5973 23.2228 29.3684 22.6875 31.5 22.61L39.75 22.61L39.75 33.81L31.5 33.81C25.9263 33.9856 21.76 36.71 21.76 36.71C17.3064 39.6084 14.76 44.63 14.76 44.63C12.2151 49.6538 12.22 56.35 12.22 56.35L12.22 88.6L0 88.6L0 56.35C0 46.4311 4.07 38.83 4.07 38.83C8.14191 31.2298 15.4 26.91 15.4 26.91ZM714.23 90.6C707.75 90.6 702.055 89.1545 697.13 86.26C692.206 83.3655 688.338 79.3678 685.53 74.27C682.722 69.1722 681.31 63.293 681.31 56.64C681.31 49.987 682.695 44.1178 685.46 39.02C688.225 33.9222 692.076 29.9245 697 27.03C701.925 24.1355 707.576 22.6899 713.97 22.6899C720.365 22.6899 726.025 24.1355 730.95 27.03C735.875 29.9245 739.725 33.9222 742.49 39.02C745.255 44.1178 746.63 49.987 746.63 56.64C746.63 63.293 745.255 69.1722 742.49 74.27C739.725 79.3678 735.901 83.3655 731.02 86.26C726.138 89.1545 720.537 90.6 714.23 90.6ZM424.46 90.6C419.881 90.6 415.796 89.9124 412.21 88.53C408.625 87.1476 405.602 85.2829 403.14 82.95C400.677 80.6171 398.84 77.9877 397.63 75.05L408.26 70.38C409.643 73.0585 411.716 75.2619 414.48 76.99C417.245 78.7181 420.311 79.58 423.68 79.58C427.396 79.58 430.461 78.8924 432.88 77.51C435.3 76.1276 436.51 74.1857 436.51 71.68C436.51 69.2607 435.605 67.3624 433.79 65.98C431.976 64.5976 429.337 63.474 425.88 62.61L419.79 61.05C413.742 59.4083 409.057 56.9433 405.73 53.66C402.404 50.3767 400.74 46.6673 400.74 42.52C400.74 36.2126 402.769 31.3261 406.83 27.87C410.89 24.4139 416.901 22.69 424.85 22.69C428.739 22.69 432.3 23.2468 435.54 24.37C438.781 25.4932 441.54 27.0963 443.83 29.17C446.119 31.2437 447.74 33.6987 448.69 36.55L438.33 41.22C437.293 38.6279 435.516 36.7028 433.01 35.45C430.505 34.1972 427.569 33.57 424.2 33.57C420.743 33.57 418.018 34.3279 416.03 35.84C414.043 37.352 413.05 39.4515 413.05 42.13C413.05 43.5988 413.895 45.0008 415.58 46.34C417.264 47.6792 419.747 48.786 423.03 49.65L430.03 51.33C434.264 52.3668 437.766 53.9431 440.53 56.06C443.295 58.1769 445.368 60.5547 446.75 63.19C448.133 65.8253 448.82 68.5687 448.82 71.42C448.82 75.3081 447.767 78.6955 445.65 81.59C443.534 84.4845 440.632 86.7148 436.96 88.27C433.287 89.8253 429.126 90.6 424.46 90.6ZM59.96 85.7C64.7505 88.5672 70.2653 90 76.51 90C81.1292 90 85.2985 89.1195 89.02 87.75C92.7415 85.8806 94.3365 84.5854 97.11 82.1C97.11 82.1 104.294 76.1552 105.62 69.6L93.74 69.6C92.2296 72.1063 89.8205 74.385 87.42 76.07C84.5542 78.0815 81.6872 79.09 77.41 79.09C73.475 79.09 69.9696 78.2142 66.89 76.46C63.8104 74.7057 61.3765 72.1576 59.58 68.82C58.0427 65.9638 57.1618 63.1736 56.94 59.44L106.41 59.44C106.41 52.08 105.154 45.1744 102.63 39.74C100.106 34.3056 96.6182 30.1125 92.17 27.16C87.7217 24.2075 82.5425 22.73 76.64 22.73C70.3953 22.73 64.8633 24.163 60.03 27.03C55.1967 29.8969 51.4074 33.8507 48.67 38.9C45.9326 43.9493 44.56 49.7703 44.56 56.36C44.56 62.9497 45.9326 68.7707 48.67 73.82C51.4074 78.869 55.1695 82.8327 59.96 85.7ZM315.9 85.7C320.69 88.5672 326.205 90 332.45 90C337.069 90 341.238 89.1195 344.96 87.75C348.681 85.8806 350.276 84.5854 353.05 82.1C353.05 82.1 360.234 76.1552 361.56 69.6L349.68 69.6C348.17 72.1063 345.76 74.385 343.36 76.07C340.494 78.0815 337.627 79.09 333.35 79.09C329.415 79.09 325.91 78.2142 322.83 76.46C319.75 74.7057 317.316 72.1576 315.52 68.82C313.983 65.9638 313.102 63.1736 312.88 59.44L362.35 59.44C362.35 52.08 361.094 45.1744 358.57 39.74C356.046 34.3056 352.558 30.1125 348.11 27.16C343.662 24.2075 338.482 22.73 332.58 22.73C326.335 22.73 320.803 24.163 315.97 27.03C311.137 29.8969 307.347 33.8507 304.61 38.9C301.873 43.9493 300.5 49.7703 300.5 56.36C300.5 62.9497 301.873 68.7707 304.61 73.82C307.347 78.869 311.109 82.8327 315.9 85.7ZM508.37 60.66L508.37 24.24L520.68 24.24L520.68 57.42C520.68 63.209 521.352 67.6595 522.69 70.77C524.029 73.8805 525.91 76.0404 528.33 77.25C530.749 78.4596 533.466 79.1036 536.49 79.19C541.761 79.19 545.862 77.3353 548.8 73.62C551.739 69.9047 553.21 64.6794 553.21 57.94L553.21 24.24L565.39 24.24L565.39 89.04L553.38 89.04L553.38 79.66C551.614 82.5606 549.438 84.9117 546.86 86.71C543.146 89.3021 538.607 90.6 533.25 90.6C528.24 90.6 523.859 89.5637 520.1 87.49C516.341 85.4163 513.44 82.1766 511.41 77.77C509.38 73.3634 508.37 67.6586 508.37 60.66ZM656.12 25.35L668.43 21.5L668.43 89.04L656.12 89.04L656.12 25.35ZM215.92 74.3L236.39 24.27L249.48 24.27L222.37 88.6L213.55 112.6L200.55 112.6L210.11 88.23L182.11 24.27L195.07 24.27L215.92 74.3ZM57.73 49.31C57.9911 46.2882 58.8857 43.6787 60.41 41.48C62.2492 38.827 64.6042 36.7921 67.47 35.38C70.3357 33.9679 73.3104 33.26 76.39 33.26C79.555 33.26 82.4135 33.9679 84.98 35.38C87.5465 36.7921 89.6103 38.8442 91.15 41.54C92.4205 43.7646 93.158 46.3569 93.38 49.31L57.73 49.31ZM313.67 49.31C313.931 46.2882 314.826 43.6787 316.35 41.48C318.189 38.827 320.544 36.7921 323.41 35.38C326.276 33.9679 329.25 33.26 332.33 33.26C335.495 33.26 338.354 33.9679 340.92 35.38C343.487 36.7921 345.55 38.8442 347.09 41.54C348.361 43.7646 349.098 46.3569 349.32 49.31L313.67 49.31ZM130.66 56.36C130.66 60.8102 131.43 64.7295 132.97 68.11C134.51 71.4905 136.652 74.1448 139.39 76.07C142.128 77.9952 145.243 78.96 148.75 78.96C152.6 78.96 155.982 77.9952 158.89 76.07C161.798 74.1448 164.092 71.4905 165.76 68.11C167.428 64.7295 168.26 60.8102 168.26 56.36C168.26 51.9098 167.445 48.0005 165.82 44.62C164.195 41.2395 161.928 38.5855 159.02 36.66C156.111 34.7344 152.74 33.77 148.89 33.77C145.383 33.77 142.23 34.7344 139.45 36.66C136.67 38.5855 134.51 41.2668 132.97 44.69C131.43 48.1132 130.66 51.9954 130.66 56.36ZM625.71 44.78C627.265 48.1929 628.05 52.147 628.05 56.64C628.05 61.133 627.265 65.0871 625.71 68.5C624.155 71.9129 621.995 74.5959 619.23 76.54C616.465 78.4841 613.269 79.45 609.64 79.45C605.838 79.45 602.468 78.4841 599.53 76.54C596.592 74.5959 594.285 71.9129 592.6 68.5C590.915 65.0871 590.07 61.133 590.07 56.64C590.07 52.147 590.898 48.1929 592.54 44.78C594.181 41.3671 596.462 38.6941 599.4 36.75C602.338 34.8059 605.708 33.83 609.51 33.83C613.225 33.83 616.465 34.8059 619.23 36.75C621.995 38.6941 624.155 41.3671 625.71 44.78ZM714.23 79.3199C718.118 79.3199 721.576 78.3541 724.6 76.41C727.624 74.4659 729.985 71.8096 731.67 68.4399C733.355 65.0702 734.19 61.133 734.19 56.64C734.19 52.147 733.355 48.2197 731.67 44.85C729.985 41.4803 727.581 38.8241 724.47 36.88C721.359 34.9359 717.858 33.96 713.97 33.96C709.995 33.96 706.504 34.9359 703.48 36.88C700.456 38.8241 698.078 41.4803 696.35 44.85C694.622 48.2197 693.76 52.147 693.76 56.64C693.76 61.133 694.622 65.0702 696.35 68.4399C698.078 71.8096 700.5 74.4659 703.61 76.41C706.721 78.3541 710.255 79.3199 714.23 79.3199Z">
+                </path>
+            </svg>
+            <p>Rebyte Studio 2024.</p>
+        </footer>
+    </div>
+    <script>
+        let container = document.querySelector(".container");
+        let header = document.querySelector(".header");
+        window.addEventListener("wheel", (event) => {
+            event.preventDefault();
+            container.scrollLeft += event.deltaY;
+        }, { passive: false });
+    </script>
+</body>
+
+</html>
diff --git a/style/style.css b/style/style.css
@@ -0,0 +1,135 @@
+.container {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    box-sizing: border-box;
+    align-items: center;
+    overflow: auto;
+}
+
+.card {
+    width: 100%;
+    height: 100vh;
+    box-sizing: border-box;
+    flex-shrink: 0;
+}
+
+.container::-webkit-scrollbar-track {
+    display: none;
+}
+
+.container::-webkit-scrollbar {
+    display: none;
+}
+
+.container::-webkit-scrollbar-thumb {
+    display: none;
+}
+
+@media screen and (max-width: 500px) {
+    .container {
+        scroll-snap-type: x mandatory;
+    }
+
+    .card {
+        scroll-snap-align: center;
+    }
+}
+
+span.logobox {
+    transition: all .25s ease-in-out;
+
+    svg {
+        overflow: visible;
+    }
+
+    #code-left {
+        transform: translateX(0px) translateY(0px);
+        transition: all .25s ease-in-out;
+    }
+
+    #code-right {
+        transform: translateX(0px) translateY(0px);
+        transition: all .25s ease-in-out;
+    }
+}
+
+span.logobox:hover {
+    #code-left {
+        transform: translateX(-6px) translateY(-6px);
+    }
+
+    #code-right {
+        transform: translateX(6px) translateY(6px);
+    }
+}
+
+.leftbar {
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - 8px);
+    width: 68px;
+    box-sizing: border-box;
+    position: fixed;
+    left: 0px;
+    top: 0px;
+    bottom: 0px;
+    z-index: 20;
+    transition: all .35s cubic-bezier(0.60, 0.25, 0.40, 0.75);
+    background: unset;
+    backdrop-filter: blur(30px);
+    /* border-radius: 0px 0px 0px 0px; */
+    border-radius: 5px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
+    box-shadow: 0px 0px 0px 0.5px rgba(0, 0, 0, 0.1);
+    margin: 4px;
+}
+
+.leftbar:hover {
+    width: 348px;
+    /* border-radius: 0px 12px 12px 0px; */
+    /* box-shadow: 10px 0px 25px rgba(0, 0, 0, 0.25); */
+    backdrop-filter: blur(60px);
+}
+
+.leftbarmask {
+    height: 100vh;
+    width: var(--leftbarmask-width);
+    box-sizing: border-box;
+    position: relative;
+    left: 0px;
+    top: 0px;
+    bottom: 0px;
+    z-index: 18;
+}
+
+#rightbar {
+    padding: 30px;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    box-sizing: border-box;
+    transition: all .35s cubic-bezier(0.60, 0.25, 0.40, 0.75);
+    background: unset;
+    border-radius: 5px;
+    width: calc(100% + var(--leftbarmask-width));
+    flex-shrink: 0;
+}
+
+.header {
+    animation: header-animate-it ease-in-out;
+    animation-timeline: scroll(nearest block);
+    animation-range-start: 80%;
+    animation-range-end: 85%;
+}
+
+@keyframes header-animate-it {
+    from {
+        left: 0px;
+    }
+
+    to {
+        left: -76px;
+    }
+}
diff --git a/style/univar.css b/style/univar.css
@@ -0,0 +1,113 @@
+@media (prefers-color-scheme: dark) {
+    :root {
+        background-color: var(--elegant-black);
+
+        --card-bg: rgba(26, 27, 28, 0.5);
+        --card-bg-hover: rgb(26, 27, 28);
+        --scrollbar-bg: rgba(255, 255, 255, 0.5);
+        --font-color: #ffffff;
+        --font-weight: 300;
+        --btn-sec-bg: rgba(255, 255, 255, 0.25);
+        --btn-sec-hover-bg: rgba(255, 255, 255, 0.3);
+    }
+
+    span.logobox {
+        #code-left {
+            fill: var(--plain-grey);
+        }
+
+        #solidus {
+            fill: var(--plain-grey);
+        }
+
+        #code-right {
+            fill: var(--plain-grey);
+        }
+    }
+
+    span.logobox:hover {
+        #code-left {
+            fill: var(--land-orange);
+        }
+
+        #solidus {
+            fill: var(--rose-rad);
+        }
+
+        #code-right {
+            fill: var(--elegant-black);
+        }
+    }
+
+
+    .leftbar {
+        background: rgba(17, 18, 19, 0.75);
+    }
+
+    .leftbar:hover {
+        background: rgba(17, 18, 19, 0.85);
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        background-color: var(--plain-grey);
+
+        --card-bg: rgba(255, 255, 255, 0.5);
+        --card-bg-hover: rgb(255, 255, 255);
+        --font-color: #1d1d1d;
+        --font-weight: 400;
+        --btn-sec-bg: rgba(0, 0, 0, 0.15);
+        --btn-sec-hover-bg: rgba(0, 0, 0, 0.2);
+        --scrollbar-bg: rgba(26, 27, 28, 0.6);
+    }
+
+    span.logobox {
+        #code-left {
+            fill: var(--elegant-black);
+        }
+
+        #solidus {
+            fill: var(--elegant-black);
+        }
+
+        #code-right {
+            fill: var(--elegant-black);
+        }
+    }
+
+    span.logobox:hover {
+        #code-left {
+            fill: var(--land-orange);
+        }
+
+        #solidus {
+            fill: var(--rose-rad);
+        }
+
+        #code-right {
+            fill: var(--elegant-black);
+        }
+    }
+
+    .leftbar {
+        background: rgba(255, 255, 255, 0.75);
+    }
+
+    .leftbar:hover {
+        background: rgba(255, 255, 255, 0.85);
+    }
+}
+
+:root {
+    --rose-rad: #E63C3C;
+    --land-orange: #FAA05F;
+    --elegant-black: #1A1B1C;
+    --plain-grey: #F5F5F5;
+    --leftbarmask-width: 77px;
+}
+
+body {
+    margin: 0;
+    display: flex;
+}