Repository: Mojang/web-theme-bootstrap
Branch: main
Commit: 92d9913110cf
Files: 59
Total size: 88.7 KB

Directory structure:
gitextract_eeowqg_t/

├── .gitignore
├── .travis.yml
├── LICENSE
├── README.md
├── assets/
│   └── fonts/
│       ├── LICENSE_OFL.txt
│       ├── Minecraft-Seven_v2.otf
│       ├── MinecraftFive-Bold.css
│       ├── MinecraftFive-Bold.html
│       ├── MinecraftFive-Regular.css
│       ├── MinecraftFive-Regular.html
│       ├── MinecraftSeven.css
│       ├── MinecraftSeven.html
│       ├── MinecraftTen.css
│       ├── MinecraftTen.html
│       ├── NotoSans-Bold.css
│       ├── NotoSans-Bold.html
│       ├── NotoSans-BoldItalic.css
│       ├── NotoSans-BoldItalic.html
│       ├── NotoSans-Italic.css
│       ├── NotoSans-Italic.html
│       ├── NotoSans-Regular.css
│       └── NotoSans-Regular.html
├── package.json
└── scss/
    ├── abstract/
    │   ├── _colors.scss
    │   ├── _columns.scss
    │   ├── _extendables.scss
    │   ├── _keyframes.scss
    │   ├── _mixins.scss
    │   ├── _theme.scss
    │   ├── _transitions.scss
    │   ├── _utilities.scss
    │   └── _variables.scss
    ├── base/
    │   ├── _background.scss
    │   └── _typography.scss
    ├── components/
    │   ├── _alert.scss
    │   ├── _animations.scss
    │   ├── _area-overlay.scss
    │   ├── _attribution.scss
    │   ├── _borders.scss
    │   ├── _buttons.scss
    │   ├── _card.scss
    │   ├── _checkbox.scss
    │   ├── _close.scss
    │   ├── _countdown.scss
    │   ├── _counter.scss
    │   ├── _footer.scss
    │   ├── _forms.scss
    │   ├── _icons.scss
    │   ├── _links.scss
    │   ├── _loader.scss
    │   ├── _logo.scss
    │   ├── _modal.scss
    │   ├── _navbar.scss
    │   ├── _page-section.scss
    │   ├── _progress.scss
    │   ├── _radio.scss
    │   ├── _ribbons.scss
    │   └── _tiles.scss
    └── styles.scss

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
node_modules
.idea

================================================
FILE: .travis.yml
================================================
language: node_js
sudo: false


================================================
FILE: LICENSE
================================================
Copyright (c) 2020 Mojang Studios

All image assets of this project are copyrighted by Mojang Studios and may not be used
outside this project without permission by Mojang Studios.

MIT License

Copyright (c) 2020 Mojang Studios

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: README.md
================================================
# web-theme-bootstrap

