Frontend cleanup

Got a little more explicit with flexbox to position sections of the page
This commit is contained in:
emma 2024-08-23 23:53:09 -04:00
parent df452f5ee0
commit 032e0e98a6
3 changed files with 18 additions and 6 deletions

View File

@ -23,7 +23,7 @@
</header>
<main>
<!-- a more descriptive alt text is not possible, I can only know ahead of time that one or more catss will be in the image -->
<img class = "cat-img" src=img/cat2024-07-27-06:00:05.jpg alt="A picture of a cat">
<img class = "cat-img" src=img/cat2024-08-23-23:47:58.jpg alt="A picture of a cat">
</main>
<footer>
<p>Made by <a href="https://zepp.omg.lol" target="_blank" rel="noopener noreferrer">zepp</a> for the love of cats. </p>

10
rss.xml
View File

@ -5,14 +5,14 @@
<link>https://onecatper.day</link>
<description>Source page: https://onecatper.day</description>
<language>en</language>
<lastBuildDate>Thu, 25 Jul 2024 08:45:26 -0500</lastBuildDate>
<lastBuildDate>Fri, 23 Aug 2024 23:47:59 -0500</lastBuildDate>
<item>
<title>One cat per day!</title>
<link>https://onecatper.day#51206624887025023861521980444894</link>
<link>https://onecatper.day#92284792381514554275859380843050</link>
<description>One cat per day!</description>
<pubDate>Thu, 25 Jul 2024 08:45:26 -0500</pubDate>
<guid isPermaLink="false">https://onecatper.day#74023302225875889632231955345164</guid>
<enclosure length="1000000" type="image/jpeg" url="https://onecatper.day/img/cat2024-07-2508:45:25.jpg"/>
<pubDate>Fri, 23 Aug 2024 23:47:59 -0500</pubDate>
<guid isPermaLink="false">https://onecatper.day#28256203148750911037226073239732</guid>
<enclosure length="1000000" type="image/jpeg" url="https://onecatper.day/img/cat2024-08-23-23:47:58.jpg"/>
</item>
</channel>
</rss>

View File

@ -3,6 +3,12 @@
padding: 0;
}
body {
height: 100vh;
display: flex;
flex-direction: column;
}
nav {
padding: 1em;
display: flex;
@ -12,6 +18,8 @@ nav {
header {
width: auto;
margin: auto 0;
flex-grow: 0;
flex-shrink: 0;
}
header, footer {
@ -57,6 +65,8 @@ main {
background-color:#9a6db6;
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
margin: auto 0;
width: auto;
}
@ -72,6 +82,8 @@ main {
footer {
width: auto;
margin: auto 0;
flex-grow: 0;
flex-shrink: 0;
}
footer p {