diff --git a/docs/css/app.css b/docs/css/app.css index 1b8ce9f..3e7e935 100644 --- a/docs/css/app.css +++ b/docs/css/app.css @@ -25,6 +25,26 @@ body { margin: 0; } +/* +....###....##....##.####.##.....## +...##.##...###...##..##..###...### +..##...##..####..##..##..####.#### +.##.....##.##.##.##..##..##.###.## +.#########.##..####..##..##.....## +.##.....##.##...###..##..##.....## +.##.....##.##....##.####.##.....## +*/ + +@keyframes anim-slide-up { + from { + opacity: 0; + transform: translateY(-40px); + } to { + opacity: 1; + transform: translateY(0); + } +} + /* .##.....##....###....####.##....## .###...###...##.##....##..###...## @@ -130,6 +150,10 @@ body { border-color: white; } +.main .links a:active { + opacity: 0.5; +} + .main .links a img, .main .links a span { vertical-align: middle; } @@ -187,11 +211,20 @@ body { opacity: 1; } +.main .screenshots li:active button { + opacity: 0.5; + transform: scale(1.5); +} + .main .screenshots li.slick-active button { opacity: 1; transform: scale(2); } +.main .screenshots img { + outline: none; +} + /* .########.########....###....########.##.....##.########..########..######. .##.......##.........##.##......##....##.....##.##.....##.##.......##....## @@ -248,6 +281,8 @@ body { margin: 8px; margin-top: 48px; padding-top: 4px; + animation: anim-slide-up; + animation-duration: 0.25s; } .main .update.show { @@ -287,12 +322,18 @@ body { vertical-align: middle; } -.main .update button:hover, .main .update button:focus, .main.update button:active { +.main .update button:hover, .main .update button:focus { background-color: rgba(255, 255, 255, 0.1); } +.main .update button:active { + opacity: 0.5; +} + .main .update .text { display: none; + animation: anim-slide-up; + animation-duration: 0.25s; } .main .update.expand .text { @@ -307,6 +348,7 @@ body { } .main .update a img { + transition: 0.25s; padding: 4px; margin-bottom: -4px; border-radius: 50%; @@ -316,6 +358,10 @@ body { background-color: rgba(255, 255, 255, 0.1); } +.main .update a:active { + opacity: 0.5; +} + .main .updates .more { background: none; border: 2px solid rgba(255, 255, 255, 0.5); @@ -327,11 +373,34 @@ body { padding: 12px 24px; } -.main .updates .more:hover, .main .updates .more:active, .main .updates .more:focus { +.main .updates .more:hover, .main .updates .more:focus { border-color: white; transform: translateY(-4px); } +.main .updates .more:active { + opacity: 0.5; +} + +/* +..######...####.########.##.....##.##.....##.########.....########..########.##....##..######. +.##....##...##.....##....##.....##.##.....##.##.....##....##.....##....##....###...##.##....## +.##.........##.....##....##.....##.##.....##.##.....##....##.....##....##....####..##.##...... +.##...####..##.....##....#########.##.....##.########.....########.....##....##.##.##..######. +.##....##...##.....##....##.....##.##.....##.##.....##....##.....##....##....##..####.......## +.##....##...##.....##....##.....##.##.....##.##.....##....##.....##....##....##...###.##....## +..######...####....##....##.....##..#######..########.....########.....##....##....##..######. +*/ + +.main .github-btns { + margin: 48px 0; +} + +.main .github-btns .button { + display: inline-block; + margin: 4px 8px; +} + /* .##.....##.########.########..####....###... .###...###.##.......##.....##..##....##.##.. diff --git a/docs/css/footer.css b/docs/css/footer.css index 3d1c4be..7242060 100644 --- a/docs/css/footer.css +++ b/docs/css/footer.css @@ -51,12 +51,17 @@ footer .column a { padding-bottom: 8px; text-decoration: none; outline: none; + transition: 0.25s; } footer .column a:hover, footer .column a:focus { opacity: 1; } +footer .column a:active { + text-decoration: underline; +} + /* .########...#######..########.########..#######..##.....## .##.....##.##.....##....##.......##....##.....##.###...### diff --git a/docs/css/header.css b/docs/css/header.css index 106cceb..e2cac0a 100644 --- a/docs/css/header.css +++ b/docs/css/header.css @@ -24,7 +24,6 @@ } to { transform: translateY(0px); } - } /* @@ -71,6 +70,7 @@ header .logo { padding: 18px; text-decoration: none; outline: none; + transition: 0.25s; } header .logo img { @@ -97,6 +97,10 @@ header .logo:hover span, header .logo:focus span { opacity: 0.5; } +header .logo:active { + opacity: 0.5; +} + /* .########..##.....##.########.########..#######..##....##..######. .##.....##.##.....##....##.......##....##.....##.###...##.##....## @@ -133,6 +137,10 @@ header .button:hover, header .button:focus { background-color: rgba(255, 255, 255, 0.1); } +header a.button:active { + opacity: 0.5; +} + header .button.show .menu { display: block; } @@ -170,11 +178,15 @@ header .menu a { text-decoration: none; } -header .menu a:hover { +header .menu a:hover, header .menu a:focus { background-color: rgba(0, 0, 0, 0.1); opacity: 1; } +header .menu a:active { + opacity: 0.5; +} + header .menu::after { content: " "; position: absolute; @@ -201,6 +213,7 @@ header .links { } header .links a { + transition: 0.25s; outline: none; margin: 10px 2px; display: inline-block; @@ -216,6 +229,10 @@ header .links a:hover img, header .links a:focus img { background-color: rgba(255, 255, 255, 0.1); } +header .links a:active { + opacity: 0.5; +} + /* .##.....##....###....##.....##.########..##.....##.########...######...########.########. .##.....##...##.##...###...###.##.....##.##.....##.##.....##.##....##..##.......##.....## diff --git a/docs/css/home.css b/docs/css/home.css new file mode 100644 index 0000000..7073990 --- /dev/null +++ b/docs/css/home.css @@ -0,0 +1,255 @@ +/* +.########...#######...#######..######## +.##.....##.##.....##.##.....##....##... +.##.....##.##.....##.##.....##....##... +.########..##.....##.##.....##....##... +.##...##...##.....##.##.....##....##... +.##....##..##.....##.##.....##....##... +.##.....##..#######...#######.....##... +*/ + +@font-face { + font-family: OpenSans; + src: url(../fonts/OpenSans-Semibold.ttf); +} + +* { + font-family: OpenSans; + font-size: 14px; + color: white; +} + +body { + background-color: rgb(36, 40, 42); + padding: 0; + margin: 0; +} + +/* +.##.....##....###....####.##....## +.###...###...##.##....##..###...## +.####.####..##...##...##..####..## +.##.###.##.##.....##..##..##.##.## +.##.....##.#########..##..##..#### +.##.....##.##.....##..##..##...### +.##.....##.##.....##.####.##....## +*/ + +.main { + padding: 64px 18px; + max-width: 1280px; + margin: 0 auto; +} + +.main-title { + font-size: 28px; + display: block; +} + +/* +.########.####.########.##.......######## +....##.....##.....##....##.......##...... +....##.....##.....##....##.......##...... +....##.....##.....##....##.......######.. +....##.....##.....##....##.......##...... +....##.....##.....##....##.......##...... +....##....####....##....########.######## +*/ + +.main .title img { + width: 64px; + height: 64px; + vertical-align: middle; +} + +.main .title label { + padding: 16px; + font-size: 48px; + vertical-align: middle; +} + +/* +.########..########..######...######. +.##.....##.##.......##....##.##....## +.##.....##.##.......##.......##...... +.##.....##.######....######..##...... +.##.....##.##.............##.##...... +.##.....##.##.......##....##.##....## +.########..########..######...######. +*/ + +.main .description { + font-size: 16px; + display: block; + margin-top: 24px; + margin-bottom: 48px; + opacity: 0.5; +} + +/* +....###....########..########...######. +...##.##...##.....##.##.....##.##....## +..##...##..##.....##.##.....##.##...... +.##.....##.########..########...######. +.#########.##........##..............## +.##.....##.##........##........##....## +.##.....##.##........##.........######. +*/ + +.main .apps { + margin: 48px 0; +} + +.main .apps .app { + width: calc(50% - 18px); + margin: 8px; + margin-bottom: 32px; + display: inline-block; + transition: 0.25s; + text-decoration: none; + vertical-align: top; + outline: none; +} + +.main .apps .app:hover .container, .main .apps .app:focus .container { + transform: translateY(-40px); +} + +.main .apps .app:hover .preview::after, .main .apps .app:focus .preview::after { + height: 128px; +} + +.main .apps .app:hover .title, .main .apps .app:focus { + text-shadow: 0 0 4px rgba(0, 0, 0, 0.5); +} + +.main .apps .app:active { + opacity: 0.5; +} + +.main .apps .app .preview { + position: relative; + width: 100%; + z-index: -100; +} + +.main .apps .app .preview img { + width: 100%; + border-radius: 4px; + box-shadow: 0 0 4px rgba(0, 0, 0, 0.5); + margin-bottom: -4px; +} + +.main .apps .app .preview::after { + position: absolute; + content: " "; + left: 0; + right: 0; + bottom: 0; + height: 64px; + opacity: 0.5; + background: linear-gradient(transparent, black); + border-radius: 0 0 4px 4px; + transition: 0.25s; +} + +.main .apps .app .icon { + width: 64px; + height: 64px; + vertical-align: middle; + margin-right: 16px; + border-radius: 4px; +} + +.main .apps .app .container { + margin-top: 8px; + transition: 0.25s; +} + +.main .apps .app .title { + vertical-align: middle; + font-size: 36px; + transition: 0.25s; +} + +.main .apps .app .subtitle { + display: block; + padding: 8px; + opacity: 0.5; + font-size: 16px; + transition: 0.25s; +} + +.main .apps .app:hover .subtitle, .main .apps .app:focus .subtitle { + opacity: 1; + cursor: pointer; +} + +.main .apps .app .title:hover, .main .apps .app .title:focus { + cursor: pointer; +} + +.main .apps .app .platform { + opacity: 0.5; +} + +/* +.##.....##.########.########..####....###... +.###...###.##.......##.....##..##....##.##.. +.####.####.##.......##.....##..##...##...##. +.##.###.##.######...##.....##..##..##.....## +.##.....##.##.......##.....##..##..######### +.##.....##.##.......##.....##..##..##.....## +.##.....##.########.########..####.##.....## +*/ + +@media only screen and (max-width: 800px) { + .main .apps .app { + display: block; + width: 100%; + margin-left: 0; + margin-right: 0; + } +} + +@media only screen and (max-width: 420px) { + .main { + padding-left: 0; + padding-right: 0; + } + + .main .apps .app .preview { + border-radius: 0; + } + + .main .description { + padding-left: 16px; + padding-right: 16px; + } + + .main .title label { + display: block; + } + + .main .title img { + opacity: 0.5; + width: 128px; + height: 128px; + margin-bottom: -80px; + } + + .main .apps .app .icon { + width: 32px; + height: 32px; + } +} + +/* +.########.##.....##.########....########.##....##.########. +....##....##.....##.##..........##.......###...##.##.....## +....##....##.....##.##..........##.......####..##.##.....## +....##....#########.######......######...##.##.##.##.....## +....##....##.....##.##..........##.......##..####.##.....## +....##....##.....##.##..........##.......##...###.##.....## +....##....##.....##.########....########.##....##.########. +*/ \ No newline at end of file diff --git a/docs/imgs/arrownotes/icon128.png b/docs/imgs/arrownotes/icon128.png new file mode 100644 index 0000000..77447e1 Binary files /dev/null and b/docs/imgs/arrownotes/icon128.png differ diff --git a/docs/imgs/arrownotes/screen1.png b/docs/imgs/arrownotes/screen1.png new file mode 100644 index 0000000..3f25a9f Binary files /dev/null and b/docs/imgs/arrownotes/screen1.png differ diff --git a/docs/imgs/ferny/ferny.pdn b/docs/imgs/ferny/ferny.pdn deleted file mode 100644 index f05f3e2..0000000 Binary files a/docs/imgs/ferny/ferny.pdn and /dev/null differ diff --git a/docs/imgs/flyingnyan/icon64.png b/docs/imgs/flyingnyan/icon64.png new file mode 100644 index 0000000..1888a11 Binary files /dev/null and b/docs/imgs/flyingnyan/icon64.png differ diff --git a/docs/imgs/flyingnyan/screen1.png b/docs/imgs/flyingnyan/screen1.png new file mode 100644 index 0000000..aed6ade Binary files /dev/null and b/docs/imgs/flyingnyan/screen1.png differ diff --git a/docs/imgs/icons/android.png b/docs/imgs/icons/android.png new file mode 100644 index 0000000..3c69ab9 Binary files /dev/null and b/docs/imgs/icons/android.png differ diff --git a/docs/imgs/icons/windows.png b/docs/imgs/icons/windows.png new file mode 100644 index 0000000..0598b02 Binary files /dev/null and b/docs/imgs/icons/windows.png differ diff --git a/docs/imgs/module/module64.png b/docs/imgs/module/module64.png new file mode 100644 index 0000000..41f57cc Binary files /dev/null and b/docs/imgs/module/module64.png differ diff --git a/docs/imgs/orhighway/icon64.png b/docs/imgs/orhighway/icon64.png new file mode 100644 index 0000000..90a9138 Binary files /dev/null and b/docs/imgs/orhighway/icon64.png differ diff --git a/docs/imgs/orhighway/screen1.png b/docs/imgs/orhighway/screen1.png new file mode 100644 index 0000000..765489d Binary files /dev/null and b/docs/imgs/orhighway/screen1.png differ diff --git a/docs/imgs/soon/screen1.png b/docs/imgs/soon/screen1.png new file mode 100644 index 0000000..837ea71 Binary files /dev/null and b/docs/imgs/soon/screen1.png differ diff --git a/docs/imgs/tesurvival/icon64.png b/docs/imgs/tesurvival/icon64.png new file mode 100644 index 0000000..2bea06e Binary files /dev/null and b/docs/imgs/tesurvival/icon64.png differ diff --git a/docs/imgs/tesurvival/screen1.jpg b/docs/imgs/tesurvival/screen1.jpg new file mode 100644 index 0000000..b3f1ea3 Binary files /dev/null and b/docs/imgs/tesurvival/screen1.jpg differ diff --git a/docs/index.html b/docs/index.html index cba6125..bb94163 100644 --- a/docs/index.html +++ b/docs/index.html @@ -17,6 +17,7 @@ + @@ -33,11 +34,11 @@ + +
+
+ Watch +
+
+ Star +
+
+ Issue +
+
+
+ + + + +
@@ -195,7 +300,7 @@ • Fixed broken first app start.
-
+