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 Calendar from './icons/Calendar.astro'
interface Props {
title: String
@@ -12,7 +13,8 @@ const { title, date } = Astro.props
<div class="blog-header">
<h2>{title}</h2>
<h3>
<img src="/media/icons/calendar-2iconImage24px.svg" alt="" />
<!-- <img class="svg-icon" src={calendarIcon} alt="" /> -->
<Calendar />
<FormattedDate date={date} />
</h3>
</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 navLinks = [
{ label: 'Blog', icon: 'website-with-texticonImage24px', path: '/' },
{ label: 'About', icon: 'usericonImage24px', path: '/about/' },
{ label: 'Blog', path: '/' },
{ label: 'About', path: '/about/' },
]
---
@@ -18,7 +21,14 @@ const navLinks = [
class={pathname === link.path ? 'active-nav' : null}
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>
</a>
</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-family: Manrope;
src: url(./fonts/Manrope-Regular.ttf) format("truetype");
font-weight: normal;
font-style: normal;
font-display: block;
font-family: Manrope;
src: url(./fonts/Manrope-Regular.ttf) format('truetype');
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: Manrope;
src: url(./fonts/Manrope-Bold.ttf) format("truetype");
font-weight: bold;
font-style: normal;
font-display: block;
font-family: Manrope;
src: url(./fonts/Manrope-Bold.ttf) format('truetype');
font-weight: bold;
font-style: normal;
font-display: block;
}
:root {
--blue: #3274ce;
--red: #ce3446;
--orange: #e56045;
--text: #444444;
--background: white;
--radius: 5px;
--shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
--blue: #3274ce;
--red: #ce3446;
--orange: #e56045;
--text: #444444;
--background: white;
--radius: 5px;
--shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
--border: 1px solid rgb(239, 239, 239);
}
.dark {
--blue: #5996e9;
--red: #e75969;
--orange: #e87c66;
--text: white;
--background: #2d2d2d;
@media (prefers-color-scheme: dark) {
:root {
--blue: #5996e9;
--red: #e75969;
--orange: #e87c66;
--text: white;
--background: color(display-p3 0.141 0.149 0.216);
--border: 1px solid rgb(102, 102, 102);
}
}
* {
font-family: "Manrope", sans-serif;
color: var(--text);
font-family: 'Manrope', sans-serif;
color: var(--text);
}
body {
background-color: var(--background);
margin: 0;
background-color: var(--background);
margin: 0;
}
header {
margin: 0;
padding: 0.5rem 1rem;
max-width: 800px;
display: flex;
flex-direction: column;
margin: auto;
justify-content: space-between;
align-items: center;
margin: 0;
padding: 0.5rem 1rem;
max-width: 800px;
display: flex;
flex-direction: column;
margin: auto;
justify-content: space-between;
align-items: center;
}
header h1 {
text-align: center;
text-align: center;
}
nav ul {
display: flex;
justify-content: center;
align-items: center;
gap: 1.5rem;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
gap: 1.5rem;
padding: 0;
margin: 0;
}
nav ul li {
height: 40px;
align-items: center;
height: 40px;
align-items: center;
}
nav ul li a {
position: relative;
font-size: 1.2rem;
display: flex;
gap: 0.5rem;
align-items: center;
position: relative;
font-size: 1.2rem;
display: flex;
gap: 0.5rem;
align-items: center;
}
.active-nav::before {
content: "";
position: absolute;
left: -10px;
width: 6px;
height: 6px;
border-radius: 10px;
background-color: var(--blue);
content: '';
position: absolute;
left: -10px;
width: 6px;
height: 6px;
border-radius: 10px;
background-color: var(--blue);
}
nav ul li::before {
content: "";
content: '';
}
main {
padding: 1rem 3rem;
max-width: 800px;
margin: auto;
padding: 1rem 3rem;
max-width: 800px;
margin: auto;
}
footer {
text-align: center;
padding: 3rem;
text-align: center;
padding: 3rem;
}
/* Typography */
@@ -110,105 +114,105 @@ h1,
h2,
h3,
h4 {
font-weight: bold;
font-weight: bold;
}
blockquote {
border-left: 3px solid;
border-color: var(--text);
margin-left: 0;
padding-left: 2rem;
border-left: 3px solid;
border-color: var(--text);
margin-left: 0;
padding-left: 2rem;
}
hr {
border-top: 1px solid var(--text);
margin: 2rem 0;
border-top: 1px solid var(--text);
margin: 2rem 0;
}
/* Links */
a {
color: var(--blue);
text-decoration: none;
transition: opacity 0.15s;
color: var(--blue);
text-decoration: none;
transition: opacity 0.15s;
}
a:hover {
opacity: 0.6;
opacity: 0.6;
}
code {
color: var(--orange);
border: lightgray solid 1px;
padding: 2px 4px;
border-radius: var(--radius);
color: var(--orange);
border: lightgray solid 1px;
padding: 2px 4px;
border-radius: var(--radius);
}
/* List Styles */
ul,
ol {
list-style: none;
list-style: none;
}
ol li {
counter-increment: li;
counter-increment: li;
}
ul li::before {
content: "‣";
color: var(--orange);
display: inline-block;
width: 1em;
margin-left: -1em;
content: '‣';
color: var(--orange);
display: inline-block;
width: 1em;
margin-left: -1em;
}
ol li::before {
content: "." counter(li);
color: var(--orange);
display: inline-block;
width: 1em;
margin-left: -1.5em;
margin-right: 0.5em;
text-align: right;
direction: rtl;
content: '.' counter(li);
color: var(--orange);
display: inline-block;
width: 1em;
margin-left: -1.5em;
margin-right: 0.5em;
text-align: right;
direction: rtl;
}
li {
margin: 0.5rem 0;
margin: 0.5rem 0;
}
/* Input Styles */
button,
.link-button {
background-color: gray;
color: white;
font-size: 1rem;
padding: 0.6rem 1.2rem;
outline: none;
border: none;
border-radius: 5px;
transition: all 0.15s;
background-color: gray;
color: white;
font-size: 1rem;
padding: 0.6rem 1.2rem;
outline: none;
border: none;
border-radius: 5px;
transition: all 0.15s;
}
button:hover,
.link-button:hover {
opacity: 0.8;
opacity: 0.8;
}
button:active,
.link-button:active {
opacity: 0.9;
scale: 0.98;
opacity: 0.9;
scale: 0.98;
}
select {
/* appearance: none;
/* appearance: none;
padding: 6px 40px 6px 10px;
border-radius: var(--radius);
border: none; */
font-size: 1rem;
/* background: none;
font-size: 1rem;
/* background: none;
z-index: 10; */
}
@@ -239,55 +243,60 @@ select {
input,
textarea {
appearance: none;
outline: none;
background-color: #e6e6e6;
color: --text;
border: 2px solid #dadada;
font-size: 1rem;
padding: 0.6rem;
border-radius: 5px;
transition: background 0.15s;
appearance: none;
outline: none;
background-color: #e6e6e6;
color: --text;
border: 2px solid #dadada;
font-size: 1rem;
padding: 0.6rem;
border-radius: 5px;
transition: background 0.15s;
}
input:hover,
textarea:hover {
background-color: #eaeaea;
background-color: #eaeaea;
}
input:focus,
textarea:focus {
background-color: #eaeaea;
box-shadow: 0px 0px 2px 1px var(--blue);
background-color: #eaeaea;
box-shadow: 0px 0px 2px 1px var(--blue);
}
dialog {
border: none;
border-radius: 5px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
padding: 1.4rem;
text-align: center;
max-width: 900px;
border: none;
border-radius: 5px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
padding: 1.4rem;
text-align: center;
max-width: 900px;
}
/* Classes */
.width-full {
width: 100%;
width: 100%;
}
.blue-btn {
background-color: var(--blue);
background-color: var(--blue);
}
.red-btn {
background-color: var(--red);
background-color: var(--red);
}
.post-preview {
background: white;
padding: 0.1rem 1rem 1.5rem;
margin: 0 0 1.5rem 0;
border-radius: 5px;
border: 1px solid rgb(237, 237, 237);
padding: 0.1rem 1rem 1.5rem;
margin: 0 0 1.5rem 0;
}
.post-preview:not(:last-of-type) {
border-bottom: var(--border);
}
svg {
color: var(--text);
}