commit c51126416f30ba6ebbdacce374f42b072baf04f7 Author: SPT-dev Date: Thu Mar 2 21:09:27 2023 -0500 Main upload diff --git a/README.md b/README.md new file mode 100644 index 0000000..6479518 --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# SPT-AKI + +Website made by Atomos. \ No newline at end of file diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 0000000..3a865c6 --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,497 @@ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans&family=Source+Sans+Pro:wght@400;700&display=swap"); +h1, +.headline-1, +.heading-1 { + font-size: 6rem; + font-weight: 300; + letter-spacing: -0.015625em; + line-height: 6rem; +} + +h2, +.headline-2, +.heading-2 { + font-size: 3.75rem; + font-weight: 300; + letter-spacing: -0.0083333333em; + line-height: 3.75rem; +} + +h3, +.headline-3, +.heading-3 { + font-size: 3rem; + font-weight: 400; + letter-spacing: normal; + line-height: 3.125rem; +} + +h4, +.headline-4, +.heading-4 { + font-size: 2.125rem; + font-weight: 400; + letter-spacing: 0.0073529412em; + line-height: 2.5rem; +} + +h5, +.headline-5, +.heading-5 { + font-size: 1.5rem; + font-weight: 400; + letter-spacing: normal; + line-height: 2rem; +} + +h6, +.headline-6, +.heading-6 { + font-size: 1.25rem; + font-weight: 500; + letter-spacing: 0.125em; + line-height: 2rem; +} + +.subtitle-1 { + font-size: 1rem; + font-weight: 400; + letter-spacing: 0.009375em; + line-height: 1.75rem; +} + +.subtitle-2 { + font-size: 0.875rem; + font-weight: 500; + letter-spacing: 0.0071428571em; + line-height: 1.375rem; +} + +.body-1 { + font-size: 1rem; + font-weight: 400; + letter-spacing: 0.03125em; + line-height: 1.5rem; +} + +.body-2 { + font-size: 0.875rem; + font-weight: 400; + letter-spacing: 0.0178571429em; + line-height: 1.25rem; +} + +.button { + font-size: 0.875rem; + font-weight: 500; + letter-spacing: 0.0892857143em; + line-height: 2.25rem; +} + +.caption { + font-size: 0.75rem; + font-weight: 400; + letter-spacing: 0.0333333333em; + line-height: 1.25rem; +} + +.overline { + font-size: 0.75rem; + font-weight: 500; + letter-spacing: 0.1666666667em; + line-height: 2rem; +} + +aki-button, +*[aki-button], +*.aki-button { + background-color: #ffc107; + border: none; + border-radius: 0.125rem; + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + color: #000; + cursor: pointer; + font-size: 1rem; + padding: 0.5rem 1rem; + text-decoration: none; + user-select: none; +} +aki-button:hover:not(:active), +*[aki-button]:hover:not(:active), +*.aki-button:hover:not(:active) { + filter: invert(0.15); +} +aki-button:active, +*[aki-button]:active, +*.aki-button:active { + background: #121212; + box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); + color: #fff; +} + +aki-card, +*.aki-card, +*[aki-card] { + background: #121212; + box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); + border-radius: 0.125rem; + color: #fff; + display: flex; + flex-direction: column; + font-size: 0.875rem; + letter-spacing: 0.0178571429em; + line-height: 1.25rem; + font-family: "Open Sans", sans-serif; + max-width: calc(25rem - 3rem); + padding: 1.25rem 1.5rem; +} +aki-card aki-card-title *.aki-card-title, +aki-card *[aki-card-title], +*.aki-card aki-card-title *.aki-card-title, +*.aki-card *[aki-card-title], +*[aki-card] aki-card-title *.aki-card-title, +*[aki-card] *[aki-card-title] { + font-family: "Source Sans Pro", sans-serif; + font-size: 1.25rem; + font-weight: 700; + letter-spacing: 0.009375em; + line-height: 1.75rem; + margin-bottom: 1rem; + text-transform: uppercase; +} +aki-card.elevated-card, +*.aki-card.elevated-card, +*[aki-card].elevated-card { + box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); +} + +[aki-divider], +.aki-divider { + background: #fff; + border: none; + height: 0.0625rem; + width: 100%; +} + +aki-toolbar, +*[aki-toolbar], +*.aki-toolbar { + align-items: center; + background-color: #121212; + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); + color: #fff; + display: flex; + flex-wrap: wrap; + height: 100%; + justify-content: flex-start; + max-height: 5.5rem; + min-width: 20rem; + text-transform: uppercase; + width: 100%; + z-index: 1; +} +aki-toolbar a, +*[aki-toolbar] a, +*.aki-toolbar a { + color: #fff; + text-decoration: none; +} +aki-toolbar nav, +*[aki-toolbar] nav, +*.aki-toolbar nav { + align-items: center; + display: flex; +} +aki-toolbar nav a, +*[aki-toolbar] nav a, +*.aki-toolbar nav a { + border-bottom: 0.25rem solid #121212; + cursor: pointer; + padding: 1rem; + letter-spacing: 0.0178571429em; + line-height: 1.25rem; + transition: 0.25s ease-in-out; +} +aki-toolbar nav a:hover, +*[aki-toolbar] nav a:hover, +*.aki-toolbar nav a:hover { + filter: invert(0.2); +} +aki-toolbar nav a[active], +*[aki-toolbar] nav a[active], +*.aki-toolbar nav a[active] { + border-bottom: 0.25rem solid #ffc107; +} + +.text1 { + font-family: "Open Sans", sans-serif; + font-weight: 400; +} + +.text2 { + font-family: "Source Sans Pro", sans-serif; + font-weight: 700; +} + +html { + font-family: "Source Sans Pro", sans-serif; + font-size: 16px; +} + +body { + display: flex; + flex-direction: column; + height: 100vh; + margin: 0; + padding: 0; + position: absolute; + width: 100vw; +} + +header .left, +header .center, +header .right { + align-items: inherit; + display: inherit; + height: calc(100% - 2rem); + padding: 1rem; +} +header .left .logo { + display: block; + filter: invert(1); + height: 3rem; + width: 3rem; +} +header .left .title { + font-size: 1.75rem; + letter-spacing: 0.03125em; + margin-left: 1rem; +} +header .left .title span:last-child { + margin-left: 0.5rem; +} +@media (max-width: 64em) { + header .left .title span:first-child { + display: none; + } +} +@media (max-width: 48em) { + header .left .title { + margin-left: 0; + } +} +@media (max-width: 48em) { + header .left { + flex: 1 1 auto; + padding: 0 !important; + order: 2; + } +} +header .center { + flex: 1 1 auto; + justify-content: center; +} +header .center button { + background: none; + border: none; + cursor: pointer; + display: none; + padding: 0; +} +header .center button img { + display: block; + height: 1.5rem; + width: 1.5rem; +} +@media (max-width: 48em) { + header .center { + flex: initial; + order: 1; + } +} +header .right .dropdown-button { + display: none; +} +@media (max-width: 64em) { + header .right.dropdown { + align-items: center; + cursor: pointer; + display: flex; + justify-content: center; + min-width: 4rem; + float: left; + overflow: hidden; + } + header .right.dropdown:hover .dropdown-content { + background: #121212; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); + display: flex; + flex-direction: column; + padding: 1rem; + right: 0; + top: 5.5rem; + } + header .right.dropdown .dropdown-button { + display: initial; + } + header .right.dropdown .dropdown-content { + display: none; + position: absolute; + z-index: 1; + } +} +@media (max-width: 48em) { + header .right { + order: 3; + } +} + +main { + height: 100%; + position: relative; + overflow: auto; + width: 100%; +} +main .bg-video { + background-color: #fff; + bottom: 0; + left: 0; + overflow: hidden; + position: fixed; + right: 0; + top: 0; + z-index: -99; +} +main .bg-video .wrapper { + background-color: #282828; + height: 100%; + width: 100%; + z-index: -98; +} +main .bg-video .wrapper video { + height: 100%; + object-fit: cover; + width: 100%; +} +main .bg-video .overlay { + background-color: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(10px); + height: 100%; + position: absolute; + top: 0; + width: 100%; + z-index: 0; +} +main #router-outlet { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; +} + +footer { + bottom: 0; + color: rgba(255, 255, 255, 0.25); + font-size: 0.625rem; + left: 0; + padding: 0.5rem 1.5rem; + position: absolute; + width: calc(100% - 1.5rem * 2); +} +@media (max-width: 48em) { + footer { + display: none; + } +} + +a { + color: #ffc107; + text-decoration: none; +} + +div[overlay-menu-content] { + background-color: #ffc107; + bottom: 0; + box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12); + color: #000; + display: flex; + flex-direction: column; + position: absolute; + top: 5.5rem; + width: 10rem; + z-index: 99; +} +div[overlay-menu-content] a { + color: inherit; + margin-bottom: 0.5rem; + padding: 0.5rem 0.5rem 0.5rem 1rem; + text-decoration: none; +} +div[overlay-menu-content] a:first-child { + margin-top: 0.5rem; +} +div[overlay-menu-content] .disclaimer { + color: rgba(0, 0, 0, 0.5); + font-size: 0.625rem; + padding: 0.5rem 0.5rem 0.5rem 1rem; +} +div[overlay-menu-content][opened] { + left: 0rem; +} +div[overlay-menu-content][closed] { + left: -10rem; +} + +.view { + align-items: center; + display: flex; + flex-direction: column; + height: 100%; + justify-content: center; + padding: 0 1rem; +} +.view[home] [aki-button] { + font-size: 1.25rem; + letter-spacing: 0.009375em; + padding: 0.75rem 1.5rem; +} +.view[home] .tagline { + bottom: 4rem; + color: #fff; + position: absolute; + right: 4rem; + text-transform: uppercase; +} +.view[home] .tagline div { + font-size: 1.25rem; + text-align: right; +} +.view[home] .tagline div:first-child { + font-size: 3rem; + text-align: initial; +} +@media (max-width: 48em), (max-height: 30rem) { + .view[home] .tagline { + display: none; + } +} +.view[download] a { + font-size: 1rem; +} +.view[features] [aki-card] { + margin: 0 1rem 1.5rem; + max-width: 40rem; +} +.view[features] [aki-card]:first-child { + margin-top: 1.5rem; +} +.view[community] a { + font-size: 1.25rem; + letter-spacing: 0.009375em; + margin-top: 1.5rem; + padding: 0.75rem 1.5rem; +} + +/*# sourceMappingURL=style.css.map */ diff --git a/assets/css/style.css.map b/assets/css/style.css.map new file mode 100644 index 0000000..fd43fd2 --- /dev/null +++ b/assets/css/style.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../scss/utils/theme.scss","../scss/utils/typography.scss","../scss/components/aki-button.scss","../scss/utils/elevation.scss","../scss/components/aki-card.scss","../scss/components/aki-divider.scss","../scss/components/aki-toolbar.scss","../scss/style.scss"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/assets/img/icons/baseline_menu_white_24dp.png b/assets/img/icons/baseline_menu_white_24dp.png new file mode 100644 index 0000000..193185f Binary files /dev/null and b/assets/img/icons/baseline_menu_white_24dp.png differ diff --git a/assets/img/logo.png b/assets/img/logo.png new file mode 100644 index 0000000..f55085a Binary files /dev/null and b/assets/img/logo.png differ diff --git a/assets/js/akiNavigatorTemplate.js b/assets/js/akiNavigatorTemplate.js new file mode 100644 index 0000000..534df7e --- /dev/null +++ b/assets/js/akiNavigatorTemplate.js @@ -0,0 +1,88 @@ +'use strict'; + +class AkiNavigatorTemplate { + constructor(mode) { + this._header = undefined; + this._templates = undefined; + this._routerOutlet = undefined; + this._mode = mode; + + this._onExec(); + } + + _onExec() { + console.log('Navigating using mode:', this._mode); + + this._getReferences(); + this._getTemplates(); + + window.addEventListener('hashchange', () => this.displayView(window.location.hash.substr(1))); + + if (!window.location.hash) { + this._mode === 'fetch' ? this.displayView('home') : this.displayView('home'); + } else { + this.displayView(window.location.hash.substr(1)); + } + } + + _getReferences() { + this._header = document.querySelector('header'); + this._routerOutlet = document.querySelector('#router-outlet'); + } + + _getTemplates() { + this._templates = [].slice.call(document.getElementsByTagName('template')); + } + + _viewModeAction() { + if (this._mode === 'fetch') { + this.fetchView(window.location.hash.substr(1)) + } else { + this.setView(window.location.hash.substr(1)); + } + } + + _removeChildren(element) { + let count = element.childNodes.length; + + while (count--) { + element.removeChild(element.lastChild); + } + } + + _setView(view) { + const template = this._templates.filter(template => template.id === `template-${view}`)[0]; + this._removeChildren(this._routerOutlet); + this._routerOutlet.appendChild(template.content.cloneNode(true)); + } + + async _fetchView(view) { + const response = await fetch(`templates/${view}.html`); + const text = await response.text(); + + this._removeChildren(this._routerOutlet); + this._routerOutlet.innerHTML = text; // innerHTML gets the job done. + } + + displayView(view) { + if (this._mode === 'fetch') { + this._fetchView(view); + } else { + this._setView(view); + } + + const activeLinks = document.querySelectorAll('a[active]'); + const newActiveLinks = document.querySelectorAll(`a[href='#${view}']`); + + if (activeLinks.length > 0) { + activeLinks.forEach(link => { + link.removeAttribute('active') + }); + } + + newActiveLinks.forEach(newLink => newLink.setAttribute('active', '')); + + // FIXME: history push is fucked rn. + // window.history.pushState(null, `${view}`, `#${view}`); + } +} \ No newline at end of file diff --git a/assets/js/akiSideMenu.js b/assets/js/akiSideMenu.js new file mode 100644 index 0000000..fde4d63 --- /dev/null +++ b/assets/js/akiSideMenu.js @@ -0,0 +1,57 @@ +/** + * This script will handle the layout changes + * when you go from chad computer screen + * to shitty mobile screen. + * + * Author: Atomos821 + */ + +"use strict"; + +const defaultFontSize = 16; // unit: px. +const matchValue = 48; // unit: em. + +function sideMenu(bool) { + const nav = document.querySelector('header nav'); + const overlay = document.querySelector('div[overlay-menu-content]'); + + if (!bool) { + // Restore nav to initial state. + nav.removeAttribute('style'); + nav.querySelectorAll('a').forEach(link => link.removeAttribute('style')); + nav.querySelector('button[aki-menu]').removeAttribute('style'); + + if (overlay.hasAttribute('opened')) { + overlay.removeAttribute('opened'); + overlay.setAttribute('closed', null); + } + + return null; + } + + nav.style.justifyContent = 'flex-start'; + nav.querySelector('button[aki-menu]').style.display = 'block'; + nav.querySelectorAll('a').forEach(link => link.style.display = 'none'); +} + +/** + * Toggles the side menu, either displaying or hiding it, + * depending on the attributes of the overlay menu. + */ +function toggleMenu() { + const overlay = document.querySelector('div[overlay-menu-content]'); + + if (overlay.hasAttribute('opened')) { + overlay.removeAttribute('opened'); + overlay.setAttribute('closed', null); + } else { + overlay.removeAttribute('closed'); + overlay.setAttribute('opened', null); + } +} + +// "Plz don't look sempai~ !!!" ｏ(≧▼≦○〃 +let widthMatch = window.matchMedia(`(max-width: ${matchValue}em)`); +widthMatch.addEventListener('change', matchedMedia => (matchedMedia.matches || window.innerWidth <= (matchValue * defaultFontSize)) ? sideMenu(true) : sideMenu(false)); +widthMatch.dispatchEvent(new Event("change")); // Force event on page load. +document.querySelector('header nav button[aki-menu]').addEventListener('click', () => toggleMenu()); \ No newline at end of file diff --git a/assets/scss/components/aki-button.scss b/assets/scss/components/aki-button.scss new file mode 100644 index 0000000..86e79fa --- /dev/null +++ b/assets/scss/components/aki-button.scss @@ -0,0 +1,25 @@ +aki-button, +*[aki-button], +*.aki-button { + background-color: $accent; + border: none; + border-radius: .125rem; + box-shadow: $elevation-z2; + color: $on-accent; + cursor: pointer; + font-size: 1rem; + padding: .5rem 1rem; + text-decoration: none; + user-select: none; + // transition: background 400ms cubic-bezier(0.25, 0.8, 0.25, 1),box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); + + &:hover:not(:active) { + filter: invert(.15); + } + + &:active { + background: $primary; + box-shadow: $elevation-z8; + color: $on-primary; + } +} \ No newline at end of file diff --git a/assets/scss/components/aki-card.scss b/assets/scss/components/aki-card.scss new file mode 100644 index 0000000..2e0efec --- /dev/null +++ b/assets/scss/components/aki-card.scss @@ -0,0 +1,32 @@ +aki-card, +*.aki-card, +*[aki-card] { + background: $primary; + box-shadow: $elevation-z1; + border-radius: .125rem; + color: $on-primary; + display: flex; + flex-direction: column; + font-size: .875rem; + letter-spacing: .0178571429em; + line-height: 1.25rem; + font-family: $font-open-sans, sans-serif; + max-width: calc(25rem - 3rem); + padding: 1.25rem 1.5rem; + + aki-card-title + *.aki-card-title, + *[aki-card-title] { + font-family: $font-source-sans-pro, sans-serif; + font-size: 1.25rem; + font-weight: 700; + letter-spacing: .009375em; + line-height: 1.75rem; + margin-bottom: 1rem; + text-transform: uppercase; + } + + &.elevated-card { + box-shadow: $elevation-z8; + } +} \ No newline at end of file diff --git a/assets/scss/components/aki-divider.scss b/assets/scss/components/aki-divider.scss new file mode 100644 index 0000000..ac6e374 --- /dev/null +++ b/assets/scss/components/aki-divider.scss @@ -0,0 +1,7 @@ +[aki-divider], +.aki-divider { + background: $on-primary; + border: none; + height: .0625rem; + width: 100%; +} \ No newline at end of file diff --git a/assets/scss/components/aki-toolbar.scss b/assets/scss/components/aki-toolbar.scss new file mode 100644 index 0000000..39c394b --- /dev/null +++ b/assets/scss/components/aki-toolbar.scss @@ -0,0 +1,45 @@ +aki-toolbar, +*[aki-toolbar], +*.aki-toolbar { + align-items: center; + background-color: $primary; + // box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); + box-shadow: $elevation-z4; + color: $on-primary; + display: flex; + flex-wrap: wrap; + height: 100%; + justify-content: flex-start; + max-height: 5.5rem; + min-width: 20rem; + text-transform: uppercase; + width: 100%; + z-index: 1; + + a { + color: $on-primary; + text-decoration: none; + } + + nav { + align-items: center; + display: flex; + + a { + border-bottom: .25rem solid $primary; + cursor: pointer; + padding: 1rem; + letter-spacing: .0178571429em; + line-height: 1.25rem; + transition: .25s ease-in-out; + + &:hover { + filter: invert(.2); + } + + &[active] { + border-bottom: .25rem solid $accent; + } + } + } +} \ No newline at end of file diff --git a/assets/scss/style.scss b/assets/scss/style.scss new file mode 100644 index 0000000..cf99e42 --- /dev/null +++ b/assets/scss/style.scss @@ -0,0 +1,324 @@ +@import './utils/theme.scss'; +@import './utils/elevation.scss'; +@import './utils/typography.scss'; + +@import './components/aki-button.scss'; +@import './components/aki-card.scss'; +@import './components/aki-divider.scss'; +@import './components/aki-toolbar.scss'; + +.text1 { + font-family: 'Open Sans', sans-serif; + font-weight: 400; +} + +.text2 { + font-family: 'Source Sans Pro', sans-serif; + font-weight: 700; +} + +html { + font-family: 'Source Sans Pro', sans-serif; + font-size: $base-font-size; +} + +body { + display: flex; + flex-direction: column; + height: 100vh; + margin: 0; + padding: 0; + position: absolute; + width: 100vw; +} + +header { + + .left, + .center, + .right { + align-items: inherit; + display: inherit; + height: calc(100% - 2rem); + padding: 1rem; + } + + .left { + .logo { + display: block; + filter: invert(1); + height: 3rem; + width: 3rem; + } + + .title { + font-size: 1.75rem; + letter-spacing: .03125em; + margin-left: 1rem; + + span:last-child { + margin-left: .5rem; + } + + @media (max-width: #{$bp-medium}) { + span:first-child { + display: none; + } + } + + @media (max-width: #{$bp-small}) { + margin-left: 0; + } + } + + @media (max-width: #{$bp-small}) { + flex: 1 1 auto; + padding: 0 !important; + order: 2; + } + } + + .center { + flex: 1 1 auto; + justify-content: center; + + button { + background: none; + border: none; + cursor: pointer; + display: none; // hidden by default + padding: 0; + + img { + display: block; + height: 1.5rem; + width: 1.5rem; + } + } + + @media (max-width: #{$bp-small}) { + flex: initial; + order: 1; + } + } + + .right { + .dropdown-button { + display: none; + } + + @media (max-width: #{$bp-medium}) { + &.dropdown { + align-items: center; + cursor: pointer; + display: flex; + justify-content: center; + min-width: 4rem; + + float: left; + overflow: hidden; + + &:hover .dropdown-content { + // display: block; + background: $primary; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); + display: flex; + flex-direction: column; + padding: 1rem; + right: 0; + top: 5.5rem; + } + + .dropdown-button { + display: initial; + } + + .dropdown-content { + display: none; + position: absolute; + z-index: 1; + } + } + } + + @media (max-width: #{$bp-small}) { + order: 3; + } + } +} + +main { + height: 100%; + position: relative; + overflow: auto; + width: 100%; + + .bg-video { + background-color: $background; + bottom: 0; + left: 0; + overflow: hidden; + position: fixed; + right: 0; + top: 0; + z-index: -99; + + .wrapper { + background-color: $secondary; + height: 100%; + width: 100%; + z-index: -98; + + video { + height: 100%; + object-fit: cover; + width: 100%; + } + } + + .overlay { + background-color: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(10px); + height: 100%; + position: absolute; + top: 0; + width: 100%; + z-index: 0; + } + } + + #router-outlet { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto + } +} + +footer { + bottom: 0; + color: rgba(255, 255, 255, .25); + font-size: .625rem; + left: 0; + padding: .5rem 1.5rem; + position: absolute; + width: calc(100% - 1.5rem * 2); + + @media (max-width: #{$bp-small}) { + display: none; + } +} + +a { + color: $accent; + text-decoration: none; +} + +div[overlay-menu-content] { + background-color: $accent; + bottom: 0; + box-shadow: $elevation-z16; + color: $on-accent; + display: flex; + flex-direction: column; + position: absolute; + top: 5.5rem; // header height + width: 10rem; + z-index: 99; + + a { + color: inherit; + margin-bottom: .5rem; + padding: .5rem .5rem .5rem 1rem; + text-decoration: none; + + &:first-child { + margin-top: .5rem; + } + } + + .disclaimer { + color: rgba($on-accent, .5); + font-size: .625rem; + padding: .5rem .5rem .5rem 1rem; + } + + &[opened] { + left: 0rem; + } + + &[closed] { + left: -10rem; + } +} + +.view { + align-items: center; + display: flex; + flex-direction: column; + height: 100%; + justify-content: center; + padding: 0 1rem; + + &[home] { + [aki-button] { + font-size: 1.25rem; + letter-spacing: 0.009375em; + padding: .75rem 1.5rem; + } + + .tagline { + bottom: 4rem; + color: #fff; + position: absolute; + right: 4rem; + text-transform: uppercase; + + div { + font-size: 1.25rem; + text-align: right; + + &:first-child { + font-size: 3rem; + text-align: initial; + } + } + + @media (max-width: #{$bp-small}), + (max-height: 30rem) { + display: none; + } + } + } + + &[download] { + a { + font-size: 1rem; + } + } + + &[features] { + // Lazy mobile features view "fix" + // justify-content: flex-start; + + [aki-card] { + margin: 0 1rem 1.5rem; + max-width: 40rem; + + &:first-child { + margin-top: 1.5rem; + } + } + } + + &[community] { + a { + font-size: 1.25rem; + letter-spacing: 0.009375em; + margin-top: 1.5rem; + padding: .75rem 1.5rem; + } + } +} \ No newline at end of file diff --git a/assets/scss/utils/elevation.scss b/assets/scss/utils/elevation.scss new file mode 100644 index 0000000..f0f0372 --- /dev/null +++ b/assets/scss/utils/elevation.scss @@ -0,0 +1,25 @@ +$elevation-z0: 0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12); +$elevation-z1: 0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12); +$elevation-z2: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12); +$elevation-z3: 0 3px 3px -2px rgba(0,0,0,.2),0 3px 4px 0 rgba(0,0,0,.14),0 1px 8px 0 rgba(0,0,0,.12); +$elevation-z4: 0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12); +$elevation-z5: 0 3px 5px -1px rgba(0,0,0,.2),0 5px 8px 0 rgba(0,0,0,.14),0 1px 14px 0 rgba(0,0,0,.12); +$elevation-z6: 0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12); +$elevation-z7: 0 4px 5px -2px rgba(0,0,0,.2),0 7px 10px 1px rgba(0,0,0,.14),0 2px 16px 1px rgba(0,0,0,.12); +$elevation-z8: 0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12); +$elevation-z9: 0 5px 6px -3px rgba(0,0,0,.2),0 9px 12px 1px rgba(0,0,0,.14),0 3px 16px 2px rgba(0,0,0,.12); +$elevation-z10: 0 6px 6px -3px rgba(0,0,0,.2),0 10px 14px 1px rgba(0,0,0,.14),0 4px 18px 3px rgba(0,0,0,.12); +$elevation-z11: 0 6px 7px -4px rgba(0,0,0,.2),0 11px 15px 1px rgba(0,0,0,.14),0 4px 20px 3px rgba(0,0,0,.12); +$elevation-z12: 0 7px 8px -4px rgba(0,0,0,.2),0 12px 17px 2px rgba(0,0,0,.14),0 5px 22px 4px rgba(0,0,0,.12); +$elevation-z13: 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12); +$elevation-z14: 0 7px 9px -4px rgba(0,0,0,.2),0 14px 21px 2px rgba(0,0,0,.14),0 5px 26px 4px rgba(0,0,0,.12); +$elevation-z15: 0 8px 9px -5px rgba(0,0,0,.2),0 15px 22px 2px rgba(0,0,0,.14),0 6px 28px 5px rgba(0,0,0,.12); +$elevation-z16: 0 8px 10px -5px rgba(0,0,0,.2),0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12); +$elevation-z17: 0 8px 11px -5px rgba(0,0,0,.2),0 17px 26px 2px rgba(0,0,0,.14),0 6px 32px 5px rgba(0,0,0,.12); +$elevation-z18: 0 9px 11px -5px rgba(0,0,0,.2),0 18px 28px 2px rgba(0,0,0,.14),0 7px 34px 6px rgba(0,0,0,.12); +$elevation-z19: 0 9px 12px -6px rgba(0,0,0,.2),0 19px 29px 2px rgba(0,0,0,.14),0 7px 36px 6px rgba(0,0,0,.12); +$elevation-z20: 0 10px 13px -6px rgba(0,0,0,.2),0 20px 31px 3px rgba(0,0,0,.14),0 8px 38px 7px rgba(0,0,0,.12); +$elevation-z21: 0 10px 13px -6px rgba(0,0,0,.2),0 21px 33px 3px rgba(0,0,0,.14),0 8px 40px 7px rgba(0,0,0,.12); +$elevation-z22: 0 10px 14px -6px rgba(0,0,0,.2),0 22px 35px 3px rgba(0,0,0,.14),0 8px 42px 7px rgba(0,0,0,.12); +$elevation-z23: 0 11px 14px -7px rgba(0,0,0,.2),0 23px 36px 3px rgba(0,0,0,.14),0 9px 44px 8px rgba(0,0,0,.12); +$elevation-z24: 0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12); diff --git a/assets/scss/utils/theme.scss b/assets/scss/utils/theme.scss new file mode 100644 index 0000000..b9fcfb2 --- /dev/null +++ b/assets/scss/utils/theme.scss @@ -0,0 +1,35 @@ +@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Source+Sans+Pro:wght@400;700&display=swap'); + +$background: #fff; +$on-background: #000; + +$primary: #121212; +$on-primary: #fff; + +$secondary: #282828; +$on-secondary: #fff; + +$accent: #ffc107; +$on-accent: #000; + +$font-source-sans-pro: 'Source Sans Pro'; +$font-open-sans: 'Open Sans'; +$base-font-size: 16px; +$base-line-height: 1.5; + +$border-radius: .125rem; // for 16px base size = 2px border radius. + +// == Breakpoints +$bp-small: 48em; // 768px +$bp-medium: 64em; // 1024px +$bp-large: 85.375em; // 1366px +$bp-xlarge: 120em; // 1920px +$bp-xxlarge: 160em; // 2560px + +// == Media Queries +$mq-small: "(min-width: #{$bp-small})"; +$mq-medium: "(min-width: #{$bp-medium})"; +$mq-large: "(min-width: #{$bp-large})"; +$mq-xlarge: "(min-width: #{$bp-xlarge})"; +$mq-xxlarge: "(min-width: #{$bp-xxlarge})"; +$mq-retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; \ No newline at end of file diff --git a/assets/scss/utils/typography.scss b/assets/scss/utils/typography.scss new file mode 100644 index 0000000..026e855 --- /dev/null +++ b/assets/scss/utils/typography.scss @@ -0,0 +1,103 @@ +// == Typography +h1, +.headline-1, +.heading-1 { + font-size: 6rem; + font-weight: 300; + letter-spacing: -.015625em; + line-height: 6rem; +} + +h2, +.headline-2, +.heading-2 { + font-size: 3.75rem; + font-weight: 300; + letter-spacing: -.0083333333em; + line-height: 3.75rem; +} + +h3, +.headline-3, +.heading-3 { + font-size: 3rem; + font-weight: 400; + letter-spacing: normal; + line-height: 3.125rem; +} + +h4, +.headline-4, +.heading-4 { + font-size: 2.125rem; + font-weight: 400; + letter-spacing: .0073529412em; + line-height: 2.5rem; +} + +h5, +.headline-5, +.heading-5 { + font-size: 1.5rem; + font-weight: 400; + letter-spacing: normal; + line-height: 2rem; +} + +h6, +.headline-6, +.heading-6 { + font-size: 1.25rem; + font-weight: 500; + letter-spacing: .125em; + line-height: 2rem; +} + +.subtitle-1 { + font-size: 1rem; + font-weight: 400; + letter-spacing: .009375em; + line-height: 1.75rem; +} + +.subtitle-2 { + font-size: .875rem; + font-weight: 500; + letter-spacing: .0071428571em; + line-height: 1.375rem; +} + +.body-1 { + font-size: 1rem; + font-weight: 400; + letter-spacing: .03125em; + line-height: 1.5rem; +} + +.body-2 { + font-size: .875rem; + font-weight: 400; + letter-spacing: .0178571429em; + line-height: 1.25rem; +} + +.button { + font-size: .875rem; + font-weight: 500; + letter-spacing: .0892857143em; + line-height: 2.25rem; +} + +.caption { + font-size: .75rem; + font-weight: 400; + letter-spacing: .0333333333em; + line-height: 1.25rem; +} + +.overline { + font-size: .75rem; + font-weight: 500; + letter-spacing: .1666666667em; + line-height: 2rem; +} \ No newline at end of file diff --git a/assets/video/background.mp4 b/assets/video/background.mp4 new file mode 100644 index 0000000..0c26b4c Binary files /dev/null and b/assets/video/background.mp4 differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..6ed4a4e --- /dev/null +++ b/index.html @@ -0,0 +1,77 @@ + + + + + + + SPT-AKI + + + + +
+ + + + SPT-AKI + + + + + + +
+ +
+
+
+ +
+
+
+ +
+ +
+
+ + + +
+ Home + Download + Features + Community +
+ SPT-AKI is not affiliated with Battlestate Games Ltd. in any way. +
+ + + + + + + + + + + \ No newline at end of file diff --git a/info.html b/info.html new file mode 100644 index 0000000..e69de29 diff --git a/templates/community.html b/templates/community.html new file mode 100644 index 0000000..0755426 --- /dev/null +++ b/templates/community.html @@ -0,0 +1,15 @@ +
+
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porttitor diam sit amet sapien + porttitor, id ultricies lectus finibus. Vestibulum egestas nibh et neque fringilla pulvinar. Cras + bibendum gravida risus id convallis. +

