andras/schmelczer-dev
1
0
Fork 0
Code Issues Pull requests 6 Projects Releases Packages Wiki Activity Actions

Simplify footer

Browse source
This commit is contained in:
Andras Schmelczer 2022-09-23 22:47:06 +02:00
parent 888cdf2c96
commit f1f9ee539a
No known key found for this signature in database
GPG key ID: 0EA1BC97D0AB076E
9 changed files with 108 additions and 127 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/data/portfolio.ts → src/data/create-portfolio.ts
View file

@ -20,8 +20,9 @@ import { photosTimelineElement } from './projects/photos';
import { platformGameTimelineElement } from './projects/platform-game';
import { sdf2dTimelineElement } from './projects/sdf2d';
import { towersTimelineElement } from './projects/towers';
import { CV, Email, GitHubLink, LinkedIn } from './shared';
export const create = (): Array<PageElement> => [
export const createPortfolio = (): Array<PageElement> => [
new Main(
new PageBackground(1, 1),
new PageHeader({
@ -62,12 +63,12 @@ export const create = (): Array<PageElement> => [
}),
Footer({
title: `Learn more`,
curriculaVitae: [{ name: `Download my CV`, url: cvEnglish }],
email: `andras@schmelczer.dev`,
linkedInLink: `https://www.linkedin.com/in/andras-schmelczer`,
linkedInText: 'Find me on LinkedIn',
gitHubLink: `https://github.com/schmelczer`,
gitHubText: 'Find me on GitHub',
links: [
CV(cvEnglish),
GitHubLink('https://github.com/schmelczer'),
LinkedIn('https://www.linkedin.com/in/andras-schmelczer'),
Email('mailto:andras@schmelczer.dev'),
],
lastEditText: `Last modified on `,
})
),

22
src/data/shared.ts
View file

@ -1,16 +1,24 @@
import cvIcon from '../../static/icons/cv.svg';
import githubIcon from '../../static/icons/github.svg';
import emailIcon from '../../static/icons/email.svg';
import gitHubIcon from '../../static/icons/github.svg';
import linkedInIcon from '../../static/icons/linkedin.svg';
import openIcon from '../../static/icons/open.svg';
import packageIcon from '../../static/icons/package.svg';
import pythonIcon from '../../static/icons/python.svg';
import youtubeIcon from '../../static/icons/youtube.svg';
import { ImageAnchorFactory } from '../page/basics/image-anchor/image-anchor.html';
import { ImageButtonFactory } from '../page/basics/image-button/image-button.html';
export const GitHub = ImageAnchorFactory(githubIcon, 'Open on GitHub');
export const NPM = ImageAnchorFactory(packageIcon, 'Open on npm');
export const PyPi = ImageAnchorFactory(pythonIcon, 'Open on PyPi');
export const Open = ImageAnchorFactory(openIcon, 'Open in new tab');
export const Thesis = ImageAnchorFactory(cvIcon, 'Download thesis', {
export const GitHub = ImageButtonFactory(gitHubIcon, 'Open on GitHub');
export const NPM = ImageButtonFactory(packageIcon, 'Open on npm');
export const PyPi = ImageButtonFactory(pythonIcon, 'Open on PyPi');
export const Open = ImageButtonFactory(openIcon, 'Open in new tab');
export const Thesis = ImageButtonFactory(cvIcon, 'Download thesis', {
shouldDownload: true,
});
export const Youtube = ImageAnchorFactory(youtubeIcon, 'Open on YouTube');
export const Youtube = ImageButtonFactory(youtubeIcon, 'Open on YouTube');
export const CV = ImageAnchorFactory(cvIcon, 'Download my CV');
export const GitHubLink = ImageAnchorFactory(gitHubIcon, 'Find me on GitHub');
export const LinkedIn = ImageAnchorFactory(linkedInIcon, 'Find me on LinkedIn');
export const Email = ImageAnchorFactory(emailIcon, 'andras@schmelczer.dev');

2
src/index.ts
View file

@ -8,7 +8,7 @@ import '../static/no-change/favicons/favicon.ico';
import '../static/no-change/favicons/site.webmanifest';
import '../static/no-change/og-image.jpg';
import '../static/no-change/robots.txt';
import { create as createPortfolio } from './data/portfolio';
import { createPortfolio } from './data/create-portfolio';
import { addSupportForTabNavigation } from './helper/add-support-for-tab-navigation';
import { removeUnnecessaryOutlines } from './helper/remove-unnecessary-outlines';
import { scrollToFragment } from './helper/scroll-to-fragment';

13
src/page/basics/image-anchor/image-anchor.html.ts
View file

@ -9,15 +9,10 @@ export const ImageAnchorFactory =
) =>
(href: url) =>
`
<a class="image-anchor"
href="${href}"
rel="noopener"
target="_blank"
${shouldDownload ? 'download' : ''}
>
<div class="svg-container">
<div class="image-anchor">
${svg}
<a rel="noopener" target="_blank" href="${href}" ${
shouldDownload ? 'download' : ''
}>${title}</a>
</div>
<p>${title}</p>
</a>
`;

30
src/page/basics/image-anchor/image-anchor.scss
View file

@ -1,25 +1,21 @@
@use '../../../style/mixins' as *;
.image-anchor {
@include image-button(var(--icon-size));
display: flex;
align-items: center;
.svg-container {
position: relative;
margin: auto;
@include square(var(--icon-size));
svg {
stroke: var(--normal-text-color);
transition: stroke var(--transition-time), transform var(--transition-time);
}
&:not(:first-child) {
padding-top: var(--line-height);
}
p {
@include main-font();
padding-bottom: var(--small-margin);
font-size: 0.9rem;
font-style: italic;
padding: 0 8px 8px 8px;
text-align: center;
svg {
@include square(var(--icon-size));
margin-right: calc(var(--small-margin) / 2);
stroke: var(--normal-text-color);
}
a {
@include link;
font-size: 1.4rem;
}
}

23
src/page/basics/image-button/image-button.html.ts Normal file
View file

@ -0,0 +1,23 @@
import { url } from '../../../types/url';
import './image-button.scss';
export const ImageButtonFactory =
(
svg: string,
title: string,
{ shouldDownload = false }: { shouldDownload?: boolean } = {}
) =>
(href: url) =>
`
<a class="image-button"
href="${href}"
rel="noopener"
target="_blank"
${shouldDownload ? 'download' : ''}
>
<div class="svg-container">
${svg}
</div>
<p>${title}</p>
</a>
`;

25
src/page/basics/image-button/image-button.scss Normal file
View file

@ -0,0 +1,25 @@
@use '../../../style/mixins' as *;
.image-button {
@include image-button(var(--icon-size));
.svg-container {
position: relative;
margin: auto;
@include square(var(--icon-size));
svg {
stroke: var(--normal-text-color);
transition: stroke var(--transition-time), transform var(--transition-time);
}
}
p {
@include main-font();
padding-bottom: var(--small-margin);
font-size: 0.9rem;
font-style: italic;
padding: 0 8px 8px 8px;
text-align: center;
}
}

58
src/page/footer/footer.html.ts
View file

@ -1,9 +1,4 @@
import cvIcon from '../../../static/icons/cv.svg';
import emailIcon from '../../../static/icons/email.svg';
import githubIcon from '../../../static/icons/github.svg';
import linkedinIcon from '../../../static/icons/linkedin.svg';
import { html } from '../../types/html';
import { url } from '../../types/url';
import './footer.scss';
// @ts-ignore: injected by webpack
@ -11,54 +6,25 @@ const LAST_EDIT = new Date(__CURRENT_DATE__);
export const Footer = ({
title,
email,
curriculaVitae,
linkedInLink,
linkedInText,
gitHubLink,
gitHubText,
links,
lastEditText,
}: {
title: string;
email: string;
curriculaVitae: Array<{
name: string;
url: url;
}>;
linkedInLink: url;
linkedInText: string;
gitHubLink: url;
gitHubText: string;
links: Array<html>;
lastEditText: string;
}): html => `
<footer id="footer">
<h2>${title}</h2>
<ul>
${curriculaVitae
.map(
(cv) => `
<li>
${cvIcon}
<a rel="noopener" href="${cv.url}" download>${cv.name}</a>
</li>
`
)
.join('')}
<li>
${githubIcon}
<a rel="noopener" target="_blank" href="${gitHubLink}">${gitHubText}</a>
</li>
<li>
${linkedinIcon}
<a rel="noopener" target="_blank" href="${linkedInLink}">${linkedInText}</a>
</li>
<li>
${emailIcon}
<a rel="noopener" href="mailto:${email}">${email}</a>
</li>
</ul>
<aside class="other">
<p>${lastEditText} <time datetime="${LAST_EDIT.toISOString()}">${LAST_EDIT.toLocaleDateString()}</time></p>
<div class="links">
${links.join('')}
</div>
<aside>
<p>
${lastEditText}
<time datetime="${LAST_EDIT.toISOString()}">${LAST_EDIT.toLocaleDateString()}</time>
</p>
</aside>
</footer>
`;

47
src/page/footer/footer.scss
View file

@ -1,57 +1,24 @@
@use '../../style/mixins' as *;
footer#footer {
#footer {
text-align: center;
margin-top: var(--large-margin);
a {
@include link;
}
h2 {
@include title-font();
}
ul {
margin-top: var(--normal-margin);
list-style: none;
.links {
margin: var(--normal-margin) 0 0 var(--normal-margin);
display: inline-block;
text-align: left;
li {
@include center-children();
justify-content: flex-start;
&:not(:first-child) {
padding-top: var(--line-height);
}
svg {
@include square(var(--icon-size));
margin-right: calc(var(--small-margin) / 2);
stroke: var(--normal-text-color);
}
a {
font-size: 1.4rem;
}
}
}
aside.other {
@include center-children();
flex-direction: column;
margin: var(--large-margin) auto 0 auto;
padding-bottom: var(--line-height);
width: var(--body-width);
aside {
margin: var(--large-margin) auto var(--line-height) auto;
p {
display: inline;
&,
* {
@include special-text-font();
color: var(--normal-text-color);
}
@include special-text-font();
color: var(--normal-text-color);
opacity: 0.75;
}
}