Start work on carousel
This commit is contained in:
parent
537464db8a
commit
7c3fe3f8e6
6 changed files with 34 additions and 1 deletions
|
@ -36,5 +36,8 @@ module.exports = function (eleventyConfig) {
|
||||||
noreferrer: true,
|
noreferrer: true,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
eleventyConfig.addPassthroughCopy('./src/portfolio/')
|
||||||
|
eleventyConfig.addPassthroughCopy('./src/fontawesome/')
|
||||||
|
|
||||||
return {dir: {input: 'src', output: 'dist'}}
|
return {dir: {input: 'src', output: 'dist'}}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,3 +1,6 @@
|
||||||
{
|
{
|
||||||
"extends": "@punkfairie/stylelint-config"
|
"extends": "@punkfairie/stylelint-config",
|
||||||
|
"rules": {
|
||||||
|
"scale-unlimited/declaration-strict-value": false
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -24,7 +24,12 @@
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main class="Main">
|
<main class="Main">
|
||||||
|
<div class="Carousel">
|
||||||
|
<img src="/portfolio/punkfairie.net.png"
|
||||||
|
alt="Screenshot of punkfairie.net" class="Carousel-img">
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer class="Footer" id="footer">
|
<footer class="Footer" id="footer">
|
||||||
|
|
BIN
src/portfolio/punkfairie.net.png
Normal file
BIN
src/portfolio/punkfairie.net.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 260 KiB |
21
src/style/Carousel.css
Normal file
21
src/style/Carousel.css
Normal file
|
@ -0,0 +1,21 @@
|
||||||
|
@layer components {
|
||||||
|
.Carousel {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin: auto;
|
||||||
|
block-size: 100%;
|
||||||
|
inline-size: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Carousel-img {
|
||||||
|
padding: var(--space-3xs);
|
||||||
|
border: var(--space-3xs) solid var(--c-pink);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* stylelint-disable-next-line a11y/media-prefers-reduced-motion */
|
||||||
|
.Carousel-img:hover, .Carousel-img:focus {
|
||||||
|
border-color: var(--c-purple);
|
||||||
|
transition: border-color 500ms;
|
||||||
|
}
|
||||||
|
}
|
|
@ -5,3 +5,4 @@
|
||||||
@import url('layout/Header.css');
|
@import url('layout/Header.css');
|
||||||
@import url('layout/Main.css');
|
@import url('layout/Main.css');
|
||||||
@import url('layout/Footer.css');
|
@import url('layout/Footer.css');
|
||||||
|
@import url('Carousel.css');
|
||||||
|
|
Loading…
Reference in a new issue