CptArn/ontvlambaar
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed styling about
All checks were successful
Copy Files to Samba Share dev / Copy Files (push) Successful in 25s
Details

Browse Source
This commit is contained in:
Arne Vlaeminck
2024-10-28 20:15:13 +01:00
parent e3069e8eeb
commit da0280f3b3
2 changed files with 67 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/about/about.component.html
View File

@@ -1,11 +1,13 @@
<div class="contents"> <div class="contents">
<p>Ingrediënten voor 10 jaar ervaring</p> <p>Ingrediënten voor 10 jaar ervaring</p>
<p>Indesign<span>10 kg</span></p> <ul>
<p>> educatief zetwerk<span>10kg</span></p> <li>Indesign<span>10 kg</span></li>
<p>> catalogi<span>1 cup</span></p> <li class="indent">educatief zetwerk<span>85dl</span></li>
<p>> magazines<span>27 tbsp</span></p> <li class="indent">catalogi<span>1 cup</span></li>
<p>Illustrator<span>500ml</span></p> <li class="indent">magazines<span>27 tbsp</span></li>
<p>> verpakkingen<span>14 oz</span></p> <li>Illustrator<span>500ml</span></li>
<p>een scheut UX en UI<span>1/2 cup</span></p> <li class="indent">verpakkingen<span>14 oz</span></li>
<p>een mespuntje video<span>2 inch</span></p> <li>een scheut UX en UI<span>1/2 cup</span></li>
<li>een mespuntje video<span>2 inch</span></li>
</ul>
</div> </div>

73
src/app/about/about.component.scss
View File

@@ -4,28 +4,69 @@
justify-content: space-between; justify-content: space-between;
} }
// .contents {
// display: grid;
// grid-template-columns: repeat(2, 1fr);
// grid-template-rows: repeat(5, 3rem);
// grid-column-gap: 4rem;
// grid-row-gap: 0;
// width: calc(100% - 2rem);
// align-items: center;
// grid-auto-flow: column;
// p {
// margin: 0;
// width: 100%;
// display: flex;
// justify-content: space-between;
// padding: 1rem;
// border-bottom: 0.1rem solid var(--text-color);
// }
// p:first-child {
// grid-column: 1 / 3;
// background-color: var(--text-color);
// color: var(--background-color);
// font-weight: 500;
// }
// }
.contents { .contents {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(5, 3rem);
grid-column-gap: 4rem;
grid-row-gap: 0;
width: calc(100% - 2rem); width: calc(100% - 2rem);
align-items: center;
p { p {
margin: 0;
width: 100%;
display: flex;
justify-content: space-between;
padding: 1rem;
border-bottom: 0.1rem solid var(--text-color);
}
p:first-child {
grid-column: 1 / 3;
background-color: var(--text-color); background-color: var(--text-color);
color: var(--background-color); color: var(--background-color);
font-weight: 500; font-weight: 500;
height: 3rem;
display: flex;
align-items: center;
padding: 0 2rem;
}
ul {
columns: 2;
list-style: none;
padding: 0;
li {
height: 3rem;
padding: 0 1rem;
border-bottom: 0.1rem solid var(--text-color);
display: flex;
align-items: center;
width: calc(100% - 5rem);
span {
margin-left: auto;
}
}
.indent:before {
content: ">";
margin-right: 1rem;
}
} }
} }