├── .gitignore ├── .travis.yml ├── LICENSE ├── README.md ├── assets ├── fonts │ ├── LICENSE_OFL.txt │ ├── Minecraft-Seven_v2.otf │ ├── Minecraft-Seven_v2.ttf │ ├── Minecraft-Seven_v2.woff │ ├── Minecraft-Tenv2.eot │ ├── Minecraft-Tenv2.ttf │ ├── Minecraft-Tenv2.woff │ ├── Minecraft-Tenv2.woff2 │ ├── MinecraftFive-Bold.css │ ├── MinecraftFive-Bold.eot │ ├── MinecraftFive-Bold.html │ ├── MinecraftFive-Bold.svg │ ├── MinecraftFive-Bold.ttf │ ├── MinecraftFive-Bold.woff │ ├── MinecraftFive-Regular.css │ ├── MinecraftFive-Regular.eot │ ├── MinecraftFive-Regular.html │ ├── MinecraftFive-Regular.svg │ ├── MinecraftFive-Regular.ttf │ ├── MinecraftFive-Regular.woff │ ├── MinecraftFive-Regular.woff2 │ ├── MinecraftSeven.css │ ├── MinecraftSeven.eot │ ├── MinecraftSeven.html │ ├── MinecraftSeven.svg │ ├── MinecraftSeven.ttf │ ├── MinecraftSeven.woff │ ├── MinecraftTen.css │ ├── MinecraftTen.eot │ ├── MinecraftTen.html │ ├── MinecraftTen.svg │ ├── MinecraftTen.ttf │ ├── MinecraftTen.woff │ ├── NotoSans-Bold.css │ ├── NotoSans-Bold.eot │ ├── NotoSans-Bold.html │ ├── NotoSans-Bold.svg │ ├── NotoSans-Bold.ttf │ ├── NotoSans-Bold.woff │ ├── NotoSans-Bold.woff2 │ ├── NotoSans-BoldItalic.css │ ├── NotoSans-BoldItalic.eot │ ├── NotoSans-BoldItalic.html │ ├── NotoSans-BoldItalic.svg │ ├── NotoSans-BoldItalic.ttf │ ├── NotoSans-BoldItalic.woff │ ├── NotoSans-BoldItalic.woff2 │ ├── NotoSans-Italic.css │ ├── NotoSans-Italic.eot │ ├── NotoSans-Italic.html │ ├── NotoSans-Italic.svg │ ├── NotoSans-Italic.ttf │ ├── NotoSans-Italic.woff │ ├── NotoSans-Italic.woff2 │ ├── NotoSans-Regular.css │ ├── NotoSans-Regular.eot │ ├── NotoSans-Regular.html │ ├── NotoSans-Regular.svg │ ├── NotoSans-Regular.ttf │ ├── NotoSans-Regular.woff │ └── NotoSans-Regular.woff2 ├── img │ ├── bg-grass.png │ ├── bg-snow.png │ ├── bg-wool-dark.png │ ├── bg-wool-white.png │ ├── border-dungeons-25.png │ └── grass.png └── svg │ ├── icons │ ├── color-cart.svg │ ├── color-chest--animated.svg │ ├── color-chest.svg │ ├── color-close.svg │ ├── color-dungeons-launcher.svg │ ├── color-facebook.svg │ ├── color-grass-block.svg │ ├── color-instagram.svg │ ├── color-menu.svg │ ├── color-reddit.svg │ ├── color-steve-alex.svg │ ├── color-ten-players.svg │ ├── color-twitter.svg │ ├── color-two-players.svg │ ├── color-youtube.svg │ ├── line-book.svg │ ├── line-box.svg │ ├── line-calendar.svg │ ├── line-collapse.svg │ ├── line-console.svg │ ├── line-creeper.svg │ ├── line-device.svg │ ├── line-expand.svg │ ├── line-globe.svg │ ├── line-heart.svg │ ├── line-hide.svg │ ├── line-pc.svg │ ├── line-pdf-file.svg │ ├── line-shirt.svg │ ├── line-show.svg │ ├── line-vector-export.svg │ ├── line-vector-help.svg │ ├── line-vr-enhanced.svg │ ├── line-vr-turning.svg │ ├── line-vr-virtual-living-room.svg │ ├── line-wallet.svg │ ├── pixel-arrow-down.svg │ ├── pixel-arrow-left.svg │ ├── pixel-arrow-right.svg │ ├── pixel-arrow-up.svg │ ├── pixel-begin-quote.svg │ ├── pixel-caret.svg │ ├── pixel-check.svg │ ├── pixel-close.svg │ ├── pixel-end-quote.svg │ ├── pixel-facebook.svg │ ├── pixel-instagram.svg │ ├── pixel-pause.svg │ ├── pixel-play.svg │ ├── pixel-reddit.svg │ ├── pixel-twitter.svg │ ├── pixel-youtube.svg │ ├── what-block.svg │ ├── what-computer.svg │ └── what-devices.svg │ ├── logos │ ├── cero-a.svg │ ├── esrb.svg │ ├── microsoft-studios.svg │ ├── microsoft.svg │ ├── minecon-earth-party-2018.svg │ ├── minecon.svg │ ├── minecraft-core-brand.svg │ ├── minecraft-dungeons.svg │ ├── minecraft-java-edition.svg │ ├── minecraft.svg │ ├── mojang-studios-horizontal.svg │ ├── mono-microsoft-studios.svg │ ├── mono-microsoft.svg │ ├── mono-mojang-studios-horizontal.svg │ ├── mono-windows.svg │ ├── mono-xbox-game-studios.svg │ ├── mono-xbox.svg │ ├── pegi.svg │ ├── realms.svg │ ├── storymode.svg │ └── xbox-game-studios.svg │ └── shapes │ ├── ribbon.svg │ ├── shape-model-classic.svg │ ├── shape-model-slim.svg │ ├── square-like-black.svg │ └── square-like.svg ├── package-lock.json ├── 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 /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .idea -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | sudo: false 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2020 Mojang Studios 2 | 3 | All image assets of this project are copyrighted by Mojang Studios and may not be used 4 | outside this project without permission by Mojang Studios. 5 | 6 | MIT License 7 | 8 | Copyright (c) 2020 Mojang Studios 9 | 10 | Permission is hereby granted, free of charge, to any person obtaining a copy 11 | of this software and associated documentation files (the "Software"), to deal 12 | in the Software without restriction, including without limitation the rights 13 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 14 | copies of the Software, and to permit persons to whom the Software is 15 | furnished to do so, subject to the following conditions: 16 | 17 | The above copyright notice and this permission notice shall be included in all 18 | copies or substantial portions of the Software. 19 | 20 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 21 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 22 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 23 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 24 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 25 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 26 | SOFTWARE. 27 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # web-theme-bootstrap 2 | 3 | [![Build Status](https://travis-ci.org/Mojang/web-theme-bootstrap.svg?branch=main)](https://travis-ci.org/Mojang/web-theme-bootstrap) 4 | 5 | Contains the theme used on minecraft.net based on Bootstrap 4 6 | 7 | ## Install 8 | 9 | ```cli 10 | > npm i @mojang/web-theme-bootstrap --save 11 | ``` 12 | 13 | ## Included in the package 14 | 15 | This package includes two parts: 16 | 17 | ### 1. SCSS files needed to generate your minecraft.net look and feel. 18 | 19 | These files can be found under the scss folder. In your main scss file, include the following to get started: 20 | 21 | ```scss 22 | $freyja-asset-path: "[path_to_public_folder]"; 23 | $master-head-height-lg: 112px; 24 | $master-head-height-md: 87px; 25 | $global-menu-height: 27px; 26 | 27 | @import "~@mojang/web-theme-bootstrap/scss/styles"; 28 | ``` 29 | 30 | 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. 31 | 32 | ### 2. Generic image assets used in several places, including an icon-set 33 | 34 | 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. 35 | 36 | 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. 37 | 38 | ### Changelog 39 | 40 | v7.3.0 & v7.3.1 41 | - Added fonts: Minecraft Ten V2 & Minecraft Seven V2 42 | 43 | v7.0.0 44 | - Update Minecraft, Minecraft Java, Realms & Minecraft Dungeons logos 45 | 46 | 47 | v6.7.0 48 | - Added new class `.form-tooltip`, `form-tooltip-text` 49 | - Added svg `line-vector-export` and `line-vector-help` followed naming convention. 50 | - Removed svg `vector` 51 | 52 | v6.6.0 53 | - Added media query `@media (forced-colors: active)` for `.form-control:focus` 54 | - Added new class `.required:after` 55 | - Added svg `vector` 56 | 57 | 58 | v6.5.0 59 | - Add a new footer option. `mojang-studios-tall-footer` 60 | 61 | v6.4.0 62 | - Added Minecraft Core Brand Logo 63 | 64 | v6.3.1 65 | - Fixes README Changelog 66 | 67 | v6.3.0 68 | - New primary color (buttons & links are based out of primary). New secondary and tertiary colors. Loader now uses tertiary colors on dark backgrounds. 69 | 70 | v6.2.10 71 | - Add Minecraft Java Edition Logo 72 | 73 | v6.2.9 74 | - Remove use of `bg-variant` and `text-emphasis-variant` mixins, that are deprecated in bootstrap@4.4.0 75 | 76 | v6.2.8 77 | - High contrast fix for button 78 | 79 | v6.2.7 80 | - Add box-shadow for disabled button 81 | - High contrast fix for nav bar 82 | 83 | v6.2.6 84 | - Rerelease due to publish issue of 6.2.5 85 | 86 | v6.2.5 87 | - Add highlight color on focus for link button 88 | 89 | v6.2.4 90 | - Add style for radio and link button on high contrast mode 91 | - Add noto sans font assets 92 | 93 | v6.2.3 94 | - Fix duplicate id in svg and add button high contrast style 95 | 96 | v6.2.2 97 | - Fix radio buttons in high contrast mode 98 | 99 | v6.2.1 100 | - Add radio button high contrast style 101 | 102 | v6.2.0 103 | - Add Minecraft Dungeons Launcher icons 104 | 105 | v6.1.0 106 | - Add `.icon-cero-a` 107 | 108 | v6.0.0 109 | **BREAKING CHANGE** 110 | - Rename following classes: 111 | * `mojang-footer` -> `mojang-studios-footer` 112 | * `icon-microsoft-studios` -> `icon-xbox-game-studios` 113 | * `icon-mojang` -> `icon-mojang-studios` 114 | 115 | v5.1.0 116 | - Add cero-a logo 117 | 118 | v5.0.0 119 | 120 | **BREAKING CHANGE** 121 | 122 | - Replace logo svgs: 123 | * `mojang` with `mojang-studios-horizontal` 124 | * `mono-mojang` with `mono-mojang-studios-horizontal` 125 | 126 | 127 | v4.5.0 128 | 129 | - Add xbox game studios color logo 130 | 131 | v4.4.0 132 | 133 | - Add `font-mc-seven` 134 | 135 | v4.3.1 136 | 137 | - Fix cart icon size 138 | 139 | v4.3.0 140 | 141 | - Add pixelated cart icon 142 | 143 | v4.2.0 144 | 145 | - Add Windows logo 146 | - Add new Minecraft Dungeons color 147 | 148 | v4.1.0 149 | 150 | - Add Minecraft Dungeons logo back 151 | 152 | v4.0.0 153 | 154 | - Remove Minecraft Dungeons logo 155 | 156 | v3.3.1 157 | 158 | - Namespace Minecraft Dungeons logo ids 159 | 160 | v3.3.0 161 | 162 | - Add Minecraft Dungeons logo 163 | 164 | v3.2.0 165 | 166 | - Darken link color 5% 167 | - Add support for disabled radio button 168 | - Add new checkbox 169 | 170 | v3.1.1 171 | 172 | - Set link color to primary (was `$primary-supportive`) 173 | 174 | v3.1.0 175 | 176 | - Update inverted link hover color 177 | - Update `dropdown-menu` style 178 | - Add Xbox Game Studios logo 179 | 180 | v3.0.0 181 | 182 | - Update primary and tertiary color 183 | - **BREAKING CHANGE**: Remove `$primary-light-1`, `$primary-light-2`, `$primary-dark-1`, `$primary-dark-2`. Use `$primary-supportive` for dark and `$tertiary` for light. 184 | 185 | v2.0.0 186 | 187 | - Fix position of inline icons 188 | - Add 4 new monochrome SVG logos 189 | - Add a `.svg-logo` class that makes you able to control color through css 190 | - **BREAKING CHANGE**: `#microsoft` and `#mojang` logos now inherit their text color from `currentColor`. Use `.svg-logo` class and set text color to override. 191 | -------------------------------------------------------------------------------- /assets/fonts/LICENSE_OFL.txt: -------------------------------------------------------------------------------- 1 | This Font Software is licensed under the SIL Open Font License, 2 | Version 1.1. 3 | 4 | This license is copied below, and is also available with a FAQ at: 5 | http://scripts.sil.org/OFL 6 | 7 | ----------------------------------------------------------- 8 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 9 | ----------------------------------------------------------- 10 | 11 | PREAMBLE 12 | The goals of the Open Font License (OFL) are to stimulate worldwide 13 | development of collaborative font projects, to support the font 14 | creation efforts of academic and linguistic communities, and to 15 | provide a free and open framework in which fonts may be shared and 16 | improved in partnership with others. 17 | 18 | The OFL allows the licensed fonts to be used, studied, modified and 19 | redistributed freely as long as they are not sold by themselves. The 20 | fonts, including any derivative works, can be bundled, embedded, 21 | redistributed and/or sold with any software provided that any reserved 22 | names are not used by derivative works. The fonts and derivatives, 23 | however, cannot be released under any other type of license. The 24 | requirement for fonts to remain under this license does not apply to 25 | any document created using the fonts or their derivatives. 26 | 27 | DEFINITIONS 28 | "Font Software" refers to the set of files released by the Copyright 29 | Holder(s) under this license and clearly marked as such. This may 30 | include source files, build scripts and documentation. 31 | 32 | "Reserved Font Name" refers to any names specified as such after the 33 | copyright statement(s). 34 | 35 | "Original Version" refers to the collection of Font Software 36 | components as distributed by the Copyright Holder(s). 37 | 38 | "Modified Version" refers to any derivative made by adding to, 39 | deleting, or substituting -- in part or in whole -- any of the 40 | components of the Original Version, by changing formats or by porting 41 | the Font Software to a new environment. 42 | 43 | "Author" refers to any designer, engineer, programmer, technical 44 | writer or other person who contributed to the Font Software. 45 | 46 | PERMISSION & CONDITIONS 47 | Permission is hereby granted, free of charge, to any person obtaining 48 | a copy of the Font Software, to use, study, copy, merge, embed, 49 | modify, redistribute, and sell modified and unmodified copies of the 50 | Font Software, subject to the following conditions: 51 | 52 | 1) Neither the Font Software nor any of its individual components, in 53 | Original or Modified Versions, may be sold by itself. 54 | 55 | 2) Original or Modified Versions of the Font Software may be bundled, 56 | redistributed and/or sold with any software, provided that each copy 57 | contains the above copyright notice and this license. These can be 58 | included either as stand-alone text files, human-readable headers or 59 | in the appropriate machine-readable metadata fields within text or 60 | binary files as long as those fields can be easily viewed by the user. 61 | 62 | 3) No Modified Version of the Font Software may use the Reserved Font 63 | Name(s) unless explicit written permission is granted by the 64 | corresponding Copyright Holder. This restriction only applies to the 65 | primary font name as presented to the users. 66 | 67 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font 68 | Software shall not be used to promote, endorse or advertise any 69 | Modified Version, except to acknowledge the contribution(s) of the 70 | Copyright Holder(s) and the Author(s) or with their explicit written 71 | permission. 72 | 73 | 5) The Font Software, modified or unmodified, in part or in whole, 74 | must be distributed entirely under this license, and must not be 75 | distributed under any other license. The requirement for fonts to 76 | remain under this license does not apply to any document created using 77 | the Font Software. 78 | 79 | TERMINATION 80 | This license becomes null and void if any of the above conditions are 81 | not met. 82 | 83 | DISCLAIMER 84 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 85 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF 86 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT 87 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE 88 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 89 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL 90 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 91 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM 92 | OTHER DEALINGS IN THE FONT SOFTWARE. 93 | -------------------------------------------------------------------------------- /assets/fonts/Minecraft-Seven_v2.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/fonts/Minecraft-Seven_v2.otf -------------------------------------------------------------------------------- /assets/fonts/Minecraft-Seven_v2.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/fonts/Minecraft-Seven_v2.ttf -------------------------------------------------------------------------------- /assets/fonts/Minecraft-Seven_v2.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/fonts/Minecraft-Seven_v2.woff -------------------------------------------------------------------------------- /assets/fonts/Minecraft-Tenv2.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/fonts/Minecraft-Tenv2.eot -------------------------------------------------------------------------------- /assets/fonts/Minecraft-Tenv2.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/fonts/Minecraft-Tenv2.ttf -------------------------------------------------------------------------------- /assets/fonts/Minecraft-Tenv2.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/fonts/Minecraft-Tenv2.woff -------------------------------------------------------------------------------- /assets/fonts/Minecraft-Tenv2.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/fonts/Minecraft-Tenv2.woff2 -------------------------------------------------------------------------------- /assets/fonts/MinecraftFive-Bold.css: -------------------------------------------------------------------------------- 1 | /* Webfont: MinecraftFive-Bold */@font-face { 2 | font-family: 'MinecraftFive'; 3 | src: url('MinecraftFive-Bold.eot'); /* IE9 Compat Modes */ 4 | src: url('MinecraftFive-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 5 | url('MinecraftFive-Bold.woff') format('woff'), /* Modern Browsers */ 6 | url('MinecraftFive-Bold.ttf') format('truetype'), /* Safari, Android, iOS */ 7 | url('MinecraftFive-Bold.svg#MinecraftFive-Bold') format('svg'); /* Legacy iOS */ 8 | font-style: normal; 9 | font-weight: bold; 10 | text-rendering: optimizeLegibility; 11 | } 12 | 13 | -------------------------------------------------------------------------------- /assets/fonts/MinecraftFive-Bold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/fonts/MinecraftFive-Bold.eot -------------------------------------------------------------------------------- /assets/fonts/MinecraftFive-Bold.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Minecraft Five Bold - Web Font Specimen 7 | 8 | 11 | 12 | 13 |

