spt/Website
spt/Website
2
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'master' of https://dev.offline-tarkov.com/SPT-AKI/website

Browse Source
This commit is contained in:
Sorata-Senpai 2020-11-28 13:20:24 +01:00
commit 7bee40e69a
15 changed files with 134 additions and 478 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
docs/assets/css/style.css
View File

@ -36,11 +36,7 @@ aki-card,
color: #fff; color: #fff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: 0.875rem; max-width: 60ch;
letter-spacing: 0.0178571429em;
line-height: 1.25rem;
font-family: "Open Sans", sans-serif;
max-width: calc(25rem - 3rem);
padding: 1.25rem 1.5rem; padding: 1.25rem 1.5rem;
} }
aki-card aki-card-title *.aki-card-title, aki-card aki-card-title *.aki-card-title,
@ -49,11 +45,8 @@ aki-card *[aki-card-title],
*.aki-card *[aki-card-title], *.aki-card *[aki-card-title],
*[aki-card] aki-card-title *.aki-card-title, *[aki-card] aki-card-title *.aki-card-title,
*[aki-card] *[aki-card-title] { *[aki-card] *[aki-card-title] {
font-family: "Source Sans Pro", sans-serif;
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.009375em;
line-height: 1.75rem;
margin-bottom: 1rem; margin-bottom: 1rem;
text-transform: uppercase; text-transform: uppercase;
} }
@ -205,41 +198,6 @@ header .right {
flex: 1 1 auto; flex: 1 1 auto;
justify-content: flex-end; justify-content: flex-end;
text-transform: uppercase; text-transform: uppercase;
/*
@media (max-width: 64em) {
&.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;
}
}
}
*/
} }
header .right .dropdown-button { header .right .dropdown-button {
display: none; display: none;

2
docs/assets/css/style.css.map
View File

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../scss/utils/theme.scss","../scss/style.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"],"names":[],"mappings":"AAAQ;ACSA;ACTR;AAAA;AAAA;EAGI,kBFQK;EEPL;EACA;EACA,YCJW;EDKX,OFKQ;EEJR;EACA;EACA;EACA;EACA;;AAGA;AAAA;AAAA;EACI;;AAGJ;AAAA;AAAA;EACI,YFfE;EEgBF,YCbO;EDcP,OFhBK;;;AINb;AAAA;AAAA;EAGI,YJEM;EIDN,YDHW;ECIX;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;AAAA;AAAA;EACI,YDrBO;;;AERf;AAAA;EAEI,YLIS;EKHT;EACA;EACA;;;ACLJ;AAAA;AAAA;EAGI;EACA,kBNCM;EMCN,YHFW;EGGX,ONDS;EMET;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACI,ONZK;EMaL;;AAGJ;AAAA;AAAA;EACI;EACA;;AAEA;AAAA;AAAA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACI;;AAGJ;AAAA;AAAA;EACI;;;AL1BhB;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;AAAA;AAAA;AAAA;AAAA;EAKI;EACA;EACA;EACA;;;AAGJ;EAEI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;AAAA;EAEI;;;AAOA;AAAA;AAAA;EAGI;EACA;EACA;EACA;;AAIA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EANJ;IAOQ;;;AAKZ;EACI;EACA;EACA;AAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AALA;EACI;;;AA2CZ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI,YD3JE;EC4JF,YE7JO;EF8JP,OD5JK;EC6JL;EACA;EACA;EACA;;AAEA;EACI;;AAEA;AAAA;EAEI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI,ODhLD;;ACkLC;EACI;;AAGJ;EACI,ODrLX;;AC2LO;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAIR;EACI;;AAIA;EACI;;AAIA;EACI;;AAQxB;EACI,YD/NI;ECgOJ,OD/NO;ECgOP;EACA;EACA;;AAEA;EAPJ;IAQQ;IACA;;;;AAKZ;EACI,OD1OK;EC2OL;;;AAWA;EACI;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;;AAGJ;AAAA;EAEI;;AAGJ;EACI,YA7BS;EA8BT,OA7BY;;AAgChB;EACI;;AAGJ;AAAA;EAEI,eDjRQ","file":"style.css"} {"version":3,"sourceRoot":"","sources":["../scss/utils/theme.scss","../scss/style.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"],"names":[],"mappings":"AAAQ;ACSA;ACTR;AAAA;AAAA;EAGI,kBFQK;EEPL;EACA;EACA,YCJW;EDKX,OFKQ;EEJR;EACA;EACA;EACA;EACA;;AAGA;AAAA;AAAA;EACI;;AAGJ;AAAA;AAAA;EACI,YFfE;EEgBF,YCbO;EDcP,OFhBK;;;AINb;AAAA;AAAA;EAGI,YJEM;EIDN,YDHW;ECIX;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGI;EACA;EACA;EACA;;AAGJ;AAAA;AAAA;EACI,YDdO;;;AERf;AAAA;EAEI,YLIS;EKHT;EACA;EACA;;;ACLJ;AAAA;AAAA;EAGI;EACA,kBNCM;EMCN,YHFW;EGGX,ONDS;EMET;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACI,ONZK;EMaL;;AAGJ;AAAA;AAAA;EACI;EACA;;AAEA;AAAA;AAAA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACI;;AAGJ;AAAA;AAAA;EACI;;;AL1BhB;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;AAAA;AAAA;AAAA;AAAA;EAKI;EACA;EACA;EACA;;;AAGJ;EAEI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;AAAA;EAEI;;;AAOA;AAAA;AAAA;EAGI;EACA;EACA;EACA;;AAIA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EANJ;IAOQ;;;AAKZ;EACI;EACA;EACA;;AAEA;EACI;;;AASZ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI,YDzHE;EC0HF,YE3HO;EF4HP,OD1HK;EC2HL;EACA;EACA;EACA;;AAEA;EACI;;AAEA;AAAA;EAEI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI,OD9ID;;ACgJC;EACI;;AAGJ;EACI,ODnJX;;ACyJO;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAIR;EACI;;AAIA;EACI;;AAIA;EACI;;AAQxB;EACI,YD7LI;EC8LJ,OD7LO;EC8LP;EACA;EACA;;AAEA;EAPJ;IAQQ;IACA;;;;AAKZ;EACI,ODxMK;ECyML;;;AAWA;EACI;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;;AAGJ;AAAA;EAEI;;AAGJ;EACI,YA7BS;EA8BT,OA7BY;;AAgChB;EACI;;AAGJ;AAAA;EAEI,eD/OQ","file":"style.css"}

BIN
docs/assets/img/spt-aki/setup/002.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

9
docs/assets/scss/components/aki-card.scss
View File

@ -7,21 +7,14 @@ aki-card,
color: $on-primary; color: $on-primary;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: .875rem; max-width: 60ch; // Ideal character count per row.
letter-spacing: .0178571429em;
line-height: 1.25rem;
font-family: $font-open-sans, sans-serif;
max-width: calc(25rem - 3rem);
padding: 1.25rem 1.5rem; padding: 1.25rem 1.5rem;
aki-card-title aki-card-title
*.aki-card-title, *.aki-card-title,
*[aki-card-title] { *[aki-card-title] {
font-family: $font-source-sans-pro, sans-serif;
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 700; font-weight: 700;
letter-spacing: .009375em;
line-height: 1.75rem;
margin-bottom: 1rem; margin-bottom: 1rem;
text-transform: uppercase; text-transform: uppercase;
} }

36
docs/assets/scss/style.scss
View File

@ -111,41 +111,7 @@ header {
} }
// TODO: Redo header media query (vertical res > 768px -> Dropdown or moved to sidenav toggle) // TODO: Redo header media query (vertical res > 768px -> Dropdown or moved to sidenav toggle)
/* // See www for reference on previous code.
@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;
}
}
}
*/
} }
} }

