nature blur

cirisus · Feb 23, 2024 · e58fc9b · e58fc9b
1 parent 9d19424
commit e58fc9b
Show file tree

Hide file tree

Showing 56 changed files with 31,566 additions and 13 deletions.
diff --git a/.history/component/mobile_20240223170803.css b/.history/component/mobile_20240223170803.css
diff --git a/.history/component/mobile_20240223170804.css b/.history/component/mobile_20240223170804.css
diff --git a/.history/component/mobile_20240223170810.css b/.history/component/mobile_20240223170810.css
diff --git a/.history/component/mobile_20240223170812.css b/.history/component/mobile_20240223170812.css
diff --git a/.history/component/mobile_20240223170815.css b/.history/component/mobile_20240223170815.css
diff --git a/.history/component/mobile_20240223170817.css b/.history/component/mobile_20240223170817.css
diff --git a/.history/component/mobile_20240223170820.css b/.history/component/mobile_20240223170820.css
diff --git a/.history/component/mobile_20240223170824.css b/.history/component/mobile_20240223170824.css
diff --git a/.history/component/mobile_20240223170826.css b/.history/component/mobile_20240223170826.css
diff --git a/.history/component/mobile_20240223170832.css b/.history/component/mobile_20240223170832.css
diff --git a/.history/component/mobile_20240223170834.css b/.history/component/mobile_20240223170834.css
diff --git a/.history/component/mobile_20240223170907.css b/.history/component/mobile_20240223170907.css
diff --git a/.history/component/side_20240223163557.css b/.history/component/side_20240223163557.css
@@ -0,0 +1,176 @@
+@keyframes respire {
+    0% { border-bottom: 1px solid rgb(var(--highlight-primary-color), 0.3);}
+    100% { border-bottom: 1px solid rgb(var(--highlight-primary-color), 1);}
+}
+#interwiki div.menu-item img, #side-bar div.menu-item br, #side-bar div.menu-item img {
+    display: none;
+}
+#side-bar {
+    display: grid;
+    width: unset;
+    height: 100vh;
+    float: left;
+    padding-right: 1em;
+    padding-left:0.5rem;
+    clear: left;
+    position: fixed;
+    left: 0;
+    top: 3em;
+    max-height: 100%;
+    overflow-x: hidden;
+    overflow-y: visible;
+    z-index: 12;
+    direction: rtl;
+    transition: all 250ms
+}
+div#side-bar:before {
+    content: "";
+    display: block;
+    position: absolute;
+    height: 100%;
+    width: var(--sidebar-width-on-desktop);
+    -webkit-backdrop-filter: blur(.5em);
+    backdrop-filter: blur(.5em);
+    mask: var(--feather-mask);
+    -webkit-mask: var(--feather-mask);
+    z-index: -1;
+    transform: translateX(-1rem) scale(1.2);
+}
+@media only screen and (max-width: 767px) {
+    div#side-bar:before {
+        -webkit-backdrop-filter: blur(.5em)  brightness(1.2);
+        backdrop-filter: blur(.5em) brightness(1.2);
+        transform: translateX(0rem) scale(1.2);
+    }
+}
+div#side-bar
+#side-bar a {
+    position: relative;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    justify-content: flex-start;
+    -webkit-box-pack: start;
+    flex-direction: row;
+    flex-grow: 2;
+    -webkit-box-flex: 2;
+    -webkit-flex-grow: 2;
+    background-clip: border-box;
+    width: fit-content;
+    margin: 0;
+    padding: 4px 2px;
+    border: none;
+    font-size: 100%;
+    color: rgb(var(--sidebar-link-color));
+    box-shadow: inset -1px 0 0 0 rgb(var(--bright-secondary-color),.5);
+    background: none;
+    transition: all .4s ease-in-out;
+    -moz-transition: all .4s ease-in-out;
+    -webkit-transition: all .4s ease-in-out;
+    clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
+}
+#side-bar div.menu-item a:before {
+    --base-font-size: 0.9375rem;
+    --clip-path: polygon(0 0,0 0,0 100%,0 100%);
+    clip-path: var(--clip-path)
+    calc(100% + var(--base-font-size)*.93333);
+    content:"";
+    transition: all 0.2s ease-out;
+    -moz-transition: all 0.2s ease-out;
+    -webkit-transition: all 0.2s ease-out;
+    width: 1%;
+    height: 100%;
+    background: rgb(var(--scale-8),0);
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+}
+#side-bar div.menu-item a:hover:before {
+    background: rgb(var(--bright-primary-color));
+    width: 100%;
+}
+
+#side-bar a:hover {
+    color: rgb(var(--lowlight-primary-color)) !important;
+    background: rgb(var(--bright-primary-color),.25) !important;
+    text-decoration: none;
+    text-shadow: none !important;
+    transition: all .4s ease-in-out;
+    -moz-transition: all .4s ease-in-out;
+    -webkit-transition: all .4s ease-in-out;
+}
+#side-bar a:hover:active {
+    filter: brightness(1.1);
+    overflow: hidden !important;
+}
+#side-bar .side-block {
+    display: grid;
+    width: var(--sidebar-width-on-desktop);
+    background-color: rgb(var(--sideblock-bg-color));
+    padding: 0;
+    box-shadow: 0 1px 5px rgb(var(--plain-third-color),.77);
+    align-content: center;
+    align-items: center;
+    justify-items: center;
+    direction: ltr;
+}
+
+#side-bar .side-block .heading {
+    font-family: "Source Han Serif", "Source Han Serif CN", Songti SC, serif !important;
+    display: flex;
+    width: 100%;
+    text-indent: .5rem;
+    color: rgb(var(--title-color));
+    letter-spacing: calc(-.2em - .5rem);
+    font-size: calc(var(--base-font-size)*8/7);
+    font-weight: 900;
+    border-bottom: 2px solid rgb(var(--highlight-primary-color));
+}
+
+#side-bar .side-block .menu-item {
+    display: flex;
+    flex-shrink: 0;
+    flex-basis: 100%;
+    flex-flow: row wrap;
+    align-items: center;
+    justify-content: flex-start;
+    margin-top: -1px;
+    width: 100%;
+    margin-left: 0;
+    animation: respire 4s linear;
+    -moz-animation: respire 4s linear;
+    -webkit-animation: respire 4s linear;
+    -o-animation: respire 4s linear;
+    animation-direction: alternate-reverse;
+    animation-iteration-count: infinite;
+}
+
+#side-bar .side-block .menu-item:first-child {
+    display: flex;
+    flex-shrink: 0;
+    flex-basis: 100%;
+    flex-flow: row wrap;
+    align-items: center;
+    justify-content: flex-start;
+    animation: respire 4s linear;
+    -moz-animation: respire 4s linear;
+    -webkit-animation: respire 4s linear;
+    -o-animation: respire 4s linear;
+    animation-direction: alternate-reverse;
+    animation-iteration-count: infinite;
+    margin-top: -1px;
+    width: 100%;
+    margin-left: -14px;
+}
+.subt:nth-child(odd) {
+    display: inline-block;
+    transform: skewY(10deg) translateY(-.5px);
+    -ms-transform: skewY(10deg) translateY(-.5px);
+}
+
+.subt:nth-child(even) {
+    display: inline-block;
+    transform: skewY(10deg) translateY(.5px);
+    -ms-transform: skewY(10deg) translateY(.5px);
+}
diff --git a/.history/component/side_20240223163600.css b/.history/component/side_20240223163600.css
@@ -0,0 +1,176 @@
+@keyframes respire {
+    0% { border-bottom: 1px solid rgb(var(--highlight-primary-color), 0.3);}
+    100% { border-bottom: 1px solid rgb(var(--highlight-primary-color), 1);}
+}
+#interwiki div.menu-item img, #side-bar div.menu-item br, #side-bar div.menu-item img {
+    display: none;
+}
+#side-bar {
+    display: grid;
+    width: unset;
+    height: 100vh;
+    float: left;
+    padding-right: 1em;
+    padding-left:0.5rem;
+    clear: left;
+    position: fixed;
+    left: 0;
+    top: 3em;
+    max-height: 100%;
+    overflow-x: hidden;
+    overflow-y: visible;
+    z-index: 12;
+    direction: rtl;
+    transition: all 250ms
+}
+div#side-bar:before {
+    content: "";
+    display: block;
+    position: absolute;
+    height: 100%;
+    width: var(--sidebar-width-on-desktop);
+    -webkit-backdrop-filter: blur(.5em);
+    backdrop-filter: blur(.5em);
+    mask: var(--feather-mask);
+    -webkit-mask: var(--feather-mask);
+    z-index: -1;
+    transform: translateX(-1rem) scale(1.2);
+}
+@media only screen and (max-width: 767px) {
+    div#side-bar:before {
+        -webkit-backdrop-filter: blur(.5em)  brightness(1.2);
+        backdrop-filter: blur(.5em) brightness(1.2);
+        transform: translateX(0rem) scale(1.2);
+    }
+}
+div#side-bar:not
+#side-bar a {
+    position: relative;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    justify-content: flex-start;
+    -webkit-box-pack: start;
+    flex-direction: row;
+    flex-grow: 2;
+    -webkit-box-flex: 2;
+    -webkit-flex-grow: 2;
+    background-clip: border-box;
+    width: fit-content;
+    margin: 0;
+    padding: 4px 2px;
+    border: none;
+    font-size: 100%;
+    color: rgb(var(--sidebar-link-color));
+    box-shadow: inset -1px 0 0 0 rgb(var(--bright-secondary-color),.5);
+    background: none;
+    transition: all .4s ease-in-out;
+    -moz-transition: all .4s ease-in-out;
+    -webkit-transition: all .4s ease-in-out;
+    clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
+}
+#side-bar div.menu-item a:before {
+    --base-font-size: 0.9375rem;
+    --clip-path: polygon(0 0,0 0,0 100%,0 100%);
+    clip-path: var(--clip-path)
+    calc(100% + var(--base-font-size)*.93333);
+    content:"";
+    transition: all 0.2s ease-out;
+    -moz-transition: all 0.2s ease-out;
+    -webkit-transition: all 0.2s ease-out;
+    width: 1%;
+    height: 100%;
+    background: rgb(var(--scale-8),0);
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+}
+#side-bar div.menu-item a:hover:before {
+    background: rgb(var(--bright-primary-color));
+    width: 100%;
+}
+
+#side-bar a:hover {
+    color: rgb(var(--lowlight-primary-color)) !important;
+    background: rgb(var(--bright-primary-color),.25) !important;
+    text-decoration: none;
+    text-shadow: none !important;
+    transition: all .4s ease-in-out;
+    -moz-transition: all .4s ease-in-out;
+    -webkit-transition: all .4s ease-in-out;
+}
+#side-bar a:hover:active {
+    filter: brightness(1.1);
+    overflow: hidden !important;
+}
+#side-bar .side-block {
+    display: grid;
+    width: var(--sidebar-width-on-desktop);
+    background-color: rgb(var(--sideblock-bg-color));
+    padding: 0;
+    box-shadow: 0 1px 5px rgb(var(--plain-third-color),.77);
+    align-content: center;
+    align-items: center;
+    justify-items: center;
+    direction: ltr;
+}
+
+#side-bar .side-block .heading {
+    font-family: "Source Han Serif", "Source Han Serif CN", Songti SC, serif !important;
+    display: flex;
+    width: 100%;
+    text-indent: .5rem;
+    color: rgb(var(--title-color));
+    letter-spacing: calc(-.2em - .5rem);
+    font-size: calc(var(--base-font-size)*8/7);
+    font-weight: 900;
+    border-bottom: 2px solid rgb(var(--highlight-primary-color));
+}
+
+#side-bar .side-block .menu-item {
+    display: flex;
+    flex-shrink: 0;
+    flex-basis: 100%;
+    flex-flow: row wrap;
+    align-items: center;
+    justify-content: flex-start;
+    margin-top: -1px;
+    width: 100%;
+    margin-left: 0;
+    animation: respire 4s linear;
+    -moz-animation: respire 4s linear;
+    -webkit-animation: respire 4s linear;
+    -o-animation: respire 4s linear;
+    animation-direction: alternate-reverse;
+    animation-iteration-count: infinite;
+}
+
+#side-bar .side-block .menu-item:first-child {
+    display: flex;
+    flex-shrink: 0;
+    flex-basis: 100%;
+    flex-flow: row wrap;
+    align-items: center;
+    justify-content: flex-start;
+    animation: respire 4s linear;
+    -moz-animation: respire 4s linear;
+    -webkit-animation: respire 4s linear;
+    -o-animation: respire 4s linear;
+    animation-direction: alternate-reverse;
+    animation-iteration-count: infinite;
+    margin-top: -1px;
+    width: 100%;
+    margin-left: -14px;
+}
+.subt:nth-child(odd) {
+    display: inline-block;
+    transform: skewY(10deg) translateY(-.5px);
+    -ms-transform: skewY(10deg) translateY(-.5px);
+}
+
+.subt:nth-child(even) {
+    display: inline-block;
+    transform: skewY(10deg) translateY(.5px);
+    -ms-transform: skewY(10deg) translateY(.5px);
+}