mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-09-13 23:55:35 -04:00
completely redo the header flexbox fiasco
This commit is contained in:
@@ -31,11 +31,6 @@ textarea.input {
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.markdown_tip a {
|
||||
background: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.markdown_tip a:first-of-type {
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -59,6 +54,7 @@ textarea.input {
|
||||
border-radius: 0.3em;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
background-color: var(--kinda-light);
|
||||
}
|
||||
|
||||
@@ -10,16 +10,156 @@
|
||||
}
|
||||
|
||||
.nav {
|
||||
width: 100%;
|
||||
max-width: 865px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
max-width: 865px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.nav > div {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
/*** left side: photo/name ***/
|
||||
|
||||
.left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.name {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: var(--medium-dark);
|
||||
background: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.name .selfie {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
line-height: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.name .selfie img {
|
||||
border: 1px solid var(--light) !important;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.name:hover {
|
||||
color: var(--link);
|
||||
}
|
||||
|
||||
.name:hover .selfie {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.name span:last-of-type {
|
||||
margin: 0 0.6em;
|
||||
font-size: 1.2em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/*** right side: menu ***/
|
||||
|
||||
.menu {
|
||||
display: inline-flex;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.menu li {
|
||||
list-style: none;
|
||||
display: inline-flex;
|
||||
margin-left: 1.8em;
|
||||
}
|
||||
|
||||
.menu li .link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: var(--medium-dark);
|
||||
background: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.menu li .link:hover {
|
||||
color: var(--link);
|
||||
}
|
||||
|
||||
.menu li .icon {
|
||||
width: 1.6em;
|
||||
height: 1.6em;
|
||||
}
|
||||
|
||||
.menu li span {
|
||||
font-size: 0.95em;
|
||||
font-weight: 500;
|
||||
margin-left: 0.8em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.menu li.theme_toggle {
|
||||
margin-left: 1.25em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.header {
|
||||
padding: 0.75em 1.25em;
|
||||
}
|
||||
|
||||
.left {
|
||||
flex: 0;
|
||||
}
|
||||
|
||||
.name .selfie {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.name span:last-of-type {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
max-width: 325px;
|
||||
margin-left: 2.5em;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.menu li {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.menu li .icon {
|
||||
width: 1.8em;
|
||||
height: 1.8em;
|
||||
}
|
||||
|
||||
/* hide text next to emojis on mobile */
|
||||
.menu li span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu li.theme_toggle {
|
||||
margin-left: -0.3em;
|
||||
}
|
||||
}
|
||||
|
||||
/* the home icon is redundant when space is SUPER tight */
|
||||
@media screen and (max-width: 380px) {
|
||||
.right {
|
||||
max-width: 225px;
|
||||
margin-left: 1.6em;
|
||||
}
|
||||
|
||||
.menu li:first-of-type {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,14 +1,77 @@
|
||||
import { memo } from "react";
|
||||
import Name from "./Name";
|
||||
import Menu from "./Menu";
|
||||
import dynamic from "next/dynamic";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { HomeIcon, NotesIcon, ProjectsIcon, ContactIcon } from "../icons";
|
||||
|
||||
import meJpg from "../../public/static/images/me.jpg";
|
||||
|
||||
import styles from "./Header.module.css";
|
||||
|
||||
// ensure the theme toggle isn't evaluated server-side
|
||||
const ThemeToggle = dynamic(() => import("./ThemeToggle"), { ssr: false });
|
||||
|
||||
const links = [
|
||||
{
|
||||
icon: <HomeIcon className={`icon ${styles.icon}`} />,
|
||||
text: "Home",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
icon: <NotesIcon className={`icon ${styles.icon}`} />,
|
||||
text: "Notes",
|
||||
href: "/notes/",
|
||||
},
|
||||
{
|
||||
icon: <ProjectsIcon className={`icon ${styles.icon}`} />,
|
||||
text: "Projects",
|
||||
href: "/projects/",
|
||||
},
|
||||
{
|
||||
icon: <ContactIcon className={`icon ${styles.icon}`} />,
|
||||
text: "Contact",
|
||||
href: "/contact/",
|
||||
},
|
||||
];
|
||||
|
||||
const Header = () => (
|
||||
<header className={styles.header}>
|
||||
<nav className={styles.nav}>
|
||||
<Name />
|
||||
<Menu />
|
||||
<div className={styles.left}>
|
||||
<Link href="/">
|
||||
<a className={styles.name}>
|
||||
<div className={styles.selfie}>
|
||||
<Image
|
||||
src={meJpg}
|
||||
alt="Photo of Jake Jarvis"
|
||||
width={70}
|
||||
height={70}
|
||||
quality={60}
|
||||
layout="intrinsic"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<span>Jake Jarvis</span>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className={styles.right}>
|
||||
<ul className={styles.menu}>
|
||||
{links.map((link, index) => (
|
||||
<li key={index}>
|
||||
<Link href={link.href} prefetch={false}>
|
||||
<a className={styles.link}>
|
||||
{link.icon} <span>{link.text}</span>
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
<li className={styles.theme_toggle}>
|
||||
<ThemeToggle className={styles.icon} />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
|
||||
@@ -1,67 +0,0 @@
|
||||
.menu {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-left: 1.8em;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.item .link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: var(--medium-dark);
|
||||
background: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.item .link:hover {
|
||||
color: var(--link);
|
||||
}
|
||||
|
||||
.item .icon {
|
||||
width: 1.6em;
|
||||
height: 1.6em;
|
||||
}
|
||||
|
||||
.item .text {
|
||||
font-size: 0.95em;
|
||||
font-weight: 500;
|
||||
margin-top: 0.125em;
|
||||
margin-left: 0.75em;
|
||||
}
|
||||
|
||||
.theme_toggle {
|
||||
margin-left: 1.25em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.menu {
|
||||
max-width: 320px;
|
||||
margin-left: 20px;
|
||||
justify-content: space-between;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.item .icon {
|
||||
width: 1.8em;
|
||||
height: 1.8em;
|
||||
}
|
||||
|
||||
/* hide text next to emojis on mobile */
|
||||
.item .text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.theme_toggle {
|
||||
margin-left: -0.3em;
|
||||
}
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
import dynamic from "next/dynamic";
|
||||
import Link from "next/link";
|
||||
import { HomeIcon, NotesIcon, ProjectsIcon, ContactIcon } from "../icons";
|
||||
|
||||
import styles from "./Menu.module.css";
|
||||
|
||||
// ensure the theme toggle isn't evaluated server-side
|
||||
const ThemeToggle = dynamic(() => import("./ThemeToggle"), { ssr: false });
|
||||
|
||||
const links = [
|
||||
{
|
||||
icon: <HomeIcon className={`icon ${styles.icon}`} />,
|
||||
text: "Home",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
icon: <NotesIcon className={`icon ${styles.icon}`} />,
|
||||
text: "Notes",
|
||||
href: "/notes/",
|
||||
},
|
||||
{
|
||||
icon: <ProjectsIcon className={`icon ${styles.icon}`} />,
|
||||
text: "Projects",
|
||||
href: "/projects/",
|
||||
},
|
||||
{
|
||||
icon: <ContactIcon className={`icon ${styles.icon}`} />,
|
||||
text: "Contact",
|
||||
href: "/contact/",
|
||||
},
|
||||
];
|
||||
|
||||
const Menu = () => (
|
||||
<ul className={styles.menu}>
|
||||
{links.map((link, index) => (
|
||||
<li key={index} className={styles.item}>
|
||||
<Link href={link.href} prefetch={false}>
|
||||
<a className={styles.link}>
|
||||
{link.icon} <span className={styles.text}>{link.text}</span>
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
<li className={`${styles.item} ${styles.theme_toggle}`}>
|
||||
<ThemeToggle className={styles.icon} />
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
|
||||
export default Menu;
|
||||
@@ -1,42 +0,0 @@
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--medium-dark);
|
||||
background: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.title:hover {
|
||||
color: var(--link);
|
||||
}
|
||||
|
||||
.selfie {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.selfie img {
|
||||
border: 1px solid var(--light) !important;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.title:hover .selfie {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin: 0 0.6em;
|
||||
font-size: 1.2em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.selfie {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.name {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
||||
import meJpg from "../../public/static/images/me.jpg";
|
||||
|
||||
import styles from "./Name.module.css";
|
||||
|
||||
const Name = () => (
|
||||
<Link href="/">
|
||||
<a className={styles.title}>
|
||||
<span className={styles.selfie}>
|
||||
<Image src={meJpg} alt="Photo of Jake Jarvis" width={75} height={75} quality={60} layout="intrinsic" priority />
|
||||
</span>
|
||||
<span className={styles.name}>Jake Jarvis</span>
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
|
||||
export default Name;
|
||||
@@ -21,9 +21,10 @@ a:hover {
|
||||
}
|
||||
|
||||
/* set an anchor's class to `no-underline` to disable all of the above */
|
||||
.no-underline {
|
||||
a.no-underline {
|
||||
background: none !important;
|
||||
padding-bottom: 0;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
Reference in New Issue
Block a user