Under the hood changes to container styles

Previously, the entire main content was fitted inside one element. Now,
each section and container handle their own paddings and margins. This
allows for more flexibility as to how each container can be styled.
This commit is contained in:
Foster Hangdaan 2023-07-26 22:31:46 -04:00
parent c552270c6e
commit 1b1482a8d9
Signed by: foster
GPG key ID: E48D7F49A852F112
4 changed files with 14 additions and 13 deletions

View file

@ -8,11 +8,9 @@ export default function({ title, header, children, comp }) {
<link rel="stylesheet" href="/styles/main.css"/> <link rel="stylesheet" href="/styles/main.css"/>
</head> </head>
<body> <body>
{comp.navbar()} { comp.navbar() }
<div className="main-content"> { comp.header(header) }
{ comp.header(header) } { children }
{ children }
</div>
</body> </body>
</html> </html>
); );

View file

@ -49,7 +49,9 @@ h1, h2, h3, h4, h5, h6 {
} }
section { section {
padding: 1rem 0; padding: 1rem;
margin: 0 auto;
max-width: var(--page--max-width);
& > * { & > * {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@ -58,12 +60,6 @@ section {
} }
} }
.main-content {
padding: 1rem;
margin: 0 auto;
max-width: 48rem;
}
pre { pre {
padding: 1rem; padding: 1rem;
border-radius: 5px; border-radius: 5px;

View file

@ -1,7 +1,11 @@
.page-header { .page-header {
margin-bottom: 2rem; margin-left: auto;
margin-right: auto;
padding: 2rem 1rem;
max-width: var(--page--max-width);
text-align: center; text-align: center;
h1 { h1 {
margin-top: 0;
background: -webkit-linear-gradient(45deg, var(--color-red), var(--color-blue)); background: -webkit-linear-gradient(45deg, var(--color-red), var(--color-blue));
background-clip: text; background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;

View file

@ -20,4 +20,7 @@ :root {
--text-7xl: 4.5rem; --text-7xl: 4.5rem;
--text-8xl: 6rem; --text-8xl: 6rem;
--text-9xl: 8rem; --text-9xl: 8rem;
/* Widths */
--page--max-width: 48rem;
} }