code/personal-site
1
0
Fork 0
mirror of https://github.com/CodeF53/personal-site.git synced 2024-09-20 06:10:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

wrap layout rule

Browse source
This commit is contained in:
F53 2023-11-13 15:38:18 -07:00
parent bbef3974dc
commit 515254a1dc
2 changed files with 2 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
assets/styles/layout.scss
View file

@ -13,6 +13,7 @@ body {
.row { display: flex; flex-direction: row; } .row { display: flex; flex-direction: row; }
.col { display: flex; flex-direction: column; } .col { display: flex; flex-direction: column; }
.wrap { display: flex; flex-wrap: wrap; }
@for $i from 1 through 5 { @for $i from 1 through 5 {
.gap#{$i} { gap: $i * 0.25rem; } .gap#{$i} { gap: $i * 0.25rem; }

4
pages/index.vue
View file

@ -11,7 +11,7 @@
Fluent in React, Vue, Ruby on Rails, Java, and Python. Fluent in React, Vue, Ruby on Rails, Java, and Python.
</p> </p>
<ul class="links gap4 row centerChildren"> <ul class="links wrap gap4 centerChildren">
<li> <li>
<NuxtLink to="mailto:fseusb@gmail.com" aria-label="email"> <NuxtLink to="mailto:fseusb@gmail.com" aria-label="email">
<Icon name="material-symbols:mail-rounded" /> <Icon name="material-symbols:mail-rounded" />
@ -74,8 +74,6 @@
.links { .links {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
display: flex;
flex-wrap: wrap;
li { li {
background-color: var(--accent-light); background-color: var(--accent-light);