AtaraxiaDev/Bento
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

🎨 Improved layoutGenerator function

Browse Source
This commit is contained in:
Miguel Avila 2022-02-07 19:55:00 -06:00
parent 00822a2c44
commit d740479181
3 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app.css
View File

@ -205,14 +205,24 @@ body {
color: var(--fg);
}
.linksBlockLeft {
.linksBlock {
grid-row: 3 / span 2;
grid-column: 1 / span 4;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 30px;
}
.linksBlockLeft {
grid-row: 1 / span 2;
grid-column: 1 / span 2;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 30px;
padding: 20px;
}
.button {
@ -260,13 +270,14 @@ body {
}
.linksBlockRight {
grid-row: 3 / span 2;
grid-row: 1 / span 2;
grid-column: 3 / span 2;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 30px;
padding: 0.3rem;
}
.list {

3
assets/js/layout.js
View File

@ -10,8 +10,7 @@ const generateLayout = () => {
</div>
<div class="linksBlockRight" id="linksBlockRight">
<div class="card list list__1" id="list_1"></div>
<div class="card list list__2" id="list_2"></div>
</div>
`;
let listLayout = `

4
index.html
View File

@ -78,8 +78,8 @@
<script src="assets/js/greeting.js"></script>
<script src="assets/js/weather.js"></script>
<script src="assets/js/buttons.js"></script>
<script src="assets/js/lists.js"></script>
<!-- <script src="assets/js/buttons.js"></script>
<script src="assets/js/lists.js"></script> -->
<!-- Icons -->
<script>