foster/website
1
0
Fork 0
Code Issues 8 Pull requests Activity

Under the hood changes to container styles

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

8
_includes/layouts/main.tsx
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>
); );

10
_includes/styles/base.scss
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;

6
_includes/styles/components/header.scss
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;

3
_includes/styles/variables.scss
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;
} }