[![Build Status](https://travis-ci.org/Mojang/web-theme-bootstrap.svg?branch=main)](https://travis-ci.org/Mojang/web-theme-bootstrap)

Contains the theme used on minecraft.net based on Bootstrap 4

## Install

```cli
> npm i @mojang/web-theme-bootstrap --save
```

## Included in the package

This package includes two parts:

### 1. SCSS files needed to generate your minecraft.net look and feel.

These files can be found under the scss folder. In your main scss file, include the following to get started:

```scss
$freyja-asset-path: "[path_to_public_folder]";
$master-head-height-lg: 112px;
$master-head-height-md: 87px;
$global-menu-height: 27px;

@import "~@mojang/web-theme-bootstrap/scss/styles";
```

Note that the theme takes care of including bootstrap the way it needs to be included so you do not need to @import it yourself.

### 2. Generic image assets used in several places, including an icon-set

In order to use the image assets and svg icons included in this package you need to have a build step in your build that copies the image assets to your public folder.

The svg icons also needs to be converted into a [svg-sprite](https://css-tricks.com/svg-sprites-use-better-icon-fonts/) using [svgstore](https://github.com/svgstore/svgstore) or similar tool.

### Changelog

v7.3.0 & v7.3.1
- Added fonts: Minecraft Ten V2 & Minecraft Seven V2

v7.0.0
- Update Minecraft, Minecraft Java, Realms & Minecraft Dungeons logos


v6.7.0
- Added new class `.form-tooltip`, `form-tooltip-text` 
- Added svg `line-vector-export` and `line-vector-help` followed naming convention.
- Removed svg `vector`

v6.6.0
- Added media query `@media (forced-colors: active)` for `.form-control:focus`
- Added new class `.required:after`
- Added svg `vector`


v6.5.0
- Add a new footer option. `mojang-studios-tall-footer`

v6.4.0
- Added Minecraft Core Brand Logo
  
v6.3.1
- Fixes README Changelog

v6.3.0
- New primary color (buttons & links are based out of primary). New secondary and tertiary colors. Loader now uses tertiary colors on dark backgrounds. 

v6.2.10
  - Add Minecraft Java Edition Logo

v6.2.9
  - Remove use of `bg-variant` and `text-emphasis-variant` mixins, that are deprecated in bootstrap@4.4.0

v6.2.8
- High contrast fix for button

v6.2.7
- Add box-shadow for disabled button
- High contrast fix for nav bar

v6.2.6
- Rerelease due to publish issue of 6.2.5

v6.2.5
- Add highlight color on focus for link button

v6.2.4
- Add style for radio and link button on high contrast mode
- Add noto sans font assets

v6.2.3
- Fix duplicate id in svg and add button high contrast style

v6.2.2
- Fix radio buttons in high contrast mode

v6.2.1
- Add radio button high contrast style

v6.2.0
- Add Minecraft Dungeons Launcher icons

v6.1.0
- Add `.icon-cero-a`

v6.0.0
**BREAKING CHANGE**
- Rename following classes:
    * `mojang-footer` -> `mojang-studios-footer`
    * `icon-microsoft-studios` -> `icon-xbox-game-studios`
    * `icon-mojang` -> `icon-mojang-studios`

v5.1.0
- Add cero-a logo

v5.0.0

**BREAKING CHANGE**

- Replace logo svgs:
    * `mojang` with `mojang-studios-horizontal`
    * `mono-mojang` with `mono-mojang-studios-horizontal`


v4.5.0

- Add xbox game studios color logo

v4.4.0

- Add `font-mc-seven`

v4.3.1

- Fix cart icon size

v4.3.0

- Add pixelated cart icon

v4.2.0

- Add Windows logo
- Add new Minecraft Dungeons color

v4.1.0

- Add Minecraft Dungeons logo back

v4.0.0

- Remove Minecraft Dungeons logo

v3.3.1

- Namespace Minecraft Dungeons logo ids

v3.3.0

- Add Minecraft Dungeons logo

v3.2.0

- Darken link color 5%
- Add support for disabled radio button
- Add new checkbox

v3.1.1

- Set link color to primary (was `$primary-supportive`)

v3.1.0

- Update inverted link hover color
- Update `dropdown-menu` style
- Add Xbox Game Studios logo

v3.0.0

- Update primary and tertiary color
- **BREAKING CHANGE**: Remove `$primary-light-1`, `$primary-light-2`, `$primary-dark-1`, `$primary-dark-2`. Use `$primary-supportive` for dark and `$tertiary` for light.

v2.0.0

- Fix position of inline icons
- Add 4 new monochrome SVG logos
- Add a `.svg-logo` class that makes you able to control color through css
- **BREAKING CHANGE**: `#microsoft` and `#mojang` logos now inherit their text color from `currentColor`. Use `.svg-logo` class and set text color to override.


================================================
FILE: assets/fonts/LICENSE_OFL.txt
================================================
This Font Software is licensed under the SIL Open Font License,
Version 1.1.

This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL

-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------

PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font
creation efforts of academic and linguistic communities, and to
provide a free and open framework in which fonts may be shared and
improved in partnership with others.

The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply to
any document created using the fonts or their derivatives.

DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.

"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).

"Original Version" refers to the collection of Font Software
components as distributed by the Copyright Holder(s).

"Modified Version" refers to any derivative made by adding to,
deleting, or substituting -- in part or in whole -- any of the
components of the Original Version, by changing formats or by porting
the Font Software to a new environment.

"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.

PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed,
modify, redistribute, and sell modified and unmodified copies of the
Font Software, subject to the following conditions:

1) Neither the Font Software nor any of its individual components, in
Original or Modified Versions, may be sold by itself.

2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.

3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the
corresponding Copyright Holder. This restriction only applies to the
primary font name as presented to the users.

4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.

5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created using
the Font Software.

TERMINATION
This license becomes null and void if any of the above conditions are
not met.

DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.


================================================
FILE: assets/fonts/MinecraftFive-Bold.css
================================================
/* Webfont: MinecraftFive-Bold */@font-face {
    font-family: 'MinecraftFive';
    src: url('MinecraftFive-Bold.eot'); /* IE9 Compat Modes */
    src: url('MinecraftFive-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('MinecraftFive-Bold.woff') format('woff'), /* Modern Browsers */
         url('MinecraftFive-Bold.ttf') format('truetype'), /* Safari, Android, iOS */
         url('MinecraftFive-Bold.svg#MinecraftFive-Bold') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: bold;
    text-rendering: optimizeLegibility;
}



================================================
FILE: assets/fonts/MinecraftFive-Bold.html
================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta content="en-us" http-equiv="Content-Language"/>
<title>Minecraft Five Bold - Web Font Specimen</title>
<link rel="stylesheet" type="text/css" media="screen" href="MinecraftFive-Bold.css" />
<style type="text/css" media="screen">
body { font-size: 42px; font-family: "MinecraftFive", Georgia; }
</style>
</head>
<body>
<p contenteditable="true"><strong>The quick brown fox jumps over the lazy dog. $123.45!</strong></p>
</body>
</html>


================================================
FILE: assets/fonts/MinecraftFive-Regular.css
================================================
/* Webfont: MinecraftFive-Regular */@font-face {
    font-family: 'MinecraftFive';
    src: url('MinecraftFive-Regular.eot'); /* IE9 Compat Modes */
    src: url('MinecraftFive-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('MinecraftFive-Regular.woff') format('woff'), /* Modern Browsers */
         url('MinecraftFive-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('MinecraftFive-Regular.svg#MinecraftFive-Regular') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}



================================================
FILE: assets/fonts/MinecraftFive-Regular.html
================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta content="en-us" http-equiv="Content-Language"/>
<title>Minecraft Five Regular - Web Font Specimen</title>
<link rel="stylesheet" type="text/css" media="screen" href="MinecraftFive-Regular.css" />
<style type="text/css" media="screen">
body { font-size: 42px; font-family: "MinecraftFive", Georgia; }
</style>
</head>
<body>
<p contenteditable="true">The quick brown fox jumps over the lazy dog. $123.45!</p>
</body>
</html>


================================================
FILE: assets/fonts/MinecraftSeven.css
================================================
/* Webfont: MinecraftSeven */@font-face {
    font-family: 'MinecraftSeven';
    src: url('MinecraftSeven.eot'); /* IE9 Compat Modes */
    src: url('MinecraftSeven.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('MinecraftSeven.woff') format('woff'), /* Modern Browsers */
         url('MinecraftSeven.ttf') format('truetype'), /* Safari, Android, iOS */
         url('MinecraftSeven.svg#MinecraftSeven') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}



================================================
FILE: assets/fonts/MinecraftSeven.html
================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta content="en-us" http-equiv="Content-Language"/>
<title>Minecraft Seven - Web Font Specimen</title>
<link rel="stylesheet" type="text/css" media="screen" href="MinecraftSeven.css" />
<style type="text/css" media="screen">
body { font-size: 42px; font-family: "MinecraftSeven", Georgia; }
</style>
</head>
<body>
<p contenteditable="true">The quick brown fox jumps over the lazy dog. $123.45!</p>
</body>
</html>


================================================
FILE: assets/fonts/MinecraftTen.css
================================================
/* Webfont: MinecraftTen */@font-face {
    font-family: 'MinecraftTen';
    src: url('MinecraftTen.eot'); /* IE9 Compat Modes */
    src: url('MinecraftTen.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('MinecraftTen.woff') format('woff'), /* Modern Browsers */
         url('MinecraftTen.ttf') format('truetype'), /* Safari, Android, iOS */
         url('MinecraftTen.svg#MinecraftTen') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}



================================================
FILE: assets/fonts/MinecraftTen.html
================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta content="en-us" http-equiv="Content-Language"/>
<title>Minecraft Ten  - Web Font Specimen</title>
<link rel="stylesheet" type="text/css" media="screen" href="MinecraftTen.css" />
<style type="text/css" media="screen">
body { font-size: 42px; font-family: "MinecraftTen", Georgia; }
</style>
</head>
<body>
<p contenteditable="true">The quick brown fox jumps over the lazy dog. $123.45!</p>
</body>
</html>


================================================
FILE: assets/fonts/NotoSans-Bold.css
================================================
/* Webfont: NotoSans-Bold */@font-face {
  font-family: 'Noto Sans';
  src: url('NotoSans-Bold.eot'); /* IE9 Compat Modes */
  src: local('Noto Sans Bold'), local('NotoSans-Bold'), /* locally installed */
       url('NotoSans-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('NotoSans-Bold.woff2') format('woff2'), /* Modern Browsers */
       url('NotoSans-Bold.woff') format('woff'), /* IE9-IE11 */
       url('NotoSans-Bold.ttf') format('truetype'), /* Safari, Android, iOS */
       url('NotoSans-Bold.svg#NotoSans-Bold') format('svg'); /* Legacy iOS */
  font-style: normal;
  font-weight: bold;
  text-rendering: optimizeLegibility;
}


================================================
FILE: assets/fonts/NotoSans-Bold.html
================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta content="en-us" http-equiv="Content-Language"/>
<title>Noto Sans Bold - Web Font Specimen</title>
<link rel="stylesheet" type="text/css" media="screen" href="NotoSans-Bold.css" />
<style type="text/css" media="screen">
body { font-size: 42px; font-family: "Noto Sans", Georgia; font-weight: bold; }
</style>
</head>
<body>
<p contenteditable="true"><strong>The quick brown fox jumps over the lazy dog. $123.45!</strong></p>
</body>
</html>


================================================
FILE: assets/fonts/NotoSans-BoldItalic.css
================================================
/* Webfont: NotoSans-BoldItalic */@font-face {
  font-family: 'Noto Sans';
  src: url('NotoSans-BoldItalic.eot'); /* IE9 Compat Modes */
  src: local('Noto Sans Bold Italic'), local('NotoSans-BoldItalic'), /* locally installed */
       url('NotoSans-BoldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('NotoSans-BoldItalic.woff2') format('woff2'), /* Modern Browsers */
       url('NotoSans-BoldItalic.woff') format('woff'), /* IE9-IE11 */
       url('NotoSans-BoldItalic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('NotoSans-BoldItalic.svg#NotoSans-BoldItalic') format('svg'); /* Legacy iOS */
  font-style: italic;
  font-weight: bold;
  text-rendering: optimizeLegibility;
}


================================================
FILE: assets/fonts/NotoSans-BoldItalic.html
================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta content="en-us" http-equiv="Content-Language"/>
<title>Noto Sans Bold Italic - Web Font Specimen</title>
<link rel="stylesheet" type="text/css" media="screen" href="NotoSans-BoldItalic.css" />
<style type="text/css" media="screen">
body { font-size: 42px; font-family: "Noto Sans", Georgia; font-weight: bold; font-style: italic; }
</style>
</head>
<body>
<p contenteditable="true"><strong>The quick brown fox jumps over the lazy dog. $123.45!</strong></p>
</body>
</html>


================================================
FILE: assets/fonts/NotoSans-Italic.css
================================================
/* Webfont: NotoSans-Italic */@font-face {
  font-family: 'Noto Sans';
  src: url('NotoSans-Italic.eot'); /* IE9 Compat Modes */
  src: local('Noto Sans Italic'), local('NotoSans-Italic'), /* locally installed */
       url('NotoSans-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('NotoSans-Italic.woff2') format('woff2'), /* Modern Browsers */
       url('NotoSans-Italic.woff') format('woff'), /* IE9-IE11 */
       url('NotoSans-Italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('NotoSans-Italic.svg#NotoSans-Italic') format('svg'); /* Legacy iOS */
  font-style: italic;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}


================================================
FILE: assets/fonts/NotoSans-Italic.html
================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta content="en-us" http-equiv="Content-Language"/>
<title>Noto Sans Italic - Web Font Specimen</title>
<link rel="stylesheet" type="text/css" media="screen" href="NotoSans-Italic.css" />
<style type="text/css" media="screen">
body { font-size: 42px; font-family: "Noto Sans", Georgia; font-style: italic; }
</style>
</head>
<body>
<p contenteditable="true"><strong>The quick brown fox jumps over the lazy dog. $123.45!</strong></p>
</body>
</html>


================================================
FILE: assets/fonts/NotoSans-Regular.css
================================================
/* Webfont: NotoSans-Regular */@font-face {
  font-family: 'Noto Sans';
  src: url('NotoSans-Regular.eot'); /* IE9 Compat Modes */
  src: local('Noto Sans'), local('NotoSans'), /* locally installed */
       url('NotoSans-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('NotoSans-Regular.woff2') format('woff2'), /* Modern Browsers */
       url('NotoSans-Regular.woff') format('woff'), /* IE9-IE11 */
       url('NotoSans-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('NotoSans-Regular.svg#NotoSans-Regular') format('svg'); /* Legacy iOS */
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}


================================================
FILE: assets/fonts/NotoSans-Regular.html
================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta content="en-us" http-equiv="Content-Language"/>
<title>Noto Sans - Web Font Specimen</title>
<link rel="stylesheet" type="text/css" media="screen" href="NotoSans-Regular.css" />
<style type="text/css" media="screen">
body { font-size: 42px; font-family: "Noto Sans", Georgia; }
</style>
</head>
<body>
<p contenteditable="true"><strong>The quick brown fox jumps over the lazy dog. $123.45!</strong></p>
</body>
</html>


================================================
FILE: package.json
================================================
{
  "name": "@mojang/web-theme-bootstrap",
  "version": "7.3.1",
  "description": "Contains the theme used on minecraft.net based on Boostrap 4",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Mojang/web-theme-bootstrap.git"
  },
  "author": "",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/Mojang/web-theme-bootstrap/issues"
  },
  "homepage": "https://github.com/Mojang/web-theme-bootstrap#readme",
  "dependencies": {
    "bootstrap": "^4.3.1",
    "jquery": "^3.4.1",
    "popper.js": "^1.14.7"
  }
}


================================================
FILE: scss/abstract/_colors.scss
================================================
// Colors are named by this site:
// http://chir.ag/projects/name-that-color/

// Colors
$fun-green: #3c8527; // Primary
$malachite: #a0e080; // Tertiary
$mud: #996a41; // Quaternary
$dirt: #5a381e; // Quinary

// Grays
$shark: #1d1e1e;
$soil: #313131; // Senary
$tundora: #404040;
$scorpion: #5a5a5a;
$gravel: #757575; // Secondary
$dusty-gray: #949494;

// Supportive Colors
$fun-green-supportive: darken($fun-green, 11.64%);
$malachite-supportive: darken($malachite, 10%);

$mud-supportive: darken($mud, 10%);
$dirt-supportive: darken($dirt, 10%);

$soil-supportive: darken($soil, 10%);
$gravel-supportive: darken($gravel, 10%);

// Grays
$white: #fff;
$hint-of-red: #f8f5f4;
$ebb: #f1edec;
$cloud: #d1cfce;
$boulder: #777; // can use secondary instead
$black: #000;

// Secondary Colors

// Beige
$sandstone: #bcad69;

// Browns
$brown: #866136;

// Red
$red: #ac2015;

// Yellow
$yellow: #e6b40b;
$golden-tainoi: #FFCB56;

// Orange
$orange: #d4441a;
$light-orange: #e67834;
$brick: #be583f;

// Greens
$grass: #36b030; // Old primary (don't use)
$spring-grass: #84c94c; // Old tertiary (don't use)
$bright-green: #64fd1f;
$harlequin: #47d009;
$japanese-laurel: #1e8c03;
$japanese-laurel-dark: #156c00;
$green: $fun-green;

$olive: #787a26;
$forest-green: #5b813f;

// Cyan
$turquoise: #14837f;
$eucalyptus: #299b6e;
$cyan: #2ab8a6;

// Light blue
$light-blue: #5caee0;

// Blue
$blue : #1546c2;

// Purples
$purple: #7824c5;
$daisy-bush: #5526ac;
$jacarta: #3b2661;
$meteorite: #35196b;

// Magenta
$magenta: #c93a9b;

// Pink
$pink: #ff51c9; //minecon pink

$colors: (
  "olive":        $olive,
  "beige":        $sandstone,
  "brown":        $brown,
  "red":          $red,
  "orange":       $orange,
  "brick":        $brick,
  "yellow":       $yellow,
  "green":        $green,
  "forest-green": $forest-green,
  "turquoise":    $turquoise,
  "cyan":         $cyan,
  "light-blue":   $light-blue,
  "blue":         $blue,
  "purple":       $purple,
  "magenta":      $magenta,
  "pink":         $pink,
  "white":        $white,
  "gray":         $dusty-gray,
  "gray-dark":    $tundora
);

$dungeons-colors: (
  "orange": $light-orange,
  "eucalyptus": $eucalyptus,
  "golden-tainoi": $golden-tainoi
);


================================================
FILE: scss/abstract/_columns.scss
================================================
@mixin columns($columns, $min-size) {
  $min-width: map_get($grid-breakpoints, $min-size);

  @media screen and (min-width: $min-width) {
    @for $i from 1 through $columns {
      .columns-#{$min-size}-#{$i} {
        column-count: $i;
      }
    }
  }
}

@mixin column-gaps ($min, $max) {
  @for $i from $min through $max {
    .column-gap-#{$i}em {
      column-gap: #{$i}em;
    }
  }
}

@include columns(6, xs);
@include columns(6, sm);
@include columns(6, md);
@include columns(6, lg);
@include columns(6, xl);
@include column-gaps(3, 6);

.break-inside-avoid {
  -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
  page-break-inside: avoid; /* Firefox */
  break-inside: avoid; /* IE 10+ */

  // Fix for aligning margins when using multi-columns
  &::before {
    content: '';
    display: block;
    height: 1px;
  }
}


================================================
FILE: scss/abstract/_extendables.scss
================================================
%force-layer-creation {
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

%animation-scale--0-to-1 {
  animation: scale-0-to-1 0.5s;
}

%attributed-quote-glyph {
  $icon-width: 32px;
  $icon-height: 32px;
  $icon-spacing: 6px;

  content: '';
  display: block;
  box-sizing: content-box;
  position: absolute;
  background-repeat: no-repeat;
  background-color: $body-bg;
  background-size: $icon-width $icon-height, auto;
  background-position: center;
  width: $icon-width + $icon-spacing;
  height: $icon-height + $icon-spacing;
  padding: 0 4px;
}

%antialiasing {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


================================================
FILE: scss/abstract/_keyframes.scss
================================================
// Flicker
@keyframes flicker-opacity {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

// Floating
@keyframes floating-vertical {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translate3d(0, -10px, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes floating-circular {
  from {
    transform: rotate(0deg) translateX(5px) rotate(0deg);
  }

  to {
    transform: rotate(360deg) translateX(5px) rotate(-360deg);
  }
}

// Bounce
@keyframes bounce-right {
  0%,
  5%,
  35%,
  60%,
  100% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-100%, 0);
  }

  45% {
    transform: translate(-75%, 0);
  }
}

@keyframes bounce-left {
  0%,
  5%,
  35%,
  60%,
  100% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(100%, 0);
  }

  45% {
    transform: translate(75%, 0);
  }
}

@keyframes bounce-down {
  0%,
  5%,
  35%,
  60%,
  100% {
    transform: translateY(0);
  }

  25% {
    transform: translateY(-8px);
  }

  45% {
    transform: translateY(-4px);
  }
}

@keyframes bounce-up {
  0%,
  5%,
  35%,
  60%,
  100% {
    transform: translateY(0);
  }

  25% {
    transform: translateY(8px);
  }

  45% {
    transform: translateY(4px);
  }
}

// Drop series
@keyframes drop2 {
  0% {
    transform: translateY(-50px);
  }

  25%,
  100% {
    transform: translate(0);
  }
}

@keyframes drop3 {
  0% {
    transform: translateY(-50px);
  }

  50%,
  100% {
    transform: translate(0);
  }
}

@keyframes drop4 {
  0% {
    transform: translateY(-50px);
  }

  75%,
  100% {
    transform: translate(0);
  }
}

// Scale
@keyframes scale-in-out {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.03);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes scale-0-to-1 {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

@keyframes pop {
  0%,
  90% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.5);
  }
}

// Rotate
@keyframes rotate-45 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(45deg);
  }
}

@keyframes counter-digit-animation {
  0% {
    transform: translateY(-91%);
  }

  100% {
    transform: translateY(0%);
  }
}


================================================
FILE: scss/abstract/_mixins.scss
================================================
@mixin link($color, $hovercolor, $activecolor: '') {
  color: $color;

  &:hover,
  &:focus,
  &:active {
    color: $hovercolor;
  }

  @if ($activecolor) {
    &:active {
      color: $activecolor;
    }
  }
}

@mixin gradient-animation($start, $end, $start2, $end2, $transTime) {
  background-size: 100%;
  background-image: linear-gradient($start, $end);
  position: relative;
  z-index: 100;

  &::before {
    background-image: linear-gradient($start2, $end2);
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    z-index: -100;
    transition: opacity $transTime;
  }

  &:hover {
    &::before {
      opacity: 1;
    }
  }
}

@mixin header() {
  position: relative;
  margin-bottom: 30px;

  .header__body {
    position: absolute;
    top: 25%;
    width: 100%;
    text-align: center;

    .btn-lg {
      letter-spacing: 0.15em;
      padding: 22px 56px;
      text-transform: uppercase;
      font-size: 22px;
      font-weight: bold;
      margin-bottom: 0;

      span {
        display: block;
        font-weight: normal;
      }
    }
  }

  img {
    margin: 0 auto;
  }
}

@mixin gradient($top-color, $bottom-color) {
  background: $top-color; /* Old browsers */
  background: -moz-linear-gradient(top, $top-color 0%, $bottom-color 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $top-color), color-stop(100%, $bottom-color)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, $top-color 0%, $bottom-color 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, $top-color 0%, $bottom-color 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, $top-color 0%, $bottom-color 100%); /* IE10+ */
  background: linear-gradient(to bottom, $top-color 0%, $bottom-color 100%); /* W3C */
  filter: progid:dximagetransform.microsoft.gradient(startColorstr=$top-color, endColorstr=$bottom-color, GradientType=0); /* IE6-9 */
}

@mixin horizontal-gradient($left-color, $right-color) {
  background: $left-color; /* Old browsers */
  background: -moz-linear-gradient(left, $left-color 0%, $right-color 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left, right, color-stop(0%, $left-color), color-stop(100%, $right-color)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, $left-color 0%, $right-color 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, $left-color 0%, $right-color 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left, $left-color 0%, $right-color 100%); /* IE10+ */
  background: linear-gradient(to right, $left-color 0%, $right-color 100%); /* W3C */
  filter: progid:dximagetransform.microsoft.gradient(startColorstr=$left-color, endColorstr=$right-color, GradientType=1); /* IE6-9 */
}

@mixin grow-animation($background-color, $scaleX, $scaleY : $scaleX, $initial-background-color: $background-color, $initial-background-opacity: 0) {

  // Force gpu rendering on Safari to prevent the font-smoothing antialised/subpixel-antialised switch
  transform: translate3d(0, 0, 0);

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: $initial-background-color;
    z-index: -100;
    transition: opacity 0.1s ease-out, transform 0.625s cubic-bezier(0, 0.8, 0.31, 0.99) !important;
    opacity: $initial-background-opacity;
    display: block;
    // Force animation to snap on subpixels
    backface-visibility: hidden;
  }

  &:hover,
  &:focus,
  &:active {
    &::before {
      background-color: $background-color;
      opacity: 1;
      transform: scale3d($scaleX, $scaleY, 1);
    }
  }
}

@mixin tile-size($horizontal, $vertical) {
  width: ($tile-base-size * $horizontal) + ($horizontal - 1) * $tile-gutter-size;
  height: ($tile-base-size * $vertical) + ($vertical - 1) * $tile-gutter-size;

  &:focus .tile__image,
  &:hover .tile__image {
    // Proportional zoom-in effect based on 10% for the 1x1 tile
    transform: scale(1 + (0.1 / max($horizontal, $vertical)));
  }

  .video-tile__play-btn {
    top: calc((-#{$tile-base-size} * #{$vertical}) / 2 + #{$btn-video-play-height} / 2);
  }
}


================================================
FILE: scss/abstract/_theme.scss
================================================
// Primary colors
$primary: $fun-green;

$primary-supportive: $fun-green-supportive;

$primary-hover: $soil;

// Secondary colors
$secondary: $gravel;
$secondary-supportive: $tundora;

// Tertiary colors
$tertiary: $malachite;
$tertiary-supportive: $malachite-supportive;

// Quaternary colors
$quaternary: $mud;
$quaternary-supportive: $mud-supportive;

// Quinary colors
$quinary: $dirt;
$quinary-supportive: $dirt-supportive;

// Senary colors
$senary: $soil;
$senary-supportive: $soil-supportive;

// Dungeons primary colors
$dungeons-primary: map-get($dungeons-colors, "orange");

// Dungeons secondary colors
$dungeons-secondary: map-get($dungeons-colors, "eucalyptus");
$dungeons-tertiary: map-get($dungeons-colors, "golden-tainoi");

$default-shadow: 0 2px 0 rgba($black, 0.25);
$default-box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.15);

$gray-100: $hint-of-red;
$gray-200: $ebb;
$gray-300: $cloud;
$gray-400: $dusty-gray;
$gray-500: $boulder;
$gray-600: $scorpion;
$gray-700: $tundora;
$gray-800: $soil;
$gray-900: $shark;

$theme-colors: (
  "primary":      $primary,
  "secondary":    $secondary,
  "tertiary":     $tertiary,
  "quaternary":   $quaternary,
  "quinary":      $quinary,
  "senary":       $senary,
);

$theme-colors-supportive: (
  "primary-supportive":      $primary-supportive,
  "secondary-supportive":    $secondary-supportive,
  "tertiary-supportive":     $tertiary-supportive,
  "quaternary-supportive":   $quaternary-supportive,
  "quinary-supportive":      $quinary-supportive,
  "senary-supportive":       $senary-supportive,
);

$dungeons-theme-colors: (
  "dungeons-primary": $dungeons-primary,
  "dungeons-secondary": $dungeons-secondary,
  "dungeons-tertiary": $dungeons-tertiary,

);

$gradients: (); // Returns a gradient value for use in sass. e.g. map-get($gradients, "secondary")

$danger: $orange;
$info: $light-blue;


================================================
FILE: scss/abstract/_transitions.scss
================================================


================================================
FILE: scss/abstract/_utilities.scss
================================================
$all-colors: map-merge(map-merge(map-merge(map-merge(map-merge($colors, $theme-colors), $theme-colors-supportive), $grays), ("black": $black, "white": $white)), $dungeons-theme-colors);

// Create text-{#color} classes for full color palette
@each $color, $value in $all-colors {
  .text-#{$color} {
    color: $value !important;
  }
  @if $emphasized-link-hover-darken-percentage != 0 {
    a.text-#{$color} {
      @include hover-focus {
        color: darken($value, $emphasized-link-hover-darken-percentage) !important;
      }
    }
  }
}

.top,
.top-left,
.top-right {
  top: 0;
}

.bottom,
.bottom-left,
.bottom-right {
  bottom: 0;
}

.left,
.top-left,
.bottom-left {
  left: 0;
}

.right,
.top-right,
.bottom-right {
  right: 0;
}

.translate-up-50 {
  transform: translateY(-50%);
}

.translate-down-50 {
  transform: translateY(50%);
}

.translate-left-50 {
  transform: translateX(-50%);
}

.translate-right-50 {
  transform: translateX(50%);
}

.max-text-width {
  max-width: $max-text-width;
}

.max-page-width {
  max-width: $max-resolution-width;
}

.max-full-screen-height {
  max-height: $max-resolution-height;
}

.z-index-0 {
  z-index: 0;
}


================================================
FILE: scss/abstract/_variables.scss
================================================
// General
$default-focus-color: mix($blue, $light-blue);
$default-focus-box-shadow: 0 0 3px 1px $default-focus-color,
  0 0 2px 1px $default-focus-color inset;

// Bootstrap overrrides

// Options
$enable-rounded: false;

// Body
$body-bg: $ebb;
$body-color: $senary;
$code-color: $purple;

// Fonts
$font-family-sans-serif: "Noto Sans", sans-serif;

$h1-font-size: $font-size-base * 2.25; // 36px
$h2-font-size: $font-size-base * 1.75; // 28px
$h3-font-size: $font-size-base * 1.2; // 19px
$h4-font-size: $font-size-base;
$h5-font-size: $font-size-base;
$h6-font-size: $font-size-base * 0.75;
$small-font-size: 88%; // 14px in body

// Theme small font size vars
$text-small: $font-size-base * 0.875; // 14px
$text-smaller: $font-size-base * 0.75; // 12px
$text-smallest: $font-size-base * 0.625; // 10px;

$font-size-lg: $h3-font-size;
$font-size-sm: $text-small;

$headings-font-weight: $font-weight-bold;
$headings-line-height: 1.4;
$headings-margin-bottom: 0.8rem;

$lead-font-size: $font-size-base * 1.13;

// Alert
$alert-border-width: 0;
$alert-border-radius: 0;
$alert-padding-y: 1rem;
$alert-padding-x: 1rem;

// Close
$close-color: currentColor;

// Cards
$card-spacer-y: 1rem;
$card-spacer-x: 0;
$card-border-width: 0;
$card-border-color: transparent;
$card-bg: $white;
$card-cap-bg: transparent;
$card-group-margin: 1rem;

// Modals
$modal-header-border-color: transparent;
$modal-footer-border-color: transparent;

// Forms
$input-box-shadow: none;
$input-border-color: transparent;
$input-focus-border-color: $senary-supportive;
$input-focus-box-shadow: $default-focus-box-shadow;

// Links
$link-color: darken($primary, 5%);
$link-hover-color: darken($primary, 10%);
$link-hover-decoration: none;

// Buttons
$btn-font-weight: $font-weight-bold;
$btn-disabled-opacity: 1;
$btn-focus-box-shadow: $default-focus-box-shadow;

// Custom
$custom-bezier-1: cubic-bezier(0, 0.8, 0.2, 1);

// Paragraphs
$paragraph-margin-bottom: 1.3rem;

// Navigation
$dropdown-border-width: 0;
$dropdown-padding-y: 0;

$dropdown-item-padding-x: 0.75rem;
$dropdown-item-padding-y: 0.5rem;

$dropdown-bg: $black;
$dropdown-link-color: $white;
$dropdown-link-hover-color: $white;
$dropdown-link-hover-bg: $primary;

// Path to Freyja assets, to be used from the consumer
$freyja-asset-path: "" !default;

$max-resolution-height: 1800px;
$max-resolution-width: 2880px;

$max-text-width: 540px; //For better readability

$opacities: 5, 10, 25, 50, 75;


================================================
FILE: scss/base/_background.scss
================================================
@mixin bg-gradient-supportive($parent, $color, $color-supportive) {
  #{$parent} {
    background: $color linear-gradient(180deg, $color, $color-supportive) repeat-x !important;
  }
}

@each $color, $value in $theme-colors {
  $key: "#{$color}-supportive";
  $col-supportive: map-get($theme-colors-supportive, $key);

  @if $col-supportive {
    @include bg-gradient-supportive(".bg-gradient-#{$color}", $value, $col-supportive);

    // Create a map of gradients for use in sass
    $gradient: ($color: $value linear-gradient(180deg, $value, $col-supportive) repeat-x);
    $gradients: map-merge($gradients, $gradient);
  }
}

@each $color, $value in $all-colors {
  .bg-#{$color} {
    background-color: $value !important;
  }
  a.bg-#{$color},
  button.bg-#{$color} {
    @include hover-focus {
      background-color: darken($value, 10%) !important;
    }
  }
}

.bg-wool-light {
  background-image: url(#{$freyja-asset-path}/img/bg-wool-white.png);
  background-color: $white;
}
.bg-wool-dark { background-image: url(#{$freyja-asset-path}/img/bg-wool-dark.png); }
.bg-grass { background-image: url(#{$freyja-asset-path}/img/bg-grass.png); }
.bg-snow { background-image: url(#{$freyja-asset-path}/img/bg-snow.png); }

.bg-wool-dark,
.bg-grass,
.bg-snow {
  background-color: $senary;
}

.bg-overlay {
  background-blend-mode: overlay;
}

.bg-gradient-overlay {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba($gray-800, 0.5));
}

@each $opacity in $opacities {
  @each $color, $value in ("black": $black, "white": $white) {
    .bg-#{$color}-#{$opacity} {
      background-color: rgba($value, $opacity / 100);
    }
  }
}

================================================
FILE: scss/base/_typography.scss
================================================
@font-face {
  font-family: 'Noto Sans';
  src: url(#{$freyja-asset-path}/fonts/NotoSans-Regular.eot); /* IE9 Compat Modes */
  src:
    local('Noto Sans'), local('NotoSans'),
    url(#{$freyja-asset-path}/fonts/NotoSans-Regular.eot?#iefix) format('embedded-opentype'), /* IE6-IE8 */
    url(#{$freyja-asset-path}/fonts/NotoSans-Regular.woff2) format('woff2'), /* Modern Browsers */
    url(#{$freyja-asset-path}/fonts/NotoSans-Regular.woff) format('woff'), /* IE9-IE11 */
    url(#{$freyja-asset-path}/fonts/NotoSans-Regular.ttf) format('truetype'), /* Safari, Android, iOS */
    url(#{$freyja-asset-path}/fonts/NotoSans-Regular.svg#NotoSans-Regular) format('svg'); /* Legacy iOS */

  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: 'Noto Sans';
  src: url(#{$freyja-asset-path}/fonts/NotoSans-Bold.eot); /* IE9 Compat Modes */
  src:
    local('Noto Sans Bold'), local('NotoSans-Bold'),
    url(#{$freyja-asset-path}/fonts/NotoSans-Bold.eot?#iefix) format('embedded-opentype'), /* IE6-IE8 */
    url(#{$freyja-asset-path}/fonts/NotoSans-Bold.woff2) format('woff2'), /* Modern Browsers */
    url(#{$freyja-asset-path}/fonts/NotoSans-Bold.woff) format('woff'), /* IE9-IE11 */
    url(#{$freyja-asset-path}/fonts/NotoSans-Bold.ttf) format('truetype'), /* Safari, Android, iOS */
    url(#{$freyja-asset-path}/fonts/NotoSans-Bold.svg#NotoSans-Bold) format('svg'); /* Legacy iOS */

  font-style: normal;
  font-weight: bold;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: 'Noto Sans';
  src: url(#{$freyja-asset-path}/fonts/NotoSans-Italic.eot); /* IE9 Compat Modes */
  src:
    local('Noto Sans Italic'), local('NotoSans-Italic'),
    url(#{$freyja-asset-path}/fonts/NotoSans-Italic.eot?#iefix) format('embedded-opentype'), /* IE6-IE8 */
    url(#{$freyja-asset-path}/fonts/NotoSans-Italic.woff2) format('woff2'), /* Modern Browsers */
    url(#{$freyja-asset-path}/fonts/NotoSans-Italic.woff) format('woff'), /* IE9-IE11 */
    url(#{$freyja-asset-path}/fonts/NotoSans-Italic.ttf) format('truetype'), /* Safari, Android, iOS */
    url(#{$freyja-asset-path}/fonts/NotoSans-Italic.svg#NotoSans-Italic) format('svg'); /* Legacy iOS */

  font-style: italic;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: 'Noto Sans';
  src: url(#{$freyja-asset-path}/fonts/NotoSans-BoldItalic.eot); /* IE9 Compat Modes */
  src:
    local('Noto Sans Bold Italic'), local('NotoSans-BoldItalic'),
    url(#{$freyja-asset-path}/fonts/NotoSans-BoldItalic.eot?#iefix) format('embedded-opentype'), /* IE6-IE8 */
    url(#{$freyja-asset-path}/fonts/NotoSans-BoldItalic.woff2) format('woff2'), /* Modern Browsers */
    url(#{$freyja-asset-path}/fonts/NotoSans-BoldItalic.woff) format('woff'), /* IE9-IE11 */
    url(#{$freyja-asset-path}/fonts/NotoSans-BoldItalic.ttf) format('truetype'), /* Safari, Android, iOS */
    url(#{$freyja-asset-path}/fonts/NotoSans-BoldItalic.svg#NotoSans-BoldItalic) format('svg'); /* Legacy iOS */

  font-style: italic;
  font-weight: bold;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: 'MinecraftFive';
  src: url(#{$freyja-asset-path}/fonts/MinecraftFive-Bold.eot); /* IE9 Compat Modes */
  src:
    url(#{$freyja-asset-path}/fonts/MinecraftFive-Bold.eot?#iefix) format('embedded-opentype'), /* IE6-IE8 */
    url(#{$freyja-asset-path}/fonts/MinecraftFive-Bold.woff) format('woff'), /* Modern Browsers */
    url(#{$freyja-asset-path}/fonts/MinecraftFive-Bold.ttf) format('truetype'), /* Safari, Android, iOS */
    url(#{$freyja-asset-path}/fonts/MinecraftFive-Bold.svg#MinecraftFive-Bold) format('svg'); /* Legacy iOS */

  font-style: normal;
  font-weight: bold;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: 'MinecraftFive';
  src: url(#{$freyja-asset-path}/fonts/MinecraftFive-Regular.eot); /* IE9 Compat Modes */
  src:
    url(#{$freyja-asset-path}/fonts/MinecraftFive-Regular.eot?#iefix) format('embedded-opentype'), /* IE6-IE8 */
    url(#{$freyja-asset-path}/fonts/MinecraftFive-Regular.ttf) format('truetype'), /* Safari, Android, iOS */
    url(#{$freyja-asset-path}/fonts/MinecraftFive-Regular.woff) format('woff'), /* Modern Browsers */
    url(#{$freyja-asset-path}/fonts/MinecraftFive-Regular.svg#MinecraftFive-Regular) format('svg'); /* Legacy iOS */

  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: 'MinecraftSeven';
  src: url(#{$freyja-asset-path}/fonts/MinecraftSeven.eot); /* IE9 Compat Modes */
  src:
    url(#{$freyja-asset-path}/fonts/MinecraftSeven.eot?#iefix) format('embedded-opentype'), /* IE6-IE8 */
    url(#{$freyja-asset-path}/fonts/MinecraftSeven.woff) format('woff'), /* Modern Browsers */
    url(#{$freyja-asset-path}/fonts/MinecraftSeven.ttf) format('truetype'), /* Safari, Android, iOS */
    url(#{$freyja-asset-path}/fonts/MinecraftSeven.svg#MinecraftSeven) format('svg'); /* Legacy iOS */

  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: 'MinecraftTen';
  src: url(#{$freyja-asset-path}/fonts/MinecraftTen.eot); /* IE9 Compat Modes */
  src:
    url(#{$freyja-asset-path}/fonts/MinecraftTen.eot?#iefix) format('embedded-opentype'), /* IE6-IE8 */
    url(#{$freyja-asset-path}/fonts/MinecraftTen.woff) format('woff'), /* Modern Browsers */
    url(#{$freyja-asset-path}/fonts/MinecraftTen.ttf) format('truetype'), /* Safari, Android, iOS */
    url(#{$freyja-asset-path}/fonts/MinecraftTen.svg#MinecraftTen) format('svg'); /* Legacy iOS */

  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: 'MinecraftSevenV2';
  src: url(#{$freyja-asset-path}/fonts/Minecraft-Seven_v2.otf);
  src: 
    url(#{$freyja-asset-path}/fonts/Minecraft-Seven_v2.woff) format('woff'), 
    url(#{$freyja-asset-path}/fonts/Minecraft-Seven_v2.ttf) format('truetype');
  font-style: normal;
  font-weight: 400;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: MinecraftTenV2;
  src: url(#{$freyja-asset-path}/fonts/Minecraft-Tenv2.eot);
  src: 
    url(#{$freyja-asset-path}/fonts/Minecraft-Tenv2.eot?#iefix) format('embedded-opentype'), 
    url(#{$freyja-asset-path}/fonts/Minecraft-Tenv2.woff) format('woff'),
    url(#{$freyja-asset-path}/fonts/Minecraft-Tenv2.ttf) format('truetype'), 
    url(#{$freyja-asset-path}/fonts/Minecraft-Tenv2.woff2) format('woff2');
  font-style: normal;
  font-weight: 400;
  text-rendering: optimizeLegibility;
}



body {
  font-family: "Noto Sans", sans-serif;
}

// Headings
h1,
h2,
h3,
h4 {
  text-transform: uppercase;
  letter-spacing: 1px;

  @include media-breakpoint-only(xs) {
    word-wrap: break-word;
  }
}

@include media-breakpoint-only(xs) {
  h1 {
    font-size: $font-size-base * 1.6;
  }

  h2 {
    font-size: $font-size-base * 1.4;
  }
}

.font-mc-ten,
.font-mc-seven,
.font-mc-five {
  font-weight: normal !important;

  @extend %antialiasing;
}

.font-mc-ten {
  font-family: 'MinecraftTen', 'Noto Sans', sans-serif;
}

.font-mc-seven {
  font-family: 'MinecraftSeven', 'Noto Sans', sans-serif;
}

.font-mc-five {
  font-family: 'MinecraftFive', 'Noto Sans', sans-serif;
}

blockquote {
  padding: 0 1rem;
  border-left: 3px solid $primary;
}

.blockquote-footer {
  text-align: right;
}

.text-small {
  font-size: $text-small;
}

.text-smaller {
  font-size: $text-smaller;
}

.text-smallest {
  font-size: $text-smallest;
}

.letter-spacing-1 {
  letter-spacing: 1px;
}

$dark-hr-color: rgba(255, 255, 255, 0.1);

.divider {
  border: solid 3px rgba(0, 0, 0, 0.1);
}

.text-light,
.text-white {
  hr {
    border-top: 1px solid $dark-hr-color;
  }

  .divider {
    border-color: $dark-hr-color;
  }
}

code {
  padding: map-get($spacers, 1);
  background-color: $gray-200;
}


================================================
FILE: scss/components/_alert.scss
================================================
// Headings for larger alerts
.alert-heading {
  // Specified to prevent conflicts of changing $headings-color
  color: inherit;
}

.alert {
  color: currentColor;
  box-shadow: $default-box-shadow;

  .close {
    transform: translateY(calc(3em / 16));
    padding: ($alert-padding-y / 2) ($alert-padding-x / 2);
    margin: ($alert-padding-y / 2) ($alert-padding-x / 2);
  }
}

// Provide class for links that match alerts
.alert-link {
  font-weight: normal;
  text-decoration: underline;
}

@each $color, $value in $theme-colors {
  .alert-#{$color} {
    background-color: $value;

    a,
    a:hover,
    .alert-link {
      color: currentColor;
      text-decoration: underline;
    }
  }
}

.alert-primary,
.alert-secondary,
.alert-success,
.alert-danger,
.alert-dark {
  color: $white;
}

.alert-fixed {
  position: fixed;
  margin: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: $zindex-popover;

  @include media-breakpoint-up(lg) {
    left: 50%;
    transform: translateX(-50%);
  }
}

================================================
FILE: scss/components/_animations.scss
================================================
// Flicker
.animation-flicker {
  animation: flicker-opacity 4s ease-in-out infinite;
}

// Floating
.animation-floating--vertical {
  animation: floating-vertical 8s ease-in-out infinite;

  @extend %force-layer-creation;
}

.animation-floating--circular {
  animation: floating-circular 12s linear infinite;

  @extend %force-layer-creation;
}

// Bounce
.animation-bounce--right {
  animation: bounce-right 1.2s 2;
}

.animation-bounce--left {
  animation: bounce-left 1.2s 2;
}

.animation-bounce--left-long {
  animation: bounce-left 1.5s ease-in-out 0.5s 4;
}

.animation-bounce--down {
  animation: bounce-down 1.2s 2;
}

.animation-bounce--up {
  animation: bounce-up 1.2s 2;
}

// Drop series
.animation-drop-2 {
  animation: drop2 1s linear infinite;
}

.animation-drop-3 {
  animation: drop3 1s linear infinite;
}

.animation-drop-4 {
  animation: drop4 1s linear infinite;
}

.animation-scale--in-out {
  animation: scale-in-out 0.4s infinite;
}

.animation-scale--0-to-1 {
  animation: scale-0-to-1 0.5s;
}

.animation-pop {
  animation: pop 1s linear infinite;
}

.animation-rotate--45 {
  animation: rotate-45 0.5s 1 ease-in forwards;
}

@for $i from 1 through 8 {
  .animation-run-#{$i}-times {
    animation-iteration-count: $i;
  }
}

.animation-run-infinite {
  animation-iteration-count: infinite;
}

@for $i from 1 through 10 {
  .animation-duration-#{$i} {
    animation-duration: #{$i}s !important;
  }

  .animation-delay-#{$i} {
    animation-delay: #{$i}s !important;
  }
}

// Grow, used as a direct child of the element that will grow
a,
div,
span,
button {
  > .grow {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    transition: 0.625s cubic-bezier(0, 0.8, 0.25, 1);
  }

  &:hover {
    > .grow {
      transform: scale(1.1);
    }
  }
}


================================================
FILE: scss/components/_area-overlay.scss
================================================
%cover-all {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.area-overlay {
  @extend %cover-all;

  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;

  &-background {
    @extend %cover-all;

    opacity: 0.75;
    z-index: -1;
  }
}


================================================
FILE: scss/components/_attribution.scss
================================================
.attribution {
  width: 100%;
  padding-bottom: 15px;

  .attribution__avatar {
    height: 140px;
  }

  img {
    width: 82px;
    float: left;
  }
}

@include media-breakpoint-down(md) {
  .attribution__details {
    dt {
      float: left;
      clear: left;
    }

    dd {
      float: left;
    }
  }
}

.attributed-quote {
  position: relative;
  border: 10px solid black;
  padding: 20px;

  &::before {
    @extend %attributed-quote-glyph;

    background-image: url(#{$freyja-asset-path}/svg/icons/pixel-begin-quote.svg);
    top: -19px;
    left: -19px;
  }

  &::after {
    @extend %attributed-quote-glyph;

    background-image: url(#{$freyja-asset-path}/svg/icons/pixel-end-quote.svg);
    right: -19px;
    bottom: -19px;
  }

  cite {
    margin-top: 5px;
    font-style: normal;
    text-transform: uppercase;
    white-space: nowrap;
    display: block;
  }
}

.attributed-quote__text {
  margin: 0;
  border: 0;
  padding: 0;
  font-size: 14px;
  font-weight: bold;
}

.attributed-quote__image {
  float: left;
  max-height: 92px;
  margin-top: 4px;
  margin-bottom: 0;
  margin-right: 7px;
}


================================================
FILE: scss/components/_borders.scss
================================================
.border-dungeons {
  border: 30px solid rgba($white, 0.25);
  border-image: url(#{$freyja-asset-path}/img/border-dungeons-25.png) 30;
}

@for $i from 1 through 5 {
  .border-width-#{$i} {
    border-width: #{$i}px!important;
  }
}

@each $opacity in $opacities {
  @each $color, $value in ("black": $black, "white": $white) {
    
    .border-#{$color}-#{$opacity} {
      border-color: rgba($value, $opacity / 100)!important;
    }
  }
}

================================================
FILE: scss/components/_buttons.scss
================================================
$btn-border-width: 4px;

@mixin disabled-btn-before {
  &::before {
    box-shadow:
      0 $btn-border-width rgba($white, 0.4) inset,
      0 (-$btn-border-width) rgba($black, 0.05) inset,
      $btn-border-width 0 rgba($black, 0.05) inset,
      (-$btn-border-width) 0 rgba($white, 0.4) inset;
    background-color: $gray-300;
  }
}

@mixin disabled-btn-after {
  &::after {
    box-shadow: none;
  }
}

#btn-pseudo-element {
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  transition: 0.7s cubic-bezier(0, 0.8, 0.26, 0.99);
}

#btn-border {
  &::before,
  &::after {
    @extend #btn-pseudo-element;
  }

  &:hover,
  &:focus,
  &:active {
    outline: none;
    box-shadow: none;
    color: $white !important;

    &::before,
    .grow {
      background-color: $primary-hover;
      box-shadow:
        0 (-$btn-border-width) rgba($black, 0.35) inset,
        0 $btn-border-width rgba($white, 0.25) inset,
        (-$btn-border-width) 0 rgba($white, 0.25) inset,
        $btn-border-width 0 rgba($black, 0.35) inset;
    }
  }

  &::before,
  .grow {
    box-shadow:
      0 (-$btn-border-width) rgba($black, 0.25) inset,
      0 $btn-border-width rgba($white, 0.35) inset,
      (-$btn-border-width) 0 rgba($white, 0.35) inset,
      $btn-border-width 0 rgba($black, 0.25) inset;
    z-index: -1;
  }

  &::after {
    box-shadow: $default-box-shadow;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 0;
  z-index: 1;
  user-select: none;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: unset;
  padding: 0.8rem 1.5rem;
  text-decoration: none;

  .grow {
    &::after {
      @extend #btn-pseudo-element;

      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15);
    }
  }

  &:hover {
    .grow::after {
      box-shadow: $default-box-shadow;
    }
  }
}

.btn-xl {
  padding: 1rem 2rem;
  font-size: 2.25rem;
  line-height: 1.5;
}

.btn-lg {
  padding: 1.35rem 3.1rem;
}

.btn-disabled,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-warning,
.btn-info,
.btn-hexagon {
  @extend #btn-border;
}

.btn-primary,
.btn-secondary,
.btn-danger,
.btn-hexagon {
  text-shadow: $default-shadow;
}

// To ensure that button text-colors are kept correct, we need to add an important flag
@each $color, $value in $theme-colors {
  .btn-#{$color} {
    color: color-yiq($value) !important;

    &::before,
    .grow {
      background-color: $value;

      @media screen and (-ms-high-contrast: active) {
        background-color: window !important;
      }
    }
  }
}

@each $color, $value in $dungeons-theme-colors {
  .btn-#{$color} {
    color: color-yiq($value) !important;
  }
}

.btn-vertical-stack {
  flex-direction: column;
}

.btn-link {
  color: $primary;
  font-size: 1rem;
  letter-spacing: normal;
  text-transform: none;
  padding: 0;

  &:hover,
  &:focus {
    color: $primary-supportive;
    text-decoration: underline;
  }
}

.btn-square {
  width: 3rem;
  height: 3rem;
  padding: 0px;
}

.btn-ribbon {
  padding-left: 80px;
  min-height: 105px;
}

.btn-hexagon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 42px;
  padding: 0;
  transition: 0.625s cubic-bezier(0, 0.8, 0.25, 1);
  box-sizing: content-box;
  margin: 19px 0;
  border-right: $btn-border-width solid;
  border-left: $btn-border-width solid;

  & > * {
    z-index: 1;
    position: relative;
    transform: perspective(500000000000px) translateZ(32px); // To prevent safari from hiding content under hexagon edges
  }

  &::before,
  &::after,
  &:hover::before,
  &:focus::before {
    box-shadow: none;
  }

  &::before,
  &::after {
    transition: 0.625s cubic-bezier(0, 0.8, 0.25, 1);
    width: 51.3px;
    height: 51.3px;
    left: 50%;
  }

  &::before {
    transform: translateY(-26px) translateX(-50%) rotateX(58deg) rotate(45deg);
    border-top: ($btn-border-width * 1.5) solid;
    border-left: ($btn-border-width * 1.5) solid;
    box-shadow: 2px 2px 0 transparent; // needed to remove a line that appears in chrome
  }

  &::after {
    transform: translateY(26px) translateX(-50%) rotateX(-58deg) rotate(45deg);
    top: auto;
    bottom: 0;
    border-bottom: ($btn-border-width * 1.5) solid;
    border-right: ($btn-border-width * 1.5) solid;
  }

  &.btn-primary {
    border-right-color: mix($primary, $white, 75%);
    border-left-color: mix($primary, $black, 75%);

    &,
    &::after,
    &::before {
      background-color: $primary;
    }

    &::before {
      border-top-color: mix($primary, $white);
      border-left-color: mix($primary, $white, 75%);
    }

    &::after {
      border-bottom-color: mix($primary, $black);
      border-right-color: mix($primary, $black, 75%);
    }
  }

  &.btn-secondary {
    border-right-color: mix($secondary, $white, 75%);
    border-left-color: mix($secondary, $black, 75%);

    &,
    &::after,
    &::before {
      background-color: $secondary;
    }

    &::before {
      border-top-color: mix($secondary, $white);
      border-left-color: mix($secondary, $white, 75%);
    }

    &::after {
      border-bottom-color: mix($secondary, $black);
      border-right-color: mix($secondary, $black, 75%);
    }
  }

  &.btn-dungeons-primary {
    border-right-color: mix($dungeons-primary, $white, 75%);
    border-left-color: mix($dungeons-primary, $black, 75%);

    &,
    &::after,
    &::before {
      background-color: $dungeons-primary;
    }

    &::before {
      border-top-color: mix($dungeons-primary, $white);
      border-left-color: mix($dungeons-primary, $white, 75%);
    }

    &::after {
      border-bottom-color: mix($dungeons-primary, $black);
      border-right-color: mix($dungeons-primary, $black, 75%);
    }
  }

  &.btn-dungeons-secondary {
    border-right-color: mix($dungeons-secondary, $white, 75%);
    border-left-color: mix($dungeons-secondary, $black, 75%);

    &,
    &::after,
    &::before {
      background-color: $dungeons-secondary;
    }

    &::before {
      border-top-color: mix($dungeons-secondary, $white);
      border-left-color: mix($dungeons-secondary, $white, 75%);
    }

    &::after {
      border-bottom-color: mix($dungeons-secondary, $black);
      border-right-color: mix($dungeons-secondary, $black, 75%);
    }
  }

  &:hover,
  &:focus,
  &:active {
    border-right-color: mix($primary-hover, $white, 75%) !important;
    border-left-color: mix($primary-hover, $black, 75%) !important;
    box-shadow: none !important;

    &,
    &::after,
    &::before {
      background-color: $primary-hover !important;
    }

    &::before {
      border-top-color: mix($primary-hover, $white);
      border-left-color: mix($primary-hover, $white, 75%);
      box-shadow: 2px 2px 0 transparent; // needed to remove a line that appears in chrome
    }

    &::after {
      border-bottom-color: mix($primary-hover, $black);
      border-right-color: mix($primary-hover, $black, 75%);
    }
  }
}

.btn[class*="btn-outline"] {
  box-shadow: 0 0 0 4px currentColor inset;
  transition: background-color 0.2s linear;

  &:hover,
  &:active,
  &:focus {
    background-color: $secondary !important;
    box-shadow: 0 0 0 4px $secondary inset;
    color: #fff;
  }

  &.btn-hexagon {
    box-shadow: none !important;

    &:hover,
    &:active,
    &:focus {
      &,
      &::after,
      &::before {
        background-color: $secondary !important;
        border-color: $secondary !important;
      }
    }

    &::after,
    &::before {
      transition: background-color 0.2s linear;
      background-color: $black;
      border-color: currentColor;
    }
  }
}

.btn:disabled,
.btn-disabled {
  @include disabled-btn-before;
  @include disabled-btn-after;
  cursor: default !important;
  color: $gray-600 !important;
  text-shadow: none;

  &:hover,
  &:focus,
  &:active {
    @include disabled-btn-before;
    @include disabled-btn-after;
    color: $gray-600 !important;
  }
  &:focus{
    box-shadow: $btn-focus-box-shadow;
  }
}

.btn-disabled-outline,
[class*=btn-outline]:disabled {
  cursor: default !important;
  color: $gray-300 !important;
  background-color: transparent;
  box-shadow: 0 0 0 4px currentColor inset;

  &::before,
  &::after {
    box-shadow: none;
  }

  &:hover,
  &:focus,
  &:active {
    color: $gray-300 !important;
    background-color: transparent !important;
    box-shadow: 0 0 0 4px currentColor inset;

    &::before {
      box-shadow: none;
    }
  }
}

@media screen and (-ms-high-contrast: active) {
  .btn {
    border: $btn-border-width solid;
    color: windowText !important;
  }

  a {
    &.btn {
      -ms-high-contrast-adjust: none;

      &::before {
        background: Window !important;
        box-shadow: none !important;
        border-color: HighLight !important;
      }

      &:hover {
        border-color: HighLight !important;
        box-shadow: none !important;
        color: windowText !important;

        &::before {
          background-color: Window !important;
        }
      }

      &:focus {
        border-color: HighLight !important;
        box-shadow: none !important;
        color: windowText !important;
      }
    }

    &.btn-warning,
    &.btn-primary {
      color: windowText !important;
    }
  }
}

================================================
FILE: scss/components/_card.scss
================================================
.card {
  background-color: transparent;

  &.card-grow:focus {
    outline: none !important;
    border: 3px solid #55a1f3;
  }
}

// Wrap cards at 768px instead of Bootstrap 576px default
.card-group,
.card-deck,
.card-columns {
  @include media-breakpoint-up(md) {
    flex-flow: row wrap;
  }

  @include media-breakpoint-only(sm) {
    flex-flow: column;
  }
}

.card-deck {
  .card {
    margin-bottom: $card-deck-margin;
    margin-top: $card-deck-margin;
  }

  .card-grow {
    & > .grow {
      background-color: $white;
    }

    &:hover {
      & > .grow {
        background-color: $ebb;
      }
    }
  }
}

.card-grow {
  z-index: 1;
  cursor: pointer;

  &:hover {
    z-index: 2;
  }
}

.card-group {
  .card {
    margin-bottom: 0;
  }
}

.card-separator {
  box-shadow: 0 1px 0 rgba(mix($white, $black), 0.5);

  @include media-breakpoint-up(md) {
    box-shadow: -1px 0 0 rgba(mix($white, $black), 0.5) inset;
  }
}

.card-wrap {
  .card {
    @include media-breakpoint-between(md, lg) {
      flex: 1 0 40%;
    }
  }
}


================================================
FILE: scss/components/_checkbox.scss
================================================
.checkbox {
  display: inline-block;
  position: relative;

  input[type="checkbox"] {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    height: 1.3em;
    width: 1.3em;

    &:checked {
      & + label {
        .checkbox-icon {
          border-color: $primary;
          background-color: $primary;

          &::after {
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
          }
        }
        .svg-icon {
          color: $white;
          transform: scale(1);
        }
      }
    }

    &:focus {
      outline: none;

      & + label {
        .checkbox-icon {
          box-shadow: 0 0 5px 1px Highlight;
        }
      }
    }

    &:disabled {
      & + label {
        color: $gray-500;

        .checkbox-icon {
          border-color: $gray-400;
          background-color: $gray-300;

          &::before {
            content: "";
            display: block;
            position: absolute;
            background-color: $gray-400;
            left: -4px;
            top: 50%;
            width: 24px;
            height: 2px;
            transform: translateY(-50%) rotate(45deg);
          }
        }
      }
    }

    &:disabled:checked {
      & + label {
        .checkbox-icon {
          background-color: $gray-300;
        }
        .svg-icon {
          color: $gray-400;
        }
      }
    }
  }

  .checkbox-label {
    display: inline-flex;
    align-items: center;
    transition: 0.3s;
  }

  .checkbox-icon {
    display: inline-block;
    background-color: $white;
    border: 2px solid rgba($black, 0.5);
    margin-right: 0.25em;
    padding: 2px;
    transition: 0.3s;
    line-height: 0;
    position: relative;
    width: 20px;
    height: 20px;
    color: transparent;

    .svg-icon {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      transition: 0.3s;
      transform: scale(0);
    }
  }
}


================================================
FILE: scss/components/_close.scss
================================================
.close {
  opacity: 1;
  font-size: 1rem;
}


================================================
FILE: scss/components/_countdown.scss
================================================
.countdown-wrapper {
  margin: 20px 0;
}

.countdown {
  margin-left: auto;
  margin-right: auto;
  grid-template-rows: repeat(2, 130px);
  grid-template-columns: repeat(2, 130px);
  justify-items: center;
  justify-content: center;

  @include media-breakpoint-up(xs) {
    width: 260px;
  }

  @include media-breakpoint-up(sm) {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .countdown__dimension {
    display: inline-block;
  }

  .figures {
    margin: 0.7rem;
    width: 95px;
    height: 95px;
    background-image: url(#{$freyja-asset-path}/svg/shapes/square-like.svg);
    color: $black;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .title {
      font-size: 14px;
      font-family: "Noto Sans", sans-serif;
      text-transform: uppercase;
      font-weight: bold;
      margin-top: 5px;
    }
  }

  .figure {
    position: relative;
    float: left;
    font-size: 40px;
    line-height: 40px;
    text-shadow: 0 3px 0 $white;
    text-align: center;
    margin-right: 2px;
    background: transparent;
    display: inline-block;

    &:last-child {
      margin-right: 0;
    }
  }
}

.countdown--black {
  .figures {
    background-image: url(#{$freyja-asset-path}/svg/shapes/square-like-black.svg);
  }
}

.countdown--small {
  .figures {
    margin: 0.1rem;
    width: 50px;
    height: 50px;

    .title {
      margin-top: 0px;
    }
  }

  .figure {
    font-size: 20px;
    line-height: 25px;
    margin-right: 0px;
    text-shadow: none;
  }
}

================================================
FILE: scss/components/_counter.scss
================================================
.counter {
  position: relative;
  overflow: hidden;
  font-size: 90px;
  font-weight: bold;
  line-height: 90px;
  margin: 20px 0 !important;
  height: 100px;

  @include media-breakpoint-down(sm) {
    font-size: 38px;
  }
}

.counter__digit-container {
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 1) 65%, rgba(0, 0, 0, 0) 100%);
  transform: translateZ(0);
}

.counter__digit {
  display: inline-block;
  width: 62px;
  height: 90px;
  position: relative;

  @include media-breakpoint-down(sm) {
    width: 24px;
  }
}

.counter__digit-column {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 9px;

  @include media-breakpoint-down(sm) {
    left: 0;
  }
}

.counter__digit-column span {
  display: block;
  width: 100%;
  text-align: center;
}

.counter__digit--separator {
  width: 36px;
  opacity: 0;
  transition: width 0.66s cubic-bezier(0.1, 0.55, 0, 1.1), opacity 0.8s ease-out;
}

.counter__svg-container {
  height: 0;
}


================================================
FILE: scss/components/_footer.scss
================================================
.mojang-studios-footer {
  background: $black;
  color: $secondary;
  padding: 27px 0 25px;

  @include media-breakpoint-up(sm) {
    padding: 2.2rem 0 2rem;
  }

  .nav {
    a {
      @include link($cloud, $cloud, $cloud);

      &:hover {
        background-color: transparent;
        text-shadow: none;
      }
    }
  }

  .nav-pills {
    @include media-breakpoint-down(xs) {
      margin-bottom: 6px;

      li {
        margin: 2px 0;
      }
    }
  }

  .with-divider {
    padding-right: 0;
    border-right: none;

    li {
      border-right: 1px solid $cloud;
      padding: 0 0.5em;

      &:last-child {
        border-right: none;
      }
    }
  }

  .icon-xbox-game-studios {
    width: 90px;
    height: 50px;
  }

  .icon-esrb {
    height: 55px;
    width: 120px;
  }

  .icon-cero-a {
    height: 90px;
    width: 55px;
  }

  .icon-mojang-studios {
    width: 60px;
    height: 50px;
  }

  .rating-container {
    @include media-breakpoint-up(md) {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}

.mojang-studios-tall-footer {
  .icon-xbox-game-studios {
    max-width: 140px;
    height: 110px;
  }

  .icon-esrb {
    max-height: 90px;
    max-width: 170px;
  }

  .icon-mojang-studios {
    height: 110px;
    max-width: 140px;
  }

  @include media-breakpoint-up(md) {
    .footer-container {
      display: grid;
      grid-template-columns: 1fr 3fr;
      grid-template-rows: repeat(2, auto);
      grid-column-gap: 2em;
    }

    .footer-studio-logos {
      grid-column: 1;
      grid-row: 1;
      flex-direction: column;
    }

    .footer-links {
      grid-column: 2;
      grid-row: 1;
    }

    .footer-copyright {
      grid-column: 2;
      grid-row: 2;
    }
  }

  @include media-breakpoint-up(xl) {
    .footer-container {
      grid-template-columns: 2fr 3fr;
    }

    .footer-copyright {
      grid-column: 1;
      grid-row: 2;
    }

    .footer-studio-logos {
      flex-direction: row;
    }

    .footer-links {
      grid-row: 1 / span 2;
    }

    .icon-xbox-game-studios {
      max-width: 180px;
    }
  }
}

.ms-footer {
  font-family: 'Segoe UI', sans-serif;
  background-color: $senary;
  padding: 1.3rem 0;
  -webkit-font-smoothing: antialiased;

  @include media-breakpoint-up(lg) {
    padding: 2rem 0;
  }

  a {
    color: $white;
  }

  li {
    position: static;
    white-space: nowrap;
  }

  .ms-footer__language-selector {
    .ms-footer__language-selector-link {
      display: inline-block;
      padding: 6px 0;

      @include media-breakpoint-up(sm) {
        padding: 1px 0;
      }
    }

    .ms-footer__language-selector-list {
      margin: 0;
    }

    .ms-footer__language-selector-form {
      padding: 10px 0 20px;
      margin-bottom: 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
  }

  .ms-links {
    margin: 10px 0;

    @include media-breakpoint-up(lg) {
      margin: 0;
    }

    .ms-links__link {
      margin-bottom: 4px;
      margin-right: 20px;
    }

    .ms-links__links--locale {
      display: flex;
      align-items: center;

      .ms-links__links--locale-icon {
        margin-right: 5px;
      }

      .ms-links__links--locale-text {
        position: relative;
      }
    }
  }

  .icon-microsoft {
    width: 105px;
    height: 25px;
  }
}

#language-selector {
  display: none;
  position: relative;

  &::after {
    height: 20px;
    display: block;
    content: "";
    position: absolute;
    width: 100%;
    bottom: 0;
    background-image: linear-gradient(transparent, #2f2f2f);
  }
}


================================================
FILE: scss/components/_forms.scss
================================================
$label-color: $scorpion;

.form-group {
  &.has-error {
    .help-block {
      color: $danger;
    }
  }
}

.form-control {
  font-size: 14px;
  height: 36px;
  padding: 8px;
  border-color: $senary-supportive;
  &:focus {
    @media (forced-colors: active) {
      outline: 5px auto -webkit-focus-ring-color;
    }
  }
}

.form-control-plaintext {
  width: 100%;
  display: block;
}

.required:after {
  content: " *";
  color: $red;
}

.form-tooltip {
  position: relative;
  display: inline-block;
}

.form-tooltip .form-tooltip-text {
  visibility: hidden;
  background-color: #F8F5F4;
  color: #000000;
  border-radius: 8px;
  padding: 8px;
  position: absolute;
  width: 336px;
  transform: translate(-50%, 32%);
  z-index:1;
  font-size:14px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.form-tooltip .form-tooltip-text::after {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 50%;
  border-width:8.66px;
  border-style: solid;
  border-color: transparent transparent #F8F5F4 transparent;
}

.form-tooltip:hover .form-tooltip-text {
  visibility: visible;
}

label {
  color: $label-color;
  font-size: 14px;
  margin-bottom: 0;
}

select {
  font-size: 16px;
}


================================================
FILE: scss/components/_icons.scss
================================================
.svg-icon {
  width: 1em;
  height: 1em;
  overflow: unset !important;

  use {
    fill: currentColor;
  }
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  .svg-icon {
    transform: translateY(calc(-2em / 16));
  }
}

.icon-15x {
  font-size: 1.5rem;
}

@for $i from 2 through 5 {
  .icon-#{$i}x {
    font-size: #{$i}rem;
  }
}

.icon-shadow {
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.25));
}

.icon-outline {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 2px solid currentColor;

  .svg-icon {
    transform: none;
  }
}

.icon-outline--circular {
  border-radius: 50%;
}

.icon-outline--hexagon {
  border-top: none;
  border-bottom: none;
  height: 26px;
  width: 48px;
  margin: 10px 0;

  &::after,
  &::before {
    content: "";
    pointer-events: none;
    display: block;
    position: absolute;
    border: 2px solid currentColor;
    width: 27.2px;
    height: 47.4px;
    left: 0;
    right: 0;
    top: 50%;
    border-right: none;
    border-left: none;
    margin: 0 auto;
    bottom: 0;
  }

  &::after {
    transform: translateY(-50%) rotate(30deg);
  }

  &::before {
    transform: translateY(-50%) rotate(-30deg);
  }
}

.end-with-block {
  h1 {
    &:last-child::after {
      width: $h1-font-size;
      height: $h1-font-size;
    }
  }

  p {
    &:last-child::after {
      width: 1rem;
      height: 1rem;
    }
  }

  p,
  h1 {
    &:last-child::after {
      content: '';
      background: url(#{$freyja-asset-path}/svg/icons/what-block.svg) no-repeat;
      display: inline-block;
      margin-left: 0.5rem;
      margin-bottom: 2px;
      vertical-align: text-bottom;
    }
  }
}


================================================
FILE: scss/components/_links.scss
================================================
a:hover {
  text-decoration: underline;
}

td,
li,
p {
  a {
    color: $link-color;
    transition: color 0.025s linear, background-color 0.025s linear;

    &:hover,
    &:focus,
    &:active {
      color: $white;
      background-color: $black;
    }
  }
}

p {
  a {
    text-decoration: underline;
  }
}

.text-light {
  td,
  li,
  p {
    a {
      color: $tertiary;

      &:hover,
      &:focus,
      &:active {
        color: $white;
      }
    }
  }
}

a,
button {
  &.inverted {
    color: currentColor;

    &:hover,
    &:focus,
    &:active {
      color: $primary;
      background-color: transparent;

      .text-light & {
        color: $tertiary;
      }
    }
  }
}

.arrow-link {
  color: currentColor;
  font-weight: bold;
  position: relative;
  text-transform: uppercase;
  text-align: inherit;
  margin-left: 1.5em;
  display: block;

  &:focus,
  &:hover,
  &:active {
    color: currentColor;
  }

  .svg-icon {
    position: absolute;
    top: 4px;
    left: -1.5em;
  }
}

.hover-current {
  &:hover,
  &:focus,
  &:active {
    background-color: transparent;
    color: currentColor !important;
  }
}

a.hover-white {
  &:hover,
  &:focus,
  &:active {
    background-color: transparent;
    color: $white !important;
  }
}

a.hover-black {
  &:hover,
  &:focus,
  &:active {
    background-color: transparent;
    color: $black !important;
  }
}

.anchor-link {
  display: inline-block;
  padding: 0.6rem 1rem;
  color: $black;
  background-color: rgba(255, 255, 255, 0.3);
  box-shadow: 2px 2px 0 0 rgba(255, 255, 255, 0.5);
  transition: background-color 0.025s linear;

  &:hover,
  &:active,
  &:focus {
    background-color: rgba(255, 255, 255, 0.6);
    color: $body-color;
  }

  .svg-icon {
    transform: translateY(calc(3em / 16));
    margin-right: 0.2rem;
    color: rgba(0, 0, 0, 0.5);
  }
}

.text-light,
.text-white {
  .anchor-link {
    color: $white;
    background-color: rgba(0, 0, 0, 0.3);
    box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.5);

    &:hover,
    &:active,
    &:focus {
      background-color: rgba(0, 0, 0, 0.6);
      color: $white;
    }

    .svg-icon {
      color: rgba(255, 255, 255, 0.5);
    }
  }
}


================================================
FILE: scss/components/_loader.scss
================================================
.preloader {
  text-align: center;

  p {
    font-size: 1.2em;
    margin-top: 1.3rem;
    margin-bottom: 0;
  }
}

.area-overlay {
  .preloader {
    padding: 1rem 2rem;
    background: #fff;
    box-shadow: 0 0 0 3px rgba($black, 0.2) inset;

    .text-light & {
      background: #000;
      box-shadow: 0 0 0 3px rgba($white, 0.35) inset;

      .square {
        background: $tertiary;
      }
    }
  }
}

/*
Copyright (c) 2015 by Tashfeen Ahmad (http://codepen.io/tashfene/pen/medPdY)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the
Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

.bigsquare {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  overflow: hidden;
  -webkit-transform-origin: bottom left;
  -ms-transform-origin: bottom left;
  transform-origin: bottom left;
  -webkit-animation: bigSqrShrink 1s linear infinite;
  animation: bigSqrShrink 1s linear infinite;

  .square {
    position: absolute;
    width: 20px;
    height: 20px;
    background: $primary;
  }

  .first {
    left: 0;
    top: 20px;
  }

  .second {
    left: 20px;
    top: 20px;
    animation: drop2 1s linear infinite;
  }

  .third {
    left: 0;
    top: 0;
    animation: drop3 1s linear infinite;
  }

  .fourth {
    left: 20px;
    top: 0;
    animation: drop4 1s linear infinite;
  }
}

@keyframes bigSqrShrink {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  90% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  100% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}

@keyframes drop2 {
  0% {
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
  }

  25% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }

  100% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}

@keyframes drop3 {
  0% {
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
  }

  50% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }

  100% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}

@keyframes drop4 {
  0% {
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
  }

  75% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }

  100% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}


================================================
FILE: scss/components/_logo.scss
================================================
.svg-logo {
  overflow: unset !important;

  use {
    fill: currentColor;
  }
}


================================================
FILE: scss/components/_modal.scss
================================================
.modal-content {
  padding: 0 15px;
}

.modal-header {
  justify-content: center;

  .close {
    position: absolute;
    right: 30px;
  }
}

.modal-body {
  text-align: center;
}

.modal-footer {
  justify-content: center;
}


================================================
FILE: scss/components/_navbar.scss
================================================
.navbar {
  @include box-shadow(none);
}

.navbar-collapse {
  text-align: center;
}

.navbar-inverse {
  margin-bottom: 0;
}

@include media-breakpoint-down(sm) {
  .navbar-collapse {
    margin-top: 0;
  }

  .navbar-header__brand-img {
    max-width: 200px;
    margin: 0 auto;
  }

  .navbar-inverse {
    min-height: 50px;
  }
}

.navbar-nav {
  flex-wrap: wrap;
}

.navbar-light,
.navbar-dark {
  .navbar-nav {
    .nav-link {
      color: currentColor;

      &:active,
      &:focus,
      &:hover {
        color: currentColor;
        background-color: transparent;
      }

      &.active {
        color: $white;
        background-color: $black;
      }

      &.disabled {
        background: transparent;
        color: $nav-link-disabled-color;

        &:hover {
          color: $nav-link-disabled-color !important;
        }
      }
    }
  }
}

.navbar-dark {
  color: $white;
}

.nav-link {
  padding: 0.5rem 0.75rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: left;
  display: flex;
  align-items: center;

  &:hover {
    color: $white;
    background-color: $black;
  }

  &.disabled {
    background: transparent;
    cursor: default;

    &:hover {
      color: $nav-link-disabled-color !important;
    }
  }
  @media screen and (-ms-high-contrast: active) {
    -ms-high-contrast-adjust: none;
    color: windowText !important;
    &.active,
    &:hover {
      color: window !important;
      background-color: HighLight !important;
    }
  }
}

.nav {
  margin: 0 -2px;

  &.flex-column {
    &.align-items-start,
    &.align-items-end {
      .nav-link {
        width: auto;
      }
    }

    .nav-link {
      width: 100%;
    }
  }
}

.nav-item {
  margin: 0 2px;
  display: flex;
}

.dropdown-menu {
  font-size: inherit;
  text-transform: uppercase;
}


================================================
FILE: scss/components/_page-section.scss
================================================
$page-section-vertical-padding: 4rem; // 64px;
$page-section--article-top-padding: 2.75rem; // 44px;

.page-section {
  position: relative;
  padding: $page-section-vertical-padding 0;

  &--half-spacing {
    padding: $page-section-vertical-padding / 2 0;
  }

  &--half-top-spacing {
    padding-top: $page-section-vertical-padding / 2;
  }

  &--first {
    padding-top: $page-section--article-top-padding;
  }

  &--double-spacing {
    padding: 156px 0;
  }

  &--no-top-spacing {
    padding-top: 0 !important;
  }

  &--no-bottom-spacing {
    padding-bottom: 0;
  }

  &--no-overflow {
    overflow: hidden;
  }

  &.text-white,
  &.text-light {
    @extend %antialiasing;
  }

  @include media-breakpoint-down(sm) {
    padding: 44px 0;

    &--first {
      padding-top: 28px;
    }

    &--no-bottom-spacing {
      padding-bottom: 0;
    }
  }

  h1,
  > .container > .row:first-child > div > :first-child {
    margin-top: 0;
  }
}


================================================
FILE: scss/components/_progress.scss
================================================
.progress {
  height: 4px;
  border-radius: 0;
  background-color: $black;

  &-container {
    background-color: $senary;
    color: $white;
  }

  //TODO: Move this into Progress markup

  &-labels {
    justify-content: center !important;

    &__list-item {
      flex: 0 0 25%;
      max-width: 25%;

      .glyphicon.glyphicon-stop {
        background-color: $black;
        display: inline-block;
        height: 1em;
        width: 1em;
        transform: scale(0.8) translateY(3px);
      }
    }
  }
}


================================================
FILE: scss/components/_radio.scss
================================================
.radio {
  display: inline-block;
  position: relative;

  @media screen and (-ms-high-contrast: active) {
    -ms-high-contrast-adjust: none;
  }

  input[type="radio"] {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    height: 1.3em;
    width: 1.3em;

    &:checked {
      & + label {
        .radio-icon {
          border-color: $primary;

          @media screen and (-ms-high-contrast: active) {
            border-color: Highlight;
          }

          &::after {
            background-color: $primary;
            
            @media screen and (-ms-high-contrast: active) {
              background-color: Highlight;
            }
          }
        }

        &.radio-selection {
          border-color: $primary;
          background-color: $ebb;
          box-shadow: 3px 3px 0 rgba($black, 0.1) inset;

          @media screen and (-ms-high-contrast: active) {
            border-color: Highlight;
            background-color: Window;
          }
        }
      }
    }

    &:focus {
      outline: none;

      & + label {
        .radio-icon {
          box-shadow: 0 0 5px 1px Highlight;
        }
      }
    }

    &:disabled {
      & + label {
        color: $gray-500;

        .radio-icon {
          border-color: $gray-400;
          background-color: $gray-300;

          &::before {
            content: "";
            display: block;
            position: absolute;
            background-color: $gray-400;
            left: 0;
            top: 50%;
            width: 100%;
            height: 2px;
            transform: translateY(-50%) rotate(45deg);
          }
        }
      }
    }

    &:disabled:checked {
      & + label {
        .radio-icon {
          &::after {
            background-color: $gray-400;
          }
        }

        &.radio-selection {
          border-color: $gray-400;
          background-color: $ebb;
          box-shadow: none;
        }
      }
    }
  }

  .radio-label {
    display: inline-flex;
    align-items: center;
    transition: 0.3s;
  }

  .radio-icon {
    display: inline-block;
    background-color: $white;
    border: 2px solid rgba($black, 0.5);
    border-radius: 50%;
    margin-right: 0.25em;
    padding: 2px;
    transition: 0.3s;
    line-height: 0;
    position: relative;

    @media screen and (-ms-high-contrast: active) {
      background-color: Window;
      border-color: WindowText;
    }

    &::after {
      content: "";
      display: inline-block;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      transition: 0.3s;
    }
  }

  .radio-selection {
    display: block;
    border: 3px solid rgba($black, 0.1);
    border-radius: 4px;
    padding: $spacer;
    transition: 0.3s;

    @media screen and (-ms-high-contrast: active) {
      border-color: windowText;
      box-shadow: none !important;
    }
  }
}


================================================
FILE: scss/components/_ribbons.scss
================================================
.ribbon {
  transform-origin: left top;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 96px;
  height: 96px;
  transition: all 0.6s $custom-bezier-1;
}

.ribbon-icon {
  fill: currentColor;
  width: 96px;
  height: 96px;

  .top,
  .left {
    fill: transparent;
  }

  .corner {
    fill: inherit;
  }
}

.ribbon-icon--secondary {
  fill: $quaternary-supportive;
}

.ribbon-label {
  display: flex;
  transform: translateY(-50%) translateX(-50%) rotate(-45deg);
  transform-origin: 50%;
  position: absolute;
  top: 34%;
  left: 34%;
  width: 75%;
  height: 75%;
  white-space: normal;
  align-items: center;
  justify-content: center;
}

.btn {
  .ribbon-icon {
    transition: fill 0.15s ease-in-out;
    fill: $secondary-supportive;
    filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.25));

    .top {
      transition: fill 0.15s ease-in-out;
      fill: rgba($white, 0.3);
    }

    .left {
      transition: fill 0.15s ease-in-out;
      fill: rgba($black, 0.25);
    }
  }

  &:hover,
  &:focus {
    .ribbon-icon {
      fill: $primary;
    }
  }
}


================================================
FILE: scss/components/_tiles.scss
================================================
$tile-base-size: 276px;
$tile-gutter-size: 12px;
$tile-transition-time: 200ms;
$btn-video-play-height: 80px;
$tile-caption-height: 84px;

.tile {
  display: block;
  position: relative;
  overflow: hidden;
  background-color: transparent;

  /*
    Init and start is set as animation cues by Freewall when new tiles appear in the DOM.
    The load state is set by the Tile component when the tile image has finished loading
  */
  &[data-state="init"],
  &[data-state="start"] {
    display: none;
  }

  &[data-state="load"] {
    display: block;

    @extend %animation-scale--0-to-1;
  }

  &[data-state="move"] {
    transition: top 0.5s, left 0.5s, width 0.5s, height 0.5s;
  }
}

.tile-link {
  &:focus,
  &:hover {
    .tile-caption__text {
      opacity: 1;
    }

    .sliding-content__body {
      transform: translate3d(0, -99%, 0);
    }
  }
}

.tile__image-container {
  display: inline-block;
  width: 100%;
  height: 100%;
  transition: background-color 0.5s ease-out;
  background-color: rgba(0, 0, 0, 0);

  &.tile__image-container--loading {
    background-color: rgba(0, 0, 0, 0.1);

    .tile__image {
      opacity: 0;
    }
  }
}

.tile__image {
  width: 100%;
  transition: transform $tile-transition-time ease-in-out;

  .tile__image--fade {
    transition: opacity 0.5s ease-out;
  }
}

.sliding-content {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 0;
}

.sliding-content__body {
  transition: all $tile-transition-time ease-in-out;
  // Default position of the slide-up tile caption
  transform: translate3d(0, -$tile-caption-height, 0);
}

.tile-category {
  position: absolute;
  top: -14px;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 1;
}

.tile-category__text {
  display: inline-block;
  font-size: $text-smallest;
  font-weight: bold;
  letter-spacing: 1px;
  background-color: $white;
  color: $shark;
  padding: 0.5rem 1rem;
  text-transform: uppercase;

  @extend %force-layer-creation;
}

.tile-caption {
  display: block;
  background-color: rgba(0, 0, 0, 0.7);
  color: $white;
  padding: 0.875rem 1.2rem 1.2rem 1.2rem;
  min-height: $tile-caption-height;
  text-align: center;
}

.tile-caption__title {
  margin: 0.8rem 0 1rem;
  text-transform: uppercase;
}

.tile-caption__title--long {
  margin: 1.2rem 0;
}

.tile-caption__text {
  transition: opacity $tile-transition-time ease-in;
  opacity: 0;
  margin: 0;
  font-size: $text-small;
  line-height: 1.3;
}

/*
  Possible tile sizes
*/

.tile--size-1x1 {
  @include tile-size(1,1);

  .tile-caption__title--long {
    font-size: $text-small;
  }
}

.tile--size-1x2 {
  @include tile-size(1,2);
}

.tile--size-2x1 {
  @include tile-size(2,1);
}

.tile--size-2x2 {
  @include tile-size(2, 2);
}

.tile--size-2x2,
.tile--size-2x1 {
  .tile-caption__title:not(.tile-caption__title--long) {
    margin: 0.625rem 0;
    font-size: $h3-font-size * 1.25;
  }

  .tile-caption__text {
    font-size: initial;
  }
}

.tile--size-4x2 {
  @include tile-size(4,2);

  .sliding-content__body {
    transform: translate3d(0, -($tile-caption-height * 1.2), 0);
  }

  .tile-caption__title {
    margin: 1.4rem 0;
    font-size: $h2-font-size;
  }

  .tile-caption__text {
    font-size: $h2-font-size * 0.93;
  }
}

/*
    Image Loading Transitions
*/
.tweet-tile {
  padding: 2rem;
  color: $white;

  a {
    @include link($white, $white);
  }
}

.tweet-tile__title {
  font-size: initial;
  text-transform: uppercase;
}

.tweet-tile-media {
  margin-bottom: 0.5rem;
}

.tweet-tile-media__handle {
  font-size: $text-smaller;
}

.tweet-tile__text {
  line-height: 1.3em;
}

.video-tile__play-btn {
  position: absolute;
  width: 100%;
  text-align: center;
}


================================================
FILE: scss/styles.scss
================================================
@import "~bootstrap/scss/functions";
@import "./abstract/colors";
@import "./abstract/theme";
@import "./abstract/keyframes";
@import "~bootstrap/scss/variables";
@import "./abstract/variables";
@import "./abstract/mixins";
@import "~bootstrap/scss/mixins";
@import "./abstract/utilities";
@import "./abstract/extendables";
@import "./abstract/columns";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/dropdown";
@import "~bootstrap/scss/nav";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/card";
@import "~bootstrap/scss/alert";
@import "~bootstrap/scss/progress";
@import "~bootstrap/scss/input-group";
@import "~bootstrap/scss/close";
@import "~bootstrap/scss/modal";
@import "~bootstrap/scss/code";
@import "~bootstrap/scss/utilities";
@import "./base/typography";
@import "./base/background";
@import "./components/alert";
@import "./components/radio";
@import "./components/checkbox";
@import "./components/buttons";
@import "./components/borders";
@import "./components/forms";
@import "./components/card";
@import "./components/close";
@import "./components/modal";
@import "./components/progress";
@import "./components/navbar";
@import "./components/links";
@import "./components/icons";
@import "./components/animations";
@import "./components/ribbons";
@import "./components/tiles";
@import "./components/footer";
@import "./components/attribution";
@import "./components/page-section";
@import "./components/countdown";
@import "./components/counter";
@import "./components/area-overlay";
@import "./components/loader";
@import "./components/logo";