JeroenED/website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update styles for better layout and readability

Browse Source 
- Adjusted padding and margins in main content area
- Added line-height to headings and paragraphs for clarity
- Introduced a new variable for font size to maintain consistency
This commit is contained in:
Jeroen De Meerleer 2025-01-24 12:34:34 +01:00
parent b9723a1741
commit 239568d615
Signed by: JeroenED
GPG Key ID: 28CCCB8F62BFADD6
2 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
assets/styles/app.css
View File

@ -57,12 +57,15 @@ body {
main { main {
font-family: var(--main-font); font-family: var(--main-font);
background-color: var(--main-background); background-color: var(--main-background);
padding: 0 15px; font-size: var(--main-size);
padding: 15px;
margin: 5% 20%;
h1 { h1 {
font-weight: normal; font-weight: normal;
font-size: var(--main-h1-size); font-size: var(--main-h1-size);
margin: 5px 0; margin: 15px 0;
line-height: calc(var(--main-h1-size) * 2);
} }
h1:before { h1:before {
color: var(--main-h1-before-color); color: var(--main-h1-before-color);
@ -71,7 +74,8 @@ main {
h2 { h2 {
font-weight: normal; font-weight: normal;
margin: 5px 0; margin: 15px 0;
line-height: calc(var(--main-h2-size) * 2);
} }
h2:before { h2:before {
content: "## "; content: "## ";
@ -82,12 +86,14 @@ main {
h3 { h3 {
font-weight: normal; font-weight: normal;
margin: 10px 0; margin: 10px 0;
line-height: calc(var(--main-h3-size) * 2);
} }
h3:before { h3:before {
font-size: var(--main-h3-size); font-size: var(--main-h3-size);
} }
p { p {
margin: 5px 0; margin: 5px 0;
line-height: calc(var(--main-size) * 2);
} }
a { a {
@ -102,6 +108,7 @@ main {
li { li {
max-width: calc(100vw - 30px); max-width: calc(100vw - 30px);
line-height: calc(var(--main-size) * 1.5);
} }
} }
} }

1
assets/styles/vars.css
View File

@ -7,6 +7,7 @@
--main-font: 'Fira Code', monospace; --main-font: 'Fira Code', monospace;
--main-background: rgb(224, 224, 224); --main-background: rgb(224, 224, 224);
--main-size: 16px;
--main-h1-size: 28px; --main-h1-size: 28px;
--main-h1-before-color: rgb(128,128,128); --main-h1-before-color: rgb(128,128,128);
--main-h2-size: 24px; --main-h2-size: 24px;