nzambello/nzambello.dev
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

feat: add logo, refactor header, add fonts

Browse source
This commit is contained in:
Nicola Zambello 2023-06-01 15:30:25 +02:00
parent 630f4e20ed
commit 40d73ad74e
Signed by: nzambello
GPG key ID: 56E4A92C2C1E50BA
13 changed files with 161 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -14,6 +14,8 @@
"@astrojs/cloudflare": "^6.3.0",
"@astrojs/rss": "^2.4.1",
"@astrojs/sitemap": "^1.3.0",
"@fontsource/ubuntu": "^5.0.2",
"@fontsource/ubuntu-mono": "^5.0.2",
"@picocss/pico": "^1.5.10",
"astro": "^2.5.0"
},

14
public/favicon.svg
View file

@ -1,9 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
<style>
path { fill: #000; }
@media (prefers-color-scheme: dark) {
path { fill: #FFF; }
}
</style>
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 87C0 38.9512 38.9512 0 87 0H425C473.049 0 512 38.9512 512 87V425C512 473.049 473.049 512 425 512H87C38.9512 512 0 473.049 0 425V87Z" fill="#212222"/>
<path d="M65 259.4L141.8 227.2L148.6 248.8L92.6 270.6L148.6 292.4L141.8 314L65 281.6V259.4Z" fill="#FFB300"/>
<path d="M168.6 231C173 229.8 178.4 228.667 184.8 227.6C191.333 226.533 198.4 226 206 226C213.467 226 219.667 227.067 224.6 229.2C229.533 231.2 233.4 234.133 236.2 238C239.133 241.733 241.2 246.267 242.4 251.6C243.6 256.8 244.2 262.6 244.2 269V322H219.6V272.2C219.6 263.4 218.6 257.067 216.6 253.2C214.6 249.333 210.533 247.4 204.4 247.4C202.533 247.4 200.667 247.467 198.8 247.6C197.067 247.733 195.2 247.933 193.2 248.2V322H168.6V231Z" fill="#FFB300"/>
<path d="M291 355H265.4L321.4 182.2H346.6L291 355Z" fill="#FFB300"/>
<path d="M447.8 281.8L371 314.2L364 292.6L420.2 270.8L364 249L371 227.4L447.8 259.6V281.8Z" fill="#FFB300"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 749 B

After

Width:  |  Height:  |  Size: 1,012 B

BIN
public/logo-square.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 20 KiB

7
public/logo-square.svg Normal file
View file

@ -0,0 +1,7 @@
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 87C0 38.9512 38.9512 0 87 0H425C473.049 0 512 38.9512 512 87V425C512 473.049 473.049 512 425 512H87C38.9512 512 0 473.049 0 425V87Z" fill="#212222"/>
<path d="M65 259.4L141.8 227.2L148.6 248.8L92.6 270.6L148.6 292.4L141.8 314L65 281.6V259.4Z" fill="#FFB300"/>
<path d="M168.6 231C173 229.8 178.4 228.667 184.8 227.6C191.333 226.533 198.4 226 206 226C213.467 226 219.667 227.067 224.6 229.2C229.533 231.2 233.4 234.133 236.2 238C239.133 241.733 241.2 246.267 242.4 251.6C243.6 256.8 244.2 262.6 244.2 269V322H219.6V272.2C219.6 263.4 218.6 257.067 216.6 253.2C214.6 249.333 210.533 247.4 204.4 247.4C202.533 247.4 200.667 247.467 198.8 247.6C197.067 247.733 195.2 247.933 193.2 248.2V322H168.6V231Z" fill="#FFB300"/>
<path d="M291 355H265.4L321.4 182.2H346.6L291 355Z" fill="#FFB300"/>
<path d="M447.8 281.8L371 314.2L364 292.6L420.2 270.8L364 249L371 227.4L447.8 259.6V281.8Z" fill="#FFB300"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1,012 B

BIN
public/placeholder-about.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 71 KiB

BIN
public/placeholder-hero.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 8.5 KiB

BIN
public/placeholder-social.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 18 KiB

29
src/components/Header.astro
View file

@ -1,18 +1,23 @@
---
import HeaderLink from './HeaderLink.astro'
import ThemeIcon from './ThemeIcon.astro'
import Logo from './Logo.astro'
---
<header class="container">
<nav>
<nav id="navigation">
<ul>
<HeaderLink href="/">nzambello.dev</HeaderLink>
<HeaderLink href="/">
<Logo />
</HeaderLink>
</ul>
<ul>
<ul class="menu">
<HeaderLink href="/blog">Blog</HeaderLink>
<HeaderLink href="/about">About</HeaderLink>
<HeaderLink href="https://twitter.com/astrodotbuild" target="_blank">Twitter</HeaderLink>
<HeaderLink href="https://github.com/withastro/astro" target="_blank">GitHub</HeaderLink>
</ul>
<ul>
<li>
<ThemeIcon />
</li>
@ -20,7 +25,21 @@ import ThemeIcon from './ThemeIcon.astro'
</nav>
</header>
<style>
header {
margin: 0em 0 2em;
body > header.container {
padding-top: 0;
padding-bottom: 0;
margin-bottom: 2rem;
margin-top: 1rem;
}
@media (max-width: 767px) {
nav ul.menu {
display: none;
}
}
nav ul.menu {
flex-grow: 1;
flex-shrink: 0;
justify-content: flex-end;
}
</style>

62
src/components/Logo.astro Normal file
View file

@ -0,0 +1,62 @@
<svg xmlns="http://www.w3.org/2000/svg" class="logo" width="456" height="94" viewBox="0 0 435 94" fill="none">
<g class="text-container">
<text
x="43"
y="79.45"
dominant-baseline="ideographic"
textLength="324"
lengthAdjust="spacingAndGlyphs"
class="fills">nzambello</text
>
</g>
<g class="text-container text-container--light">
<text
x="372"
y="79.45"
dominant-baseline="ideographic"
textLength="72"
lengthAdjust="spacingAndGlyphs"
class="fills">/&gt;</text
>
</g>
<g class="text-container text-container--light">
<text y="79.45" dominant-baseline="ideographic" textLength="36" lengthAdjust="spacingAndGlyphs" class="fills"
>&lt;</text
>
</g>
</svg>
<style>
svg.logo {
width: 10rem;
height: auto;
fill: none;
color: var(--text-color);
}
@media (max-width: 575px) {
svg.logo {
width: 9rem;
}
}
svg.logo .text-container {
font-family: 'Ubuntu Mono';
font-style: normal;
font-weight: 700;
font-size: 72px;
text-decoration: currentColor;
direction: ltr;
fill: currentColor;
fill-opacity: 1;
}
svg.logo .text-container--light {
fill-opacity: 0.6;
}
svg.logo:hover .text-container--light,
svg.logo:focus .text-container--light {
fill-opacity: 0.85;
}
svg.logo .fills {
text-transform: none;
letter-spacing: normal;
white-space: pre;
}
</style>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

7
src/consts.ts
View file

@ -1,5 +1,2 @@
// Place any global data in this file.
// You can import this data from anywhere in your site by using the `import` keyword.
export const SITE_TITLE = 'My personal website.';
export const SITE_DESCRIPTION = 'Welcome to my website!';
export const SITE_TITLE = 'Nicola Zambello'
export const SITE_DESCRIPTION = 'Welcome to my website!'

13
src/layouts/BaseLayout.astro
View file

@ -1,10 +1,15 @@
---
import '@picocss/pico/css/pico.min.css'
import '@fontsource/ubuntu-mono/400.css'
import '@fontsource/ubuntu-mono/700.css'
import '@fontsource/ubuntu/400.css'
import '@fontsource/ubuntu/700.css'
import '@fontsource/ubuntu/400-italic.css'
import '../styles/global.css'
import Header from '../components/Header.astro'
import Footer from '../components/Footer.astro'
const { title, description, image = '/placeholder-social.jpg' } = Astro.props
const { title, description, image = '/logo-square.png' } = Astro.props
const canonicalURL = new URL(Astro.url.pathname, Astro.site)
---
@ -15,7 +20,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site)
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="application-name" content="nzambello.dev" />
<meta name="og:type" content="website" />
<meta name="generator" content={Astro.generator} />
<meta name="generator" content="Astro + Plone" />
<link rel="canonical" href={canonicalURL} />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
@ -39,8 +44,10 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site)
<meta property="twitter:image" content={new URL(image, Astro.url)} />
</head>
<body>
<a class="skip-link" href="#navigation">Skip to navigation</a>
<a class="skip-link" href="#main">Skip to content</a>
<Header />
<main class="container">
<main class="container" id="main">
<slot />
</main>
<Footer />

32
src/styles/global.css
View file

@ -6,6 +6,7 @@
--primary-hover: #ffa000;
--primary-focus: rgba(255, 179, 0, 0.125);
--primary-inverse: rgba(0, 0, 0, 0.75);
--text-color: hsl(205, 20%, 32%);
}
/* Amber Dark scheme (Auto) */
@ -17,6 +18,7 @@
--primary-focus: rgba(255, 179, 0, 0.25);
--primary-inverse: rgba(0, 0, 0, 0.75);
--background-color: #212222;
--text-color: hsl(205, 16%, 77%);
}
}
@ -28,6 +30,7 @@
--primary-focus: rgba(255, 179, 0, 0.25);
--primary-inverse: rgba(0, 0, 0, 0.75);
--background-color: #212222;
--text-color: hsl(205, 16%, 77%);
}
/* Amber (Common styles) */
@ -36,4 +39,33 @@
--form-element-focus-color: var(--primary-focus);
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
--font-family: 'Ubuntu', system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
"Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol", "Noto Color Emoji";
}
body {
font-family: 'Ubuntu', sans-serif;
}
pre,
code,
kbd,
samp {
--font-family: 'Ubuntu Mono', "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace",
"Noto Mono", "Oxygen Mono", "Liberation Mono", monospace,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.skip-link {
padding: 5px 10px;
position: absolute;
top: 0;
left: 0;
transform: translateY(-100%);
transition: transform 0.3s;
}
a:focus {
transform: translateY(0%);
}

16
yarn.lock
View file

@ -801,6 +801,20 @@ __metadata:
languageName: node
linkType: hard
"@fontsource/ubuntu-mono@npm:^5.0.2":
version: 5.0.2
resolution: "@fontsource/ubuntu-mono@npm:5.0.2"
checksum: bbb311558b6217e038938b3b1d82d7b0f685521622018a3369a9d4e4474abf48c517752fcc07a41b6b064801221aee8442dd18003457c9c0b4a9826d909be80e
languageName: node
linkType: hard
"@fontsource/ubuntu@npm:^5.0.2":
version: 5.0.2
resolution: "@fontsource/ubuntu@npm:5.0.2"
checksum: a0fee79129e37f07900fcfc9c8b1fa6e7ff9b59ec1e8e60030b3d9df8a286e08f5ceddcf55c35f82a42e3e60d71cc54af324b78bb8578fab381c2856bced7330
languageName: node
linkType: hard
"@gar/promisify@npm:^1.1.3":
version: 1.1.3
resolution: "@gar/promisify@npm:1.1.3"
@ -4097,6 +4111,8 @@ __metadata:
"@astrojs/cloudflare": ^6.3.0
"@astrojs/rss": ^2.4.1
"@astrojs/sitemap": ^1.3.0
"@fontsource/ubuntu": ^5.0.2
"@fontsource/ubuntu-mono": ^5.0.2
"@picocss/pico": ^1.5.10
astro: ^2.5.0
wrangler: ^3.0.1