Compare commits
No commits in common. "main" and "gh-pages" have entirely different histories.
41 changed files with 106 additions and 7285 deletions
43
.eleventy.js
43
.eleventy.js
|
|
@ -1,43 +0,0 @@
|
|||
const fs = require('fs')
|
||||
|
||||
module.exports = function (eleventyConfig) {
|
||||
eleventyConfig.on('eleventy.before', async () => {
|
||||
const cssSrc = './src/style/style.css'
|
||||
const cssDest = './dist/style.css'
|
||||
|
||||
fs.readFile(cssSrc, (err, css) => {
|
||||
require('postcss')([
|
||||
require('postcss-import-ext-glob'),
|
||||
require('postcss-import'),
|
||||
require('postcss-preset-env'),
|
||||
require('cssnano'),
|
||||
])
|
||||
.process(css, {from: cssSrc, to: cssDest})
|
||||
.then(res => {
|
||||
fs.writeFile(cssDest, res.css, () => true)
|
||||
})
|
||||
})
|
||||
|
||||
await require('esbuild').build({
|
||||
entryPoints: ['src/js/main.js'],
|
||||
bundle: true,
|
||||
minify: true,
|
||||
target: 'es2020',
|
||||
outfile: 'dist/main.js',
|
||||
})
|
||||
.then(() => console.log('🧳 esbuild done'))
|
||||
.catch(() => process.exit(1))
|
||||
})
|
||||
|
||||
eleventyConfig.addWatchTarget('./src/style/')
|
||||
eleventyConfig.addWatchTarget('./src/js/')
|
||||
|
||||
eleventyConfig.addPlugin(require('eleventy-plugin-automatic-noopener'), {
|
||||
noreferrer: true,
|
||||
})
|
||||
|
||||
eleventyConfig.addPassthroughCopy('./src/portfolio/')
|
||||
eleventyConfig.addPassthroughCopy('./src/fontawesome/')
|
||||
|
||||
return {dir: {input: 'src', output: 'dist'}}
|
||||
}
|
||||
33
.github/workflows/build.yml
vendored
33
.github/workflows/build.yml
vendored
|
|
@ -1,33 +0,0 @@
|
|||
name: Build Eleventy
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-20.04
|
||||
|
||||
strategy:
|
||||
matrix:
|
||||
node-version: [ 18.x ]
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
|
||||
- name: Use Node.js ${{ matrix.node-version }}
|
||||
uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: ${{ matrix.node-version }}
|
||||
|
||||
- name: Install dependencies & build
|
||||
run: |
|
||||
npm ci
|
||||
npm run build
|
||||
|
||||
- name: Deploy
|
||||
uses: peaceiris/actions-gh-pages@v3
|
||||
with:
|
||||
publish_dir: ./dist
|
||||
github_token: ${{ secrets.GITHUB_TOKEN }}
|
||||
3
.gitignore
vendored
3
.gitignore
vendored
|
|
@ -1,3 +0,0 @@
|
|||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
5
.idea/.gitignore
vendored
5
.idea/.gitignore
vendored
|
|
@ -1,5 +0,0 @@
|
|||
# Default ignored files
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
# Editor-based HTTP Client requests
|
||||
/httpRequests/
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
<component name="ProjectCodeStyleConfiguration">
|
||||
<code_scheme name="Project" version="173">
|
||||
<codeStyleSettings language="CSS">
|
||||
<indentOptions>
|
||||
<option name="INDENT_SIZE" value="2" />
|
||||
<option name="CONTINUATION_INDENT_SIZE" value="2" />
|
||||
<option name="TAB_SIZE" value="2" />
|
||||
</indentOptions>
|
||||
</codeStyleSettings>
|
||||
<codeStyleSettings language="HTML">
|
||||
<indentOptions>
|
||||
<option name="INDENT_SIZE" value="2" />
|
||||
<option name="CONTINUATION_INDENT_SIZE" value="2" />
|
||||
<option name="TAB_SIZE" value="2" />
|
||||
</indentOptions>
|
||||
</codeStyleSettings>
|
||||
<codeStyleSettings language="LESS">
|
||||
<indentOptions>
|
||||
<option name="CONTINUATION_INDENT_SIZE" value="2" />
|
||||
<option name="TAB_SIZE" value="2" />
|
||||
</indentOptions>
|
||||
</codeStyleSettings>
|
||||
<codeStyleSettings language="SASS">
|
||||
<indentOptions>
|
||||
<option name="CONTINUATION_INDENT_SIZE" value="2" />
|
||||
<option name="TAB_SIZE" value="2" />
|
||||
</indentOptions>
|
||||
</codeStyleSettings>
|
||||
<codeStyleSettings language="SCSS">
|
||||
<indentOptions>
|
||||
<option name="CONTINUATION_INDENT_SIZE" value="2" />
|
||||
<option name="TAB_SIZE" value="2" />
|
||||
</indentOptions>
|
||||
</codeStyleSettings>
|
||||
</code_scheme>
|
||||
</component>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<component name="ProjectCodeStyleConfiguration">
|
||||
<state>
|
||||
<option name="USE_PER_PROJECT_SETTINGS" value="true" />
|
||||
</state>
|
||||
</component>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="CssDialectMappings">
|
||||
<file url="PROJECT" dialect="PostCSS" />
|
||||
</component>
|
||||
</project>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<component name="InspectionProjectProfileManager">
|
||||
<profile version="1.0">
|
||||
<option name="myName" value="Project Default" />
|
||||
<inspection_tool class="SpellCheckingInspection" enabled="true" level="TYPO" enabled_by_default="true">
|
||||
<option name="processCode" value="false" />
|
||||
<option name="processLiterals" value="true" />
|
||||
<option name="processComments" value="true" />
|
||||
</inspection_tool>
|
||||
<inspection_tool class="Stylelint" enabled="true" level="ERROR" enabled_by_default="true" />
|
||||
</profile>
|
||||
</component>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="JavaScriptLibraryMappings">
|
||||
<includedPredefinedLibrary name="Node.js Core" />
|
||||
</component>
|
||||
</project>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/punkfairie.github.io.iml" filepath="$PROJECT_DIR$/.idea/punkfairie.github.io.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="WEB_MODULE" version="4">
|
||||
<component name="NewModuleRootManager">
|
||||
<content url="file://$MODULE_DIR$">
|
||||
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/temp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/tmp" />
|
||||
</content>
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="VcsDirectoryMappings">
|
||||
<mapping directory="" vcs="Git" />
|
||||
</component>
|
||||
</project>
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectTasksOptions" suppressed-tasks="SCSS" />
|
||||
</project>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="WebResourcesPaths">
|
||||
<contentEntries>
|
||||
<entry url="file://$PROJECT_DIR$">
|
||||
<entryData>
|
||||
<resourceRoots>
|
||||
<path value="file://$PROJECT_DIR$/dist" />
|
||||
</resourceRoots>
|
||||
</entryData>
|
||||
</entry>
|
||||
</contentEntries>
|
||||
</component>
|
||||
</project>
|
||||
0
.nojekyll
Normal file
0
.nojekyll
Normal file
|
|
@ -1,6 +0,0 @@
|
|||
{
|
||||
"extends": "@punkfairie/stylelint-config",
|
||||
"rules": {
|
||||
"scale-unlimited/declaration-strict-value": false
|
||||
}
|
||||
}
|
||||
93
index.html
Normal file
93
index.html
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Marley Rae</title>
|
||||
|
||||
<link rel="preconnect" href="https://fonts.bunny.net">
|
||||
<link href="https://fonts.bunny.net/css?family=delius-swash-caps:400" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
<script src="/main.js" type="module"></script>
|
||||
|
||||
<script src="/fontawesome/fontawesome.min.js" defer=""></script>
|
||||
<script src="/fontawesome/regular.min.js" defer=""></script>
|
||||
<script src="/fontawesome/solid.min.js" defer=""></script>
|
||||
<script src="/fontawesome/brands.min.js" defer=""></script>
|
||||
</head>
|
||||
<body class="Body">
|
||||
|
||||
<div class="Site">
|
||||
|
||||
<header class="Header">
|
||||
<h1 class="Header-title" id="headerTitle">Marley Rae</h1>
|
||||
<div class="Header-email">marleyrae@protonmail.com</div>
|
||||
</header>
|
||||
|
||||
<main class="Main">
|
||||
<div class="Carousel" id="carousel"><div class="Carousel-item"><img src="/portfolio/punkfairie.net.png" alt="Screenshot of punkfairie.net" class="Carousel-img"><div class="Carousel-title">
|
||||
<a href="https://github.com/punkfairie/punkfairie-site" target="_blank" rel="noreferrer"><i class="fa-brands fa-github" title="Github"></i></a> /
|
||||
|
||||
punkfairie.net/ <a href="https://punkfairie.net/" target="_blank" rel="noreferrer"><i class="fa-solid fa-link" title="Visit project"></i></a></div>
|
||||
|
||||
<p class="Carousel-text">A personal site; includes blinkie collections and a diary (blog).</p><p class="Carousel-text">Made with Eleventy, SCSS, and PostCSS.</p></div><div class="Carousel-item"><img src="/portfolio/saudade.png" alt="Screenshot of punkfairie.net" class="Carousel-img"><div class="Carousel-title">
|
||||
<a href="https://github.com/punkfairie/saudade" target="_blank" rel="noreferrer"><i class="fa-brands fa-github" title="Github"></i></a> /
|
||||
|
||||
saudade/ <a href="https://saudade.punkfairie.net/" target="_blank" rel="noreferrer"><i class="fa-solid fa-link" title="Visit project"></i></a></div>
|
||||
|
||||
<p class="Carousel-text">An archive of petz/babyz/oddballz sites.</p><p class="Carousel-text">Made with Gulp, PostCSS, and PostHTML.</p></div><div class="Carousel-item"><div class="Carousel-title">
|
||||
<a href="https://github.com/punkfairie/ed-safari" target="_blank" rel="noreferrer"><i class="fa-brands fa-github" title="Github"></i></a> /
|
||||
|
||||
ED Safari</div>
|
||||
|
||||
<p class="Carousel-text">Inspired by ED Scout; an exploration tool for the game Elite Dangerous</p><p class="Carousel-text">Made with Electron, Typescript, and Jest.</p></div><div class="Carousel-item"><div class="Carousel-title">
|
||||
<a href="https://github.com/punkfairie/codecademy" target="_blank" rel="noreferrer"><i class="fa-brands fa-github" title="Github"></i></a> /
|
||||
|
||||
Codecademy Exercises</div>
|
||||
|
||||
<p class="Carousel-text">Various Codecademy exercises.</p></div><div class="Carousel-item"><div class="Carousel-title">
|
||||
<a href="https://github.com/punkfairie/odin-rock-paper-scissors" target="_blank" rel="noreferrer"><i class="fa-brands fa-github" title="Github"></i></a> /
|
||||
|
||||
Odin: Rock, Paper, Scissors</div>
|
||||
|
||||
<p class="Carousel-text">The Odin Project exercise.</p></div><div class="Carousel-item"><img src="/portfolio/results-summary-component.png" alt="Screenshot of punkfairie.net" class="Carousel-img"><div class="Carousel-title">
|
||||
<a href="https://github.com/punkfairie/frontend-mentor/tree/main/results-summary-component" target="_blank" rel="noreferrer"><i class="fa-brands fa-github" title="Github"></i></a> /
|
||||
|
||||
Frontend Mentor: Results Summary/ <a href="https://frontend-mentor-gold-five.vercel.app/" target="_blank" rel="noreferrer"><i class="fa-solid fa-link" title="Visit project"></i></a></div>
|
||||
|
||||
<p class="Carousel-text">Exercise for Frontend Mentor.</p><p class="Carousel-text">Made with Vite and PostCSS.</p></div><div class="Carousel-item"><div class="Carousel-title">
|
||||
<a href="https://github.com/punkfairie/frontend-mentor/tree/main/interactive-rating-component" target="_blank" rel="noreferrer"><i class="fa-brands fa-github" title="Github"></i></a> /
|
||||
|
||||
Frontend Mentor: Interactive Rating Component</div>
|
||||
|
||||
<p class="Carousel-text">Exercise for Frontend Mentor.</p><p class="Carousel-text">Made with Vite, Typescript, and Vue.js.</p></div><div class="Carousel-item"><img src="/portfolio/product-preview-card-component.png" alt="Screenshot of punkfairie.net" class="Carousel-img"><div class="Carousel-title">
|
||||
<a href="https://github.com/punkfairie/frontend-mentor/tree/main/product-preview-card-component" target="_blank" rel="noreferrer"><i class="fa-brands fa-github" title="Github"></i></a> /
|
||||
|
||||
Frontend Mentor: Product Preview Card/ <a href="https://product-preview-card-component-zeta-teal.vercel.app/" target="_blank" rel="noreferrer"><i class="fa-solid fa-link" title="Visit project"></i></a></div>
|
||||
|
||||
<p class="Carousel-text">Exercise for Frontend Mentor.</p><p class="Carousel-text">Made with Vite.</p></div><div class="Carousel-item"><div class="Carousel-title">
|
||||
<a href="https://github.com/punkfairie/elite-matrix" target="_blank" rel="noreferrer"><i class="fa-brands fa-github" title="Github"></i></a> /
|
||||
|
||||
Elite Matrix</div>
|
||||
|
||||
<p class="Carousel-text">A small JS/TS library for working with the Elite Dangerous color matrix.</p><p class="Carousel-text">Made with Typescript.</p></div></div>
|
||||
|
||||
<button class="Carousel-controls Carousel-controls--left" id="carousel-prev">
|
||||
<i class="fa-solid fa-chevron-left" title="Previous item"></i>
|
||||
</button>
|
||||
|
||||
<button class="Carousel-controls Carousel-controls--right" id="carousel-next">
|
||||
<i class="fa-solid fa-chevron-right" title="Next item"></i>
|
||||
</button>
|
||||
</main>
|
||||
|
||||
<footer class="Footer" id="footer">
|
||||
© 2023
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
12
main.js
Normal file
12
main.js
Normal file
File diff suppressed because one or more lines are too long
6653
package-lock.json
generated
6653
package-lock.json
generated
File diff suppressed because it is too large
Load diff
29
package.json
29
package.json
|
|
@ -1,29 +0,0 @@
|
|||
{
|
||||
"name": "punkfairie.github.io",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.html",
|
||||
"scripts": {
|
||||
"dev": "rm -rf dist && npx @11ty/eleventy --serve",
|
||||
"build": "rm -rf dist && npx @11ty/eleventy"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"@11ty/eleventy": "^2.0.1",
|
||||
"@punkfairie/stylelint-config": "^1.0.1",
|
||||
"circletype": "^2.3.0",
|
||||
"cssnano": "^6.0.1",
|
||||
"eleventy-plugin-automatic-noopener": "^2.0.2",
|
||||
"esbuild": "^0.18.11",
|
||||
"postcss": "^8.4.24",
|
||||
"postcss-import": "^15.1.0",
|
||||
"postcss-import-ext-glob": "^2.1.1",
|
||||
"postcss-preset-env": "^8.5.1",
|
||||
"stylelint": "^15.9.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@punkfairie/modern-css-reset": "^1.0.1"
|
||||
}
|
||||
}
|
||||
|
Before Width: | Height: | Size: 310 KiB After Width: | Height: | Size: 310 KiB |
|
Before Width: | Height: | Size: 260 KiB After Width: | Height: | Size: 260 KiB |
|
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 92 KiB |
|
Before Width: | Height: | Size: 160 KiB After Width: | Height: | Size: 160 KiB |
|
|
@ -1,74 +0,0 @@
|
|||
module.exports = [
|
||||
{
|
||||
img: 'punkfairie.net.png',
|
||||
github: 'https://github.com/punkfairie/punkfairie-site',
|
||||
title: 'punkfairie.net',
|
||||
live: 'https://punkfairie.net/',
|
||||
description: 'A personal site; includes blinkie collections and a diary (blog).',
|
||||
tech: 'Made with Eleventy, SCSS, and PostCSS.',
|
||||
},
|
||||
{
|
||||
img: 'saudade.png',
|
||||
github: 'https://github.com/punkfairie/saudade',
|
||||
title: 'saudade',
|
||||
live: 'https://saudade.punkfairie.net/',
|
||||
description: 'An archive of petz/babyz/oddballz sites.',
|
||||
tech: 'Made with Gulp, PostCSS, and PostHTML.',
|
||||
},
|
||||
{
|
||||
img: false,
|
||||
github: 'https://github.com/punkfairie/ed-safari',
|
||||
title: 'ED Safari',
|
||||
live: false,
|
||||
description: 'Inspired by ED Scout; an exploration tool for the game Elite Dangerous',
|
||||
tech: 'Made with Electron, Typescript, and Jest.',
|
||||
},
|
||||
{
|
||||
img: false,
|
||||
github: 'https://github.com/punkfairie/codecademy',
|
||||
title: 'Codecademy Exercises',
|
||||
live: false,
|
||||
description: 'Various Codecademy exercises.',
|
||||
tech: false,
|
||||
},
|
||||
{
|
||||
img: false,
|
||||
github: 'https://github.com/punkfairie/odin-rock-paper-scissors',
|
||||
title: 'Odin: Rock, Paper, Scissors',
|
||||
live: false,
|
||||
description: 'The Odin Project exercise.',
|
||||
tech: false,
|
||||
},
|
||||
{
|
||||
img: 'results-summary-component.png',
|
||||
github: 'https://github.com/punkfairie/frontend-mentor/tree/main/results-summary-component',
|
||||
title: 'Frontend Mentor: Results Summary',
|
||||
live: 'https://frontend-mentor-gold-five.vercel.app/',
|
||||
description: 'Exercise for Frontend Mentor.',
|
||||
tech: 'Made with Vite and PostCSS.',
|
||||
},
|
||||
{
|
||||
img: false,
|
||||
github: 'https://github.com/punkfairie/frontend-mentor/tree/main/interactive-rating-component',
|
||||
title: 'Frontend Mentor: Interactive Rating Component',
|
||||
live: false,
|
||||
description: 'Exercise for Frontend Mentor.',
|
||||
tech: 'Made with Vite, Typescript, and Vue.js.',
|
||||
},
|
||||
{
|
||||
img: 'product-preview-card-component.png',
|
||||
github: 'https://github.com/punkfairie/frontend-mentor/tree/main/product-preview-card-component',
|
||||
title: 'Frontend Mentor: Product Preview Card',
|
||||
live: 'https://product-preview-card-component-zeta-teal.vercel.app/',
|
||||
description: 'Exercise for Frontend Mentor.',
|
||||
tech: 'Made with Vite.',
|
||||
},
|
||||
{
|
||||
img: false,
|
||||
github: 'https://github.com/punkfairie/elite-matrix',
|
||||
title: 'Elite Matrix',
|
||||
live: false,
|
||||
description: 'A small JS/TS library for working with the Elite Dangerous color matrix.',
|
||||
tech: 'Made with Typescript.',
|
||||
},
|
||||
]
|
||||
|
|
@ -1,80 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Marley Rae</title>
|
||||
|
||||
<link rel="preconnect" href="https://fonts.bunny.net">
|
||||
<link href="https://fonts.bunny.net/css?family=delius-swash-caps:400"
|
||||
rel="stylesheet"/>
|
||||
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
<script src="/main.js" type="module"></script>
|
||||
|
||||
<script src="/fontawesome/fontawesome.min.js" defer></script>
|
||||
<script src="/fontawesome/regular.min.js" defer></script>
|
||||
<script src="/fontawesome/solid.min.js" defer></script>
|
||||
<script src="/fontawesome/brands.min.js" defer></script>
|
||||
</head>
|
||||
<body class="Body">
|
||||
|
||||
<div class="Site">
|
||||
|
||||
<header class="Header">
|
||||
<h1 class="Header-title" id="headerTitle">Marley Rae</h1>
|
||||
<div class="Header-email">marleyrae@protonmail.com</div>
|
||||
</header>
|
||||
|
||||
<main class="Main">
|
||||
<div class="Carousel" id="carousel">
|
||||
{%- for project in portfolio -%}
|
||||
<div class="Carousel-item">
|
||||
{%- if project.img -%}
|
||||
<img src="/portfolio/{{ project.img }}"
|
||||
alt="Screenshot of punkfairie.net" class="Carousel-img">
|
||||
{%- endif -%}
|
||||
|
||||
|
||||
<div class="Carousel-title">
|
||||
<a href="{{ project.github }}" target="_blank"><i
|
||||
class="fa-brands fa-github" title="Github"></i></a> /
|
||||
|
||||
{{ project.title }}
|
||||
|
||||
{%- if project.live -%}
|
||||
/ <a href="{{ project.live }}" target="_blank"><i
|
||||
class="fa-solid fa-link" title="Visit project"></i></a>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
|
||||
<p class="Carousel-text">{{ project.description }}</p>
|
||||
|
||||
{%- if project.tech -%}
|
||||
<p class="Carousel-text">{{ project.tech }}</p>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
|
||||
<button class="Carousel-controls Carousel-controls--left"
|
||||
id="carousel-prev">
|
||||
<i class="fa-solid fa-chevron-left" title="Previous item"></i>
|
||||
</button>
|
||||
|
||||
<button class="Carousel-controls Carousel-controls--right"
|
||||
id="carousel-next">
|
||||
<i class="fa-solid fa-chevron-right" title="Next item"></i>
|
||||
</button>
|
||||
</main>
|
||||
|
||||
<footer class="Footer" id="footer">
|
||||
© 2023
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
import CircleType from 'circletype'
|
||||
|
||||
new CircleType(document.getElementById('footer')).radius(250).dir(-1)
|
||||
new CircleType(document.getElementById('headerTitle')).radius(450)
|
||||
|
||||
const carousel = document.getElementById('carousel')
|
||||
const prevBtn = document.getElementById('carousel-prev')
|
||||
const nextBtn = document.getElementById('carousel-next')
|
||||
|
||||
const scroll = function (event) {
|
||||
const slideWidth = document.querySelector('.Carousel-item').clientWidth
|
||||
|
||||
if (event.target.id === 'carousel-next') {
|
||||
carousel.scrollLeft += slideWidth
|
||||
} else if (event.target.id === 'carousel-prev') {
|
||||
carousel.scrollLeft -= slideWidth
|
||||
}
|
||||
}
|
||||
|
||||
nextBtn.addEventListener('click', scroll)
|
||||
prevBtn.addEventListener('click', scroll)
|
||||
|
|
@ -1,96 +0,0 @@
|
|||
@layer components {
|
||||
.Carousel {
|
||||
display: flex;
|
||||
overflow: scroll;
|
||||
inline-size: 70%;
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.Carousel::-webkit-scrollbar {
|
||||
/* stylelint-disable plugin/use-logical-properties-and-values */
|
||||
width: 0;
|
||||
height: 0;
|
||||
/* stylelint-enable plugin/use-logical-properties-and-values */
|
||||
}
|
||||
|
||||
.Carousel-item {
|
||||
display: flex;
|
||||
flex: 1 0 100%;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
max-inline-size: 100vi;
|
||||
padding: 0 var(--space-s);
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line a11y/media-prefers-reduced-motion */
|
||||
.Carousel-img {
|
||||
padding: var(--space-3xs);
|
||||
border: var(--space-3xs) solid var(--c-pink);
|
||||
transition: border-color 500ms;
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line a11y/media-prefers-reduced-motion */
|
||||
.Carousel-img:hover, .Carousel-img:focus {
|
||||
border-color: var(--c-purple);
|
||||
transition: border-color 500ms;
|
||||
}
|
||||
|
||||
.Carousel-controls {
|
||||
--Carousel-controls-translateY: -70%;
|
||||
|
||||
flex-grow: 1;
|
||||
font-size: var(--t-step-2);
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
translate: 0 var(--Carousel-controls-translateY);
|
||||
}
|
||||
|
||||
@media (width <= 1000px) {
|
||||
.Carousel-controls {
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.Carousel-controls--left {
|
||||
order: -100;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.Carousel-controls--right {
|
||||
order: 100;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.Carousel-controls {
|
||||
transition: color 300ms;
|
||||
}
|
||||
|
||||
.Carousel-controls:hover, .Carousel-controls:focus {
|
||||
color: var(--c-purple);
|
||||
transition: color 300ms;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.Carousel-controls {
|
||||
transition: translate 300ms;
|
||||
}
|
||||
|
||||
.Carousel-controls--left:hover, .Carousel-controls--left:focus {
|
||||
transition: translate 300ms;
|
||||
translate: -0.25rem var(--Carousel-controls-translateY);
|
||||
}
|
||||
|
||||
.Carousel-controls--right:hover, .Carousel-controls--right:focus {
|
||||
transition: translate 300ms;
|
||||
translate: 0.25rem var(--Carousel-controls-translateY);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
@layer base {
|
||||
/* stylelint-disable a11y/media-prefers-reduced-motion */
|
||||
a {
|
||||
color: var(--c-pink);
|
||||
transition: color 300ms;
|
||||
}
|
||||
|
||||
a:hover, a:focus {
|
||||
color: var(--c-purple);
|
||||
transition: color 300ms;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
@layer layout {
|
||||
.Body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: 'Delius Swash Caps', handwriting, sans-serif;
|
||||
font-size: var(--t-step-0);
|
||||
background: var(--c-purple);
|
||||
background: linear-gradient(135deg, var(--c-purple) 0%, var(--c-pink) 100%);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
@layer layout {
|
||||
.Footer {
|
||||
flex-grow: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
@layer layout {
|
||||
.Header {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.Header-title {
|
||||
font-size: var(--t-step-5);
|
||||
}
|
||||
|
||||
.Header-email {
|
||||
font-size: var(--t-step--1);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
@layer layout {
|
||||
.Main {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
inline-size: 90%;
|
||||
transform: translateY(-3%);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
@layer layout {
|
||||
.Site {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: var(--c-neutral);
|
||||
/* stylelint-disable scale-unlimited/declaration-strict-value */
|
||||
border-radius: 50%;
|
||||
block-size: 90vb;
|
||||
inline-size: 95vb;
|
||||
/* stylelint-enable scale-unlimited/declaration-strict-value */
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
@layer reset, base, layout, components;
|
||||
|
||||
@import url('@punkfairie/modern-css-reset');
|
||||
@import url('theme.css');
|
||||
@import url('base.css');
|
||||
@import url('layout/Body.css');
|
||||
@import url('layout/Site.css');
|
||||
@import url('layout/Header.css');
|
||||
@import url('layout/Main.css');
|
||||
@import url('layout/Footer.css');
|
||||
@import url('Carousel.css');
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
/**
|
||||
* colors
|
||||
* type sizing
|
||||
* spacers
|
||||
*/
|
||||
|
||||
/* -------------------------------------------------------------------------- *\
|
||||
&colors
|
||||
\* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--c-pink: hsl(329deg 86% 70%);
|
||||
--c-purple: hsl(270deg 95% 75%);
|
||||
--c-neutral: hsl(220deg 16% 96%);
|
||||
|
||||
/* ------------------------------------------------------------------------ *\
|
||||
&type sizing
|
||||
\* ------------------------------------------------------------------------ */
|
||||
|
||||
/* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
|
||||
|
||||
--t-step--2: clamp(0.78rem, calc(0.77rem + 0.03vw), 0.80rem);
|
||||
--t-step--1: clamp(0.94rem, calc(0.92rem + 0.11vw), 1.00rem);
|
||||
--t-step-0: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem);
|
||||
--t-step-1: clamp(1.35rem, calc(1.28rem + 0.37vw), 1.56rem);
|
||||
--t-step-2: clamp(1.62rem, calc(1.50rem + 0.58vw), 1.95rem);
|
||||
--t-step-3: clamp(1.94rem, calc(1.77rem + 0.87vw), 2.44rem);
|
||||
--t-step-4: clamp(2.33rem, calc(2.08rem + 1.25vw), 3.05rem);
|
||||
--t-step-5: clamp(2.80rem, calc(2.45rem + 1.77vw), 3.82rem);
|
||||
|
||||
/* ------------------------------------------------------------------------ *\
|
||||
&spacers
|
||||
\* ------------------------------------------------------------------------ */
|
||||
|
||||
/* @link https://utopia.fyi/space/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
|
||||
|
||||
--space-3xs: clamp(0.31rem, calc(0.31rem + 0.00vw), 0.31rem);
|
||||
--space-2xs: clamp(0.56rem, calc(0.54rem + 0.11vw), 0.63rem);
|
||||
--space-xs: clamp(0.88rem, calc(0.85rem + 0.11vw), 0.94rem);
|
||||
--space-s: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem);
|
||||
--space-m: clamp(1.69rem, calc(1.62rem + 0.33vw), 1.88rem);
|
||||
--space-l: clamp(2.25rem, calc(2.16rem + 0.43vw), 2.50rem);
|
||||
--space-xl: clamp(3.38rem, calc(3.24rem + 0.65vw), 3.75rem);
|
||||
--space-2xl: clamp(4.50rem, calc(4.33rem + 0.87vw), 5.00rem);
|
||||
--space-3xl: clamp(6.75rem, calc(6.49rem + 1.30vw), 7.50rem);
|
||||
|
||||
/* One-up pairs */
|
||||
--space-3xs-2xs: clamp(0.31rem, calc(0.20rem + 0.54vw), 0.63rem);
|
||||
--space-2xs-xs: clamp(0.56rem, calc(0.43rem + 0.65vw), 0.94rem);
|
||||
--space-xs-s: clamp(0.88rem, calc(0.74rem + 0.65vw), 1.25rem);
|
||||
--space-s-m: clamp(1.13rem, calc(0.86rem + 1.30vw), 1.88rem);
|
||||
--space-m-l: clamp(1.69rem, calc(1.40rem + 1.41vw), 2.50rem);
|
||||
--space-l-xl: clamp(2.25rem, calc(1.73rem + 2.61vw), 3.75rem);
|
||||
--space-xl-2xl: clamp(3.38rem, calc(2.81rem + 2.83vw), 5.00rem);
|
||||
--space-2xl-3xl: clamp(4.50rem, calc(3.46rem + 5.22vw), 7.50rem);
|
||||
|
||||
/* Custom pairs */
|
||||
--space-s-l: clamp(1.13rem, calc(0.65rem + 2.39vw), 2.50rem);
|
||||
}
|
||||
1
style.css
Normal file
1
style.css
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue