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

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;
}
}