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

3
assets/js/layout.js
View File

@ -10,8 +10,7 @@ const generateLayout = () => {
</div> </div>
<div class="linksBlockRight" id="linksBlockRight"> <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> </div>
`; `;
let listLayout = ` let listLayout = `

4
index.html
View File

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