andrea/phosphor-icons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Header: improve mobile breakpoint document structure

Browse Source
This commit is contained in:
rektdeckard
2020-08-17 15:20:51 -04:00
parent 1d2bacd899
commit 697ead7113
2 changed files with 100 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/Header/Header.css
View File

@@ -59,6 +59,21 @@ a.nav-link:hover:after {
flex-wrap: wrap; flex-wrap: wrap;
} }
#cutting-mat {
position: absolute;
/* transform: translate(120px, 824px); */
}
#receipt {
position: absolute;
transform: translate(-116px, 136px);
}
#calculator {
position: absolute;
transform: translate(724px, 240px);
}
@media screen and (max-width: 759px) { @media screen and (max-width: 759px) {
.intro h2 { .intro h2 {
font-size: 40px; font-size: 40px;
@@ -111,21 +126,6 @@ a.nav-link:hover:after {
position: absolute; position: absolute;
transform: translate(672px, -900px); transform: translate(672px, -900px);
} }
#cutting-mat {
position: absolute;
transform: translate(96px, 766px);
}
#calculator {
position: absolute;
transform: translate(632px, 938px);
}
#receipt {
position: absolute;
transform: translate(-96px, 958px);
}
} }
@media screen and (min-width: 760px) and (max-width: 1023px) { @media screen and (min-width: 760px) and (max-width: 1023px) {
@@ -178,19 +178,4 @@ a.nav-link:hover:after {
position: absolute; position: absolute;
transform: translate(982px, 621px); transform: translate(982px, 621px);
} }
#cutting-mat {
position: absolute;
transform: translate(120px, 824px);
}
#receipt {
position: absolute;
transform: translate(-16px, 1016px);
}
#calculator {
position: absolute;
transform: translate(924px, 940px);
}
} }

170
src/components/Header/Header.tsx
View File

@@ -89,6 +89,91 @@ const Header: React.FC<HeaderProps> = () => {
Github Github
</a> </a>
</div> </div>
{hovered === "cutting-mat" ? (
<motion.img
id="cutting-mat"
key="cutting-mat-spec"
className="inspectable"
initial="hidden"
animate="visible"
exit="hidden"
variants={illustrationVariants}
// onHoverStart={() => setHovered("cutting-mat")}
onHoverEnd={clearHover}
src={cuttingMatSpec}
alt=""
/>
) : (
<motion.img
id="cutting-mat"
key="cutting-mat"
className="inspectable"
initial="hidden"
animate="visible"
exit="hidden"
variants={illustrationVariants}
onHoverStart={() => setHovered("cutting-mat")}
// onHoverEnd={clearHover}
src={cuttingMat}
alt=""
/>
)}
{hovered === "receipt" ? (
<motion.img
id="receipt"
key="receipt-spec"
className="inspectable"
initial="hidden"
animate="visible"
exit="hidden"
variants={illustrationVariants}
// onHoverStart={() => setHovered("receipt")}
onHoverEnd={clearHover}
src={receiptSpec}
alt=""
/>
) : (
<motion.img
id="receipt"
key="receipt"
className="inspectable"
initial="visible"
variants={illustrationVariants}
onHoverStart={() => setHovered("receipt")}
// onHoverEnd={clearHover}
src={receipt}
alt=""
/>
)}
{hovered === "calculator" ? (
<motion.img
id="calculator"
key="calculator-spec"
className="inspectable"
initial="hidden"
animate="visible"
exit="hidden"
variants={illustrationVariants}
// onHoverStart={() => setHovered("calculator")}
onHoverEnd={clearHover}
src={calculatorSpec}
alt=""
/>
) : (
<motion.img
id="calculator"
key="calculator"
className="inspectable"
initial="hidden"
animate="visible"
exit="hidden"
variants={illustrationVariants}
onHoverStart={() => setHovered("calculator")}
// onHoverEnd={clearHover}
src={calculator}
alt=""
/>
)}
</div> </div>
<AnimatePresence> <AnimatePresence>
{hovered === "tablet" ? ( {hovered === "tablet" ? (
@@ -178,91 +263,6 @@ const Header: React.FC<HeaderProps> = () => {
alt="" alt=""
/> />
)} )}
{hovered === "cutting-mat" ? (
<motion.img
id="cutting-mat"
key="cutting-mat-spec"
className="inspectable"
initial="hidden"
animate="visible"
exit="hidden"
variants={illustrationVariants}
// onHoverStart={() => setHovered("cutting-mat")}
onHoverEnd={clearHover}
src={cuttingMatSpec}
alt=""
/>
) : (
<motion.img
id="cutting-mat"
key="cutting-mat"
className="inspectable"
initial="hidden"
animate="visible"
exit="hidden"
variants={illustrationVariants}
onHoverStart={() => setHovered("cutting-mat")}
// onHoverEnd={clearHover}
src={cuttingMat}
alt=""
/>
)}
{hovered === "receipt" ? (
<motion.img
id="receipt"
key="receipt-spec"
className="inspectable"
initial="hidden"
animate="visible"
exit="hidden"
variants={illustrationVariants}
// onHoverStart={() => setHovered("receipt")}
onHoverEnd={clearHover}
src={receiptSpec}
alt=""
/>
) : (
<motion.img
id="receipt"
key="receipt"
className="inspectable"
initial="visible"
variants={illustrationVariants}
onHoverStart={() => setHovered("receipt")}
// onHoverEnd={clearHover}
src={receipt}
alt=""
/>
)}
{hovered === "calculator" ? (
<motion.img
id="calculator"
key="calculator-spec"
className="inspectable"
initial="hidden"
animate="visible"
exit="hidden"
variants={illustrationVariants}
// onHoverStart={() => setHovered("calculator")}
onHoverEnd={clearHover}
src={calculatorSpec}
alt=""
/>
) : (
<motion.img
id="calculator"
key="calculator"
className="inspectable"
initial="hidden"
animate="visible"
exit="hidden"
variants={illustrationVariants}
onHoverStart={() => setHovered("calculator")}
// onHoverEnd={clearHover}
src={calculator}
alt=""
/>
)}
</AnimatePresence> </AnimatePresence>
</motion.div> </motion.div>
</header> </header>