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

added local assets for 404 page shenanigans, added pokedex header, and continued to add set icon mappings

Browse Source
This commit is contained in:
zach
2026-02-23 17:04:45 -05:00
parent dcd2761403
commit 30433696e5
980 changed files with 144308 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -9,9 +9,6 @@
@media (min-width: 768px) {
max-width: 95vw;
}
display: grid;
place-items: center;
//background: #d3d9b3;
}
.circle {
@@ -83,6 +80,13 @@
cursor: default;
}
.card-grid {
position: relative;
@media (min-width: 768px) {
top: 100px !important;
}
}
// ----------------------
// Navigation Tabs
// ----------------------
@@ -172,6 +176,7 @@ $tiers: (
z-index: 1000;
opacity: 100%;
mix-blend-mode: normal;
filter: brightness(0);
}
.starburst {
@@ -193,7 +198,6 @@ $tiers: (
.rarity-icon-large svg,
.set-icon svg {
width: 2.5rem;
margin-top: -0.25rem;
}
.rarity-icon-large svg,
@@ -202,6 +206,11 @@ $tiers: (
}
.energy-icon svg {
margin-top: -0.25rem;
margin-right: -0.25rem;
}
.rarity-icon-large svg {
margin-right: -0.25rem;
}
@@ -220,7 +229,6 @@ $tiers: (
// ----------------------
.price-row {
position: relative;
z-index: 999;
margin-top: -1.25rem;
border-radius: 0.33rem;
background: linear-gradient(
@@ -233,6 +241,23 @@ $tiers: (
);
}
.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;
@@ -284,14 +309,517 @@ $tiers: (
// Sticky Bar
// ----------------------
.sticky {
background-color: hsl(205, 89%, 4%);
position: fixed;
bottom: 0;
width: 100%;
z-index: 1000;
height: 48px;
@media (min-width: 768px) {
position: sticky;
top: 0;
top:0;
min-width: 45vw;
}
}
// 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 */
/* raise z-index to cover, higher here to allow
a range of z-indexes in the scrolling content */
z-index: 100;
/* height overflows */
}
/* 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;
}
/* INVERTED ROUNDED CORNER under overhang L */
.header-content:after {
content: "";
display: block;
position: absolute;
/* tuck behind header bg */
z-index: -1;
height: $border-radius-hdr * 2;
width: $border-radius-hdr * 2;
border-top: $border-radius-hdr solid hsl(210, 11%, 15%);
border-left: $border-radius-hdr solid hsl(210, 11%, 15%);
top: $hdr-side-total-height - $border-radius-hdr;
left: -1*$border-radius-hdr;
/* top left */
border-radius: $border-radius-hdr * 2 0 0 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: $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;
}
/* INVERTED ROUNDED CORNER under menu - right */
.nav-main: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 hsl(210, 11%, 15%);
border-right: $border-radius-hdr solid hsl(210, 11%, 15%);
bottom: -1*$border-radius-hdr;
right: -1*$border-radius-hdr;
/* top right */
border-radius: 0 $border-radius-hdr * 2 0 0;
}
.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%; }
}