4
docs/assets/scss/utils/theme.scss
View File

@ -12,8 +12,8 @@ $on-secondary: #fff;
$accent: #ffc107; $accent: #ffc107;
$on-accent: #000; $on-accent: #000;
$font-source-sans-pro: 'Source Sans Pro'; // $font-source-sans-pro: 'Source Sans Pro';
$font-open-sans: 'Open Sans'; // $font-open-sans: 'Open Sans';
$base-font-size: 16px; $base-font-size: 16px;
$base-line-height: 1.5; $base-line-height: 1.5;

103
docs/assets/scss/utils/typography.scss
View File

@ -1,103 +0,0 @@
// == 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;
}

2
docs/md/getting_started/setup.md
View File

@ -19,7 +19,7 @@ To install SPT-AKI on your system you need the following:
![BSG Launcher](../assets/img/spt-aki/setup/001.png) ![BSG Launcher](../assets/img/spt-aki/setup/001.png)
* Go to the [SPT-AKI releases page](https://mods.sp-tarkov.com/files/category-file-list/58-releases/) and download the release compatible with that version. * Go to the [SPT-AKI releases page](https://mods.sp-tarkov.com/files/file/16-spt-aki) and download the release compatible with that version.
<!-- FIXME: use actual screenshot --> <!-- FIXME: use actual screenshot -->
![Release page with the matching version highlighted](../assets/img/spt-aki/setup/002.png) ![Release page with the matching version highlighted](../assets/img/spt-aki/setup/002.png)

200
www/assets/css/style.css
View File

@ -1,107 +1,5 @@
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&family=Source+Sans+Pro:wght@400;700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Open+Sans&family=Source+Sans+Pro:wght@400;700&display=swap");
h1, @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
.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], *[aki-button],
*.aki-button { *.aki-button {
@ -124,7 +22,7 @@ aki-button:hover:not(:active),
aki-button:active, aki-button:active,
*[aki-button]:active, *[aki-button]:active,
*.aki-button:active { *.aki-button:active {
background: #121212; background: #080808;
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); 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; color: #fff;
} }
@ -132,17 +30,13 @@ aki-button:active,
aki-card, aki-card,
*.aki-card, *.aki-card,
*[aki-card] { *[aki-card] {
background: #121212; background: #080808;
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); 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; border-radius: 0.125rem;
color: #fff; color: #fff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: 0.875rem; max-width: 60ch;
letter-spacing: 0.0178571429em;
line-height: 1.25rem;
font-family: "Open Sans", sans-serif;
max-width: calc(25rem - 3rem);
padding: 1.25rem 1.5rem; padding: 1.25rem 1.5rem;
} }
aki-card aki-card-title *.aki-card-title, aki-card aki-card-title *.aki-card-title,
@ -151,11 +45,8 @@ aki-card *[aki-card-title],
*.aki-card *[aki-card-title], *.aki-card *[aki-card-title],
*[aki-card] aki-card-title *.aki-card-title, *[aki-card] aki-card-title *.aki-card-title,
*[aki-card] *[aki-card-title] { *[aki-card] *[aki-card-title] {
font-family: "Source Sans Pro", sans-serif;
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.009375em;
line-height: 1.75rem;
margin-bottom: 1rem; margin-bottom: 1rem;
text-transform: uppercase; text-transform: uppercase;
} }
@ -177,7 +68,7 @@ aki-toolbar,
*[aki-toolbar], *[aki-toolbar],
*.aki-toolbar { *.aki-toolbar {
align-items: center; align-items: center;
background-color: #121212; background-color: #080808;
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); 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; color: #fff;
display: flex; display: flex;
@ -186,9 +77,8 @@ aki-toolbar,
justify-content: flex-start; justify-content: flex-start;
max-height: 5.5rem; max-height: 5.5rem;
min-width: 20rem; min-width: 20rem;
text-transform: uppercase;
width: 100%; width: 100%;
z-index: 1; z-index: 2;
} }
aki-toolbar a, aki-toolbar a,
*[aki-toolbar] a, *[aki-toolbar] a,
@ -205,7 +95,7 @@ aki-toolbar nav,
aki-toolbar nav a, aki-toolbar nav a,
*[aki-toolbar] nav a, *[aki-toolbar] nav a,
*.aki-toolbar nav a { *.aki-toolbar nav a {
border-bottom: 0.25rem solid #121212; border-bottom: 0.25rem solid #080808;
cursor: pointer; cursor: pointer;
padding: 1rem; padding: 1rem;
letter-spacing: 0.0178571429em; letter-spacing: 0.0178571429em;
@ -223,31 +113,62 @@ aki-toolbar nav a[active],
border-bottom: 0.25rem solid #ffc107; 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 { html {
font-family: "Source Sans Pro", sans-serif; font-size: 100%;
font-size: 16px;
} }
body { body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-family: "Roboto", sans-serif;
font-weight: 400;
height: 100vh; height: 100vh;
line-height: 1.75;
margin: 0; margin: 0;
padding: 0; padding: 0;
position: absolute;
width: 100vw; width: 100vw;
} }
p {
margin-bottom: 1rem;
}
h1,
h2,
h3,
h4,
h5 {
margin: 3rem 0 1.38rem;
font-family: "Roboto", sans-serif;
font-weight: 400;
line-height: 1.3;
}
h1 {
font-size: 4.209rem;
}
h2 {
font-size: 3.157rem;
}
h3 {
font-size: 2.369rem;
}
h4 {
font-size: 1.777rem;
}
h5 {
font-size: 1.333rem;
}
small,
.text_small {
font-size: 0.75rem;
}
header .left, header .left,
header .center, header .center,
header .right { header .right {
@ -256,6 +177,10 @@ header .right {
height: calc(100% - 2rem); height: calc(100% - 2rem);
padding: 1rem; padding: 1rem;
} }
header .center,
header .right {
text-transform: uppercase;
}
header .left .logo { header .left .logo {
display: block; display: block;
filter: invert(1); filter: invert(1);
@ -264,17 +189,10 @@ header .left .logo {
} }
header .left .title { header .left .title {
font-size: 1.75rem; font-size: 1.75rem;
font-weight: 700;
letter-spacing: 0.03125em; letter-spacing: 0.03125em;
margin-left: 1rem; 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) { @media (max-width: 48em) {
header .left .title { header .left .title {
margin-left: 0; margin-left: 0;
@ -323,7 +241,7 @@ header .right .dropdown-button {
overflow: hidden; overflow: hidden;
} }
header .right.dropdown:hover .dropdown-content { header .right.dropdown:hover .dropdown-content {
background: #121212; background: #080808;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -363,7 +281,7 @@ main .bg-video {
z-index: -99; z-index: -99;
} }
main .bg-video .wrapper { main .bg-video .wrapper {
background-color: #282828; background-color: #1f1f1f;
height: 100%; height: 100%;
width: 100%; width: 100%;
z-index: -98; z-index: -98;
@ -455,7 +373,7 @@ div[overlay-menu-content][closed] {
.view[home] [aki-button] { .view[home] [aki-button] {
font-size: 1.25rem; font-size: 1.25rem;
letter-spacing: 0.009375em; letter-spacing: 0.009375em;
padding: 0.75rem 1.5rem; padding: 0.5rem 1.25rem;
} }
.view[home] .tagline { .view[home] .tagline {
bottom: 4rem; bottom: 4rem;

2
www/assets/css/style.css.map
View File

@ -1 +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"} {"version":3,"sourceRoot":"","sources":["../scss/utils/theme.scss","../scss/style.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"],"names":[],"mappings":"AAAQ;ACSA;ACTR;AAAA;AAAA;EAGI,kBFQK;EEPL;EACA;EACA,YCJW;EDKX,OFKQ;EEJR;EACA;EACA;EACA;EACA;;AAGA;AAAA;AAAA;EACI;;AAGJ;AAAA;AAAA;EACI,YFfE;EEgBF,YCbO;EDcP,OFhBK;;;AINb;AAAA;AAAA;EAGI,YJEM;EIDN,YDHW;ECIX;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGI;EACA;EACA;EACA;;AAGJ;AAAA;AAAA;EACI,YDdO;;;AERf;AAAA;EAEI,YLIS;EKHT;EACA;EACA;;;ACLJ;AAAA;AAAA;EAGI;EACA,kBNCM;EMCN,YHFW;EGGX,ONDS;EMET;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACI,ONZK;EMaL;;AAGJ;AAAA;AAAA;EACI;EACA;;AAEA;AAAA;AAAA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACI;;AAGJ;AAAA;AAAA;EACI;;;AL1BhB;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;AAAA;AAAA;AAAA;AAAA;EAKI;EACA;EACA;EACA;;;AAGJ;EAEI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;AAAA;EAEI;;;AAOA;AAAA;AAAA;EAGI;EACA;EACA;EACA;;AAGJ;AAAA;EAEI;;AAIA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EANJ;IAOQ;;;AAIR;EAnBJ;IAoBQ;IACA;IACA;;;AAIR;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAIR;EAlBJ;IAmBQ;IACA;;;AAKJ;EACI;;AAGJ;EACI;IACI;IACA;IACA;IACA;IACA;IAEA;IACA;;EAEA;IAEI,YDvJV;ICwJU;IACA;IACA;IACA;IACA;IACA;;EAGJ;IACI;;EAGJ;IACI;IACA;IACA;;;AAKZ;EAvCJ;IAwCQ;;;;AAKZ;EACI;EACA;EACA;EACA;;AAEA;EACI,kBD5LK;EC6LL;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI,kBDhMA;ECiMA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EATJ;IAUQ;;;;AAIR;EACI,OD7OK;EC8OL;;;AAGJ;EACI,kBDlPK;ECmPL;EACA,YE/OY;EFgPZ,ODpPQ;ECqPR;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;EACA;EACA;;AAIJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAIR;EAjBJ;IAmBQ;;;AAMR;EACI;;AAQJ;EACI;EACA;;AAEA;EACI;;AAMR;EACI;EACA;EACA;EACA","file":"style.css"}

9
www/assets/scss/components/aki-card.scss
View File

@ -7,21 +7,14 @@ aki-card,
color: $on-primary; color: $on-primary;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: .875rem; max-width: 60ch; // Ideal character count per row.
letter-spacing: .0178571429em;
line-height: 1.25rem;
font-family: $font-open-sans, sans-serif;
max-width: calc(25rem - 3rem);
padding: 1.25rem 1.5rem; padding: 1.25rem 1.5rem;
aki-card-title aki-card-title
*.aki-card-title, *.aki-card-title,
*[aki-card-title] { *[aki-card-title] {
font-family: $font-source-sans-pro, sans-serif;
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 700; font-weight: 700;
letter-spacing: .009375em;
line-height: 1.75rem;
margin-bottom: 1rem; margin-bottom: 1rem;
text-transform: uppercase; text-transform: uppercase;
} }

9
www/assets/scss/components/aki-toolbar.scss
View File

@ -12,9 +12,8 @@ aki-toolbar,
justify-content: flex-start; justify-content: flex-start;
max-height: 5.5rem; max-height: 5.5rem;
min-width: 20rem; min-width: 20rem;
text-transform: uppercase;
width: 100%; width: 100%;
z-index: 1; z-index: 2;
a { a {
color: $on-primary; color: $on-primary;
@ -32,14 +31,14 @@ aki-toolbar,
letter-spacing: .0178571429em; letter-spacing: .0178571429em;
line-height: 1.25rem; line-height: 1.25rem;
transition: .25s ease-in-out; transition: .25s ease-in-out;
&:hover { &:hover {
filter: invert(.2); filter: invert(.2);
} }
&[active] { &[active] {
border-bottom: .25rem solid $accent; border-bottom: .25rem solid $accent;
} }
} }
} }
} }

81
www/assets/scss/style.scss
View File

@ -1,37 +1,75 @@
@import './utils/theme.scss'; @import './utils/theme.scss';
@import './utils/elevation.scss'; @import './utils/elevation.scss';
@import './utils/typography.scss'; // @import './utils/typography.scss';
@import './components/aki-button.scss'; @import './components/aki-button.scss';
@import './components/aki-card.scss'; @import './components/aki-card.scss';
@import './components/aki-divider.scss'; @import './components/aki-divider.scss';
@import './components/aki-toolbar.scss'; @import './components/aki-toolbar.scss';
.text1 { @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}
.text2 { // TODO: Media queries for smaller screens and devices.
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
}
html { html {
font-family: 'Source Sans Pro', sans-serif; font-size: 100%; // 16px
font-size: $base-font-size;
} }
body { body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-family: 'Roboto', sans-serif;
font-weight: 400;
height: 100vh; height: 100vh;
line-height: 1.75;
margin: 0; margin: 0;
padding: 0; padding: 0;
position: absolute;
width: 100vw; width: 100vw;
} }
p {
margin-bottom: 1rem;
}
h1,
h2,
h3,
h4,
h5 {
margin: 3rem 0 1.38rem;
font-family: 'Roboto', sans-serif;
font-weight: 400;
line-height: 1.3;
}
h1 {
// margin-top: 0;
font-size: 4.209rem;
}
h2 {
font-size: 3.157rem;
}
h3 {
font-size: 2.369rem;
}
h4 {
font-size: 1.777rem;
}
h5 {
font-size: 1.333rem;
}
small,
.text_small {
font-size: 0.75rem;
}
// --------
header { header {
.left, .left,
@ -43,6 +81,11 @@ header {
padding: 1rem; padding: 1rem;
} }
.center,
.right {
text-transform: uppercase;
}
.left { .left {
.logo { .logo {
display: block; display: block;
@ -53,19 +96,10 @@ header {
.title { .title {
font-size: 1.75rem; font-size: 1.75rem;
font-weight: 700;
letter-spacing: .03125em; letter-spacing: .03125em;
margin-left: 1rem; margin-left: 1rem;
span:last-child {
margin-left: .5rem;
}
@media (max-width: #{$bp-medium}) {
span:first-child {
display: none;
}
}
@media (max-width: #{$bp-small}) { @media (max-width: #{$bp-small}) {
margin-left: 0; margin-left: 0;
} }
@ -266,7 +300,8 @@ div[overlay-menu-content] {
[aki-button] { [aki-button] {
font-size: 1.25rem; font-size: 1.25rem;
letter-spacing: 0.009375em; letter-spacing: 0.009375em;
padding: .75rem 1.5rem; padding: .5rem 1.25rem;
// text-transform: uppercase;
} }
.tagline { .tagline {

8
www/assets/scss/utils/theme.scss
View File

@ -3,17 +3,17 @@
$background: #fff; $background: #fff;
$on-background: #000; $on-background: #000;
$primary: #121212; $primary: #080808;
$on-primary: #fff; $on-primary: #fff;
$secondary: #282828; $secondary: #1f1f1f;
$on-secondary: #fff; $on-secondary: #fff;
$accent: #ffc107; $accent: #ffc107;
$on-accent: #000; $on-accent: #000;
$font-source-sans-pro: 'Source Sans Pro'; // $font-source-sans-pro: 'Source Sans Pro';
$font-open-sans: 'Open Sans'; // $font-open-sans: 'Open Sans';
$base-font-size: 16px; $base-font-size: 16px;
$base-line-height: 1.5; $base-line-height: 1.5;

103
www/assets/scss/utils/typography.scss
View File

@ -1,103 +0,0 @@
// == 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;
}