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:
parent
fc92def43a
commit
576a6c4c56
|
@ -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 {
|
||||||
|
|
|
@ -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 – Cat Ears Operation Center</h1>
|
<h1 class="title">c3cat – 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>
|
||||||
|
|
Loading…
Reference in a new issue