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

View file

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