817 lines
20 KiB
SCSS
817 lines
20 KiB
SCSS
@import "_bootstrap";
|
|
|
|
// ----------------------
|
|
// Container
|
|
// ----------------------
|
|
.container {
|
|
max-width: 100vw;
|
|
|
|
@media (min-width: 768px) {
|
|
max-width: 95vw;
|
|
}
|
|
}
|
|
|
|
.circle {
|
|
position: relative;
|
|
width: calc(var(--radius) * 2);
|
|
height: calc(var(--radius) * 2);
|
|
margin: 50px auto;
|
|
}
|
|
|
|
:root {
|
|
--total: 11; /* How many items */
|
|
--radius: 80px; /* Circle size */
|
|
}
|
|
|
|
.circle-item {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 50px;
|
|
height: 50px;
|
|
margin: -30px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
display: grid;
|
|
place-items: center;
|
|
|
|
/* This is where the magic happens */
|
|
--angle: calc(360deg / var(--total) * var(--i));
|
|
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
|
|
transform:
|
|
rotate(var(--angle)) /* Rotate to position */
|
|
translateX(var(--radius)) /* Move away from center */
|
|
rotate(calc(-1 * var(--angle))); /* Rotate back */
|
|
}
|
|
|
|
// ----------------------
|
|
// Typography
|
|
// ----------------------
|
|
.copy-small {
|
|
font-size: 0.75rem;
|
|
opacity: 0.87;
|
|
|
|
@media (min-width: 768px) {
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
@media (min-width: 1400px) {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
|
|
// ----------------------
|
|
// Cards & Modal
|
|
// ----------------------
|
|
|
|
.modal-xl {
|
|
@media (min-width: 768px) {
|
|
max-width: 95vw;
|
|
}
|
|
@media (min-width: 1400px) {
|
|
max-width: 90vw;
|
|
}
|
|
}
|
|
|
|
.image-grow {
|
|
transition-property: box-shadow, transform;
|
|
transition-duration: 350ms;
|
|
transition-timing-function: ease;
|
|
|
|
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.24);
|
|
}
|
|
|
|
.image-grow:is(:hover, :focus) {
|
|
box-shadow: 0px 8px 10px 1px rgba(0, 0, 0, 0.2);
|
|
transform: translateY(-.9rem) scale(1.02);
|
|
}
|
|
|
|
.card-modal {
|
|
background-color: rgba(1, 11, 18, 0.8);
|
|
cursor: default;
|
|
}
|
|
|
|
.pokedex-page {
|
|
position: relative;
|
|
top: 50px;
|
|
@media (min-width: 768px) {
|
|
top: 100px !important;
|
|
}
|
|
}
|
|
|
|
// ----------------------
|
|
// Navigation Tabs
|
|
// ----------------------
|
|
.nav-link {
|
|
font-weight: 600;
|
|
color: rgba(255, 255, 255, 0.67);
|
|
transition:
|
|
margin-top 0.2s cubic-bezier(0.5, 0, 0.3, 1),
|
|
padding-top 0.2s cubic-bezier(0.5, 0, 0.3, 1),
|
|
padding-bottom 0.2s cubic-bezier(0.5, 0, 0.3, 1);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: rgba(0, 0, 0, 0.87);
|
|
}
|
|
}
|
|
|
|
.nav-tabs {
|
|
.nav-link.active,
|
|
.nav-item.show .nav-link {
|
|
color: rgba(0, 0, 0, 0.94);
|
|
}
|
|
|
|
.nav-link:hover,
|
|
.nav-link:focus {
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
// Tiered Nav-Link Colors
|
|
$tiers: (
|
|
nm: rgba(156, 204, 102, 1),
|
|
lp: rgba(211, 225, 86, 1),
|
|
mp: rgba(255, 238, 87, 1),
|
|
hp: rgba(255, 201, 41, 1),
|
|
dmg: rgba(255, 167, 36, 1),
|
|
vendor: hsl(262, 47%, 55%)
|
|
);
|
|
|
|
@each $name, $color in $tiers {
|
|
.nav-link.#{$name} {
|
|
border-bottom: 3px solid $color;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background-color: rgba($color, 0.67);
|
|
}
|
|
|
|
&.active {
|
|
background-color: $color;
|
|
border-bottom-color: $color;
|
|
@if $name == vendor {
|
|
color: rgba(255, 255, 255, 0.87);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ----------------------
|
|
// Misc Components
|
|
// ----------------------
|
|
.dark-callout {
|
|
@media (min-width: 768px) {
|
|
background-color: rgba(44, 48, 59, 1);
|
|
}
|
|
}
|
|
|
|
.price-area {
|
|
max-height: 75px;
|
|
}
|
|
|
|
.card-image {
|
|
aspect-ratio: 23 / 32;
|
|
object-fit: cover;
|
|
z-index: 998;
|
|
cursor: pointer;
|
|
}
|
|
|
|
// Icon sizes
|
|
.small-icon svg {
|
|
width: 100%;
|
|
max-height: 16px;
|
|
margin-top: -0.25rem;
|
|
}
|
|
|
|
.masked-image {
|
|
z-index: 1000;
|
|
opacity: 100%;
|
|
filter: brightness(0);
|
|
}
|
|
|
|
.starburst {
|
|
opacity: 10%;
|
|
mix-blend-mode: lighten;
|
|
object-fit: cover;
|
|
background-size: cover;
|
|
}
|
|
|
|
.whos-that-pokemon {
|
|
width: 100%;
|
|
z-index: 998;
|
|
opacity: 10%;
|
|
mix-blend-mode: lighten;
|
|
aspect-ratio: 1/1;
|
|
}
|
|
|
|
.energy-icon svg,
|
|
.rarity-icon-large svg,
|
|
.set-icon svg {
|
|
width: 2.5rem;
|
|
}
|
|
|
|
.rarity-icon-large svg,
|
|
.set-icon svg {
|
|
margin-bottom: -0.25rem;
|
|
}
|
|
|
|
.energy-icon svg {
|
|
margin-top: -0.25rem;
|
|
margin-right: -0.25rem;
|
|
}
|
|
|
|
.rarity-icon-large svg {
|
|
margin-right: -0.25rem;
|
|
}
|
|
|
|
.set-icon svg {
|
|
margin-left: -0.25rem;
|
|
}
|
|
|
|
.shadow-filter {
|
|
filter:
|
|
drop-shadow(0 5px 5px rgba(0, 0, 0, 0.3))
|
|
drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
|
|
}
|
|
|
|
// ----------------------
|
|
// Pricing
|
|
// ----------------------
|
|
.price-row {
|
|
position: relative;
|
|
margin-top: -1.25rem;
|
|
border-radius: 0.33rem;
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(156, 204, 102, 1) 21%,
|
|
rgba(211, 225, 86, 1) 42%,
|
|
rgba(255, 238, 87, 1) 63%,
|
|
rgba(255, 201, 41, 1) 74%,
|
|
rgba(255, 167, 36, 1) 85%
|
|
);
|
|
}
|
|
|
|
.inventory-button {
|
|
margin-bottom: -2rem;
|
|
margin-right: -0.25rem;
|
|
border-radius: 0.33rem;
|
|
width: 40px;
|
|
height: 40px;
|
|
background-color: hsl(262, 47%, 55%);
|
|
color: #fff;
|
|
}
|
|
|
|
.inventory-label {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.price-label {
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
color: rgba(0, 0, 0, 0.87);
|
|
background-color: hsl(88, 50%, 60%);
|
|
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 10px;
|
|
border-top-left-radius: 0.33rem;
|
|
border-bottom-left-radius: 0.33rem;
|
|
|
|
@media (min-width: 768px) {
|
|
font-size: 0.8rem;
|
|
}
|
|
@media (min-width: 996px) {
|
|
font-size: 0.85rem;
|
|
}
|
|
@media (min-width: 1200px) {
|
|
font-size: 0.9rem;
|
|
}
|
|
@media (min-width: 1600px) {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
&:nth-of-type(n + 2) {
|
|
background-color: hsl(66, 70%, 61%);
|
|
}
|
|
&:nth-of-type(n + 3) {
|
|
background-color: hsl(54, 100%, 67%);
|
|
}
|
|
&:nth-of-type(n + 4) {
|
|
background-color: hsl(45, 100%, 58%);
|
|
}
|
|
&:last-of-type {
|
|
background-color: hsl(36, 100%, 57%);
|
|
border-radius: 0.33rem;
|
|
}
|
|
}
|
|
|
|
// ----------------------
|
|
// Search
|
|
// ----------------------
|
|
@media (max-width: 768px) {
|
|
.search-box,
|
|
.search-button {
|
|
min-height: 48px;
|
|
}
|
|
}
|
|
|
|
// ----------------------
|
|
// Sticky Bar
|
|
// ----------------------
|
|
.search-bar {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
z-index: 1000;
|
|
height: 48px;
|
|
transform: rotate(180deg);
|
|
|
|
@media (min-width: 768px) {
|
|
position: sticky;
|
|
top:0;
|
|
min-width: 45vw;
|
|
transform: rotate(0deg);
|
|
max-width: 45vw;
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
// dexter css classes to reconciled later
|
|
/* COLORS & BACKGROUNDS */
|
|
|
|
$dropshadow-rgba: rgba(176, 38, 46, .35);
|
|
|
|
/* SIZES */
|
|
/* prefer calculations here and calculated variables in CSS below */
|
|
|
|
/* Set left-column-width, derive logo size below */
|
|
$hdr-side-width: 270px;
|
|
$hdr-big-btn-width: 72px; /* SIGN UP */
|
|
|
|
/* to see the menu flow to more than 1 line, change
|
|
$min-width here to something smaller: e.g., * 1.5; */
|
|
$min-width: $hdr-side-width * 2;
|
|
$max-width: $hdr-side-width * 3;
|
|
|
|
$padding-small: 0;
|
|
/* declared for flexibility */
|
|
$padding-to-window: $padding-small;
|
|
$padding-to-top: $padding-small;
|
|
$padding-hdr: $padding-small;
|
|
|
|
$hdr-big-btn-margin: floor(.75 * $padding-hdr); /* round down */
|
|
|
|
$border-radius: 8px; /* big-btn radius */
|
|
/* larger radius to flow around big button */
|
|
$border-radius-hdr: ceil(1.25 * $border-radius); /* round up */
|
|
$corner-border-width: $border-radius-hdr;
|
|
$corner-border-size: $border-radius-hdr * 2;
|
|
|
|
$shadow-size: 20px;
|
|
|
|
$shadow-size-deep: ceil(1.5 * $shadow-size);
|
|
|
|
$hdr-menu-item-height: 18px;
|
|
|
|
$hdr-menu-item-padding-top: $hdr-big-btn-margin;
|
|
$hdr-menu-item-padding-bottom: ceil(0.5 * $hdr-big-btn-margin);
|
|
$hdr-menu-height: $hdr-menu-item-padding-top + $hdr-menu-item-height + $hdr-menu-item-padding-bottom;
|
|
|
|
$hdr-menu-item-height: $hdr-menu-height - $padding-hdr;
|
|
|
|
$hdr-logo-width: $hdr-side-width - $hdr-big-btn-width - 2 * $hdr-big-btn-margin;
|
|
$hdr-logo-height: ceil(0.75 * $hdr-logo-width); /* 4x3 */
|
|
$hdr-logo-margin-bottom: floor(0.5 * $hdr-menu-height);
|
|
/* height of taller left side "overhang" without padding-to-top */
|
|
$hdr-side-height: $hdr-logo-height + $hdr-logo-margin-bottom;
|
|
$hdr-side-total-height: $hdr-side-height + $padding-to-top;
|
|
|
|
$hdr-total-height: $hdr-side-total-height + $shadow-size-deep;
|
|
|
|
/* extra padding-top to make room for column-1 header "overhang" */
|
|
$column-1-padding-top: $hdr-side-total-height + floor(.5 *$shadow-size);
|
|
|
|
/* shorter green bg across top */
|
|
/* can specify or calculate: e.g., half the logo height */
|
|
$hdr-topwell-height: ceil(0.5 * $hdr-logo-height);
|
|
|
|
/* height of shorter right side -
|
|
needed for .header-bg and .main padding-top */
|
|
$hdr-top-height: $padding-to-top + $hdr-topwell-height + $hdr-menu-height;
|
|
|
|
/* size and position of horizontal background "patch"
|
|
extending background into negative space by size of border-radius-hdr */
|
|
$hdr-logo-patch-height: $shadow-size + $border-radius-hdr;
|
|
$hdr-logo-patch-width: $hdr-logo-width + $border-radius-hdr;
|
|
$hdr-logo-patch-top: $padding-to-top + $hdr-topwell-height - $shadow-size;
|
|
$hdr-logo-patch-background-position: -1*($hdr-topwell-height - $shadow-size);
|
|
|
|
$hdr-big-btn-top: $hdr-topwell-height + $hdr-big-btn-margin;
|
|
$hdr-big-btn-left: $hdr-logo-width + $hdr-big-btn-margin;
|
|
$hdr-big-btn-height: $hdr-side-height - $hdr-topwell-height - $hdr-big-btn-margin - $hdr-logo-margin-bottom;
|
|
$hdr-big-btn-width: $hdr-side-width - $hdr-logo-width - 2 * $hdr-big-btn-margin;
|
|
|
|
.blueCircle {
|
|
width: 20vw; /* Equal width and height for a perfect square */
|
|
height: 20vw;
|
|
max-width: 100px;
|
|
max-height: 100px;
|
|
background: radial-gradient(circle at top left, hsl(196, 100%, 47%), hsl(196, 100%, 27%)); /* The color of the circle */
|
|
border-radius: 50%; /* Turns the square into a circle */
|
|
position: absolute; /* Positioning context for the circle */
|
|
border: 8px solid #fff;
|
|
margin: 0 auto; /* Remove default margin */
|
|
--a: 8deg;
|
|
/* Initial mask to create the shine line */
|
|
mask: linear-gradient(135deg, #000c 40%, #000, #000c 60%) 100% 100% / 240% 240%;
|
|
transition: .4s;
|
|
transform: perspective(400px) rotate3d(var(--i, 1, -1), 0, var(--a));
|
|
}
|
|
|
|
.redCircle {
|
|
width: 10vw; /* Equal width and height for a perfect square */
|
|
height: 10vw;
|
|
max-width: 25px; /* Equal width and height */
|
|
max-height: 25px;
|
|
background: radial-gradient(circle at top left, hsl(0, 100%, 56%), hsl(0, 79%, 45%)); /* The color of the circle */
|
|
border-radius: 50%; /* Turns the square into a circle */
|
|
position: absolute; /* Positioning context for the circle */
|
|
border: 3px solid hsl(210, 11%, 15%);
|
|
left: 13rem;
|
|
margin: 0 auto; /* Remove default margin */
|
|
--a: 8deg;
|
|
/* Initial mask to create the shine line */
|
|
mask: linear-gradient(135deg, #000c 40%, #000, #000c 60%) 100% 100% / 240% 240%;
|
|
transition: .4s;
|
|
transform: perspective(400px) rotate3d(var(--i, 1, -1), 0, var(--a));
|
|
}
|
|
|
|
.yellowCircle {
|
|
width: 25px; /* Equal width and height for a perfect square */
|
|
height: 25px; /* Equal width and height */
|
|
background: radial-gradient(circle at top left, hsl(61, 100%, 50%), hsl(61, 100%, 40%)); /* The color of the circle */
|
|
border-radius: 50%; /* Turns the square into a circle */
|
|
position: absolute; /* Positioning context for the circle */
|
|
border: 3px solid hsl(210, 11%, 15%);
|
|
left: 15rem;
|
|
margin: 0 auto; /* Remove default margin */
|
|
--a: 8deg;
|
|
/* Initial mask to create the shine line */
|
|
mask: linear-gradient(135deg, #000d 40%, #000, #000d 60%) 100% 100% / 240% 240%;
|
|
transition: .4s;
|
|
transform: perspective(400px) rotate3d(var(--i, 1, -1), 0, var(--a));
|
|
}
|
|
|
|
.yellowCircle:hover, .redCircle:hover, .greenCircle:hover, .blueCircle:hover {
|
|
/* Reverse the rotation direction on hover */
|
|
--i: -1, 1;
|
|
/* Move the mask position to simulate the shine moving */
|
|
mask-position: 0 0;
|
|
}
|
|
|
|
.greenCircle {
|
|
width: 25px; /* Equal width and height for a perfect square */
|
|
height: 25px; /* Equal width and height */
|
|
background: radial-gradient(circle at top left, hsl(149, 100%, 40%), hsl(149, 100%, 30%)); /* The color of the circle */
|
|
border-radius: 50%; /* Turns the square into a circle */
|
|
position: absolute; /* Positioning context for the circle */
|
|
border: 3px solid hsl(210, 11%, 15%);
|
|
left: 17rem;
|
|
margin: 0 auto; /* Remove default margin */
|
|
--a: 8deg;
|
|
/* Initial mask to create the shine line */
|
|
mask: linear-gradient(135deg, #000c 40%, #000, #000c 60%) 100% 100% / 240% 240%;
|
|
transition: .4s;
|
|
transform: perspective(400px) rotate3d(var(--i, 1, -1), 0, var(--a));
|
|
}
|
|
|
|
/* can't assume only one "header" element in HTML5 */
|
|
.header-top {
|
|
/* pin to top - 0 is default */
|
|
bottom: 0;
|
|
/* raise z-index to cover, higher here to allow
|
|
a range of z-indexes in the scrolling content */
|
|
z-index: 100;
|
|
transform:rotate(180deg);
|
|
/* height overflows */
|
|
@media (min-width:768px) {
|
|
top: 0;
|
|
transform:rotate(0deg);
|
|
}
|
|
}
|
|
|
|
/* match these backgrounds to blend */
|
|
/* OPTIONAL, extend header bg color across top */
|
|
|
|
/* match widths, margins & padding */
|
|
.page-wrap, .header-wrap {
|
|
width: 100%;
|
|
/* center content */
|
|
margin: 0 auto;
|
|
/* separate content from window edge --
|
|
padding-top and -bottom specified below.
|
|
Here (not on body) to work with fixed header */
|
|
padding: 0 $padding-to-window;
|
|
}
|
|
|
|
/* padding-left and -right added above */
|
|
.header-wrap {
|
|
/* child elements abaolute */
|
|
position: relative;
|
|
/* a "min-height" for shorter right side */
|
|
height: $hdr-top-height;
|
|
}
|
|
|
|
/* extend bg into padding-to-window gap on taller left side -
|
|
not needed if extending bg using optional .header-bg div */
|
|
.header-wrap:before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
/* extra 2px width to cover tiny gap when iOS zooms */
|
|
width: $padding-to-window + 2px;
|
|
height: $hdr-side-total-height;
|
|
/* OPTIONAL, extend padding-to-window "frame" all the way down -
|
|
may want to do the same on right with an :after pseudo-element:
|
|
height: 100000px; */
|
|
}
|
|
|
|
/* OPTIONAL, if we want to differentiate header and body -
|
|
.header-bg:before extends taller bg all the way left */
|
|
.header-bg {
|
|
/* child elements absolute */
|
|
position: relative;
|
|
/* tuck behind header framing */
|
|
z-index: -1;
|
|
width: 100%;
|
|
}
|
|
|
|
/* OPTIONAL, extends bg to left on taller left side */
|
|
.header-bg:before {
|
|
content: "";
|
|
/* remove from layout */
|
|
position: absolute;
|
|
/* start from the right and extend left */
|
|
right: 100%;
|
|
/* height of shorter right side */
|
|
height: $hdr-side-total-height;
|
|
/* crazy wide - absolutely positioned
|
|
to start at left edge and go left */
|
|
width: 100000px;
|
|
}
|
|
|
|
.header-content {
|
|
/* child elements absolute */
|
|
position: relative;
|
|
height: $hdr-total-height;
|
|
width: 100%;
|
|
padding-top: $padding-to-top;
|
|
/* crop shadows at the sides and top */
|
|
overflow: hidden; }
|
|
|
|
/* add taller left-side "overhang" bg + shadow */
|
|
.header-content:before {
|
|
content: "";
|
|
/* remove from layout */
|
|
position: absolute;
|
|
/* tuck behind .header-wrap and .nav-main ul
|
|
so right-edge shadow is covered up */
|
|
z-index: -1;
|
|
height: $hdr-side-height;
|
|
width: $hdr-side-width;
|
|
padding: 0;
|
|
border-radius: 0 0 $border-radius-hdr 0;
|
|
}
|
|
|
|
/* match backgrounds to blend */
|
|
.header-logo, .header-social {
|
|
background-color: hsl(358, 71%, 48%);
|
|
}
|
|
|
|
.header-logo {
|
|
position: absolute;
|
|
/* cover .header-content-social */
|
|
/* z-index: 1; */
|
|
height: $hdr-logo-height;
|
|
width: $hdr-logo-width;
|
|
border-radius: 0 0 $border-radius-hdr $border-radius-hdr;
|
|
}
|
|
|
|
.header-logo h1, .header-logo h2 {
|
|
position: relative;
|
|
/* overlap .header-logo-patch */
|
|
z-index: 2;
|
|
text-shadow: 0 2px 1px rgba(255,255,255, 0.3),
|
|
0 0 10px rgba(204,232,229, 0.5)
|
|
}
|
|
|
|
.header-logo h1 {
|
|
padding: 10px 0 0 18px;
|
|
font-size: 36px;
|
|
}
|
|
|
|
.header-logo a {
|
|
color: inherit !important;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.header-logo h2 {
|
|
margin-top: -2px;
|
|
padding: 0 0 0 18px;
|
|
font-size: 24px;
|
|
}
|
|
|
|
/* "patch" to cover shadow "seam" of overlapping shapes -
|
|
can't nest pseudo-elements, so need extra div here -
|
|
overflow:hidden to crop shadow of rounded corner overlay (below) */
|
|
.header-logo-patch {
|
|
display: block;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: $hdr-logo-patch-top;
|
|
height: $hdr-logo-patch-height;
|
|
width: $hdr-logo-patch-width;
|
|
background-color: hsl(358, 71%, 48%);
|
|
background-position: 0 $hdr-logo-patch-background-position;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
/* rounded corner overlay (with outset shadow to match "well") */
|
|
.header-logo-patch:after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
bottom: -$border-radius-hdr;
|
|
right: -$border-radius-hdr;
|
|
height: $border-radius-hdr * 2;
|
|
width: $border-radius-hdr * 2;
|
|
background-color: hsl(210, 11%, 15%);
|
|
border-radius: $border-radius-hdr 0 0 0;
|
|
}
|
|
|
|
.header-social {
|
|
position: absolute;
|
|
top: $padding-to-top;
|
|
height: $hdr-topwell-height;
|
|
width: 100%;
|
|
border-radius: 0 0 $border-radius-hdr $border-radius-hdr;
|
|
@media (min-width:768px) {
|
|
border-radius: $border-radius-hdr 0 $border-radius-hdr 0;
|
|
}
|
|
}
|
|
|
|
/* NAV */
|
|
|
|
.horizontal-nav ul, .horizontal-nav li {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.horizontal-nav li {
|
|
float: left;
|
|
}
|
|
|
|
.horizontal-nav li a {
|
|
display: block;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nav-main {
|
|
/* child elements absolute */
|
|
position: relative;
|
|
padding-left: $hdr-side-width;
|
|
padding-top: $hdr-topwell-height + $hdr-menu-item-padding-top;
|
|
padding-bottom: 0;
|
|
background: none;
|
|
}
|
|
|
|
.nav-main ul {
|
|
padding: 0 0 $hdr-menu-item-padding-bottom 2px; /* nudge links right */
|
|
background: $body-bg;
|
|
/* clear floats without extra div or
|
|
using pseudo-elements needed below -
|
|
cannot use with position:relative */
|
|
overflow: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* dropshadow tracks with menu height if links exceed 1 line */
|
|
.nav-main ul:before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
/* stack shadow behind "overhang" */
|
|
z-index: -2;
|
|
/* same size as parent */
|
|
bottom: 0;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: $body-bg;
|
|
}
|
|
|
|
/* INVERTED ROUNDED CORNER under menu - left */
|
|
.nav-main ul:after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
/* tuck behind nav-main a:hover */
|
|
z-index: -1;
|
|
height: $border-radius-hdr * 2;
|
|
width: $border-radius-hdr * 2;
|
|
border-top: $border-radius-hdr solid $body-bg;
|
|
border-left: $border-radius-hdr solid $body-bg;
|
|
bottom: -1*$border-radius-hdr;
|
|
left: $hdr-side-width - $border-radius-hdr;
|
|
/* top left */
|
|
border-radius: $border-radius-hdr * 2 0 0 0;
|
|
}
|
|
|
|
.nav-main a,
|
|
.nav-main:visited {
|
|
display: block;
|
|
height: $hdr-menu-item-height;
|
|
padding: 0 .5em;
|
|
line-height: $hdr-menu-item-height;
|
|
font-size: 0.8125em;
|
|
text-transform: uppercase;
|
|
border-radius: $border-radius;
|
|
}
|
|
|
|
/* nudge down 1px for uppercase vertical centering */
|
|
.nav-main a span {
|
|
display: block;
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
|
|
.nav-social {
|
|
/* overlap .header-logo-patch */
|
|
position: relative;
|
|
z-index: 1;
|
|
float: right;
|
|
padding-right: .875em;
|
|
}
|
|
|
|
/* MEDIA QUERIES */
|
|
|
|
/* Mobile example - e.g., iPhone5 landscape width = 568px */
|
|
@media only screen
|
|
and (max-device-width : 599px) {
|
|
|
|
.header-top {
|
|
/* unpin header so it scrolls with content */
|
|
position: absolute;
|
|
}
|
|
|
|
/* even if you keep the header fixed, you might
|
|
change width to 100% for better mobile zooming */
|
|
.page-wrap, .header-wrap {
|
|
width: 100%;
|
|
}
|
|
|
|
}
|
|
|
|
/* A full-on responsive layout would reconfigure the
|
|
layout - this is just a gesture as an example */
|
|
|
|
/* lose countoured bottom at smaller width -
|
|
when menu items overflow 2 lines */
|
|
|
|
@media only screen
|
|
and (max-width : 512px) {
|
|
|
|
.nav-main ul {
|
|
height: $hdr-side-height - $hdr-topwell-height - $hdr-menu-item-padding-top;
|
|
background: none; }
|
|
|
|
/* taller left-side "tab" bg + shadow */
|
|
.header-content:before,
|
|
/* rounded corner under menu - left */
|
|
.nav-main ul:after {
|
|
display: none;
|
|
}
|
|
|
|
}
|
|
|
|
@media only screen
|
|
and (max-width : 320px) {
|
|
|
|
.header-top {
|
|
/* unpin header so it scrolls with content */
|
|
position: absolute; }
|
|
|
|
/* even if you keep the header fixed, you might
|
|
change width to 100% for better mobile zooming */
|
|
|
|
.page-wrap, .header-wrap {
|
|
width: 100%; }
|
|
|
|
} |