Skip to content

Commit

Permalink
Mobile menu now closes if you click menu item. Menu is now position: …
Browse files Browse the repository at this point in the history
…sticky. Menu items are highlighted when active. Page headers briefly underline as you navigate to them
  • Loading branch information
chrisnajman committed Jan 9, 2024
1 parent 42596a6 commit a809896
Show file tree
Hide file tree
Showing 15 changed files with 558 additions and 88 deletions.
31 changes: 31 additions & 0 deletions css/back-to-top.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
.back-to-top {
background-color: var(--clr-dark-green);
position: fixed;
right: 0;
bottom: 0;
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
border-radius: 0.5rem 0 0 0;

&.show {
clip: auto;
height: auto;
overflow: visible;
}
& a {
color: var(--clr-lightest);
text-decoration: none;
font-weight: 600;
display: block;
padding: 0.5rem 1rem;

&::after {
content: " \2191";
}

&:hover {
opacity: 0.8;
}
}
}
53 changes: 24 additions & 29 deletions css/base.css
Original file line number Diff line number Diff line change
Expand Up @@ -96,24 +96,21 @@ button {
min-height: 100vh;
min-height: 100dvh;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-rows: auto auto 1fr auto;
}

.page-header,
.page-footer {
background-color: var(--header-footer-bg);
color: var(--header-footer-txt);
background-color: var(--header-nav-footer-bg);
color: var(--header-nav-footer-txt);
text-align: center;
display: flex;
flex-direction: column;
gap: 2rem;
border-style: solid;
}