The quick brown fox jumps over the lazy dog. $123.45!

14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/fonts/MinecraftFive-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/fonts/MinecraftFive-Bold.ttf -------------------------------------------------------------------------------- /assets/fonts/MinecraftFive-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/fonts/MinecraftFive-Bold.woff -------------------------------------------------------------------------------- /assets/fonts/MinecraftFive-Regular.css: -------------------------------------------------------------------------------- 1 | /* Webfont: MinecraftFive-Regular */@font-face { 2 | font-family: 'MinecraftFive'; 3 | src: url('MinecraftFive-Regular.eot'); /* IE9 Compat Modes */ 4 | src: url('MinecraftFive-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 5 | url('MinecraftFive-Regular.woff') format('woff'), /* Modern Browsers */ 6 | url('MinecraftFive-Regular.ttf') format('truetype'), /* Safari, Android, iOS */ 7 | url('MinecraftFive-Regular.svg#MinecraftFive-Regular') format('svg'); /* Legacy iOS */ 8 | font-style: normal; 9 | font-weight: normal; 10 | text-rendering: optimizeLegibility; 11 | } 12 | 13 | -------------------------------------------------------------------------------- /assets/fonts/MinecraftFive-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/fonts/MinecraftFive-Regular.eot -------------------------------------------------------------------------------- /assets/fonts/MinecraftFive-Regular.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Minecraft Five Regular - Web Font Specimen 7 | 8 | 11 | 12 | 13 |

The quick brown fox jumps over the lazy dog. $123.45!

14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/fonts/MinecraftFive-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/fonts/MinecraftFive-Regular.ttf -------------------------------------------------------------------------------- /assets/fonts/MinecraftFive-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/fonts/MinecraftFive-Regular.woff -------------------------------------------------------------------------------- /assets/fonts/MinecraftFive-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/fonts/MinecraftFive-Regular.woff2 -------------------------------------------------------------------------------- /assets/fonts/MinecraftSeven.css: -------------------------------------------------------------------------------- 1 | /* Webfont: MinecraftSeven */@font-face { 2 | font-family: 'MinecraftSeven'; 3 | src: url('MinecraftSeven.eot'); /* IE9 Compat Modes */ 4 | src: url('MinecraftSeven.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 5 | url('MinecraftSeven.woff') format('woff'), /* Modern Browsers */ 6 | url('MinecraftSeven.ttf') format('truetype'), /* Safari, Android, iOS */ 7 | url('MinecraftSeven.svg#MinecraftSeven') format('svg'); /* Legacy iOS */ 8 | font-style: normal; 9 | font-weight: normal; 10 | text-rendering: optimizeLegibility; 11 | } 12 | 13 | -------------------------------------------------------------------------------- /assets/fonts/MinecraftSeven.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/fonts/MinecraftSeven.eot -------------------------------------------------------------------------------- /assets/fonts/MinecraftSeven.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Minecraft Seven - Web Font Specimen 7 | 8 | 11 | 12 | 13 |

The quick brown fox jumps over the lazy dog. $123.45!

14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/fonts/MinecraftSeven.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/fonts/MinecraftSeven.ttf -------------------------------------------------------------------------------- /assets/fonts/MinecraftSeven.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/fonts/MinecraftSeven.woff -------------------------------------------------------------------------------- /assets/fonts/MinecraftTen.css: -------------------------------------------------------------------------------- 1 | /* Webfont: MinecraftTen */@font-face { 2 | font-family: 'MinecraftTen'; 3 | src: url('MinecraftTen.eot'); /* IE9 Compat Modes */ 4 | src: url('MinecraftTen.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 5 | url('MinecraftTen.woff') format('woff'), /* Modern Browsers */ 6 | url('MinecraftTen.ttf') format('truetype'), /* Safari, Android, iOS */ 7 | url('MinecraftTen.svg#MinecraftTen') format('svg'); /* Legacy iOS */ 8 | font-style: normal; 9 | font-weight: normal; 10 | text-rendering: optimizeLegibility; 11 | } 12 | 13 | -------------------------------------------------------------------------------- /assets/fonts/MinecraftTen.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/fonts/MinecraftTen.eot -------------------------------------------------------------------------------- /assets/fonts/MinecraftTen.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Minecraft Ten - Web Font Specimen 7 | 8 | 11 | 12 | 13 |

The quick brown fox jumps over the lazy dog. $123.45!

14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/fonts/MinecraftTen.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/fonts/MinecraftTen.ttf -------------------------------------------------------------------------------- /assets/fonts/MinecraftTen.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/fonts/MinecraftTen.woff -------------------------------------------------------------------------------- /assets/fonts/NotoSans-Bold.css: -------------------------------------------------------------------------------- 1 | /* Webfont: NotoSans-Bold */@font-face { 2 | font-family: 'Noto Sans'; 3 | src: url('NotoSans-Bold.eot'); /* IE9 Compat Modes */ 4 | src: local('Noto Sans Bold'), local('NotoSans-Bold'), /* locally installed */ 5 | url('NotoSans-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 6 | url('NotoSans-Bold.woff2') format('woff2'), /* Modern Browsers */ 7 | url('NotoSans-Bold.woff') format('woff'), /* IE9-IE11 */ 8 | url('NotoSans-Bold.ttf') format('truetype'), /* Safari, Android, iOS */ 9 | url('NotoSans-Bold.svg#NotoSans-Bold') format('svg'); /* Legacy iOS */ 10 | font-style: normal; 11 | font-weight: bold; 12 | text-rendering: optimizeLegibility; 13 | } 14 | -------------------------------------------------------------------------------- /assets/fonts/NotoSans-Bold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/fonts/NotoSans-Bold.eot -------------------------------------------------------------------------------- /assets/fonts/NotoSans-Bold.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Noto Sans Bold - Web Font Specimen 7 | 8 | 11 | 12 | 13 |

The quick brown fox jumps over the lazy dog. $123.45!

14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/fonts/NotoSans-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/fonts/NotoSans-Bold.ttf -------------------------------------------------------------------------------- /assets/fonts/NotoSans-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/fonts/NotoSans-Bold.woff -------------------------------------------------------------------------------- /assets/fonts/NotoSans-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/fonts/NotoSans-Bold.woff2 -------------------------------------------------------------------------------- /assets/fonts/NotoSans-BoldItalic.css: -------------------------------------------------------------------------------- 1 | /* Webfont: NotoSans-BoldItalic */@font-face { 2 | font-family: 'Noto Sans'; 3 | src: url('NotoSans-BoldItalic.eot'); /* IE9 Compat Modes */ 4 | src: local('Noto Sans Bold Italic'), local('NotoSans-BoldItalic'), /* locally installed */ 5 | url('NotoSans-BoldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 6 | url('NotoSans-BoldItalic.woff2') format('woff2'), /* Modern Browsers */ 7 | url('NotoSans-BoldItalic.woff') format('woff'), /* IE9-IE11 */ 8 | url('NotoSans-BoldItalic.ttf') format('truetype'), /* Safari, Android, iOS */ 9 | url('NotoSans-BoldItalic.svg#NotoSans-BoldItalic') format('svg'); /* Legacy iOS */ 10 | font-style: italic; 11 | font-weight: bold; 12 | text-rendering: optimizeLegibility; 13 | } 14 | -------------------------------------------------------------------------------- /assets/fonts/NotoSans-BoldItalic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/fonts/NotoSans-BoldItalic.eot -------------------------------------------------------------------------------- /assets/fonts/NotoSans-BoldItalic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Noto Sans Bold Italic - Web Font Specimen 7 | 8 | 11 | 12 | 13 |

The quick brown fox jumps over the lazy dog. $123.45!

14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/fonts/NotoSans-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/fonts/NotoSans-BoldItalic.ttf -------------------------------------------------------------------------------- /assets/fonts/NotoSans-BoldItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/fonts/NotoSans-BoldItalic.woff -------------------------------------------------------------------------------- /assets/fonts/NotoSans-BoldItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/fonts/NotoSans-BoldItalic.woff2 -------------------------------------------------------------------------------- /assets/fonts/NotoSans-Italic.css: -------------------------------------------------------------------------------- 1 | /* Webfont: NotoSans-Italic */@font-face { 2 | font-family: 'Noto Sans'; 3 | src: url('NotoSans-Italic.eot'); /* IE9 Compat Modes */ 4 | src: local('Noto Sans Italic'), local('NotoSans-Italic'), /* locally installed */ 5 | url('NotoSans-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 6 | url('NotoSans-Italic.woff2') format('woff2'), /* Modern Browsers */ 7 | url('NotoSans-Italic.woff') format('woff'), /* IE9-IE11 */ 8 | url('NotoSans-Italic.ttf') format('truetype'), /* Safari, Android, iOS */ 9 | url('NotoSans-Italic.svg#NotoSans-Italic') format('svg'); /* Legacy iOS */ 10 | font-style: italic; 11 | font-weight: normal; 12 | text-rendering: optimizeLegibility; 13 | } 14 | -------------------------------------------------------------------------------- /assets/fonts/NotoSans-Italic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/fonts/NotoSans-Italic.eot -------------------------------------------------------------------------------- /assets/fonts/NotoSans-Italic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Noto Sans Italic - Web Font Specimen 7 | 8 | 11 | 12 | 13 |

The quick brown fox jumps over the lazy dog. $123.45!

14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/fonts/NotoSans-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/fonts/NotoSans-Italic.ttf -------------------------------------------------------------------------------- /assets/fonts/NotoSans-Italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/fonts/NotoSans-Italic.woff -------------------------------------------------------------------------------- /assets/fonts/NotoSans-Italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/fonts/NotoSans-Italic.woff2 -------------------------------------------------------------------------------- /assets/fonts/NotoSans-Regular.css: -------------------------------------------------------------------------------- 1 | /* Webfont: NotoSans-Regular */@font-face { 2 | font-family: 'Noto Sans'; 3 | src: url('NotoSans-Regular.eot'); /* IE9 Compat Modes */ 4 | src: local('Noto Sans'), local('NotoSans'), /* locally installed */ 5 | url('NotoSans-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 6 | url('NotoSans-Regular.woff2') format('woff2'), /* Modern Browsers */ 7 | url('NotoSans-Regular.woff') format('woff'), /* IE9-IE11 */ 8 | url('NotoSans-Regular.ttf') format('truetype'), /* Safari, Android, iOS */ 9 | url('NotoSans-Regular.svg#NotoSans-Regular') format('svg'); /* Legacy iOS */ 10 | font-style: normal; 11 | font-weight: normal; 12 | text-rendering: optimizeLegibility; 13 | } 14 | -------------------------------------------------------------------------------- /assets/fonts/NotoSans-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/fonts/NotoSans-Regular.eot -------------------------------------------------------------------------------- /assets/fonts/NotoSans-Regular.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Noto Sans - Web Font Specimen 7 | 8 | 11 | 12 | 13 |

The quick brown fox jumps over the lazy dog. $123.45!

14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/fonts/NotoSans-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/fonts/NotoSans-Regular.ttf -------------------------------------------------------------------------------- /assets/fonts/NotoSans-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/fonts/NotoSans-Regular.woff -------------------------------------------------------------------------------- /assets/fonts/NotoSans-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/fonts/NotoSans-Regular.woff2 -------------------------------------------------------------------------------- /assets/img/bg-grass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/img/bg-grass.png -------------------------------------------------------------------------------- /assets/img/bg-snow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/img/bg-snow.png -------------------------------------------------------------------------------- /assets/img/bg-wool-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/img/bg-wool-dark.png -------------------------------------------------------------------------------- /assets/img/bg-wool-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/img/bg-wool-white.png -------------------------------------------------------------------------------- /assets/img/border-dungeons-25.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/img/border-dungeons-25.png -------------------------------------------------------------------------------- /assets/img/grass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/assets/img/grass.png -------------------------------------------------------------------------------- /assets/svg/icons/color-cart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/svg/icons/color-chest.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /assets/svg/icons/color-close.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /assets/svg/icons/color-dungeons-launcher.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /assets/svg/icons/color-facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /assets/svg/icons/color-grass-block.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | -------------------------------------------------------------------------------- /assets/svg/icons/color-instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /assets/svg/icons/color-menu.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /assets/svg/icons/color-reddit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /assets/svg/icons/color-steve-alex.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /assets/svg/icons/color-twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /assets/svg/icons/color-two-players.svg: -------------------------------------------------------------------------------- 1 | 2 | color-two-players 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /assets/svg/icons/color-youtube.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /assets/svg/icons/line-book.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | -------------------------------------------------------------------------------- /assets/svg/icons/line-box.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | -------------------------------------------------------------------------------- /assets/svg/icons/line-calendar.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /assets/svg/icons/line-collapse.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/svg/icons/line-console.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /assets/svg/icons/line-creeper.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /assets/svg/icons/line-device.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /assets/svg/icons/line-expand.svg: -------------------------------------------------------------------------------- 1 | 2 | line-expand 3 | 4 | 5 | -------------------------------------------------------------------------------- /assets/svg/icons/line-globe.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/svg/icons/line-heart.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /assets/svg/icons/line-hide.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /assets/svg/icons/line-pc.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /assets/svg/icons/line-pdf-file.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/svg/icons/line-shirt.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | -------------------------------------------------------------------------------- /assets/svg/icons/line-show.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/svg/icons/line-vector-export.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /assets/svg/icons/line-vector-help.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /assets/svg/icons/line-vr-enhanced.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/svg/icons/line-vr-turning.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/svg/icons/line-vr-virtual-living-room.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/svg/icons/line-wallet.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /assets/svg/icons/pixel-arrow-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /assets/svg/icons/pixel-arrow-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /assets/svg/icons/pixel-arrow-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /assets/svg/icons/pixel-arrow-up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /assets/svg/icons/pixel-begin-quote.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/svg/icons/pixel-caret.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/svg/icons/pixel-check.svg: -------------------------------------------------------------------------------- 1 | 2 | Check 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /assets/svg/icons/pixel-close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/svg/icons/pixel-end-quote.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/svg/icons/pixel-facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /assets/svg/icons/pixel-instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /assets/svg/icons/pixel-pause.svg: -------------------------------------------------------------------------------- 1 | 2 | pixel-pause 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /assets/svg/icons/pixel-play.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /assets/svg/icons/pixel-reddit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /assets/svg/icons/pixel-twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /assets/svg/icons/pixel-youtube.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/svg/icons/what-block.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/svg/icons/what-computer.svg: -------------------------------------------------------------------------------- 1 | 2 | what-computer 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | -------------------------------------------------------------------------------- /assets/svg/logos/microsoft-studios.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /assets/svg/logos/microsoft.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /assets/svg/logos/minecraft-core-brand.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 29 | 30 | 32 | 33 | 35 | 36 | 37 | 39 | 40 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /assets/svg/logos/mojang-studios-horizontal.svg: -------------------------------------------------------------------------------- 1 | 25 | -------------------------------------------------------------------------------- /assets/svg/logos/mono-microsoft-studios.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /assets/svg/logos/mono-microsoft.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /assets/svg/logos/mono-mojang-studios-horizontal.svg: -------------------------------------------------------------------------------- 1 | 22 | -------------------------------------------------------------------------------- /assets/svg/logos/mono-windows.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /assets/svg/logos/mono-xbox.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/svg/logos/pegi.svg: -------------------------------------------------------------------------------- 1 | 2 | pegi 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /assets/svg/shapes/ribbon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/svg/shapes/shape-model-classic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /assets/svg/shapes/shape-model-slim.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /assets/svg/shapes/square-like-black.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /assets/svg/shapes/square-like.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@mojang/web-theme-bootstrap", 3 | "version": "7.3.1", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "bootstrap": { 8 | "version": "4.3.1", 9 | "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz", 10 | "integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag==" 11 | }, 12 | "jquery": { 13 | "version": "3.4.1", 14 | "resolved": "https://nexus.mojang.zone/repository/npm-all/jquery/-/jquery-3.4.1.tgz", 15 | "integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==" 16 | }, 17 | "popper.js": { 18 | "version": "1.15.0", 19 | "resolved": "https://nexus.mojang.zone/repository/npm-all/popper.js/-/popper.js-1.15.0.tgz", 20 | "integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA==" 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@mojang/web-theme-bootstrap", 3 | "version": "7.3.1", 4 | "description": "Contains the theme used on minecraft.net based on Boostrap 4", 5 | "repository": { 6 | "type": "git", 7 | "url": "git+https://github.com/Mojang/web-theme-bootstrap.git" 8 | }, 9 | "author": "", 10 | "license": "MIT", 11 | "bugs": { 12 | "url": "https://github.com/Mojang/web-theme-bootstrap/issues" 13 | }, 14 | "homepage": "https://github.com/Mojang/web-theme-bootstrap#readme", 15 | "dependencies": { 16 | "bootstrap": "^4.3.1", 17 | "jquery": "^3.4.1", 18 | "popper.js": "^1.14.7" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /scss/abstract/_colors.scss: -------------------------------------------------------------------------------- 1 | // Colors are named by this site: 2 | // http://chir.ag/projects/name-that-color/ 3 | 4 | // Colors 5 | $fun-green: #3c8527; // Primary 6 | $malachite: #a0e080; // Tertiary 7 | $mud: #996a41; // Quaternary 8 | $dirt: #5a381e; // Quinary 9 | 10 | // Grays 11 | $shark: #1d1e1e; 12 | $soil: #313131; // Senary 13 | $tundora: #404040; 14 | $scorpion: #5a5a5a; 15 | $gravel: #757575; // Secondary 16 | $dusty-gray: #949494; 17 | 18 | // Supportive Colors 19 | $fun-green-supportive: darken($fun-green, 11.64%); 20 | $malachite-supportive: darken($malachite, 10%); 21 | 22 | $mud-supportive: darken($mud, 10%); 23 | $dirt-supportive: darken($dirt, 10%); 24 | 25 | $soil-supportive: darken($soil, 10%); 26 | $gravel-supportive: darken($gravel, 10%); 27 | 28 | // Grays 29 | $white: #fff; 30 | $hint-of-red: #f8f5f4; 31 | $ebb: #f1edec; 32 | $cloud: #d1cfce; 33 | $boulder: #777; // can use secondary instead 34 | $black: #000; 35 | 36 | // Secondary Colors 37 | 38 | // Beige 39 | $sandstone: #bcad69; 40 | 41 | // Browns 42 | $brown: #866136; 43 | 44 | // Red 45 | $red: #ac2015; 46 | 47 | // Yellow 48 | $yellow: #e6b40b; 49 | $golden-tainoi: #FFCB56; 50 | 51 | // Orange 52 | $orange: #d4441a; 53 | $light-orange: #e67834; 54 | $brick: #be583f; 55 | 56 | // Greens 57 | $grass: #36b030; // Old primary (don't use) 58 | $spring-grass: #84c94c; // Old tertiary (don't use) 59 | $bright-green: #64fd1f; 60 | $harlequin: #47d009; 61 | $japanese-laurel: #1e8c03; 62 | $japanese-laurel-dark: #156c00; 63 | $green: $fun-green; 64 | 65 | $olive: #787a26; 66 | $forest-green: #5b813f; 67 | 68 | // Cyan 69 | $turquoise: #14837f; 70 | $eucalyptus: #299b6e; 71 | $cyan: #2ab8a6; 72 | 73 | // Light blue 74 | $light-blue: #5caee0; 75 | 76 | // Blue 77 | $blue : #1546c2; 78 | 79 | // Purples 80 | $purple: #7824c5; 81 | $daisy-bush: #5526ac; 82 | $jacarta: #3b2661; 83 | $meteorite: #35196b; 84 | 85 | // Magenta 86 | $magenta: #c93a9b; 87 | 88 | // Pink 89 | $pink: #ff51c9; //minecon pink 90 | 91 | $colors: ( 92 | "olive": $olive, 93 | "beige": $sandstone, 94 | "brown": $brown, 95 | "red": $red, 96 | "orange": $orange, 97 | "brick": $brick, 98 | "yellow": $yellow, 99 | "green": $green, 100 | "forest-green": $forest-green, 101 | "turquoise": $turquoise, 102 | "cyan": $cyan, 103 | "light-blue": $light-blue, 104 | "blue": $blue, 105 | "purple": $purple, 106 | "magenta": $magenta, 107 | "pink": $pink, 108 | "white": $white, 109 | "gray": $dusty-gray, 110 | "gray-dark": $tundora 111 | ); 112 | 113 | $dungeons-colors: ( 114 | "orange": $light-orange, 115 | "eucalyptus": $eucalyptus, 116 | "golden-tainoi": $golden-tainoi 117 | ); 118 | -------------------------------------------------------------------------------- /scss/abstract/_columns.scss: -------------------------------------------------------------------------------- 1 | @mixin columns($columns, $min-size) { 2 | $min-width: map_get($grid-breakpoints, $min-size); 3 | 4 | @media screen and (min-width: $min-width) { 5 | @for $i from 1 through $columns { 6 | .columns-#{$min-size}-#{$i} { 7 | column-count: $i; 8 | } 9 | } 10 | } 11 | } 12 | 13 | @mixin column-gaps ($min, $max) { 14 | @for $i from $min through $max { 15 | .column-gap-#{$i}em { 16 | column-gap: #{$i}em; 17 | } 18 | } 19 | } 20 | 21 | @include columns(6, xs); 22 | @include columns(6, sm); 23 | @include columns(6, md); 24 | @include columns(6, lg); 25 | @include columns(6, xl); 26 | @include column-gaps(3, 6); 27 | 28 | .break-inside-avoid { 29 | -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ 30 | page-break-inside: avoid; /* Firefox */ 31 | break-inside: avoid; /* IE 10+ */ 32 | 33 | // Fix for aligning margins when using multi-columns 34 | &::before { 35 | content: ''; 36 | display: block; 37 | height: 1px; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /scss/abstract/_extendables.scss: -------------------------------------------------------------------------------- 1 | %force-layer-creation { 2 | backface-visibility: hidden; 3 | transform: translate3d(0, 0, 0); 4 | } 5 | 6 | %animation-scale--0-to-1 { 7 | animation: scale-0-to-1 0.5s; 8 | } 9 | 10 | %attributed-quote-glyph { 11 | $icon-width: 32px; 12 | $icon-height: 32px; 13 | $icon-spacing: 6px; 14 | 15 | content: ''; 16 | display: block; 17 | box-sizing: content-box; 18 | position: absolute; 19 | background-repeat: no-repeat; 20 | background-color: $body-bg; 21 | background-size: $icon-width $icon-height, auto; 22 | background-position: center; 23 | width: $icon-width + $icon-spacing; 24 | height: $icon-height + $icon-spacing; 25 | padding: 0 4px; 26 | } 27 | 28 | %antialiasing { 29 | -webkit-font-smoothing: antialiased; 30 | -moz-osx-font-smoothing: grayscale; 31 | } 32 | -------------------------------------------------------------------------------- /scss/abstract/_keyframes.scss: -------------------------------------------------------------------------------- 1 | // Flicker 2 | @keyframes flicker-opacity { 3 | 0% { 4 | opacity: 1; 5 | } 6 | 7 | 50% { 8 | opacity: 0; 9 | } 10 | 11 | 100% { 12 | opacity: 1; 13 | } 14 | } 15 | 16 | // Floating 17 | @keyframes floating-vertical { 18 | 0% { 19 | transform: translateY(0); 20 | } 21 | 22 | 50% { 23 | transform: translate3d(0, -10px, 0); 24 | } 25 | 26 | 100% { 27 | transform: translate3d(0, 0, 0); 28 | } 29 | } 30 | 31 | @keyframes floating-circular { 32 | from { 33 | transform: rotate(0deg) translateX(5px) rotate(0deg); 34 | } 35 | 36 | to { 37 | transform: rotate(360deg) translateX(5px) rotate(-360deg); 38 | } 39 | } 40 | 41 | // Bounce 42 | @keyframes bounce-right { 43 | 0%, 44 | 5%, 45 | 35%, 46 | 60%, 47 | 100% { 48 | transform: translate(0, 0); 49 | } 50 | 51 | 25% { 52 | transform: translate(-100%, 0); 53 | } 54 | 55 | 45% { 56 | transform: translate(-75%, 0); 57 | } 58 | } 59 | 60 | @keyframes bounce-left { 61 | 0%, 62 | 5%, 63 | 35%, 64 | 60%, 65 | 100% { 66 | transform: translate(0, 0); 67 | } 68 | 69 | 25% { 70 | transform: translate(100%, 0); 71 | } 72 | 73 | 45% { 74 | transform: translate(75%, 0); 75 | } 76 | } 77 | 78 | @keyframes bounce-down { 79 | 0%, 80 | 5%, 81 | 35%, 82 | 60%, 83 | 100% { 84 | transform: translateY(0); 85 | } 86 | 87 | 25% { 88 | transform: translateY(-8px); 89 | } 90 | 91 | 45% { 92 | transform: translateY(-4px); 93 | } 94 | } 95 | 96 | @keyframes bounce-up { 97 | 0%, 98 | 5%, 99 | 35%, 100 | 60%, 101 | 100% { 102 | transform: translateY(0); 103 | } 104 | 105 | 25% { 106 | transform: translateY(8px); 107 | } 108 | 109 | 45% { 110 | transform: translateY(4px); 111 | } 112 | } 113 | 114 | // Drop series 115 | @keyframes drop2 { 116 | 0% { 117 | transform: translateY(-50px); 118 | } 119 | 120 | 25%, 121 | 100% { 122 | transform: translate(0); 123 | } 124 | } 125 | 126 | @keyframes drop3 { 127 | 0% { 128 | transform: translateY(-50px); 129 | } 130 | 131 | 50%, 132 | 100% { 133 | transform: translate(0); 134 | } 135 | } 136 | 137 | @keyframes drop4 { 138 | 0% { 139 | transform: translateY(-50px); 140 | } 141 | 142 | 75%, 143 | 100% { 144 | transform: translate(0); 145 | } 146 | } 147 | 148 | // Scale 149 | @keyframes scale-in-out { 150 | 0% { 151 | transform: scale(1); 152 | } 153 | 154 | 50% { 155 | transform: scale(1.03); 156 | } 157 | 158 | 100% { 159 | transform: scale(1); 160 | } 161 | } 162 | 163 | @keyframes scale-0-to-1 { 164 | from { 165 | transform: scale(0); 166 | } 167 | 168 | to { 169 | transform: scale(1); 170 | } 171 | } 172 | 173 | @keyframes pop { 174 | 0%, 175 | 90% { 176 | transform: scale(1); 177 | } 178 | 179 | 100% { 180 | transform: scale(0.5); 181 | } 182 | } 183 | 184 | // Rotate 185 | @keyframes rotate-45 { 186 | 0% { 187 | transform: rotate(0deg); 188 | } 189 | 190 | 100% { 191 | transform: rotate(45deg); 192 | } 193 | } 194 | 195 | @keyframes counter-digit-animation { 196 | 0% { 197 | transform: translateY(-91%); 198 | } 199 | 200 | 100% { 201 | transform: translateY(0%); 202 | } 203 | } 204 | -------------------------------------------------------------------------------- /scss/abstract/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin link($color, $hovercolor, $activecolor: '') { 2 | color: $color; 3 | 4 | &:hover, 5 | &:focus, 6 | &:active { 7 | color: $hovercolor; 8 | } 9 | 10 | @if ($activecolor) { 11 | &:active { 12 | color: $activecolor; 13 | } 14 | } 15 | } 16 | 17 | @mixin gradient-animation($start, $end, $start2, $end2, $transTime) { 18 | background-size: 100%; 19 | background-image: linear-gradient($start, $end); 20 | position: relative; 21 | z-index: 100; 22 | 23 | &::before { 24 | background-image: linear-gradient($start2, $end2); 25 | content: ''; 26 | display: block; 27 | height: 100%; 28 | position: absolute; 29 | top: 0; 30 | left: 0; 31 | opacity: 0; 32 | width: 100%; 33 | z-index: -100; 34 | transition: opacity $transTime; 35 | } 36 | 37 | &:hover { 38 | &::before { 39 | opacity: 1; 40 | } 41 | } 42 | } 43 | 44 | @mixin header() { 45 | position: relative; 46 | margin-bottom: 30px; 47 | 48 | .header__body { 49 | position: absolute; 50 | top: 25%; 51 | width: 100%; 52 | text-align: center; 53 | 54 | .btn-lg { 55 | letter-spacing: 0.15em; 56 | padding: 22px 56px; 57 | text-transform: uppercase; 58 | font-size: 22px; 59 | font-weight: bold; 60 | margin-bottom: 0; 61 | 62 | span { 63 | display: block; 64 | font-weight: normal; 65 | } 66 | } 67 | } 68 | 69 | img { 70 | margin: 0 auto; 71 | } 72 | } 73 | 74 | @mixin gradient($top-color, $bottom-color) { 75 | background: $top-color; /* Old browsers */ 76 | background: -moz-linear-gradient(top, $top-color 0%, $bottom-color 100%); /* FF3.6+ */ 77 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $top-color), color-stop(100%, $bottom-color)); /* Chrome,Safari4+ */ 78 | background: -webkit-linear-gradient(top, $top-color 0%, $bottom-color 100%); /* Chrome10+,Safari5.1+ */ 79 | background: -o-linear-gradient(top, $top-color 0%, $bottom-color 100%); /* Opera 11.10+ */ 80 | background: -ms-linear-gradient(top, $top-color 0%, $bottom-color 100%); /* IE10+ */ 81 | background: linear-gradient(to bottom, $top-color 0%, $bottom-color 100%); /* W3C */ 82 | filter: progid:dximagetransform.microsoft.gradient(startColorstr=$top-color, endColorstr=$bottom-color, GradientType=0); /* IE6-9 */ 83 | } 84 | 85 | @mixin horizontal-gradient($left-color, $right-color) { 86 | background: $left-color; /* Old browsers */ 87 | background: -moz-linear-gradient(left, $left-color 0%, $right-color 100%); /* FF3.6+ */ 88 | background: -webkit-gradient(linear, left, right, color-stop(0%, $left-color), color-stop(100%, $right-color)); /* Chrome,Safari4+ */ 89 | background: -webkit-linear-gradient(left, $left-color 0%, $right-color 100%); /* Chrome10+,Safari5.1+ */ 90 | background: -o-linear-gradient(left, $left-color 0%, $right-color 100%); /* Opera 11.10+ */ 91 | background: -ms-linear-gradient(left, $left-color 0%, $right-color 100%); /* IE10+ */ 92 | background: linear-gradient(to right, $left-color 0%, $right-color 100%); /* W3C */ 93 | filter: progid:dximagetransform.microsoft.gradient(startColorstr=$left-color, endColorstr=$right-color, GradientType=1); /* IE6-9 */ 94 | } 95 | 96 | @mixin grow-animation($background-color, $scaleX, $scaleY : $scaleX, $initial-background-color: $background-color, $initial-background-opacity: 0) { 97 | 98 | // Force gpu rendering on Safari to prevent the font-smoothing antialised/subpixel-antialised switch 99 | transform: translate3d(0, 0, 0); 100 | 101 | &::before { 102 | content: ""; 103 | position: absolute; 104 | top: 0; 105 | left: 0; 106 | right: 0; 107 | bottom: 0; 108 | background-color: $initial-background-color; 109 | z-index: -100; 110 | transition: opacity 0.1s ease-out, transform 0.625s cubic-bezier(0, 0.8, 0.31, 0.99) !important; 111 | opacity: $initial-background-opacity; 112 | display: block; 113 | // Force animation to snap on subpixels 114 | backface-visibility: hidden; 115 | } 116 | 117 | &:hover, 118 | &:focus, 119 | &:active { 120 | &::before { 121 | background-color: $background-color; 122 | opacity: 1; 123 | transform: scale3d($scaleX, $scaleY, 1); 124 | } 125 | } 126 | } 127 | 128 | @mixin tile-size($horizontal, $vertical) { 129 | width: ($tile-base-size * $horizontal) + ($horizontal - 1) * $tile-gutter-size; 130 | height: ($tile-base-size * $vertical) + ($vertical - 1) * $tile-gutter-size; 131 | 132 | &:focus .tile__image, 133 | &:hover .tile__image { 134 | // Proportional zoom-in effect based on 10% for the 1x1 tile 135 | transform: scale(1 + (0.1 / max($horizontal, $vertical))); 136 | } 137 | 138 | .video-tile__play-btn { 139 | top: calc((-#{$tile-base-size} * #{$vertical}) / 2 + #{$btn-video-play-height} / 2); 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /scss/abstract/_theme.scss: -------------------------------------------------------------------------------- 1 | // Primary colors 2 | $primary: $fun-green; 3 | 4 | $primary-supportive: $fun-green-supportive; 5 | 6 | $primary-hover: $soil; 7 | 8 | // Secondary colors 9 | $secondary: $gravel; 10 | $secondary-supportive: $tundora; 11 | 12 | // Tertiary colors 13 | $tertiary: $malachite; 14 | $tertiary-supportive: $malachite-supportive; 15 | 16 | // Quaternary colors 17 | $quaternary: $mud; 18 | $quaternary-supportive: $mud-supportive; 19 | 20 | // Quinary colors 21 | $quinary: $dirt; 22 | $quinary-supportive: $dirt-supportive; 23 | 24 | // Senary colors 25 | $senary: $soil; 26 | $senary-supportive: $soil-supportive; 27 | 28 | // Dungeons primary colors 29 | $dungeons-primary: map-get($dungeons-colors, "orange"); 30 | 31 | // Dungeons secondary colors 32 | $dungeons-secondary: map-get($dungeons-colors, "eucalyptus"); 33 | $dungeons-tertiary: map-get($dungeons-colors, "golden-tainoi"); 34 | 35 | $default-shadow: 0 2px 0 rgba($black, 0.25); 36 | $default-box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.15); 37 | 38 | $gray-100: $hint-of-red; 39 | $gray-200: $ebb; 40 | $gray-300: $cloud; 41 | $gray-400: $dusty-gray; 42 | $gray-500: $boulder; 43 | $gray-600: $scorpion; 44 | $gray-700: $tundora; 45 | $gray-800: $soil; 46 | $gray-900: $shark; 47 | 48 | $theme-colors: ( 49 | "primary": $primary, 50 | "secondary": $secondary, 51 | "tertiary": $tertiary, 52 | "quaternary": $quaternary, 53 | "quinary": $quinary, 54 | "senary": $senary, 55 | ); 56 | 57 | $theme-colors-supportive: ( 58 | "primary-supportive": $primary-supportive, 59 | "secondary-supportive": $secondary-supportive, 60 | "tertiary-supportive": $tertiary-supportive, 61 | "quaternary-supportive": $quaternary-supportive, 62 | "quinary-supportive": $quinary-supportive, 63 | "senary-supportive": $senary-supportive, 64 | ); 65 | 66 | $dungeons-theme-colors: ( 67 | "dungeons-primary": $dungeons-primary, 68 | "dungeons-secondary": $dungeons-secondary, 69 | "dungeons-tertiary": $dungeons-tertiary, 70 | 71 | ); 72 | 73 | $gradients: (); // Returns a gradient value for use in sass. e.g. map-get($gradients, "secondary") 74 | 75 | $danger: $orange; 76 | $info: $light-blue; 77 | -------------------------------------------------------------------------------- /scss/abstract/_transitions.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mojang/web-theme-bootstrap/92d9913110cf79db5813e6335f97c6dc689854ee/scss/abstract/_transitions.scss -------------------------------------------------------------------------------- /scss/abstract/_utilities.scss: -------------------------------------------------------------------------------- 1 | $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); 2 | 3 | // Create text-{#color} classes for full color palette 4 | @each $color, $value in $all-colors { 5 | .text-#{$color} { 6 | color: $value !important; 7 | } 8 | @if $emphasized-link-hover-darken-percentage != 0 { 9 | a.text-#{$color} { 10 | @include hover-focus { 11 | color: darken($value, $emphasized-link-hover-darken-percentage) !important; 12 | } 13 | } 14 | } 15 | } 16 | 17 | .top, 18 | .top-left, 19 | .top-right { 20 | top: 0; 21 | } 22 | 23 | .bottom, 24 | .bottom-left, 25 | .bottom-right { 26 | bottom: 0; 27 | } 28 | 29 | .left, 30 | .top-left, 31 | .bottom-left { 32 | left: 0; 33 | } 34 | 35 | .right, 36 | .top-right, 37 | .bottom-right { 38 | right: 0; 39 | } 40 | 41 | .translate-up-50 { 42 | transform: translateY(-50%); 43 | } 44 | 45 | .translate-down-50 { 46 | transform: translateY(50%); 47 | } 48 | 49 | .translate-left-50 { 50 | transform: translateX(-50%); 51 | } 52 | 53 | .translate-right-50 { 54 | transform: translateX(50%); 55 | } 56 | 57 | .max-text-width { 58 | max-width: $max-text-width; 59 | } 60 | 61 | .max-page-width { 62 | max-width: $max-resolution-width; 63 | } 64 | 65 | .max-full-screen-height { 66 | max-height: $max-resolution-height; 67 | } 68 | 69 | .z-index-0 { 70 | z-index: 0; 71 | } 72 | -------------------------------------------------------------------------------- /scss/abstract/_variables.scss: -------------------------------------------------------------------------------- 1 | // General 2 | $default-focus-color: mix($blue, $light-blue); 3 | $default-focus-box-shadow: 0 0 3px 1px $default-focus-color, 4 | 0 0 2px 1px $default-focus-color inset; 5 | 6 | // Bootstrap overrrides 7 | 8 | // Options 9 | $enable-rounded: false; 10 | 11 | // Body 12 | $body-bg: $ebb; 13 | $body-color: $senary; 14 | $code-color: $purple; 15 | 16 | // Fonts 17 | $font-family-sans-serif: "Noto Sans", sans-serif; 18 | 19 | $h1-font-size: $font-size-base * 2.25; // 36px 20 | $h2-font-size: $font-size-base * 1.75; // 28px 21 | $h3-font-size: $font-size-base * 1.2; // 19px 22 | $h4-font-size: $font-size-base; 23 | $h5-font-size: $font-size-base; 24 | $h6-font-size: $font-size-base * 0.75; 25 | $small-font-size: 88%; // 14px in body 26 | 27 | // Theme small font size vars 28 | $text-small: $font-size-base * 0.875; // 14px 29 | $text-smaller: $font-size-base * 0.75; // 12px 30 | $text-smallest: $font-size-base * 0.625; // 10px; 31 | 32 | $font-size-lg: $h3-font-size; 33 | $font-size-sm: $text-small; 34 | 35 | $headings-font-weight: $font-weight-bold; 36 | $headings-line-height: 1.4; 37 | $headings-margin-bottom: 0.8rem; 38 | 39 | $lead-font-size: $font-size-base * 1.13; 40 | 41 | // Alert 42 | $alert-border-width: 0; 43 | $alert-border-radius: 0; 44 | $alert-padding-y: 1rem; 45 | $alert-padding-x: 1rem; 46 | 47 | // Close 48 | $close-color: currentColor; 49 | 50 | // Cards 51 | $card-spacer-y: 1rem; 52 | $card-spacer-x: 0; 53 | $card-border-width: 0; 54 | $card-border-color: transparent; 55 | $card-bg: $white; 56 | $card-cap-bg: transparent; 57 | $card-group-margin: 1rem; 58 | 59 | // Modals 60 | $modal-header-border-color: transparent; 61 | $modal-footer-border-color: transparent; 62 | 63 | // Forms 64 | $input-box-shadow: none; 65 | $input-border-color: transparent; 66 | $input-focus-border-color: $senary-supportive; 67 | $input-focus-box-shadow: $default-focus-box-shadow; 68 | 69 | // Links 70 | $link-color: darken($primary, 5%); 71 | $link-hover-color: darken($primary, 10%); 72 | $link-hover-decoration: none; 73 | 74 | // Buttons 75 | $btn-font-weight: $font-weight-bold; 76 | $btn-disabled-opacity: 1; 77 | $btn-focus-box-shadow: $default-focus-box-shadow; 78 | 79 | // Custom 80 | $custom-bezier-1: cubic-bezier(0, 0.8, 0.2, 1); 81 | 82 | // Paragraphs 83 | $paragraph-margin-bottom: 1.3rem; 84 | 85 | // Navigation 86 | $dropdown-border-width: 0; 87 | $dropdown-padding-y: 0; 88 | 89 | $dropdown-item-padding-x: 0.75rem; 90 | $dropdown-item-padding-y: 0.5rem; 91 | 92 | $dropdown-bg: $black; 93 | $dropdown-link-color: $white; 94 | $dropdown-link-hover-color: $white; 95 | $dropdown-link-hover-bg: $primary; 96 | 97 | // Path to Freyja assets, to be used from the consumer 98 | $freyja-asset-path: "" !default; 99 | 100 | $max-resolution-height: 1800px; 101 | $max-resolution-width: 2880px; 102 | 103 | $max-text-width: 540px; //For better readability 104 | 105 | $opacities: 5, 10, 25, 50, 75; 106 | -------------------------------------------------------------------------------- /scss/base/_background.scss: -------------------------------------------------------------------------------- 1 | @mixin bg-gradient-supportive($parent, $color, $color-supportive) { 2 | #{$parent} { 3 | background: $color linear-gradient(180deg, $color, $color-supportive) repeat-x !important; 4 | } 5 | } 6 | 7 | @each $color, $value in $theme-colors { 8 | $key: "#{$color}-supportive"; 9 | $col-supportive: map-get($theme-colors-supportive, $key); 10 | 11 | @if $col-supportive { 12 | @include bg-gradient-supportive(".bg-gradient-#{$color}", $value, $col-supportive); 13 | 14 | // Create a map of gradients for use in sass 15 | $gradient: ($color: $value linear-gradient(180deg, $value, $col-supportive) repeat-x); 16 | $gradients: map-merge($gradients, $gradient); 17 | } 18 | } 19 | 20 | @each $color, $value in $all-colors { 21 | .bg-#{$color} { 22 | background-color: $value !important; 23 | } 24 | a.bg-#{$color}, 25 | button.bg-#{$color} { 26 | @include hover-focus { 27 | background-color: darken($value, 10%) !important; 28 | } 29 | } 30 | } 31 | 32 | .bg-wool-light { 33 | background-image: url(#{$freyja-asset-path}/img/bg-wool-white.png); 34 | background-color: $white; 35 | } 36 | .bg-wool-dark { background-image: url(#{$freyja-asset-path}/img/bg-wool-dark.png); } 37 | .bg-grass { background-image: url(#{$freyja-asset-path}/img/bg-grass.png); } 38 | .bg-snow { background-image: url(#{$freyja-asset-path}/img/bg-snow.png); } 39 | 40 | .bg-wool-dark, 41 | .bg-grass, 42 | .bg-snow { 43 | background-color: $senary; 44 | } 45 | 46 | .bg-overlay { 47 | background-blend-mode: overlay; 48 | } 49 | 50 | .bg-gradient-overlay { 51 | background: linear-gradient(rgba(0, 0, 0, 0), rgba($gray-800, 0.5)); 52 | } 53 | 54 | @each $opacity in $opacities { 55 | @each $color, $value in ("black": $black, "white": $white) { 56 | .bg-#{$color}-#{$opacity} { 57 | background-color: rgba($value, $opacity / 100); 58 | } 59 | } 60 | } -------------------------------------------------------------------------------- /scss/components/_alert.scss: -------------------------------------------------------------------------------- 1 | // Headings for larger alerts 2 | .alert-heading { 3 | // Specified to prevent conflicts of changing $headings-color 4 | color: inherit; 5 | } 6 | 7 | .alert { 8 | color: currentColor; 9 | box-shadow: $default-box-shadow; 10 | 11 | .close { 12 | transform: translateY(calc(3em / 16)); 13 | padding: ($alert-padding-y / 2) ($alert-padding-x / 2); 14 | margin: ($alert-padding-y / 2) ($alert-padding-x / 2); 15 | } 16 | } 17 | 18 | // Provide class for links that match alerts 19 | .alert-link { 20 | font-weight: normal; 21 | text-decoration: underline; 22 | } 23 | 24 | @each $color, $value in $theme-colors { 25 | .alert-#{$color} { 26 | background-color: $value; 27 | 28 | a, 29 | a:hover, 30 | .alert-link { 31 | color: currentColor; 32 | text-decoration: underline; 33 | } 34 | } 35 | } 36 | 37 | .alert-primary, 38 | .alert-secondary, 39 | .alert-success, 40 | .alert-danger, 41 | .alert-dark { 42 | color: $white; 43 | } 44 | 45 | .alert-fixed { 46 | position: fixed; 47 | margin: 0; 48 | bottom: 0; 49 | left: 0; 50 | right: 0; 51 | z-index: $zindex-popover; 52 | 53 | @include media-breakpoint-up(lg) { 54 | left: 50%; 55 | transform: translateX(-50%); 56 | } 57 | } -------------------------------------------------------------------------------- /scss/components/_animations.scss: -------------------------------------------------------------------------------- 1 | // Flicker 2 | .animation-flicker { 3 | animation: flicker-opacity 4s ease-in-out infinite; 4 | } 5 | 6 | // Floating 7 | .animation-floating--vertical { 8 | animation: floating-vertical 8s ease-in-out infinite; 9 | 10 | @extend %force-layer-creation; 11 | } 12 | 13 | .animation-floating--circular { 14 | animation: floating-circular 12s linear infinite; 15 | 16 | @extend %force-layer-creation; 17 | } 18 | 19 | // Bounce 20 | .animation-bounce--right { 21 | animation: bounce-right 1.2s 2; 22 | } 23 | 24 | .animation-bounce--left { 25 | animation: bounce-left 1.2s 2; 26 | } 27 | 28 | .animation-bounce--left-long { 29 | animation: bounce-left 1.5s ease-in-out 0.5s 4; 30 | } 31 | 32 | .animation-bounce--down { 33 | animation: bounce-down 1.2s 2; 34 | } 35 | 36 | .animation-bounce--up { 37 | animation: bounce-up 1.2s 2; 38 | } 39 | 40 | // Drop series 41 | .animation-drop-2 { 42 | animation: drop2 1s linear infinite; 43 | } 44 | 45 | .animation-drop-3 { 46 | animation: drop3 1s linear infinite; 47 | } 48 | 49 | .animation-drop-4 { 50 | animation: drop4 1s linear infinite; 51 | } 52 | 53 | .animation-scale--in-out { 54 | animation: scale-in-out 0.4s infinite; 55 | } 56 | 57 | .animation-scale--0-to-1 { 58 | animation: scale-0-to-1 0.5s; 59 | } 60 | 61 | .animation-pop { 62 | animation: pop 1s linear infinite; 63 | } 64 | 65 | .animation-rotate--45 { 66 | animation: rotate-45 0.5s 1 ease-in forwards; 67 | } 68 | 69 | @for $i from 1 through 8 { 70 | .animation-run-#{$i}-times { 71 | animation-iteration-count: $i; 72 | } 73 | } 74 | 75 | .animation-run-infinite { 76 | animation-iteration-count: infinite; 77 | } 78 | 79 | @for $i from 1 through 10 { 80 | .animation-duration-#{$i} { 81 | animation-duration: #{$i}s !important; 82 | } 83 | 84 | .animation-delay-#{$i} { 85 | animation-delay: #{$i}s !important; 86 | } 87 | } 88 | 89 | // Grow, used as a direct child of the element that will grow 90 | a, 91 | div, 92 | span, 93 | button { 94 | > .grow { 95 | position: absolute; 96 | top: 0; 97 | right: 0; 98 | bottom: 0; 99 | left: 0; 100 | z-index: -1; 101 | transition: 0.625s cubic-bezier(0, 0.8, 0.25, 1); 102 | } 103 | 104 | &:hover { 105 | > .grow { 106 | transform: scale(1.1); 107 | } 108 | } 109 | } 110 | -------------------------------------------------------------------------------- /scss/components/_area-overlay.scss: -------------------------------------------------------------------------------- 1 | %cover-all { 2 | position: absolute; 3 | top: 0; 4 | left: 0; 5 | right: 0; 6 | bottom: 0; 7 | } 8 | 9 | .area-overlay { 10 | @extend %cover-all; 11 | 12 | display: flex; 13 | align-items: center; 14 | justify-content: center; 15 | z-index: 1; 16 | 17 | &-background { 18 | @extend %cover-all; 19 | 20 | opacity: 0.75; 21 | z-index: -1; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /scss/components/_attribution.scss: -------------------------------------------------------------------------------- 1 | .attribution { 2 | width: 100%; 3 | padding-bottom: 15px; 4 | 5 | .attribution__avatar { 6 | height: 140px; 7 | } 8 | 9 | img { 10 | width: 82px; 11 | float: left; 12 | } 13 | } 14 | 15 | @include media-breakpoint-down(md) { 16 | .attribution__details { 17 | dt { 18 | float: left; 19 | clear: left; 20 | } 21 | 22 | dd { 23 | float: left; 24 | } 25 | } 26 | } 27 | 28 | .attributed-quote { 29 | position: relative; 30 | border: 10px solid black; 31 | padding: 20px; 32 | 33 | &::before { 34 | @extend %attributed-quote-glyph; 35 | 36 | background-image: url(#{$freyja-asset-path}/svg/icons/pixel-begin-quote.svg); 37 | top: -19px; 38 | left: -19px; 39 | } 40 | 41 | &::after { 42 | @extend %attributed-quote-glyph; 43 | 44 | background-image: url(#{$freyja-asset-path}/svg/icons/pixel-end-quote.svg); 45 | right: -19px; 46 | bottom: -19px; 47 | } 48 | 49 | cite { 50 | margin-top: 5px; 51 | font-style: normal; 52 | text-transform: uppercase; 53 | white-space: nowrap; 54 | display: block; 55 | } 56 | } 57 | 58 | .attributed-quote__text { 59 | margin: 0; 60 | border: 0; 61 | padding: 0; 62 | font-size: 14px; 63 | font-weight: bold; 64 | } 65 | 66 | .attributed-quote__image { 67 | float: left; 68 | max-height: 92px; 69 | margin-top: 4px; 70 | margin-bottom: 0; 71 | margin-right: 7px; 72 | } 73 | -------------------------------------------------------------------------------- /scss/components/_borders.scss: -------------------------------------------------------------------------------- 1 | .border-dungeons { 2 | border: 30px solid rgba($white, 0.25); 3 | border-image: url(#{$freyja-asset-path}/img/border-dungeons-25.png) 30; 4 | } 5 | 6 | @for $i from 1 through 5 { 7 | .border-width-#{$i} { 8 | border-width: #{$i}px!important; 9 | } 10 | } 11 | 12 | @each $opacity in $opacities { 13 | @each $color, $value in ("black": $black, "white": $white) { 14 | 15 | .border-#{$color}-#{$opacity} { 16 | border-color: rgba($value, $opacity / 100)!important; 17 | } 18 | } 19 | } -------------------------------------------------------------------------------- /scss/components/_card.scss: -------------------------------------------------------------------------------- 1 | .card { 2 | background-color: transparent; 3 | 4 | &.card-grow:focus { 5 | outline: none !important; 6 | border: 3px solid #55a1f3; 7 | } 8 | } 9 | 10 | // Wrap cards at 768px instead of Bootstrap 576px default 11 | .card-group, 12 | .card-deck, 13 | .card-columns { 14 | @include media-breakpoint-up(md) { 15 | flex-flow: row wrap; 16 | } 17 | 18 | @include media-breakpoint-only(sm) { 19 | flex-flow: column; 20 | } 21 | } 22 | 23 | .card-deck { 24 | .card { 25 | margin-bottom: $card-deck-margin; 26 | margin-top: $card-deck-margin; 27 | } 28 | 29 | .card-grow { 30 | & > .grow { 31 | background-color: $white; 32 | } 33 | 34 | &:hover { 35 | & > .grow { 36 | background-color: $ebb; 37 | } 38 | } 39 | } 40 | } 41 | 42 | .card-grow { 43 | z-index: 1; 44 | cursor: pointer; 45 | 46 | &:hover { 47 | z-index: 2; 48 | } 49 | } 50 | 51 | .card-group { 52 | .card { 53 | margin-bottom: 0; 54 | } 55 | } 56 | 57 | .card-separator { 58 | box-shadow: 0 1px 0 rgba(mix($white, $black), 0.5); 59 | 60 | @include media-breakpoint-up(md) { 61 | box-shadow: -1px 0 0 rgba(mix($white, $black), 0.5) inset; 62 | } 63 | } 64 | 65 | .card-wrap { 66 | .card { 67 | @include media-breakpoint-between(md, lg) { 68 | flex: 1 0 40%; 69 | } 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /scss/components/_checkbox.scss: -------------------------------------------------------------------------------- 1 | .checkbox { 2 | display: inline-block; 3 | position: relative; 4 | 5 | input[type="checkbox"] { 6 | position: absolute; 7 | top: 0; 8 | left: 0; 9 | opacity: 0; 10 | height: 1.3em; 11 | width: 1.3em; 12 | 13 | &:checked { 14 | & + label { 15 | .checkbox-icon { 16 | border-color: $primary; 17 | background-color: $primary; 18 | 19 | &::after { 20 | content: ""; 21 | display: block; 22 | width: 100%; 23 | height: 100%; 24 | position: absolute; 25 | } 26 | } 27 | .svg-icon { 28 | color: $white; 29 | transform: scale(1); 30 | } 31 | } 32 | } 33 | 34 | &:focus { 35 | outline: none; 36 | 37 | & + label { 38 | .checkbox-icon { 39 | box-shadow: 0 0 5px 1px Highlight; 40 | } 41 | } 42 | } 43 | 44 | &:disabled { 45 | & + label { 46 | color: $gray-500; 47 | 48 | .checkbox-icon { 49 | border-color: $gray-400; 50 | background-color: $gray-300; 51 | 52 | &::before { 53 | content: ""; 54 | display: block; 55 | position: absolute; 56 | background-color: $gray-400; 57 | left: -4px; 58 | top: 50%; 59 | width: 24px; 60 | height: 2px; 61 | transform: translateY(-50%) rotate(45deg); 62 | } 63 | } 64 | } 65 | } 66 | 67 | &:disabled:checked { 68 | & + label { 69 | .checkbox-icon { 70 | background-color: $gray-300; 71 | } 72 | .svg-icon { 73 | color: $gray-400; 74 | } 75 | } 76 | } 77 | } 78 | 79 | .checkbox-label { 80 | display: inline-flex; 81 | align-items: center; 82 | transition: 0.3s; 83 | } 84 | 85 | .checkbox-icon { 86 | display: inline-block; 87 | background-color: $white; 88 | border: 2px solid rgba($black, 0.5); 89 | margin-right: 0.25em; 90 | padding: 2px; 91 | transition: 0.3s; 92 | line-height: 0; 93 | position: relative; 94 | width: 20px; 95 | height: 20px; 96 | color: transparent; 97 | 98 | .svg-icon { 99 | position: absolute; 100 | left: 0; 101 | top: 0; 102 | width: 100%; 103 | height: 100%; 104 | transition: 0.3s; 105 | transform: scale(0); 106 | } 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /scss/components/_close.scss: -------------------------------------------------------------------------------- 1 | .close { 2 | opacity: 1; 3 | font-size: 1rem; 4 | } 5 | -------------------------------------------------------------------------------- /scss/components/_countdown.scss: -------------------------------------------------------------------------------- 1 | .countdown-wrapper { 2 | margin: 20px 0; 3 | } 4 | 5 | .countdown { 6 | margin-left: auto; 7 | margin-right: auto; 8 | grid-template-rows: repeat(2, 130px); 9 | grid-template-columns: repeat(2, 130px); 10 | justify-items: center; 11 | justify-content: center; 12 | 13 | @include media-breakpoint-up(xs) { 14 | width: 260px; 15 | } 16 | 17 | @include media-breakpoint-up(sm) { 18 | width: 100%; 19 | display: flex; 20 | justify-content: center; 21 | } 22 | 23 | .countdown__dimension { 24 | display: inline-block; 25 | } 26 | 27 | .figures { 28 | margin: 0.7rem; 29 | width: 95px; 30 | height: 95px; 31 | background-image: url(#{$freyja-asset-path}/svg/shapes/square-like.svg); 32 | color: $black; 33 | background-size: cover; 34 | display: flex; 35 | flex-direction: column; 36 | align-items: center; 37 | justify-content: center; 38 | 39 | .title { 40 | font-size: 14px; 41 | font-family: "Noto Sans", sans-serif; 42 | text-transform: uppercase; 43 | font-weight: bold; 44 | margin-top: 5px; 45 | } 46 | } 47 | 48 | .figure { 49 | position: relative; 50 | float: left; 51 | font-size: 40px; 52 | line-height: 40px; 53 | text-shadow: 0 3px 0 $white; 54 | text-align: center; 55 | margin-right: 2px; 56 | background: transparent; 57 | display: inline-block; 58 | 59 | &:last-child { 60 | margin-right: 0; 61 | } 62 | } 63 | } 64 | 65 | .countdown--black { 66 | .figures { 67 | background-image: url(#{$freyja-asset-path}/svg/shapes/square-like-black.svg); 68 | } 69 | } 70 | 71 | .countdown--small { 72 | .figures { 73 | margin: 0.1rem; 74 | width: 50px; 75 | height: 50px; 76 | 77 | .title { 78 | margin-top: 0px; 79 | } 80 | } 81 | 82 | .figure { 83 | font-size: 20px; 84 | line-height: 25px; 85 | margin-right: 0px; 86 | text-shadow: none; 87 | } 88 | } -------------------------------------------------------------------------------- /scss/components/_counter.scss: -------------------------------------------------------------------------------- 1 | .counter { 2 | position: relative; 3 | overflow: hidden; 4 | font-size: 90px; 5 | font-weight: bold; 6 | line-height: 90px; 7 | margin: 20px 0 !important; 8 | height: 100px; 9 | 10 | @include media-breakpoint-down(sm) { 11 | font-size: 38px; 12 | } 13 | } 14 | 15 | .counter__digit-container { 16 | 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%); 17 | transform: translateZ(0); 18 | } 19 | 20 | .counter__digit { 21 | display: inline-block; 22 | width: 62px; 23 | height: 90px; 24 | position: relative; 25 | 26 | @include media-breakpoint-down(sm) { 27 | width: 24px; 28 | } 29 | } 30 | 31 | .counter__digit-column { 32 | display: inline-block; 33 | position: absolute; 34 | top: 0; 35 | left: 9px; 36 | 37 | @include media-breakpoint-down(sm) { 38 | left: 0; 39 | } 40 | } 41 | 42 | .counter__digit-column span { 43 | display: block; 44 | width: 100%; 45 | text-align: center; 46 | } 47 | 48 | .counter__digit--separator { 49 | width: 36px; 50 | opacity: 0; 51 | transition: width 0.66s cubic-bezier(0.1, 0.55, 0, 1.1), opacity 0.8s ease-out; 52 | } 53 | 54 | .counter__svg-container { 55 | height: 0; 56 | } 57 | -------------------------------------------------------------------------------- /scss/components/_footer.scss: -------------------------------------------------------------------------------- 1 | .mojang-studios-footer { 2 | background: $black; 3 | color: $secondary; 4 | padding: 27px 0 25px; 5 | 6 | @include media-breakpoint-up(sm) { 7 | padding: 2.2rem 0 2rem; 8 | } 9 | 10 | .nav { 11 | a { 12 | @include link($cloud, $cloud, $cloud); 13 | 14 | &:hover { 15 | background-color: transparent; 16 | text-shadow: none; 17 | } 18 | } 19 | } 20 | 21 | .nav-pills { 22 | @include media-breakpoint-down(xs) { 23 | margin-bottom: 6px; 24 | 25 | li { 26 | margin: 2px 0; 27 | } 28 | } 29 | } 30 | 31 | .with-divider { 32 | padding-right: 0; 33 | border-right: none; 34 | 35 | li { 36 | border-right: 1px solid $cloud; 37 | padding: 0 0.5em; 38 | 39 | &:last-child { 40 | border-right: none; 41 | } 42 | } 43 | } 44 | 45 | .icon-xbox-game-studios { 46 | width: 90px; 47 | height: 50px; 48 | } 49 | 50 | .icon-esrb { 51 | height: 55px; 52 | width: 120px; 53 | } 54 | 55 | .icon-cero-a { 56 | height: 90px; 57 | width: 55px; 58 | } 59 | 60 | .icon-mojang-studios { 61 | width: 60px; 62 | height: 50px; 63 | } 64 | 65 | .rating-container { 66 | @include media-breakpoint-up(md) { 67 | position: absolute; 68 | right: 0; 69 | top: 0; 70 | } 71 | } 72 | } 73 | 74 | .mojang-studios-tall-footer { 75 | .icon-xbox-game-studios { 76 | max-width: 140px; 77 | height: 110px; 78 | } 79 | 80 | .icon-esrb { 81 | max-height: 90px; 82 | max-width: 170px; 83 | } 84 | 85 | .icon-mojang-studios { 86 | height: 110px; 87 | max-width: 140px; 88 | } 89 | 90 | @include media-breakpoint-up(md) { 91 | .footer-container { 92 | display: grid; 93 | grid-template-columns: 1fr 3fr; 94 | grid-template-rows: repeat(2, auto); 95 | grid-column-gap: 2em; 96 | } 97 | 98 | .footer-studio-logos { 99 | grid-column: 1; 100 | grid-row: 1; 101 | flex-direction: column; 102 | } 103 | 104 | .footer-links { 105 | grid-column: 2; 106 | grid-row: 1; 107 | } 108 | 109 | .footer-copyright { 110 | grid-column: 2; 111 | grid-row: 2; 112 | } 113 | } 114 | 115 | @include media-breakpoint-up(xl) { 116 | .footer-container { 117 | grid-template-columns: 2fr 3fr; 118 | } 119 | 120 | .footer-copyright { 121 | grid-column: 1; 122 | grid-row: 2; 123 | } 124 | 125 | .footer-studio-logos { 126 | flex-direction: row; 127 | } 128 | 129 | .footer-links { 130 | grid-row: 1 / span 2; 131 | } 132 | 133 | .icon-xbox-game-studios { 134 | max-width: 180px; 135 | } 136 | } 137 | } 138 | 139 | .ms-footer { 140 | font-family: 'Segoe UI', sans-serif; 141 | background-color: $senary; 142 | padding: 1.3rem 0; 143 | -webkit-font-smoothing: antialiased; 144 | 145 | @include media-breakpoint-up(lg) { 146 | padding: 2rem 0; 147 | } 148 | 149 | a { 150 | color: $white; 151 | } 152 | 153 | li { 154 | position: static; 155 | white-space: nowrap; 156 | } 157 | 158 | .ms-footer__language-selector { 159 | .ms-footer__language-selector-link { 160 | display: inline-block; 161 | padding: 6px 0; 162 | 163 | @include media-breakpoint-up(sm) { 164 | padding: 1px 0; 165 | } 166 | } 167 | 168 | .ms-footer__language-selector-list { 169 | margin: 0; 170 | } 171 | 172 | .ms-footer__language-selector-form { 173 | padding: 10px 0 20px; 174 | margin-bottom: 20px; 175 | border-bottom: 1px solid rgba(255, 255, 255, 0.1); 176 | } 177 | } 178 | 179 | .ms-links { 180 | margin: 10px 0; 181 | 182 | @include media-breakpoint-up(lg) { 183 | margin: 0; 184 | } 185 | 186 | .ms-links__link { 187 | margin-bottom: 4px; 188 | margin-right: 20px; 189 | } 190 | 191 | .ms-links__links--locale { 192 | display: flex; 193 | align-items: center; 194 | 195 | .ms-links__links--locale-icon { 196 | margin-right: 5px; 197 | } 198 | 199 | .ms-links__links--locale-text { 200 | position: relative; 201 | } 202 | } 203 | } 204 | 205 | .icon-microsoft { 206 | width: 105px; 207 | height: 25px; 208 | } 209 | } 210 | 211 | #language-selector { 212 | display: none; 213 | position: relative; 214 | 215 | &::after { 216 | height: 20px; 217 | display: block; 218 | content: ""; 219 | position: absolute; 220 | width: 100%; 221 | bottom: 0; 222 | background-image: linear-gradient(transparent, #2f2f2f); 223 | } 224 | } 225 | -------------------------------------------------------------------------------- /scss/components/_forms.scss: -------------------------------------------------------------------------------- 1 | $label-color: $scorpion; 2 | 3 | .form-group { 4 | &.has-error { 5 | .help-block { 6 | color: $danger; 7 | } 8 | } 9 | } 10 | 11 | .form-control { 12 | font-size: 14px; 13 | height: 36px; 14 | padding: 8px; 15 | border-color: $senary-supportive; 16 | &:focus { 17 | @media (forced-colors: active) { 18 | outline: 5px auto -webkit-focus-ring-color; 19 | } 20 | } 21 | } 22 | 23 | .form-control-plaintext { 24 | width: 100%; 25 | display: block; 26 | } 27 | 28 | .required:after { 29 | content: " *"; 30 | color: $red; 31 | } 32 | 33 | .form-tooltip { 34 | position: relative; 35 | display: inline-block; 36 | } 37 | 38 | .form-tooltip .form-tooltip-text { 39 | visibility: hidden; 40 | background-color: #F8F5F4; 41 | color: #000000; 42 | border-radius: 8px; 43 | padding: 8px; 44 | position: absolute; 45 | width: 336px; 46 | transform: translate(-50%, 32%); 47 | z-index:1; 48 | font-size:14px; 49 | box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); 50 | } 51 | 52 | .form-tooltip .form-tooltip-text::after { 53 | content: ""; 54 | position: absolute; 55 | bottom: 100%; 56 | right: 50%; 57 | border-width:8.66px; 58 | border-style: solid; 59 | border-color: transparent transparent #F8F5F4 transparent; 60 | } 61 | 62 | .form-tooltip:hover .form-tooltip-text { 63 | visibility: visible; 64 | } 65 | 66 | label { 67 | color: $label-color; 68 | font-size: 14px; 69 | margin-bottom: 0; 70 | } 71 | 72 | select { 73 | font-size: 16px; 74 | } 75 | -------------------------------------------------------------------------------- /scss/components/_icons.scss: -------------------------------------------------------------------------------- 1 | .svg-icon { 2 | width: 1em; 3 | height: 1em; 4 | overflow: unset !important; 5 | 6 | use { 7 | fill: currentColor; 8 | } 9 | } 10 | 11 | p, 12 | h1, 13 | h2, 14 | h3, 15 | h4, 16 | h5, 17 | h6 { 18 | .svg-icon { 19 | transform: translateY(calc(-2em / 16)); 20 | } 21 | } 22 | 23 | .icon-15x { 24 | font-size: 1.5rem; 25 | } 26 | 27 | @for $i from 2 through 5 { 28 | .icon-#{$i}x { 29 | font-size: #{$i}rem; 30 | } 31 | } 32 | 33 | .icon-shadow { 34 | filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.25)); 35 | } 36 | 37 | .icon-outline { 38 | display: inline-flex; 39 | width: 48px; 40 | height: 48px; 41 | align-items: center; 42 | justify-content: center; 43 | position: relative; 44 | border: 2px solid currentColor; 45 | 46 | .svg-icon { 47 | transform: none; 48 | } 49 | } 50 | 51 | .icon-outline--circular { 52 | border-radius: 50%; 53 | } 54 | 55 | .icon-outline--hexagon { 56 | border-top: none; 57 | border-bottom: none; 58 | height: 26px; 59 | width: 48px; 60 | margin: 10px 0; 61 | 62 | &::after, 63 | &::before { 64 | content: ""; 65 | pointer-events: none; 66 | display: block; 67 | position: absolute; 68 | border: 2px solid currentColor; 69 | width: 27.2px; 70 | height: 47.4px; 71 | left: 0; 72 | right: 0; 73 | top: 50%; 74 | border-right: none; 75 | border-left: none; 76 | margin: 0 auto; 77 | bottom: 0; 78 | } 79 | 80 | &::after { 81 | transform: translateY(-50%) rotate(30deg); 82 | } 83 | 84 | &::before { 85 | transform: translateY(-50%) rotate(-30deg); 86 | } 87 | } 88 | 89 | .end-with-block { 90 | h1 { 91 | &:last-child::after { 92 | width: $h1-font-size; 93 | height: $h1-font-size; 94 | } 95 | } 96 | 97 | p { 98 | &:last-child::after { 99 | width: 1rem; 100 | height: 1rem; 101 | } 102 | } 103 | 104 | p, 105 | h1 { 106 | &:last-child::after { 107 | content: ''; 108 | background: url(#{$freyja-asset-path}/svg/icons/what-block.svg) no-repeat; 109 | display: inline-block; 110 | margin-left: 0.5rem; 111 | margin-bottom: 2px; 112 | vertical-align: text-bottom; 113 | } 114 | } 115 | } 116 | -------------------------------------------------------------------------------- /scss/components/_links.scss: -------------------------------------------------------------------------------- 1 | a:hover { 2 | text-decoration: underline; 3 | } 4 | 5 | td, 6 | li, 7 | p { 8 | a { 9 | color: $link-color; 10 | transition: color 0.025s linear, background-color 0.025s linear; 11 | 12 | &:hover, 13 | &:focus, 14 | &:active { 15 | color: $white; 16 | background-color: $black; 17 | } 18 | } 19 | } 20 | 21 | p { 22 | a { 23 | text-decoration: underline; 24 | } 25 | } 26 | 27 | .text-light { 28 | td, 29 | li, 30 | p { 31 | a { 32 | color: $tertiary; 33 | 34 | &:hover, 35 | &:focus, 36 | &:active { 37 | color: $white; 38 | } 39 | } 40 | } 41 | } 42 | 43 | a, 44 | button { 45 | &.inverted { 46 | color: currentColor; 47 | 48 | &:hover, 49 | &:focus, 50 | &:active { 51 | color: $primary; 52 | background-color: transparent; 53 | 54 | .text-light & { 55 | color: $tertiary; 56 | } 57 | } 58 | } 59 | } 60 | 61 | .arrow-link { 62 | color: currentColor; 63 | font-weight: bold; 64 | position: relative; 65 | text-transform: uppercase; 66 | text-align: inherit; 67 | margin-left: 1.5em; 68 | display: block; 69 | 70 | &:focus, 71 | &:hover, 72 | &:active { 73 | color: currentColor; 74 | } 75 | 76 | .svg-icon { 77 | position: absolute; 78 | top: 4px; 79 | left: -1.5em; 80 | } 81 | } 82 | 83 | .hover-current { 84 | &:hover, 85 | &:focus, 86 | &:active { 87 | background-color: transparent; 88 | color: currentColor !important; 89 | } 90 | } 91 | 92 | a.hover-white { 93 | &:hover, 94 | &:focus, 95 | &:active { 96 | background-color: transparent; 97 | color: $white !important; 98 | } 99 | } 100 | 101 | a.hover-black { 102 | &:hover, 103 | &:focus, 104 | &:active { 105 | background-color: transparent; 106 | color: $black !important; 107 | } 108 | } 109 | 110 | .anchor-link { 111 | display: inline-block; 112 | padding: 0.6rem 1rem; 113 | color: $black; 114 | background-color: rgba(255, 255, 255, 0.3); 115 | box-shadow: 2px 2px 0 0 rgba(255, 255, 255, 0.5); 116 | transition: background-color 0.025s linear; 117 | 118 | &:hover, 119 | &:active, 120 | &:focus { 121 | background-color: rgba(255, 255, 255, 0.6); 122 | color: $body-color; 123 | } 124 | 125 | .svg-icon { 126 | transform: translateY(calc(3em / 16)); 127 | margin-right: 0.2rem; 128 | color: rgba(0, 0, 0, 0.5); 129 | } 130 | } 131 | 132 | .text-light, 133 | .text-white { 134 | .anchor-link { 135 | color: $white; 136 | background-color: rgba(0, 0, 0, 0.3); 137 | box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.5); 138 | 139 | &:hover, 140 | &:active, 141 | &:focus { 142 | background-color: rgba(0, 0, 0, 0.6); 143 | color: $white; 144 | } 145 | 146 | .svg-icon { 147 | color: rgba(255, 255, 255, 0.5); 148 | } 149 | } 150 | } 151 | -------------------------------------------------------------------------------- /scss/components/_loader.scss: -------------------------------------------------------------------------------- 1 | .preloader { 2 | text-align: center; 3 | 4 | p { 5 | font-size: 1.2em; 6 | margin-top: 1.3rem; 7 | margin-bottom: 0; 8 | } 9 | } 10 | 11 | .area-overlay { 12 | .preloader { 13 | padding: 1rem 2rem; 14 | background: #fff; 15 | box-shadow: 0 0 0 3px rgba($black, 0.2) inset; 16 | 17 | .text-light & { 18 | background: #000; 19 | box-shadow: 0 0 0 3px rgba($white, 0.35) inset; 20 | 21 | .square { 22 | background: $tertiary; 23 | } 24 | } 25 | } 26 | } 27 | 28 | /* 29 | Copyright (c) 2015 by Tashfeen Ahmad (http://codepen.io/tashfene/pen/medPdY) 30 | 31 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated 32 | documentation files (the "Software"), to deal in the Software without restriction, including without limitation the 33 | rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit 34 | persons to whom the Software is furnished to do so, subject to the following conditions: 35 | 36 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the 37 | Software. 38 | 39 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE 40 | WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 41 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR 42 | OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 43 | */ 44 | 45 | .bigsquare { 46 | position: relative; 47 | display: inline-block; 48 | width: 40px; 49 | height: 40px; 50 | overflow: hidden; 51 | -webkit-transform-origin: bottom left; 52 | -ms-transform-origin: bottom left; 53 | transform-origin: bottom left; 54 | -webkit-animation: bigSqrShrink 1s linear infinite; 55 | animation: bigSqrShrink 1s linear infinite; 56 | 57 | .square { 58 | position: absolute; 59 | width: 20px; 60 | height: 20px; 61 | background: $primary; 62 | } 63 | 64 | .first { 65 | left: 0; 66 | top: 20px; 67 | } 68 | 69 | .second { 70 | left: 20px; 71 | top: 20px; 72 | animation: drop2 1s linear infinite; 73 | } 74 | 75 | .third { 76 | left: 0; 77 | top: 0; 78 | animation: drop3 1s linear infinite; 79 | } 80 | 81 | .fourth { 82 | left: 20px; 83 | top: 0; 84 | animation: drop4 1s linear infinite; 85 | } 86 | } 87 | 88 | @keyframes bigSqrShrink { 89 | 0% { 90 | -webkit-transform: scale(1); 91 | transform: scale(1); 92 | } 93 | 94 | 90% { 95 | -webkit-transform: scale(1); 96 | transform: scale(1); 97 | } 98 | 99 | 100% { 100 | -webkit-transform: scale(0.5); 101 | transform: scale(0.5); 102 | } 103 | } 104 | 105 | @keyframes drop2 { 106 | 0% { 107 | -webkit-transform: translateY(-50px); 108 | transform: translateY(-50px); 109 | } 110 | 111 | 25% { 112 | -webkit-transform: translate(0); 113 | transform: translate(0); 114 | } 115 | 116 | 100% { 117 | -webkit-transform: translate(0); 118 | transform: translate(0); 119 | } 120 | } 121 | 122 | @keyframes drop3 { 123 | 0% { 124 | -webkit-transform: translateY(-50px); 125 | transform: translateY(-50px); 126 | } 127 | 128 | 50% { 129 | -webkit-transform: translate(0); 130 | transform: translate(0); 131 | } 132 | 133 | 100% { 134 | -webkit-transform: translate(0); 135 | transform: translate(0); 136 | } 137 | } 138 | 139 | @keyframes drop4 { 140 | 0% { 141 | -webkit-transform: translateY(-50px); 142 | transform: translateY(-50px); 143 | } 144 | 145 | 75% { 146 | -webkit-transform: translate(0); 147 | transform: translate(0); 148 | } 149 | 150 | 100% { 151 | -webkit-transform: translate(0); 152 | transform: translate(0); 153 | } 154 | } 155 | -------------------------------------------------------------------------------- /scss/components/_logo.scss: -------------------------------------------------------------------------------- 1 | .svg-logo { 2 | overflow: unset !important; 3 | 4 | use { 5 | fill: currentColor; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /scss/components/_modal.scss: -------------------------------------------------------------------------------- 1 | .modal-content { 2 | padding: 0 15px; 3 | } 4 | 5 | .modal-header { 6 | justify-content: center; 7 | 8 | .close { 9 | position: absolute; 10 | right: 30px; 11 | } 12 | } 13 | 14 | .modal-body { 15 | text-align: center; 16 | } 17 | 18 | .modal-footer { 19 | justify-content: center; 20 | } 21 | -------------------------------------------------------------------------------- /scss/components/_navbar.scss: -------------------------------------------------------------------------------- 1 | .navbar { 2 | @include box-shadow(none); 3 | } 4 | 5 | .navbar-collapse { 6 | text-align: center; 7 | } 8 | 9 | .navbar-inverse { 10 | margin-bottom: 0; 11 | } 12 | 13 | @include media-breakpoint-down(sm) { 14 | .navbar-collapse { 15 | margin-top: 0; 16 | } 17 | 18 | .navbar-header__brand-img { 19 | max-width: 200px; 20 | margin: 0 auto; 21 | } 22 | 23 | .navbar-inverse { 24 | min-height: 50px; 25 | } 26 | } 27 | 28 | .navbar-nav { 29 | flex-wrap: wrap; 30 | } 31 | 32 | .navbar-light, 33 | .navbar-dark { 34 | .navbar-nav { 35 | .nav-link { 36 | color: currentColor; 37 | 38 | &:active, 39 | &:focus, 40 | &:hover { 41 | color: currentColor; 42 | background-color: transparent; 43 | } 44 | 45 | &.active { 46 | color: $white; 47 | background-color: $black; 48 | } 49 | 50 | &.disabled { 51 | background: transparent; 52 | color: $nav-link-disabled-color; 53 | 54 | &:hover { 55 | color: $nav-link-disabled-color !important; 56 | } 57 | } 58 | } 59 | } 60 | } 61 | 62 | .navbar-dark { 63 | color: $white; 64 | } 65 | 66 | .nav-link { 67 | padding: 0.5rem 0.75rem; 68 | line-height: 1; 69 | text-transform: uppercase; 70 | letter-spacing: 1px; 71 | text-align: left; 72 | display: flex; 73 | align-items: center; 74 | 75 | &:hover { 76 | color: $white; 77 | background-color: $black; 78 | } 79 | 80 | &.disabled { 81 | background: transparent; 82 | cursor: default; 83 | 84 | &:hover { 85 | color: $nav-link-disabled-color !important; 86 | } 87 | } 88 | @media screen and (-ms-high-contrast: active) { 89 | -ms-high-contrast-adjust: none; 90 | color: windowText !important; 91 | &.active, 92 | &:hover { 93 | color: window !important; 94 | background-color: HighLight !important; 95 | } 96 | } 97 | } 98 | 99 | .nav { 100 | margin: 0 -2px; 101 | 102 | &.flex-column { 103 | &.align-items-start, 104 | &.align-items-end { 105 | .nav-link { 106 | width: auto; 107 | } 108 | } 109 | 110 | .nav-link { 111 | width: 100%; 112 | } 113 | } 114 | } 115 | 116 | .nav-item { 117 | margin: 0 2px; 118 | display: flex; 119 | } 120 | 121 | .dropdown-menu { 122 | font-size: inherit; 123 | text-transform: uppercase; 124 | } 125 | -------------------------------------------------------------------------------- /scss/components/_page-section.scss: -------------------------------------------------------------------------------- 1 | $page-section-vertical-padding: 4rem; // 64px; 2 | $page-section--article-top-padding: 2.75rem; // 44px; 3 | 4 | .page-section { 5 | position: relative; 6 | padding: $page-section-vertical-padding 0; 7 | 8 | &--half-spacing { 9 | padding: $page-section-vertical-padding / 2 0; 10 | } 11 | 12 | &--half-top-spacing { 13 | padding-top: $page-section-vertical-padding / 2; 14 | } 15 | 16 | &--first { 17 | padding-top: $page-section--article-top-padding; 18 | } 19 | 20 | &--double-spacing { 21 | padding: 156px 0; 22 | } 23 | 24 | &--no-top-spacing { 25 | padding-top: 0 !important; 26 | } 27 | 28 | &--no-bottom-spacing { 29 | padding-bottom: 0; 30 | } 31 | 32 | &--no-overflow { 33 | overflow: hidden; 34 | } 35 | 36 | &.text-white, 37 | &.text-light { 38 | @extend %antialiasing; 39 | } 40 | 41 | @include media-breakpoint-down(sm) { 42 | padding: 44px 0; 43 | 44 | &--first { 45 | padding-top: 28px; 46 | } 47 | 48 | &--no-bottom-spacing { 49 | padding-bottom: 0; 50 | } 51 | } 52 | 53 | h1, 54 | > .container > .row:first-child > div > :first-child { 55 | margin-top: 0; 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /scss/components/_progress.scss: -------------------------------------------------------------------------------- 1 | .progress { 2 | height: 4px; 3 | border-radius: 0; 4 | background-color: $black; 5 | 6 | &-container { 7 | background-color: $senary; 8 | color: $white; 9 | } 10 | 11 | //TODO: Move this into Progress markup 12 | 13 | &-labels { 14 | justify-content: center !important; 15 | 16 | &__list-item { 17 | flex: 0 0 25%; 18 | max-width: 25%; 19 | 20 | .glyphicon.glyphicon-stop { 21 | background-color: $black; 22 | display: inline-block; 23 | height: 1em; 24 | width: 1em; 25 | transform: scale(0.8) translateY(3px); 26 | } 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /scss/components/_radio.scss: -------------------------------------------------------------------------------- 1 | .radio { 2 | display: inline-block; 3 | position: relative; 4 | 5 | @media screen and (-ms-high-contrast: active) { 6 | -ms-high-contrast-adjust: none; 7 | } 8 | 9 | input[type="radio"] { 10 | position: absolute; 11 | top: 0; 12 | left: 0; 13 | opacity: 0; 14 | height: 1.3em; 15 | width: 1.3em; 16 | 17 | &:checked { 18 | & + label { 19 | .radio-icon { 20 | border-color: $primary; 21 | 22 | @media screen and (-ms-high-contrast: active) { 23 | border-color: Highlight; 24 | } 25 | 26 | &::after { 27 | background-color: $primary; 28 | 29 | @media screen and (-ms-high-contrast: active) { 30 | background-color: Highlight; 31 | } 32 | } 33 | } 34 | 35 | &.radio-selection { 36 | border-color: $primary; 37 | background-color: $ebb; 38 | box-shadow: 3px 3px 0 rgba($black, 0.1) inset; 39 | 40 | @media screen and (-ms-high-contrast: active) { 41 | border-color: Highlight; 42 | background-color: Window; 43 | } 44 | } 45 | } 46 | } 47 | 48 | &:focus { 49 | outline: none; 50 | 51 | & + label { 52 | .radio-icon { 53 | box-shadow: 0 0 5px 1px Highlight; 54 | } 55 | } 56 | } 57 | 58 | &:disabled { 59 | & + label { 60 | color: $gray-500; 61 | 62 | .radio-icon { 63 | border-color: $gray-400; 64 | background-color: $gray-300; 65 | 66 | &::before { 67 | content: ""; 68 | display: block; 69 | position: absolute; 70 | background-color: $gray-400; 71 | left: 0; 72 | top: 50%; 73 | width: 100%; 74 | height: 2px; 75 | transform: translateY(-50%) rotate(45deg); 76 | } 77 | } 78 | } 79 | } 80 | 81 | &:disabled:checked { 82 | & + label { 83 | .radio-icon { 84 | &::after { 85 | background-color: $gray-400; 86 | } 87 | } 88 | 89 | &.radio-selection { 90 | border-color: $gray-400; 91 | background-color: $ebb; 92 | box-shadow: none; 93 | } 94 | } 95 | } 96 | } 97 | 98 | .radio-label { 99 | display: inline-flex; 100 | align-items: center; 101 | transition: 0.3s; 102 | } 103 | 104 | .radio-icon { 105 | display: inline-block; 106 | background-color: $white; 107 | border: 2px solid rgba($black, 0.5); 108 | border-radius: 50%; 109 | margin-right: 0.25em; 110 | padding: 2px; 111 | transition: 0.3s; 112 | line-height: 0; 113 | position: relative; 114 | 115 | @media screen and (-ms-high-contrast: active) { 116 | background-color: Window; 117 | border-color: WindowText; 118 | } 119 | 120 | &::after { 121 | content: ""; 122 | display: inline-block; 123 | width: 12px; 124 | height: 12px; 125 | border-radius: 50%; 126 | transition: 0.3s; 127 | } 128 | } 129 | 130 | .radio-selection { 131 | display: block; 132 | border: 3px solid rgba($black, 0.1); 133 | border-radius: 4px; 134 | padding: $spacer; 135 | transition: 0.3s; 136 | 137 | @media screen and (-ms-high-contrast: active) { 138 | border-color: windowText; 139 | box-shadow: none !important; 140 | } 141 | } 142 | } 143 | -------------------------------------------------------------------------------- /scss/components/_ribbons.scss: -------------------------------------------------------------------------------- 1 | .ribbon { 2 | transform-origin: left top; 3 | display: block; 4 | position: absolute; 5 | top: 0; 6 | left: 0; 7 | z-index: 100; 8 | width: 96px; 9 | height: 96px; 10 | transition: all 0.6s $custom-bezier-1; 11 | } 12 | 13 | .ribbon-icon { 14 | fill: currentColor; 15 | width: 96px; 16 | height: 96px; 17 | 18 | .top, 19 | .left { 20 | fill: transparent; 21 | } 22 | 23 | .corner { 24 | fill: inherit; 25 | } 26 | } 27 | 28 | .ribbon-icon--secondary { 29 | fill: $quaternary-supportive; 30 | } 31 | 32 | .ribbon-label { 33 | display: flex; 34 | transform: translateY(-50%) translateX(-50%) rotate(-45deg); 35 | transform-origin: 50%; 36 | position: absolute; 37 | top: 34%; 38 | left: 34%; 39 | width: 75%; 40 | height: 75%; 41 | white-space: normal; 42 | align-items: center; 43 | justify-content: center; 44 | } 45 | 46 | .btn { 47 | .ribbon-icon { 48 | transition: fill 0.15s ease-in-out; 49 | fill: $secondary-supportive; 50 | filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.25)); 51 | 52 | .top { 53 | transition: fill 0.15s ease-in-out; 54 | fill: rgba($white, 0.3); 55 | } 56 | 57 | .left { 58 | transition: fill 0.15s ease-in-out; 59 | fill: rgba($black, 0.25); 60 | } 61 | } 62 | 63 | &:hover, 64 | &:focus { 65 | .ribbon-icon { 66 | fill: $primary; 67 | } 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /scss/components/_tiles.scss: -------------------------------------------------------------------------------- 1 | $tile-base-size: 276px; 2 | $tile-gutter-size: 12px; 3 | $tile-transition-time: 200ms; 4 | $btn-video-play-height: 80px; 5 | $tile-caption-height: 84px; 6 | 7 | .tile { 8 | display: block; 9 | position: relative; 10 | overflow: hidden; 11 | background-color: transparent; 12 | 13 | /* 14 | Init and start is set as animation cues by Freewall when new tiles appear in the DOM. 15 | The load state is set by the Tile component when the tile image has finished loading 16 | */ 17 | &[data-state="init"], 18 | &[data-state="start"] { 19 | display: none; 20 | } 21 | 22 | &[data-state="load"] { 23 | display: block; 24 | 25 | @extend %animation-scale--0-to-1; 26 | } 27 | 28 | &[data-state="move"] { 29 | transition: top 0.5s, left 0.5s, width 0.5s, height 0.5s; 30 | } 31 | } 32 | 33 | .tile-link { 34 | &:focus, 35 | &:hover { 36 | .tile-caption__text { 37 | opacity: 1; 38 | } 39 | 40 | .sliding-content__body { 41 | transform: translate3d(0, -99%, 0); 42 | } 43 | } 44 | } 45 | 46 | .tile__image-container { 47 | display: inline-block; 48 | width: 100%; 49 | height: 100%; 50 | transition: background-color 0.5s ease-out; 51 | background-color: rgba(0, 0, 0, 0); 52 | 53 | &.tile__image-container--loading { 54 | background-color: rgba(0, 0, 0, 0.1); 55 | 56 | .tile__image { 57 | opacity: 0; 58 | } 59 | } 60 | } 61 | 62 | .tile__image { 63 | width: 100%; 64 | transition: transform $tile-transition-time ease-in-out; 65 | 66 | .tile__image--fade { 67 | transition: opacity 0.5s ease-out; 68 | } 69 | } 70 | 71 | .sliding-content { 72 | position: absolute; 73 | width: 100%; 74 | bottom: 0; 75 | left: 0; 76 | height: 0; 77 | } 78 | 79 | .sliding-content__body { 80 | transition: all $tile-transition-time ease-in-out; 81 | // Default position of the slide-up tile caption 82 | transform: translate3d(0, -$tile-caption-height, 0); 83 | } 84 | 85 | .tile-category { 86 | position: absolute; 87 | top: -14px; 88 | left: 0; 89 | width: 100%; 90 | text-align: center; 91 | z-index: 1; 92 | } 93 | 94 | .tile-category__text { 95 | display: inline-block; 96 | font-size: $text-smallest; 97 | font-weight: bold; 98 | letter-spacing: 1px; 99 | background-color: $white; 100 | color: $shark; 101 | padding: 0.5rem 1rem; 102 | text-transform: uppercase; 103 | 104 | @extend %force-layer-creation; 105 | } 106 | 107 | .tile-caption { 108 | display: block; 109 | background-color: rgba(0, 0, 0, 0.7); 110 | color: $white; 111 | padding: 0.875rem 1.2rem 1.2rem 1.2rem; 112 | min-height: $tile-caption-height; 113 | text-align: center; 114 | } 115 | 116 | .tile-caption__title { 117 | margin: 0.8rem 0 1rem; 118 | text-transform: uppercase; 119 | } 120 | 121 | .tile-caption__title--long { 122 | margin: 1.2rem 0; 123 | } 124 | 125 | .tile-caption__text { 126 | transition: opacity $tile-transition-time ease-in; 127 | opacity: 0; 128 | margin: 0; 129 | font-size: $text-small; 130 | line-height: 1.3; 131 | } 132 | 133 | /* 134 | Possible tile sizes 135 | */ 136 | 137 | .tile--size-1x1 { 138 | @include tile-size(1,1); 139 | 140 | .tile-caption__title--long { 141 | font-size: $text-small; 142 | } 143 | } 144 | 145 | .tile--size-1x2 { 146 | @include tile-size(1,2); 147 | } 148 | 149 | .tile--size-2x1 { 150 | @include tile-size(2,1); 151 | } 152 | 153 | .tile--size-2x2 { 154 | @include tile-size(2, 2); 155 | } 156 | 157 | .tile--size-2x2, 158 | .tile--size-2x1 { 159 | .tile-caption__title:not(.tile-caption__title--long) { 160 | margin: 0.625rem 0; 161 | font-size: $h3-font-size * 1.25; 162 | } 163 | 164 | .tile-caption__text { 165 | font-size: initial; 166 | } 167 | } 168 | 169 | .tile--size-4x2 { 170 | @include tile-size(4,2); 171 | 172 | .sliding-content__body { 173 | transform: translate3d(0, -($tile-caption-height * 1.2), 0); 174 | } 175 | 176 | .tile-caption__title { 177 | margin: 1.4rem 0; 178 | font-size: $h2-font-size; 179 | } 180 | 181 | .tile-caption__text { 182 | font-size: $h2-font-size * 0.93; 183 | } 184 | } 185 | 186 | /* 187 | Image Loading Transitions 188 | */ 189 | .tweet-tile { 190 | padding: 2rem; 191 | color: $white; 192 | 193 | a { 194 | @include link($white, $white); 195 | } 196 | } 197 | 198 | .tweet-tile__title { 199 | font-size: initial; 200 | text-transform: uppercase; 201 | } 202 | 203 | .tweet-tile-media { 204 | margin-bottom: 0.5rem; 205 | } 206 | 207 | .tweet-tile-media__handle { 208 | font-size: $text-smaller; 209 | } 210 | 211 | .tweet-tile__text { 212 | line-height: 1.3em; 213 | } 214 | 215 | .video-tile__play-btn { 216 | position: absolute; 217 | width: 100%; 218 | text-align: center; 219 | } 220 | -------------------------------------------------------------------------------- /scss/styles.scss: -------------------------------------------------------------------------------- 1 | @import "~bootstrap/scss/functions"; 2 | @import "./abstract/colors"; 3 | @import "./abstract/theme"; 4 | @import "./abstract/keyframes"; 5 | @import "~bootstrap/scss/variables"; 6 | @import "./abstract/variables"; 7 | @import "./abstract/mixins"; 8 | @import "~bootstrap/scss/mixins"; 9 | @import "./abstract/utilities"; 10 | @import "./abstract/extendables"; 11 | @import "./abstract/columns"; 12 | @import "~bootstrap/scss/reboot"; 13 | @import "~bootstrap/scss/type"; 14 | @import "~bootstrap/scss/images"; 15 | @import "~bootstrap/scss/grid"; 16 | @import "~bootstrap/scss/tables"; 17 | @import "~bootstrap/scss/forms"; 18 | @import "~bootstrap/scss/buttons"; 19 | @import "~bootstrap/scss/dropdown"; 20 | @import "~bootstrap/scss/nav"; 21 | @import "~bootstrap/scss/navbar"; 22 | @import "~bootstrap/scss/card"; 23 | @import "~bootstrap/scss/alert"; 24 | @import "~bootstrap/scss/progress"; 25 | @import "~bootstrap/scss/input-group"; 26 | @import "~bootstrap/scss/close"; 27 | @import "~bootstrap/scss/modal"; 28 | @import "~bootstrap/scss/code"; 29 | @import "~bootstrap/scss/utilities"; 30 | @import "./base/typography"; 31 | @import "./base/background"; 32 | @import "./components/alert"; 33 | @import "./components/radio"; 34 | @import "./components/checkbox"; 35 | @import "./components/buttons"; 36 | @import "./components/borders"; 37 | @import "./components/forms"; 38 | @import "./components/card"; 39 | @import "./components/close"; 40 | @import "./components/modal"; 41 | @import "./components/progress"; 42 | @import "./components/navbar"; 43 | @import "./components/links"; 44 | @import "./components/icons"; 45 | @import "./components/animations"; 46 | @import "./components/ribbons"; 47 | @import "./components/tiles"; 48 | @import "./components/footer"; 49 | @import "./components/attribution"; 50 | @import "./components/page-section"; 51 | @import "./components/countdown"; 52 | @import "./components/counter"; 53 | @import "./components/area-overlay"; 54 | @import "./components/loader"; 55 | @import "./components/logo"; 56 | --------------------------------------------------------------------------------