163 lines
3.7 KiB
SCSS
163 lines
3.7 KiB
SCSS
//
|
|
// Crafting Guide - header.scss
|
|
//
|
|
// Copyright © 2014-2017 by Redwood Labs
|
|
// All rights reserved.
|
|
//
|
|
|
|
.view__header {
|
|
background: $color-gray-light;
|
|
|
|
display : flex;
|
|
flex-direction : column;
|
|
|
|
.top-row {
|
|
display : flex;
|
|
align-items : center;
|
|
|
|
a {
|
|
flex : 0 0 auto;
|
|
height : $size-minecraft-block * 1.5;
|
|
width : $size-minecraft-block * 1.5;
|
|
margin-right : $size-margin-medium;
|
|
|
|
img {
|
|
position : relative;
|
|
height : $size-minecraft-block * 1.5;
|
|
width : $size-minecraft-block * 1.5;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
flex: 1 1 auto;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.addthis_sharing_toolbox {
|
|
flex : 0 0 auto;
|
|
min-height : 37px; // actual size of addthis component
|
|
min-width : 144px;
|
|
margin-right : $size-margin-small;
|
|
|
|
&.placeholder {
|
|
border : 1px solid orange;
|
|
text-align : center;
|
|
|
|
&:before {
|
|
color : orange;
|
|
content : "ADD THIS";
|
|
font-family : $font-family-header;
|
|
font-size : $font-size-large;
|
|
line-height : 37px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.divider {
|
|
background : $color-planks url('/images/planks.png');
|
|
|
|
align-items : center;
|
|
display : flex;
|
|
flex-wrap : wrap;
|
|
justify-content : center;
|
|
padding : $size-margin-medium $size-margin-medium;
|
|
padding-top : 0;
|
|
|
|
.button {
|
|
flex-grow : 1;
|
|
flex-shrink : 1;
|
|
min-width : 3 * $size-minecraft-block;
|
|
max-width : 5 * $size-minecraft-block;
|
|
margin-top : $size-margin-medium;
|
|
margin-right : $size-margin-small;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.breadcrumb-bar {
|
|
background: $color-screen;
|
|
padding: 0 ($size-margin-medium + $size-margin-large);
|
|
|
|
font-family: $font-family-control;
|
|
font-size: $font-size-medium;
|
|
line-height: $font-size-medium + 2 * $size-margin-small;
|
|
|
|
display: flex;
|
|
|
|
.breadcrumbs {
|
|
flex: 1 1 75%;
|
|
|
|
text-indent: -$size-margin-large;
|
|
|
|
&:before {
|
|
content: "⟩";
|
|
margin-right: $size-margin-medium;
|
|
}
|
|
|
|
a {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
span {
|
|
margin: 0 $size-margin-medium;
|
|
}
|
|
}
|
|
|
|
.extra-nav {
|
|
flex: 1 1 25%;
|
|
align-self: flex-end;
|
|
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include screen-size(desktop) {
|
|
.view__header {
|
|
.top-row {
|
|
a {
|
|
img {
|
|
top : -$size-minecraft-block * 0.5;
|
|
left : -$size-minecraft-block * 0.5;
|
|
height : $size-minecraft-block * 2.0;
|
|
width : $size-minecraft-block * 2.0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include screen-size(tablet) {
|
|
.view__header {
|
|
.top-row {
|
|
h1 {
|
|
font-size : $font-size-xlarge;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include screen-size(mobile) {
|
|
.view__header {
|
|
.top-row {
|
|
display : none;
|
|
}
|
|
|
|
.divider {
|
|
.button.login {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.breadcrumb-bar {
|
|
.extra-nav {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|