+

+ Vestibulum lobortis tristique dolor, pretium iaculis erat + gravida in. Duis congue elementum justo. Aliquam nec porta odio. Donec turpis nulla, commodo id + consectetur vel, varius vel tellus. Nulla commodo eleifend sem non cursus. +

+
+ Join us on Guilded +
\ No newline at end of file diff --git a/templates/download.html b/templates/download.html new file mode 100644 index 0000000..776b95d --- /dev/null +++ b/templates/download.html @@ -0,0 +1,11 @@ +
+
+
Download SP-Tarkov
+
+

AKI for runtime 0.12.7.xxxx: Download

+
+

Project AKI will only provide support for its latest version.

+

When a new version of EFT is released, we'll update AKI as soon as possible. Please be patient.

+
+ +
\ No newline at end of file diff --git a/templates/features.html b/templates/features.html new file mode 100644 index 0000000..8b4d5d8 --- /dev/null +++ b/templates/features.html @@ -0,0 +1,29 @@ +
+
+
Lorem ipsum dolor sit amet
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit hendrerit + ultricies. Nulla iaculis convallis elit. Nullam imperdiet, eros nec posuere commodo, sapien dui auctor + risus, at vehicula lectus turpis ut orci. Sed placerat diam imperdiet, hendrerit mi at, tincidunt mauris. In + hendrerit mattis nisi ac fringilla. In vestibulum nibh justo. +
+
+ +
+
Aenean ultrices
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consequat eros vitae + convallis mollis. Sed ac mi vitae urna ultrices bibendum in ut turpis. Aenean ultrices orci eget quam dictum + maximus. Curabitur et odio vel felis eleifend volutpat eget id erat. Pellentesque ultrices, enim blandit + efficitur pulvinar, dolor. +
+
+ +
+
Proin porta ultricies
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta ultricies vestibulum. + Sed consequat tempor ligula, et lacinia nisl gravida blandit. In hac habitasse. +
+
+
\ No newline at end of file diff --git a/templates/home.html b/templates/home.html new file mode 100644 index 0000000..59f77a3 --- /dev/null +++ b/templates/home.html @@ -0,0 +1,8 @@ +
+ Get Started + +
+
Escaping From Online
+
And making it a true single player experience
+
+
\ No newline at end of file