Footer styles converted to sprinkles in vanilla extract
This commit is contained in:
@ -1,19 +1,24 @@
|
||||
import { style } from '@vanilla-extract/css'
|
||||
import { radialGradient, transparentize } from 'polished'
|
||||
import { globalStyle, style } from '@vanilla-extract/css'
|
||||
import { radialGradient, rgba, transparentize } from 'polished'
|
||||
import { sprinkles } from '../styles/sprinkles.css'
|
||||
import {
|
||||
breakpoints,
|
||||
colors,
|
||||
mediaAt,
|
||||
menuBackground,
|
||||
transparent,
|
||||
vars,
|
||||
} from '../styles/vars.css'
|
||||
|
||||
export const siteFooterStyle = style({
|
||||
fontSize: '0.9em',
|
||||
padding: '2em 0.8em 0',
|
||||
color: vars.color.menuLink,
|
||||
export const siteFooterClass = style([
|
||||
sprinkles({
|
||||
fontSize: { mobile: 'base', desktop: 'sm' },
|
||||
paddingX: '2x',
|
||||
paddingTop: '1x',
|
||||
color: 'menuLink',
|
||||
}),
|
||||
|
||||
...radialGradient({
|
||||
radialGradient({
|
||||
colorStops: [
|
||||
`${menuBackground} 56%`,
|
||||
`${transparentize(0.4, menuBackground)} 100%`,
|
||||
@ -21,10 +26,9 @@ export const siteFooterStyle = style({
|
||||
extent: '160% 100% at 100% 100%',
|
||||
fallback: transparent,
|
||||
}),
|
||||
|
||||
'@media': {
|
||||
[mediaAt(breakpoints.m)]: {
|
||||
...radialGradient({
|
||||
{
|
||||
'@media': {
|
||||
[mediaAt(breakpoints.m)]: radialGradient({
|
||||
colorStops: [
|
||||
`${menuBackground} 48%`,
|
||||
`${transparentize(1, menuBackground)} 100%`,
|
||||
@ -33,8 +37,127 @@ export const siteFooterStyle = style({
|
||||
fallback: transparent,
|
||||
}),
|
||||
},
|
||||
[mediaAt(breakpoints.l)]: {
|
||||
fontSize: '0.8em',
|
||||
},
|
||||
])
|
||||
|
||||
export const headerClass = sprinkles({
|
||||
fontWeight: 'bold',
|
||||
fontSize: 'base',
|
||||
color: 'menuLink',
|
||||
margin: 'none',
|
||||
lineHeight: '3x',
|
||||
marginBottom: '1x',
|
||||
})
|
||||
|
||||
export const sectionListsClass = style([
|
||||
sprinkles({
|
||||
display: 'grid',
|
||||
justifyItems: { mobile: 'center', desktop: 'start' },
|
||||
textAlign: { mobile: 'center', desktop: 'start' },
|
||||
maxWidth: 'max',
|
||||
columnGap: '3x',
|
||||
margin: 'auto',
|
||||
}),
|
||||
{
|
||||
'@media': {
|
||||
[mediaAt(breakpoints.l)]: {
|
||||
gridTemplateColumns: 'auto auto auto',
|
||||
},
|
||||
},
|
||||
},
|
||||
])
|
||||
|
||||
export const sectionListSectionClass = sprinkles({
|
||||
marginY: '3x',
|
||||
})
|
||||
|
||||
export const noWrapClass = sprinkles({
|
||||
whiteSpace: 'nowrap',
|
||||
})
|
||||
|
||||
export const listUlClass = sprinkles({
|
||||
listStyle: 'none',
|
||||
padding: 'none',
|
||||
margin: 'none',
|
||||
})
|
||||
|
||||
export const listLiClass = sprinkles({
|
||||
marginLeft: '1x',
|
||||
})
|
||||
|
||||
export const nestedListLiClass = style([
|
||||
listLiClass,
|
||||
sprinkles({
|
||||
fontSize: 'sm',
|
||||
}),
|
||||
])
|
||||
|
||||
export const socialLinkLabelClass = sprinkles({
|
||||
paddingX: '1x',
|
||||
})
|
||||
|
||||
export const svgClass = style({
|
||||
fill: vars.color.menuLink,
|
||||
height: '1em',
|
||||
width: '1em',
|
||||
})
|
||||
|
||||
export const strokeSvgClass = style([
|
||||
svgClass,
|
||||
{
|
||||
stroke: vars.color.menuLink,
|
||||
strokeWidth: '2px',
|
||||
},
|
||||
])
|
||||
|
||||
export const socialLinkClass = sprinkles({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: {
|
||||
mobile: 'center',
|
||||
desktop: 'start',
|
||||
},
|
||||
})
|
||||
|
||||
export const bottomLineClass = sprinkles({
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
marginX: 'auto',
|
||||
marginBottom: '1x',
|
||||
marginTop: '2x',
|
||||
maxWidth: 'max',
|
||||
})
|
||||
|
||||
export const dateClass = sprinkles({
|
||||
fontSize: 'xs',
|
||||
whiteSpace: 'nowrap',
|
||||
})
|
||||
|
||||
export const boldClass = sprinkles({
|
||||
fontWeight: 'bold',
|
||||
})
|
||||
|
||||
export const hrClass = style([
|
||||
sprinkles({
|
||||
marginY: '2x',
|
||||
marginX: '1x',
|
||||
}),
|
||||
{
|
||||
color: rgba(colors.midnightBlue, 0.14),
|
||||
borderWidth: '1px 0 0',
|
||||
},
|
||||
])
|
||||
|
||||
export const latestPostsClass = style({})
|
||||
|
||||
globalStyle(`${siteFooterClass} a`, {
|
||||
color: vars.color.menuLink,
|
||||
})
|
||||
|
||||
globalStyle(`${siteFooterClass} a:hover`, {
|
||||
color: vars.color.menuLinkHover,
|
||||
})
|
||||
|
||||
globalStyle(`${latestPostsClass} li a:visited:not(:hover)`, {
|
||||
color: vars.color.linkVisited,
|
||||
})
|
||||
|
||||
@ -2,61 +2,79 @@
|
||||
import { format } from 'date-fns'
|
||||
import type { PostContent } from 'src/routes/blog/_content'
|
||||
import SvgIcon from './SvgIcon.svelte'
|
||||
import { siteFooterStyle } from './Footer.css'
|
||||
import {
|
||||
boldClass,
|
||||
bottomLineClass,
|
||||
dateClass,
|
||||
headerClass,
|
||||
hrClass,
|
||||
latestPostsClass,
|
||||
listLiClass,
|
||||
listUlClass,
|
||||
nestedListLiClass,
|
||||
noWrapClass,
|
||||
sectionListsClass,
|
||||
sectionListSectionClass,
|
||||
siteFooterClass,
|
||||
socialLinkClass,
|
||||
socialLinkLabelClass,
|
||||
strokeSvgClass,
|
||||
svgClass,
|
||||
} from './Footer.css'
|
||||
|
||||
export let latestPosts: PostContent[]
|
||||
</script>
|
||||
|
||||
<footer class="site-footer navigation-theme {siteFooterStyle}">
|
||||
<div class="lists">
|
||||
<section class="site-map">
|
||||
<ul>
|
||||
<li>
|
||||
<footer class="site-footer navigation-theme {siteFooterClass}">
|
||||
<div class="lists {sectionListsClass}">
|
||||
<section class="site-map {sectionListSectionClass}">
|
||||
<ul class={listUlClass}>
|
||||
<li class={listLiClass}>
|
||||
<a href="/">Introduction</a>
|
||||
</li>
|
||||
<li>
|
||||
<li class={listLiClass}>
|
||||
<a href="/portfolio">Portfolio</a>
|
||||
<ul>
|
||||
<li>
|
||||
<ul class={listUlClass}>
|
||||
<li class={nestedListLiClass}>
|
||||
<a href="/portfolio#personal-information">About</a>
|
||||
</li>
|
||||
<li>
|
||||
<li class={nestedListLiClass}>
|
||||
<a href="/portfolio#skills">Skills</a>
|
||||
</li>
|
||||
<li>
|
||||
<li class={nestedListLiClass}>
|
||||
<a href="/portfolio#work-history">Work History</a>
|
||||
</li>
|
||||
<li>
|
||||
<li class={nestedListLiClass}>
|
||||
<a href="/portfolio#projects">Projects</a>
|
||||
</li>
|
||||
<li>
|
||||
<li class={nestedListLiClass}>
|
||||
<a href="/portfolio#education">Education</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="latest-posts">
|
||||
<h3>
|
||||
<section class="latest-posts {sectionListSectionClass} {latestPostsClass}">
|
||||
<h3 class={headerClass}>
|
||||
<a href="/blog">Latest posts</a>
|
||||
</h3>
|
||||
<ul>
|
||||
<ul class={listUlClass}>
|
||||
{#each latestPosts as post}
|
||||
<li>
|
||||
<li class={listLiClass}>
|
||||
<a rel="prefetch" href="/blog/{post.slug}">
|
||||
<span>{post.title}</span>
|
||||
<span class="date">
|
||||
<time class="date {dateClass}" datetime={post.date}>
|
||||
- {format(new Date(post.date), 'do MMM, yyyy')}
|
||||
</span>
|
||||
</time>
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
<hr />
|
||||
<section class="subscribe">
|
||||
<hr class={hrClass} />
|
||||
<section class="subscribe {boldClass}">
|
||||
<a href="/feed.xml" title="RSS feed" class="rss">
|
||||
Subscribe
|
||||
<SvgIcon name="rss" className="svg-icon" />
|
||||
<SvgIcon name="rss" className={svgClass} />
|
||||
</a>
|
||||
<a
|
||||
href="/feed.json"
|
||||
@ -64,215 +82,68 @@
|
||||
class="json-feed"
|
||||
aria-label="Subscribe with JSON feed"
|
||||
>
|
||||
<SvgIcon name="json-feed" className="svg-icon" />
|
||||
<SvgIcon name="json-feed" className={svgClass} />
|
||||
</a>
|
||||
</section>
|
||||
</section>
|
||||
<section class="socials">
|
||||
<h3>Contact</h3>
|
||||
<ul class="social-links">
|
||||
<li class="email">
|
||||
<a href="mailto: michalvankosk@gmail.com" title="E-mail address">
|
||||
<SvgIcon name="mail" className="svg-icon" />
|
||||
<span>michalvankosk@gmail.com</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="twitter">
|
||||
<a href="https://twitter.com/michalvankodev" title="Twitter profile">
|
||||
<SvgIcon name="twitter" className="svg-icon" />
|
||||
<span>Twitter</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="github">
|
||||
<a href="https://github.com/michalvankodev" title="Github profile">
|
||||
<SvgIcon name="github" className="svg-icon" />
|
||||
<span>Github</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="twitch">
|
||||
<a href="https://twitch.tv/michalvankodev" title="Twitch profile">
|
||||
<SvgIcon name="twitch" className="svg-icon" />
|
||||
<span>Twitch</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="instagram">
|
||||
<section class="socials {sectionListSectionClass}">
|
||||
<h3 class={headerClass}>Contact</h3>
|
||||
<ul class="social-links {listUlClass}">
|
||||
<li class="email {listLiClass}">
|
||||
<a
|
||||
class={socialLinkClass}
|
||||
href="mailto: michalvankosk@gmail.com"
|
||||
title="E-mail address"
|
||||
>
|
||||
<SvgIcon name="mail" className={svgClass} />
|
||||
<span class={socialLinkLabelClass}>michalvankosk@gmail.com</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="twitter {listLiClass}">
|
||||
<a
|
||||
class={socialLinkClass}
|
||||
href="https://twitter.com/michalvankodev"
|
||||
title="Twitter profile"
|
||||
>
|
||||
<SvgIcon name="twitter" className={strokeSvgClass} />
|
||||
<span class={socialLinkLabelClass}>Twitter</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="github {listLiClass}">
|
||||
<a
|
||||
class={socialLinkClass}
|
||||
href="https://github.com/michalvankodev"
|
||||
title="Github profile"
|
||||
>
|
||||
<SvgIcon name="github" className={strokeSvgClass} />
|
||||
<span class={socialLinkLabelClass}>Github</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="twitch {listLiClass}">
|
||||
<a
|
||||
class={socialLinkClass}
|
||||
href="https://twitch.tv/michalvankodev"
|
||||
title="Twitch profile"
|
||||
>
|
||||
<SvgIcon name="twitch" className={svgClass} />
|
||||
<span class={socialLinkLabelClass}>Twitch</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="instagram {listLiClass}">
|
||||
<a
|
||||
class={socialLinkClass}
|
||||
href="https://www.instagram.com/michalvankodev/"
|
||||
title="Instagram profile"
|
||||
>
|
||||
<SvgIcon name="instagram" className="svg-icon" />
|
||||
<span>Instagram</span>
|
||||
<SvgIcon name="instagram" className={svgClass} />
|
||||
<span class={socialLinkLabelClass}>Instagram</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
<footer class="bottom-line">
|
||||
<span class="no-wrap">Created by @michalvankodev</span>
|
||||
<span class="no-wrap">© 2020</span>
|
||||
<footer class={bottomLineClass}>
|
||||
<span class={noWrapClass}>Created by @michalvankodev</span>
|
||||
<span class={noWrapClass}>© 2020</span>
|
||||
</footer>
|
||||
</footer>
|
||||
|
||||
<style lang="less">
|
||||
@import '../styles/variables.module.less';
|
||||
|
||||
/* .site-footer {
|
||||
font-size: 0.9em;
|
||||
padding: 2em 0.8em 0em;
|
||||
color: @menu-link-color;
|
||||
|
||||
background: radial-gradient(
|
||||
160% 100% at 100% 100%,
|
||||
@menu-bg-color 56%,
|
||||
fade(@menu-bg-color, 0) 100%
|
||||
);
|
||||
|
||||
@media (min-width: @media-m) {
|
||||
background: radial-gradient(
|
||||
140% 100% at 100% 100%,
|
||||
@menu-bg-color 48%,
|
||||
fade(@menu-bg-color, 0) 100%
|
||||
);
|
||||
}
|
||||
|
||||
@media (min-width: @media-l) {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
} */
|
||||
|
||||
h3 {
|
||||
font: inherit;
|
||||
font-weight: bold;
|
||||
font-size: 1.15em;
|
||||
text-shadow: inherit;
|
||||
color: @menu-link-color;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.lists {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
max-width: @media-max;
|
||||
column-gap: 1em;
|
||||
margin: auto;
|
||||
|
||||
@media only screen and (min-width: @media-l) {
|
||||
grid-template-columns: auto auto auto;
|
||||
justify-items: start;
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
|
||||
.lists > section {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.no-wrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.lists ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.lists li {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.lists li li {
|
||||
font-size: 0.9em;
|
||||
|
||||
@media only screen and (min-width: @media-l) {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
|
||||
.social-links a span {
|
||||
/* display: none; */
|
||||
padding: 0 0.4em;
|
||||
}
|
||||
|
||||
.email :global(svg) {
|
||||
fill: @menu-link-color;
|
||||
}
|
||||
|
||||
.twitter :global(svg) {
|
||||
stroke: @menu-link-color;
|
||||
stroke-width: 2px;
|
||||
fill: @menu-link-color;
|
||||
}
|
||||
|
||||
.github :global(svg) {
|
||||
stroke: @menu-link-color;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
.twitch :global(svg),
|
||||
.twitch :global(svg rect) {
|
||||
fill: @menu-link-color;
|
||||
}
|
||||
|
||||
.instagram :global(svg) {
|
||||
fill: @menu-link-color;
|
||||
}
|
||||
|
||||
.rss :global(svg) {
|
||||
fill: @menu-link-color;
|
||||
}
|
||||
|
||||
.json-feed :global(svg) {
|
||||
fill: @menu-link-color;
|
||||
}
|
||||
|
||||
:global(.svg-icon) {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
.social-links a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@media only screen and (min-width: @media-l) {
|
||||
justify-content: start;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 1em auto 0.4em;
|
||||
max-width: @media-max;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 0.7em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.subscribe {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
hr {
|
||||
color: fade(@menu-link-color, 14%);
|
||||
margin: 0.75em 0.2em;
|
||||
border-width: 1px 0 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: @menu-link-color;
|
||||
|
||||
&:hover {
|
||||
color: @menu-link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.latest-posts li a:visited:not(:hover) {
|
||||
color: @link-visited-color;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user