tmiller/pokemon
1
0
Fork 1
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

re-did 404 images and added mapping, re-did menu/search components for auth, removed unneeded files and cleaned up css

Browse Source
This commit is contained in:
zach
2026-02-26 18:08:08 -05:00
parent 187da306f0
commit d149312f3d
1046 changed files with 4594 additions and 1042 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/css/_bootstrap.scss
View File

@@ -27,7 +27,7 @@
@import 'bootstrap/scss/card';
// @import 'bootstrap/scss/carousel';
@import 'bootstrap/scss/close';
// @import 'bootstrap/scss/dropdown';
@import 'bootstrap/scss/dropdown';
@import 'bootstrap/scss/forms';
@import 'bootstrap/scss/grid';
// @import 'bootstrap/scss/list-group';

770
src/assets/css/main.scss
View File

@@ -1,54 +1,88 @@
@import "_bootstrap";
// ----------------------
// Container
// ----------------------
.container {
max-width: 100vw;
@media (min-width: 768px) {
max-width: 95vw;
}
/* --------------------------------------------------
Root Variables
-------------------------------------------------- */
:root {
--total: 11; /* Number of items in the energy wheel */
--radius: 40px; /* Circle radius */
}
.circle {
/* --------------------------------------------------
Layout
-------------------------------------------------- */
.wrapper {
display: flex;
flex-direction: column;
min-height: 100dvh !important;
}
.main {
flex: 1;
}
.footer {
margin-top: auto;
}
/* --------------------------------------------------
Energy Wheel
-------------------------------------------------- */
.energy-wheel {
position: relative;
width: calc(var(--radius) * 2);
height: calc(var(--radius) * 2);
margin: 50px auto;
margin: 5px 0 10px;
}
:root {
--total: 11; /* How many items */
--radius: 80px; /* Circle size */
}
.circle-item {
.energy-wheel-item {
position: absolute;
width: 25px;
height: 25px;
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 */
transform:
rotate(var(--angle))
translateX(var(--radius))
rotate(calc(-1 * var(--angle)));
}
// ----------------------
// Typography
// ----------------------
.energy-wheel-item:first-of-type {
z-index: 100;
}
/* --------------------------------------------------
Navbar & Icons
-------------------------------------------------- */
.navbar {
background-color: hsl(358, 71%, 48%) !important;
}
.sticky-top {
position: sticky;
top: 0;
z-index: 1000;
}
.nav-icon {
width: 1.85rem;
height: 1.85rem;
> svg {
fill: hsla(210, 11%, 15%, 0.5);
stroke: hsla(210, 11%, 15%, 0.5);
&:hover {
fill: hsla(210, 11%, 15%, 1);
}
}
}
/* --------------------------------------------------
Typography
-------------------------------------------------- */
.copy-small {
font-size: 0.75rem;
opacity: 0.87;
@@ -56,36 +90,34 @@
@media (min-width: 768px) {
font-size: 0.85rem;
}
@media (min-width: 1400px) {
font-size: 1rem;
}
}
// ----------------------
// Cards & Modal
// ----------------------
/* --------------------------------------------------
Modal & Cards
-------------------------------------------------- */
.modal-xl {
@media (min-width: 768px) {
max-width: 95vw;
}
@media (min-width: 1400px) {
max-width: 90vw;
max-width: 85vw;
}
@media (min-width: 1921px) {
max-width: 75vw;
}
}
.image-grow {
transition-property: box-shadow, transform;
transition-duration: 350ms;
transition-timing-function: ease;
transition: box-shadow 350ms ease, transform 350ms ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.24);
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);
&:is(:hover, :focus) {
box-shadow: 0 8px 10px rgba(0, 0, 0, 0.2);
transform: translateY(-0.9rem) scale(1.02);
}
}
.card-modal {
@@ -94,17 +126,18 @@
}
.pokedex-page {
z-index: 99;
position: relative;
top: 50px;
z-index: 99;
@media (min-width: 768px) {
top: 100px !important;
}
}
// ----------------------
// Navigation Tabs
// ----------------------
/* --------------------------------------------------
Navigation Tabs
-------------------------------------------------- */
.nav-link {
font-weight: 600;
color: rgba(255, 255, 255, 0.67);
@@ -131,7 +164,7 @@
}
}
// Tiered Nav-Link Colors
/* Tiered Colors */
$tiers: (
nm: rgba(156, 204, 102, 1),
lp: rgba(211, 225, 86, 1),
@@ -153,6 +186,7 @@ $tiers: (
&.active {
background-color: $color;
border-bottom-color: $color;
@if $name == vendor {
color: rgba(255, 255, 255, 0.87);
}
@@ -160,9 +194,9 @@ $tiers: (
}
}
// ----------------------
// Misc Components
// ----------------------
/* --------------------------------------------------
Misc UI Elements
-------------------------------------------------- */
.dark-callout {
@media (min-width: 768px) {
background-color: rgba(44, 48, 59, 1);
@@ -170,7 +204,7 @@ $tiers: (
}
.price-area {
max-height: 75px;
max-height: 75px;
}
.card-image {
@@ -180,34 +214,33 @@ $tiers: (
cursor: pointer;
}
// Icon sizes
/* Icon sizing */
.small-icon svg {
width: 100%;
max-height: 16px;
margin-top: -0.25rem;
}
/* Black silhouette overlay */
.masked-image {
z-index: 1000;
opacity: 100%;
opacity: 1;
filter: brightness(0);
}
.starburst {
opacity: 10%;
mix-blend-mode: lighten;
object-fit: cover;
background-size: cover;
}
/* Decorative background elements */
.starburst,
.whos-that-pokemon {
width: 100%;
z-index: 998;
opacity: 10%;
mix-blend-mode: lighten;
aspect-ratio: 1/1;
opacity: 0.1;
object-fit: cover;
}
.whos-that-pokemon {
aspect-ratio: 1 / 1;
}
/* SVG sizes */
.energy-icon svg,
.rarity-icon-large svg,
.set-icon svg {
@@ -224,10 +257,6 @@ $tiers: (
margin-right: -0.25rem;
}
.rarity-icon-large svg {
margin-right: -0.25rem;
}
.set-icon svg {
margin-left: -0.25rem;
}
@@ -238,9 +267,9 @@ $tiers: (
drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
}
// ----------------------
// Pricing
// ----------------------
/* --------------------------------------------------
Pricing
-------------------------------------------------- */
.price-row {
position: relative;
margin-top: -1.25rem;
@@ -258,9 +287,9 @@ $tiers: (
.inventory-button {
margin-bottom: -2rem;
margin-right: -0.25rem;
border-radius: 0.33rem;
width: 40px;
height: 40px;
border-radius: 0.33rem;
background-color: hsl(262, 47%, 55%);
color: #fff;
}
@@ -269,7 +298,7 @@ $tiers: (
width: 100%;
height: 100%;
font-size: 1rem;
font-weight: 700;
font-weight: 700;
}
.price-label {
@@ -277,9 +306,8 @@ $tiers: (
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;
border-radius: 0.33rem 0 0 0.33rem;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.35);
@media (min-width: 768px) {
font-size: 0.8rem;
@@ -294,13 +322,13 @@ $tiers: (
font-size: 1rem;
}
&:nth-of-type(n + 2) {
&:nth-of-type(2) {
background-color: hsl(66, 70%, 61%);
}
&:nth-of-type(n + 3) {
&:nth-of-type(3) {
background-color: hsl(54, 100%, 67%);
}
&:nth-of-type(n + 4) {
&:nth-of-type(4) {
background-color: hsl(45, 100%, 58%);
}
&:last-of-type {
@@ -309,9 +337,9 @@ $tiers: (
}
}
// ----------------------
// Search
// ----------------------
/* --------------------------------------------------
Search
-------------------------------------------------- */
@media (max-width: 768px) {
.search-box,
.search-button {
@@ -319,502 +347,130 @@ $tiers: (
}
}
// ----------------------
// Sticky Bar
// ----------------------
::placeholder {
color: rgba(255, 255, 255, 0.7) !important;
opacity: 1 !important;
font-size: 1rem;
line-height: 2rem;
}
/* Sticky (mobile-bottom / desktop-top) search bar */
.search-bar {
position: absolute;
position: fixed;
bottom: 0;
width: 100%;
z-index: 1000;
height: 48px;
z-index: 1000;
transform: rotate(180deg);
@media (min-width: 768px) {
position: sticky;
top:0;
min-width: 45vw;
transform: rotate(0deg);
max-width: 45vw;
top: 0;
float: right;
min-width: 45vw;
max-width: 45vw;
transform: rotate(0);
}
}
// dexter css classes to reconciled later
/* COLORS & BACKGROUNDS */
/* --------------------------------------------------
Navbar Dark Overrides
-------------------------------------------------- */
.navbar-dark .nav-item .nav-link {
color: #fff;
$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, #fffc 40%, #fff, #fffc 60%) 100% 100% / 240% 240%;
transition: .4s;
transform: perspective(400px) rotate3d(var(--i, 1, -1), 0, var(--a));
&:hover {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 0.25rem;
transition: 0.3s;
}
}
/* --------------------------------------------------
FontAwesome List Icons
-------------------------------------------------- */
.fa-li {
position: relative;
left: 0;
}
/* --------------------------------------------------
Circles (Header, Buttons, etc.)
-------------------------------------------------- */
/* Shared Circle Styles */
%circle-base {
border-radius: 50%;
position: absolute;
margin: 0 auto;
--a: 8deg;
mask: linear-gradient(135deg, #fffc 40%, #fff, #fffc 60%) 100% 100% / 240% 240%;
transition: 0.4s;
transform: perspective(400px) rotate3d(var(--i, 1, -1), 0, var(--a));
}
/* Red */
.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, #fffc 40%, #fff, #fffc 60%) 100% 100% / 240% 240%;
transition: .4s;
transform: perspective(400px) rotate3d(var(--i, 1, -1), 0, var(--a));
@extend %circle-base;
width: 1rem;
height: 1rem;
border: 1px solid hsl(210, 11%, 15%);
background: radial-gradient(circle at top left, hsl(0, 100%, 56%), hsl(0, 79%, 45%));
}
/* Yellow */
.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, #fffc 40%, #fff, #fffc 60%) 100% 100% / 240% 240%;
transition: .4s;
transform: perspective(400px) rotate3d(var(--i, 1, -1), 0, var(--a));
@extend %circle-base;
width: 1rem;
height: 1rem;
border: 1px solid hsl(210, 11%, 15%);
background: radial-gradient(circle at top left, hsl(61, 100%, 50%), hsl(61, 100%, 40%));
}
.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 */
/* Green */
.greenCircle {
@extend %circle-base;
width: 1rem;
height: 1rem;
border: 1px solid hsl(210, 11%, 15%);
background: radial-gradient(circle at top left, hsl(149, 100%, 40%), hsl(149, 100%, 30%));
}
/* Circle Hover Effect */
.yellowCircle:hover,
.redCircle:hover,
.greenCircle:hover,
.blueCircle:hover {
--i: -1, 1;
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, #fffc 40%, #fff, #fffc 60%) 100% 100% / 240% 240%;
transition: .4s;
transform: perspective(400px) rotate3d(var(--i, 1, -1), 0, var(--a));
.nav-icon {
width: 1.85rem;
height: 1.85rem;
}
/* can't assume only one "header" element in HTML5 */
.header-top {
/* pin to top - 0 is default */
bottom: 0;
position: fixed;
/* raise z-index to cover, higher here to allow
a range of z-indexes in the scrolling content */
z-index: 100;
max-height: 150px;
transform:rotate(180deg);
/* height overflows */
@media (min-width:768px) {
top: 0;
transform:rotate(0deg);
}
.btn-warning>span, .btn-warning>svg.nav-icon {
fill: var(--bs-warning-border-subtle);
stroke: var(--bs-warning-border-subtle);
color: var(--bs-warning-border-subtle);
}
/* 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;
.btn.btn-warning:hover>span, .btn.btn-warning:hover>svg.nav-icon {
fill: var(--bs-warning-bg-subtle);
stroke: var(--bs-warning-bg-subtle);
color: var(--bs-warning-border-subtle);
font-weight: 700;
}
/* padding-left and -right added above */
.header-wrap {
/* child elements abaolute */
position: relative;
/* a "min-height" for shorter right side */
height: $hdr-top-height;
.btn-outline-success svg.nav-icon {
fill: var(--bs-success);
stroke: var(--bs-success);
}
/* 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%; }
.btn.btn-outline-success:hover, .btn.btn-outline-success:hover>svg.nav-icon {
fill: var(--bs-success-border-subtle);
stroke: var(--bs-success-border-subtle);
color: var(--bs-success-border-subtle);
font-weight: 700;
}