punkfairie/punkfairie.github.io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Carousel layout done

Browse source
This commit is contained in:
marleyrae 2023-07-02 11:18:18 -07:00
parent 37be212f47
commit c19a8f4c56
4 changed files with 54 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
src/index.liquid
View file

@ -1,45 +1,57 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" <meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 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"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Marley Rae</title> <title>Marley Rae</title>
<link rel="preconnect" href="https://fonts.bunny.net"> <link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=delius-swash-caps:400" <link href="https://fonts.bunny.net/css?family=delius-swash-caps:400"
rel="stylesheet"/> rel="stylesheet"/>
<link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/style.css">
<script src="/main.js" type="module"></script> <script src="/main.js" type="module"></script>
<script src="/fontawesome/fontawesome.min.js" defer></script> <script src="/fontawesome/fontawesome.min.js" defer></script>
<script src="/fontawesome/regular.min.js" defer></script> <script src="/fontawesome/regular.min.js" defer></script>
<script src="/fontawesome/solid.min.js" defer></script> <script src="/fontawesome/solid.min.js" defer></script>
<script src="/fontawesome/brands.min.js" defer></script> <script src="/fontawesome/brands.min.js" defer></script>
</head> </head>
<body class="Body"> <body class="Body">
<div class="Site"> <div class="Site">
<header class="Header"> <header class="Header">
<h1 class="Header-title" id="headerTitle">Marley Rae</h1> <h1 class="Header-title" id="headerTitle">Marley Rae</h1>
<div class="Header-email">marleyrae@protonmail.com</div> <div class="Header-email">marleyrae@protonmail.com</div>
</header> </header>
<main class="Main"> <main class="Main">
<div class="Carousel"> <div class="Carousel">
<img src="/portfolio/punkfairie.net.png" <img src="/portfolio/punkfairie.net.png"
alt="Screenshot of punkfairie.net" class="Carousel-img"> alt="Screenshot of punkfairie.net" class="Carousel-img">
<div class="Carousel-title">
<a href="https://github.com/punkfairie/punkfairie-site"
target="_blank"><i class="fa-brands fa-github"
title="Github"></i></a> /
punkfairie.net /
<a href="https://punkfairie.net/" target="_blank"><i
class="fa-solid fa-link" title="Visit project"></i></a>
</div>
</div> <p class="Carousel-text">A personal site; includes blinkie
</main> collections and a diary (blog).</p>
<footer class="Footer" id="footer"> <p class="Carousel-text">Made with Eleventy and SCSS.</p>
&copy; 2023 </div>
</footer> </main>
<footer class="Footer" id="footer">
&copy; 2023
</footer>
</div> </div>

2
src/style/Carousel.css
View file

@ -2,10 +2,12 @@
.Carousel { .Carousel {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-xs);
align-items: center; align-items: center;
margin: auto; margin: auto;
block-size: 100%; block-size: 100%;
inline-size: 60%; inline-size: 60%;
text-align: center;
} }
.Carousel-img { .Carousel-img {

10
src/style/base.css Normal file
View file

@ -0,0 +1,10 @@
@layer base {
a {
color: var(--c-pink);
}
a:hover, a:focus {
color: var(--c-purple);
transition: color 300ms;
}
}

3
src/style/style.css
View file

@ -1,5 +1,8 @@
@layer reset, base, layout, components;
@import url('@punkfairie/modern-css-reset'); @import url('@punkfairie/modern-css-reset');
@import url('theme.css'); @import url('theme.css');
@import url('base.css');
@import url('layout/Body.css'); @import url('layout/Body.css');
@import url('layout/Site.css'); @import url('layout/Site.css');
@import url('layout/Header.css'); @import url('layout/Header.css');