diff --git a/index.html b/index.html index aea9caf..7148a1f 100755 --- a/index.html +++ b/index.html @@ -94,7 +94,7 @@

"[System Warriors] took the camp while the savages - celebrated1 their leader's 17th year." - + celebrated their leader's 17th year." - Pvt Venter
diff --git a/res/asset-index-style.css b/res/asset-index-style.css index ddc729d..d0e4cd3 100644 --- a/res/asset-index-style.css +++ b/res/asset-index-style.css @@ -1,7 +1,15 @@ #ndx-ndx { + display: -webkit-box; + display: -ms-flexbox; display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; flex-direction: row; + -ms-flex-wrap: wrap; flex-wrap: wrap; + -webkit-box-pack: space-evenly; + -ms-flex-pack: space-evenly; justify-content: space-evenly; } #ndx-ndx > section { @@ -12,7 +20,12 @@ } #ndx-news, #ndx-more { + display: -webkit-box; + display: -ms-flexbox; display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; flex-direction: column; width: min(90%, 500px); } diff --git a/style.css b/style.css index 6a46ab0..015135a 100644 --- a/style.css +++ b/style.css @@ -7,13 +7,13 @@ --desirable: #7eddcd; --detestable: #bd4c58; --accent: #ded5bd; - --hover: ; --link: #0c4649; --link-hover: #177479; } * { + -webkit-box-sizing: border-box; box-sizing: border-box; } @@ -60,9 +60,17 @@ a:hover { } nav { + display: -webkit-box; + display: -ms-flexbox; display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; flex-direction: row; + -ms-flex-wrap: wrap; flex-wrap: wrap; + -webkit-box-pack: space-evenly; + -ms-flex-pack: space-evenly; justify-content: space-evenly; margin: auto; width: min(100%, 1000px); @@ -88,6 +96,7 @@ nav a:hover { #subsystem { position: relative; height: 41px; + -webkit-animation: glitch 1s infinite; animation: glitch 1s infinite; } #nonintrude { @@ -143,6 +152,36 @@ blockquote b { color: var(--text); } +@-webkit-keyframes glitch { + 0% { + text-shadow: #00a589c5 1px 1px 1px, #52525295 1px -1px; + } + 13% { + text-shadow: #00a589c5 1px -1px 1px, #52525295 -1px 1px; + } + 15% { + text-shadow: #00a589c5 -1px 1px 1px, #52525295 1px -1px; + } + 38% { + text-shadow: #00a589c5 1px -1px 1px, #52525295 -1px 1px; + } + 50% { + text-shadow: #00a589c5 -1px -1px 1px, #52525295 -1px 1px; + } + 63% { + text-shadow: #00a589c5 1px 1px 1px, #52525295 1px -1px; + } + 75% { + text-shadow: #00a589c5 -1px -1px 1px, #52525295 1px 0px; + } + 88% { + text-shadow: #00a589c5 1px 1px 1px, #52525295 -1px 1px; + } + 100% { + text-shadow: #00a589c5 -1px 1px 1px, #52525295 0px 1px; + } +} + @keyframes glitch { 0% { text-shadow: #00a589c5 1px 1px 1px, #52525295 1px -1px; diff --git a/subsystem/substyle.css b/subsystem/substyle.css index d0cab8e..2292a22 100644 --- a/subsystem/substyle.css +++ b/subsystem/substyle.css @@ -11,6 +11,7 @@ } * { + -webkit-box-sizing: border-box; box-sizing: border-box; } @@ -35,7 +36,12 @@ a:hover { background-color: var(--orange); } nav { + display: -webkit-box; + display: -ms-flexbox; display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; flex-direction: row; width: 100%; text-align: center; @@ -46,6 +52,10 @@ nav a { background-color: var(--red); color: var(--white); + -webkit-transition: ease-out 100ms; + + -o-transition: ease-out 100ms; + transition: ease-out 100ms; } nav a:hover { @@ -58,6 +68,8 @@ nav a:hover { left: 40px; width: 80%; height: 60px; + -webkit-transform: rotate(-0.4deg); + -ms-transform: rotate(-0.4deg); transform: rotate(-0.4deg); background-color: var(--orange); } @@ -75,7 +87,10 @@ nav a:hover { #headnav { margin: 20px auto; margin-bottom: 30px; + -webkit-transform: rotate(1deg); + -ms-transform: rotate(1deg); transform: rotate(1deg); + -webkit-box-shadow: #00000085 0 1px 2px; box-shadow: #00000085 0 1px 2px; } #headnav a { @@ -85,6 +100,8 @@ nav a:hover { margin-left: 10px; } #headnav .spacer { + -webkit-box-flex: 1; + -ms-flex-positive: 1; flex-grow: 1; } @@ -94,6 +111,8 @@ nav a:hover { margin-top: 30px; } #socials a { + -webkit-box-flex: 1; + -ms-flex-positive: 1; flex-grow: 1; width: calc(100% / 5); padding: 5px; @@ -111,10 +130,14 @@ nav a:hover { left: 0; height: 100%; width: 25px; + -webkit-writing-mode: vertical-rl; + -ms-writing-mode: tb-rl; writing-mode: vertical-rl; text-orientation: mixed; margin: auto 0; margin-right: 5px; + -webkit-transform: rotate(0deg) !important; + -ms-transform: rotate(0deg) !important; transform: rotate(0deg) !important; z-index: 100;