Align most of the content left, except for the title and hero image

Also use the container class on the entire body instead of just on the
main, so that the footer is also in the container.
This commit is contained in:
June 2024-03-29 20:04:26 +01:00 committed by jtbx
parent fc92def43a
commit 576a6c4c56
2 changed files with 11 additions and 5 deletions

View file

@ -1,11 +1,11 @@
body {
font-family: system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif;
text-align: center;
text-align: left;
}
.container {
max-width: 900px;
max-width: 600px;
margin: 0 auto;
padding: 0 5px;
}
@ -19,8 +19,14 @@ img {
}
.title {
text-align: center;
}
.hero-img {
max-width: 500px;
display: block;
margin: 0 auto;
}
p.bigger {

View file

@ -7,9 +7,9 @@
<link rel="me" href="https://chaos.social/@c3cat" />
<title>c3cat</title>
</head>
<body>
<main class="container">
<h1>c3cat &ndash; Cat Ears Operation Center</h1>
<body class="container">
<main>
<h1 class="title">c3cat &ndash; Cat Ears Operation Center</h1>
<img src="assets/img/c3cat-c3sign-cccamp23.jpg" alt="C3CAT with a cat ear headband around the 'A'" class="hero-img">
<h2>Resources</h2>