graham/ghall.space
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dark mode

Browse Source
This commit is contained in:
Graham Hall
2023-03-04 19:17:30 +00:00
parent f17436ec01
commit 62b4d68dfa
6 changed files with 161 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/BlogHeader.astro
+3 -1
View File
@@ -1,5 +1,6 @@
--- ---
import FormattedDate from '@components/FormattedDate.astro' import FormattedDate from '@components/FormattedDate.astro'
import Calendar from './icons/Calendar.astro'
interface Props { interface Props {
title: String title: String
@@ -12,7 +13,8 @@ const { title, date } = Astro.props
<div class="blog-header"> <div class="blog-header">
<h2>{title}</h2> <h2>{title}</h2>
<h3> <h3>
<img src="/media/icons/calendar-2iconImage24px.svg" alt="" /> <!-- <img class="svg-icon" src={calendarIcon} alt="" /> -->
<Calendar />
<FormattedDate date={date} /> <FormattedDate date={date} />
</h3> </h3>
</div> </div>
src/components/Header.astro
+13 -3
View File
@@ -1,9 +1,12 @@
--- ---
import UserIcon from './icons/UserIcon.astro'
import Website from './icons/Website.astro'
const { pathname } = Astro.url const { pathname } = Astro.url
const navLinks = [ const navLinks = [
{ label: 'Blog', icon: 'website-with-texticonImage24px', path: '/' }, { label: 'Blog', path: '/' },
{ label: 'About', icon: 'usericonImage24px', path: '/about/' }, { label: 'About', path: '/about/' },
] ]
--- ---
@@ -18,7 +21,14 @@ const navLinks = [
class={pathname === link.path ? 'active-nav' : null} class={pathname === link.path ? 'active-nav' : null}
href={link.path} href={link.path}
> >
<img src={`/media/icons/${link.icon}.svg`} /> {() => {
switch (link.label) {
case 'Blog':
return <Website />
case 'About':
return <UserIcon />
}
}}
<span>{link.label}</span> <span>{link.label}</span>
</a> </a>
</li> </li>
src/components/icons/Calendar.astro
+1
View File
@@ -0,0 +1 @@
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_287_24406)" fill="currentColor"><path d="M18.4 3a1 1 0 1 0-2 0h2zm-2 3.6a1 1 0 1 0 2 0h-2zM7.6 3a1 1 0 0 0-2 0h2zm-2 3.6a1 1 0 0 0 2 0h-2zM3.586 20.414l-.707.707.707-.707zm16.828 0l-.707-.707.707.707zm0-15.028l.707-.707-.707.707zm-16.828 0l-.707-.707.707.707zM20 8.8V17h2V8.8h-2zM17 20H7v2h10v-2zM4 17V8.8H2V17h2zM7.001 5.8H16.998v-2H7.003v2zM21 9H3v2h18V9zm-4.6-6v3.6h2V3h-2zM5.6 3v3.6h2V3h-2zM7 20c-.971 0-1.599-.002-2.061-.064-.434-.059-.57-.153-.646-.229l-1.414 1.414c.51.51 1.138.709 1.793.797C5.3 22.002 6.085 22 7 22v-2zm-5-3c0 .915-.002 1.701.082 2.328.088.655.287 1.284.797 1.793l1.414-1.414c-.076-.076-.17-.212-.229-.646C4.002 18.6 4 17.971 4 17H2zm18 0c0 .971-.002 1.599-.064 2.061-.059.434-.153.57-.229.646l1.414 1.414c.51-.51.709-1.138.797-1.793C22.002 18.7 22 17.915 22 17h-2zm-3 5c.915 0 1.701.002 2.328-.082.655-.088 1.284-.287 1.793-.797l-1.414-1.414c-.076.076-.212.17-.646.229-.462.062-1.09.064-2.061.064v2zm5-13.2c0-.915.002-1.701-.082-2.328-.088-.655-.287-1.284-.797-1.793l-1.414 1.414c.076.076.17.212.229.646.062.462.064 1.09.064 2.061h2zm-5.001-3c.971 0 1.6.002 2.062.064.434.059.57.153.646.229l1.414-1.414c-.51-.51-1.138-.709-1.794-.797C18.7 3.798 17.914 3.8 17 3.8v2zM4 8.8c0-.971.002-1.599.064-2.061.059-.434.153-.57.229-.646L2.879 4.679c-.51.51-.709 1.138-.797 1.793C1.998 7.1 2 7.885 2 8.8h2zm3.001-5c-.915 0-1.701-.002-2.328.082-.656.088-1.285.287-1.794.797l1.414 1.414c.076-.076.212-.17.646-.229.463-.062 1.09-.064 2.062-.064v-2zM8.5 17.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4.5 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4.5 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/><path d="M17.5 17.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-9-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4.5 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4.5 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/><path d="M17.5 13.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/></g><defs><clipPath id="clip0_287_24406"><path fill="currentColor" d="M0 0H24V24H0z"/></clipPath></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

src/components/icons/UserIcon.astro
+1
View File
@@ -0,0 +1 @@
<svg fill="none" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 21v-1.45c0-.977 0-1.465-.113-1.864a3 3 0 0 0-2.073-2.073c-.399-.113-.887-.113-1.864-.113h-6.9c-.977 0-1.465 0-1.864.113a3 3 0 0 0-2.073 2.073C4 18.085 4 18.573 4 19.55V21M16.2 7.06c0 2.245-1.88 4.065-4.2 4.065S7.8 9.305 7.8 7.06 9.68 2.996 12 2.996s4.2 1.82 4.2 4.064z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 451 B

src/components/icons/Website.astro
+1
View File
@@ -0,0 +1 @@
<svg fill="none" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect height="18" rx="2" width="18" x="3" y="3"/><path d="M3 7h18M7 11.5h10M7 16h6"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 259 B

src/styles/global.css
+142 -133
View File
@@ -1,107 +1,111 @@
@font-face { @font-face {
font-family: Manrope; font-family: Manrope;
src: url(./fonts/Manrope-Regular.ttf) format("truetype"); src: url(./fonts/Manrope-Regular.ttf) format('truetype');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-display: block; font-display: block;
} }
@font-face { @font-face {
font-family: Manrope; font-family: Manrope;
src: url(./fonts/Manrope-Bold.ttf) format("truetype"); src: url(./fonts/Manrope-Bold.ttf) format('truetype');
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
font-display: block; font-display: block;
} }
:root { :root {
--blue: #3274ce; --blue: #3274ce;
--red: #ce3446; --red: #ce3446;
--orange: #e56045; --orange: #e56045;
--text: #444444; --text: #444444;
--background: white; --background: white;
--radius: 5px; --radius: 5px;
--shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; --shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
--border: 1px solid rgb(239, 239, 239);
} }
.dark { @media (prefers-color-scheme: dark) {
--blue: #5996e9; :root {
--red: #e75969; --blue: #5996e9;
--orange: #e87c66; --red: #e75969;
--text: white; --orange: #e87c66;
--background: #2d2d2d; --text: white;
--background: color(display-p3 0.141 0.149 0.216);
--border: 1px solid rgb(102, 102, 102);
}
} }
* { * {
font-family: "Manrope", sans-serif; font-family: 'Manrope', sans-serif;
color: var(--text); color: var(--text);
} }
body { body {
background-color: var(--background); background-color: var(--background);
margin: 0; margin: 0;
} }
header { header {
margin: 0; margin: 0;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
max-width: 800px; max-width: 800px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: auto; margin: auto;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
header h1 { header h1 {
text-align: center; text-align: center;
} }
nav ul { nav ul {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 1.5rem; gap: 1.5rem;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
nav ul li { nav ul li {
height: 40px; height: 40px;
align-items: center; align-items: center;
} }
nav ul li a { nav ul li a {
position: relative; position: relative;
font-size: 1.2rem; font-size: 1.2rem;
display: flex; display: flex;
gap: 0.5rem; gap: 0.5rem;
align-items: center; align-items: center;
} }
.active-nav::before { .active-nav::before {
content: ""; content: '';
position: absolute; position: absolute;
left: -10px; left: -10px;
width: 6px; width: 6px;
height: 6px; height: 6px;
border-radius: 10px; border-radius: 10px;
background-color: var(--blue); background-color: var(--blue);
} }
nav ul li::before { nav ul li::before {
content: ""; content: '';
} }
main { main {
padding: 1rem 3rem; padding: 1rem 3rem;
max-width: 800px; max-width: 800px;
margin: auto; margin: auto;
} }
footer { footer {
text-align: center; text-align: center;
padding: 3rem; padding: 3rem;
} }
/* Typography */ /* Typography */
@@ -110,105 +114,105 @@ h1,
h2, h2,
h3, h3,
h4 { h4 {
font-weight: bold; font-weight: bold;
} }
blockquote { blockquote {
border-left: 3px solid; border-left: 3px solid;
border-color: var(--text); border-color: var(--text);
margin-left: 0; margin-left: 0;
padding-left: 2rem; padding-left: 2rem;
} }
hr { hr {
border-top: 1px solid var(--text); border-top: 1px solid var(--text);
margin: 2rem 0; margin: 2rem 0;
} }
/* Links */ /* Links */
a { a {
color: var(--blue); color: var(--blue);
text-decoration: none; text-decoration: none;
transition: opacity 0.15s; transition: opacity 0.15s;
} }
a:hover { a:hover {
opacity: 0.6; opacity: 0.6;
} }
code { code {
color: var(--orange); color: var(--orange);
border: lightgray solid 1px; border: lightgray solid 1px;
padding: 2px 4px; padding: 2px 4px;
border-radius: var(--radius); border-radius: var(--radius);
} }
/* List Styles */ /* List Styles */
ul, ul,
ol { ol {
list-style: none; list-style: none;
} }
ol li { ol li {
counter-increment: li; counter-increment: li;
} }
ul li::before { ul li::before {
content: "‣"; content: '‣';
color: var(--orange); color: var(--orange);
display: inline-block; display: inline-block;
width: 1em; width: 1em;
margin-left: -1em; margin-left: -1em;
} }
ol li::before { ol li::before {
content: "." counter(li); content: '.' counter(li);
color: var(--orange); color: var(--orange);
display: inline-block; display: inline-block;
width: 1em; width: 1em;
margin-left: -1.5em; margin-left: -1.5em;
margin-right: 0.5em; margin-right: 0.5em;
text-align: right; text-align: right;
direction: rtl; direction: rtl;
} }
li { li {
margin: 0.5rem 0; margin: 0.5rem 0;
} }
/* Input Styles */ /* Input Styles */
button, button,
.link-button { .link-button {
background-color: gray; background-color: gray;
color: white; color: white;
font-size: 1rem; font-size: 1rem;
padding: 0.6rem 1.2rem; padding: 0.6rem 1.2rem;
outline: none; outline: none;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
transition: all 0.15s; transition: all 0.15s;
} }
button:hover, button:hover,
.link-button:hover { .link-button:hover {
opacity: 0.8; opacity: 0.8;
} }
button:active, button:active,
.link-button:active { .link-button:active {
opacity: 0.9; opacity: 0.9;
scale: 0.98; scale: 0.98;
} }
select { select {
/* appearance: none; /* appearance: none;
padding: 6px 40px 6px 10px; padding: 6px 40px 6px 10px;
border-radius: var(--radius); border-radius: var(--radius);
border: none; */ border: none; */
font-size: 1rem; font-size: 1rem;
/* background: none; /* background: none;
z-index: 10; */ z-index: 10; */
} }
@@ -239,55 +243,60 @@ select {
input, input,
textarea { textarea {
appearance: none; appearance: none;
outline: none; outline: none;
background-color: #e6e6e6; background-color: #e6e6e6;
color: --text; color: --text;
border: 2px solid #dadada; border: 2px solid #dadada;
font-size: 1rem; font-size: 1rem;
padding: 0.6rem; padding: 0.6rem;
border-radius: 5px; border-radius: 5px;
transition: background 0.15s; transition: background 0.15s;
} }
input:hover, input:hover,
textarea:hover { textarea:hover {
background-color: #eaeaea; background-color: #eaeaea;
} }
input:focus, input:focus,
textarea:focus { textarea:focus {
background-color: #eaeaea; background-color: #eaeaea;
box-shadow: 0px 0px 2px 1px var(--blue); box-shadow: 0px 0px 2px 1px var(--blue);
} }
dialog { dialog {
border: none; border: none;
border-radius: 5px; border-radius: 5px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
padding: 1.4rem; padding: 1.4rem;
text-align: center; text-align: center;
max-width: 900px; max-width: 900px;
} }
/* Classes */ /* Classes */
.width-full { .width-full {
width: 100%; width: 100%;
} }
.blue-btn { .blue-btn {
background-color: var(--blue); background-color: var(--blue);
} }
.red-btn { .red-btn {
background-color: var(--red); background-color: var(--red);
} }
.post-preview { .post-preview {
background: white; padding: 0.1rem 1rem 1.5rem;
padding: 0.1rem 1rem 1.5rem; margin: 0 0 1.5rem 0;
margin: 0 0 1.5rem 0; }
border-radius: 5px;
border: 1px solid rgb(237, 237, 237); .post-preview:not(:last-of-type) {
border-bottom: var(--border);
}
svg {
color: var(--text);
} }