Footer styles converted to sprinkles in vanilla extract
This commit is contained in:
parent
4a69151413
commit
f259b7aa3f
1910
package-lock.json
generated
1910
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
19
package.json
19
package.json
@ -15,8 +15,9 @@
|
||||
"svgstore": "svgstore -o static/build/icons-sprite.svg src/svg/**.svg"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vanilla-extract/css": "^1.6.1",
|
||||
"@vanilla-extract/vite-plugin": "^2.1.1",
|
||||
"@vanilla-extract/css": "^1.6.3",
|
||||
"@vanilla-extract/sprinkles": "^1.3.1",
|
||||
"@vanilla-extract/vite-plugin": "^3.0.0",
|
||||
"classnames": "^2.3.1",
|
||||
"date-fns": "^2.25.0",
|
||||
"feed": "^4.2.2",
|
||||
@ -34,19 +35,19 @@
|
||||
"@types/classnames": "^2.3.1",
|
||||
"@types/node": "^16.10.2",
|
||||
"@types/ramda": "^0.27.45",
|
||||
"@typescript-eslint/eslint-plugin": "^4.33.0",
|
||||
"@typescript-eslint/parser": "^4.33.0",
|
||||
"eslint": "^7.32.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.3.1",
|
||||
"@typescript-eslint/parser": "^5.3.1",
|
||||
"eslint": "^8.2.0",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-svelte3": "^3.2.1",
|
||||
"less": "^4.1.2",
|
||||
"prettier": "~2.4.1",
|
||||
"prettier-plugin-svelte": "^2.4.0",
|
||||
"svelte": "^3.43.1",
|
||||
"svelte": "^3.44.1",
|
||||
"svelte-preprocess": "^4.9.8",
|
||||
"svgstore-cli": "^2.0.0",
|
||||
"svgstore-cli": "^2.0.1",
|
||||
"tslib": "^2.3.1",
|
||||
"typescript": "^4.4.3",
|
||||
"vite": "^2.6.3"
|
||||
"typescript": "^4.4.4",
|
||||
"vite": "^2.6.13"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -56,18 +56,18 @@ a {
|
||||
color: @link-color;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: @link-visited-color;
|
||||
}
|
||||
// &:visited {
|
||||
// color: @link-visited-color;
|
||||
// }
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
color: @link-hover-color;
|
||||
}
|
||||
|
||||
&:visited:hover {
|
||||
color: @link-visited-hover-color;
|
||||
}
|
||||
// &:visited:hover {
|
||||
// color: @link-visited-hover-color;
|
||||
// }
|
||||
}
|
||||
|
||||
main {
|
||||
|
||||
74
src/styles/sprinkles.css.ts
Normal file
74
src/styles/sprinkles.css.ts
Normal file
@ -0,0 +1,74 @@
|
||||
import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles'
|
||||
import { breakpoints, vars } from './vars.css'
|
||||
|
||||
const responsiveProperties = defineProperties({
|
||||
conditions: {
|
||||
mobile: {},
|
||||
tablet: { '@media': `screen and (min-width: ${breakpoints.m}px)` },
|
||||
desktop: { '@media': `screen and (min-width: ${breakpoints.l}px)` },
|
||||
},
|
||||
defaultCondition: 'mobile',
|
||||
properties: {
|
||||
display: ['none', 'flex', 'block', 'inline', 'inline-block', 'grid'],
|
||||
position: ['relative', 'absolute', 'fixed'],
|
||||
flexDirection: ['row', 'column'],
|
||||
flexWrap: ['wrap', 'nowrap'],
|
||||
flexShrink: [0],
|
||||
flexGrow: [0, 1],
|
||||
justifyContent: [
|
||||
'stretch',
|
||||
'start',
|
||||
'center',
|
||||
'end',
|
||||
'space-around',
|
||||
'space-between',
|
||||
],
|
||||
justifyItems: [
|
||||
'stretch',
|
||||
'start',
|
||||
'center',
|
||||
'end',
|
||||
'space-around',
|
||||
'space-between',
|
||||
],
|
||||
alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],
|
||||
textAlign: ['left', 'center', 'right', 'justify', 'start'],
|
||||
paddingTop: vars.space,
|
||||
paddingBottom: vars.space,
|
||||
paddingLeft: vars.space,
|
||||
paddingRight: vars.space,
|
||||
marginTop: vars.space,
|
||||
marginBottom: vars.space,
|
||||
marginRight: vars.space,
|
||||
marginLeft: vars.space,
|
||||
columnGap: vars.space,
|
||||
fontSize: vars.fontSize,
|
||||
fontFamily: vars.fontFamily,
|
||||
fontWeight: vars.fontWeight,
|
||||
lineHeight: vars.lineHeight,
|
||||
whiteSpace: ['normal', 'nowrap'],
|
||||
width: vars.width,
|
||||
maxWidth: vars.width,
|
||||
height: ['100vh', '100&'],
|
||||
listStyle: ['none'],
|
||||
},
|
||||
shorthands: {
|
||||
padding: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'],
|
||||
paddingX: ['paddingLeft', 'paddingRight'],
|
||||
paddingY: ['paddingTop', 'paddingBottom'],
|
||||
placeItems: ['justifyContent', 'alignItems'],
|
||||
typeSize: ['fontSize', 'lineHeight'],
|
||||
margin: ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'],
|
||||
marginX: ['marginLeft', 'marginRight'],
|
||||
marginY: ['marginTop', 'marginBottom'],
|
||||
},
|
||||
})
|
||||
|
||||
const colorProperties = defineProperties({
|
||||
properties: {
|
||||
color: vars.color,
|
||||
background: vars.color,
|
||||
},
|
||||
})
|
||||
|
||||
export const sprinkles = createSprinkles(responsiveProperties, colorProperties)
|
||||
@ -3,6 +3,7 @@ import {
|
||||
desaturate,
|
||||
lighten,
|
||||
mix,
|
||||
modularScale,
|
||||
saturate,
|
||||
tint,
|
||||
transparentize,
|
||||
@ -31,7 +32,30 @@ export function mediaAt(breakpoint: breakpoints) {
|
||||
return `screen and (min-width: ${breakpoint}px)`
|
||||
}
|
||||
|
||||
const createScale =
|
||||
(base: number, ratio: number, unit = 'em') =>
|
||||
(steps: number) =>
|
||||
`${modularScale(steps, base, ratio)}${unit}`
|
||||
|
||||
const spaceScale = createScale(0.2, 2)
|
||||
const fontSizeScale = createScale(1, 1.125)
|
||||
const lineHeightScale = createScale(1.05, 1.125)
|
||||
// const borderRadiusScale = createScale(1.5, 4)
|
||||
|
||||
export const vars = createGlobalTheme(':root', {
|
||||
space: {
|
||||
none: '0',
|
||||
auto: 'auto',
|
||||
'0x': spaceScale(0),
|
||||
'1x': spaceScale(1),
|
||||
'2x': spaceScale(2),
|
||||
'3x': spaceScale(3),
|
||||
'4x': spaceScale(4),
|
||||
'5x': spaceScale(5),
|
||||
'6x': spaceScale(6),
|
||||
'7x': spaceScale(7),
|
||||
'8x': spaceScale(8),
|
||||
},
|
||||
color: {
|
||||
articleText: desaturate(0.16, colors.midnightBlue),
|
||||
selection: tint(0.4, colors.pinky),
|
||||
@ -48,4 +72,40 @@ export const vars = createGlobalTheme(':root', {
|
||||
background: tint(0.7, colors.lightCyan),
|
||||
menuBackground,
|
||||
},
|
||||
fontFamily: {
|
||||
body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
|
||||
},
|
||||
fontSize: {
|
||||
xs: fontSizeScale(-2),
|
||||
sm: fontSizeScale(-1),
|
||||
base: fontSizeScale(0),
|
||||
xl: fontSizeScale(1),
|
||||
'2x': fontSizeScale(2),
|
||||
'3x': fontSizeScale(3),
|
||||
'4x': fontSizeScale(4),
|
||||
'5x': fontSizeScale(5),
|
||||
'6x': fontSizeScale(6),
|
||||
},
|
||||
lineHeight: {
|
||||
'0x': lineHeightScale(0),
|
||||
'1x': lineHeightScale(1),
|
||||
'2x': lineHeightScale(2),
|
||||
'3x': lineHeightScale(3),
|
||||
'4x': lineHeightScale(4),
|
||||
'5x': lineHeightScale(5),
|
||||
},
|
||||
fontWeight: {
|
||||
thin: 'thin',
|
||||
normal: 'normal',
|
||||
bold: 'bold',
|
||||
},
|
||||
width: {
|
||||
s: '400px',
|
||||
m: '700px',
|
||||
image: '800px',
|
||||
l: '1000px',
|
||||
max: '1140px',
|
||||
full: '100vw',
|
||||
parent: '100%',
|
||||
},
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user