.page-header {
padding: 3.2rem 0;
border-bottom-color: var(--header-footer-border);
border-width: 0 0 0.5rem 0;
@media screen and (width < 360px) {
padding-inline: 1rem;
padding-top: 5rem;
Expand All @@ -128,26 +125,13 @@ button {
}

.main {
max-width: 80rem;
margin: 0 auto;
padding: 5rem 2rem;
display: flex;
flex-direction: column;

& h2 {
text-align: left;
line-height: normal;
margin-bottom: 0;
}

& p {
margin-bottom: 2.5rem;
}
overflow: hidden;
padding: 0 1.6rem 0;
}

.page-header a,
.page-footer a {
color: var(--header-footer-txt);
color: var(--header-nav-footer-txt);
text-decoration: none;
}

Expand All @@ -159,7 +143,8 @@ button {

.page-footer {
padding: 3.2rem 0;
border-top-color: var(--header-footer-border);
border-style: solid;
border-top-color: var(--nav-footer-border);
border-width: 0.5rem 0 0 0;

& a:hover {
Expand All @@ -176,28 +161,38 @@ button {
}

.icon-logo {
fill: var(--header-footer-txt);
fill: var(--header-nav-footer-txt);
width: 3.6rem;
height: 3.6rem;
margin: 0 auto;
}

.article {
max-width: 100rem;
max-width: 80rem;
margin: 0 auto;
padding: 3rem 0 8rem;

padding: 3rem;
display: flex;
flex-direction: column;
gap: 3rem;

& h2 {
text-align: center;
margin: 1rem 0;
text-transform: capitalize;
}

& p:first-of-type {
max-width: 60ch;
& h3 {
text-align: left;
line-height: normal;
margin-bottom: 0;
}

& p {
font-family: var(--font-serif);

&:first-of-type {
max-width: 60ch;
}
}

& section {
Expand Down
17 changes: 17 additions & 0 deletions css/highlight-headers.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
.article h3 {
padding-block-end: 0.5rem;
border-bottom: 0.5rem solid transparent;

&.highlight {
animation: highlight 1s linear;
}
}

@keyframes highlight {
0% {
border-bottom-color: transparent;
}
100% {
border-bottom-color: var(--body-txt);
}
}
6 changes: 3 additions & 3 deletions css/index.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@import "./theme.css";
@import "./base.css";
@import "./primary-navigation.css";
/* @import "./hamburger-button.css"; */

@import "./back-to-top.css";
@import "./theme-switcher.css";
@import "./primary-navigation.css";
@import "./highlight-headers.css";
37 changes: 28 additions & 9 deletions css/primary-navigation.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,23 @@
}

.primary-navigation {
position: relative;
width: 100%;
position: sticky;
z-index: 100;
top: -1px; /* top: 0 leaves a 1px gap at the top of the page */
right: 0;
left: 0;
background-color: var(--header-nav-footer-bg);
border-width: 0 0 0.5rem 0;
border-style: solid;
border-bottom-color: var(--nav-footer-border);
padding-block: 1rem;

&.padding {
padding-block-end: 1.8rem;
@media screen and (width <= 768px) {
padding-block-end: 4.6rem;
}

&.shadow {
box-shadow: -2px 10px 5px 0px var(--page-header-shadow);
}

& nav {
Expand Down Expand Up @@ -44,15 +56,17 @@
@media screen and (width <= 768px) {
flex-direction: column;
gap: 1rem;
z-index: 300;
}
}
& span {
& a {
color: var(--nav-link);
border-bottom: 5px solid transparent;
padding-block-end: 0.5rem;
margin-bottom: 1rem;
display: block;
cursor: default;
cursor: pointer;
text-decoration: none;

&:hover {
border-bottom-color: var(--nav-link);
Expand All @@ -78,25 +92,30 @@

@media screen and (width <= 768px) {
.hamburger-button-wrapper {
width: fit-content;
width: 100%;
display: flex;
gap: 1rem;
align-items: center;
margin: 0 auto;
position: absolute;
top: -1.2rem;
right: 2rem;
top: 0;
right: 0;
left: 0;

background-color: var(--header-nav-footer-bg);

& h2 {
font-size: 1.6rem;
font-weight: normal;
margin-bottom: 1rem;
margin-left: auto;
}
}

.hamburger-button {
cursor: pointer;
width: 5rem;
margin-right: 1rem;

& .line {
width: 80%;
Expand Down
18 changes: 10 additions & 8 deletions css/theme.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,13 @@
--font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;

--clr-light-blue: rgb(135, 206, 235);
--clr-blue: rgb(0, 117, 255);
--clr-blue: #0075ff;
--clr-lightest: white;
--clr-mid: #555;
--clr-light-green: rgb(239, 250, 250);
--clr-green: rgb(4, 167, 167);
--clr-grey-green: rgb(44, 58, 58);
--clr-dark-green: rgb(3, 94, 94);
--clr-dark: rgb(30, 39, 39);
--clr-darker: #222;
--clr-darkest: black;
Expand All @@ -21,14 +22,15 @@

--highlight: var(--clr-light-blue);
--timeline: var(--clr-red-tile);
--page-header-shadow: rgba(0, 0, 0, 0.28);

/* Dark theme (default) */

--body-bg: var(--clr-dark);
--body-txt: var(--clr-light-green);
--header-footer-bg: var(--clr-darkest);
--header-footer-txt: var(--clr-light-green);
--header-footer-border: var(--clr-transparent);
--header-nav-footer-bg: var(--clr-darkest);
--header-nav-footer-txt: var(--clr-light-green);
--nav-footer-border: var(--clr-transparent);
--hamburger-line-colour: var(--clr-light-green);
--nav-link: var(--clr-light-green);
--theme-icon: var(--clr-lightest);
Expand All @@ -38,11 +40,11 @@
.light-theme {
--body-bg: var(--clr-light-green);
--body-txt: var(--clr-darkest);
--header-footer-bg: var(--clr-lightest);
--header-footer-txt: var(--clr-darkest);
--header-footer-border: var(--clr-green);
--header-nav-footer-bg: var(--clr-lightest);
--header-nav-footer-txt: var(--clr-darkest);
--nav-footer-border: var(--clr-green);
--hamburger-line-colour: var(--clr-darkest);
--nav-link: var(--clr-darkest);
--nav-link: var(--clr-dark);
--theme-icon: var(--clr-orange);
--theme-txt: var(--clr-darkest);
}
Loading

0 comments on commit a809896

Please sign in to comment.