rayelliott
/
hugo-blog
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update about flex columns layout

This commit is contained in:
Ray Elliott 2020-02-24 20:19:06 +00:00
parent 5c79e0fdb1
commit 4ceb2b8825
2 changed files with 28 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
assets/css/_about.scss
View File

@ -90,7 +90,11 @@
} }
.column { .column {
flex: 0 0 100%;
@media (min-width: 500px) {
flex: 0 0 50%; flex: 0 0 50%;
}
@media (min-width: 768px) { @media (min-width: 768px) {
flex: 0 0 33%; flex: 0 0 33%;
@ -105,5 +109,19 @@
li { li {
margin: 1rem 0; margin: 1rem 0;
} }
@media (max-width: 768px) {
&.column-cms {
order: 3;
}
&.column-modern {
order: 2;
}
&.column-legacy {
order: 4;
}
}
} }
} }

8
content/about.html
View File

@ -55,7 +55,7 @@ date: 2020-01-31T12:54:00Z
</ul> </ul>
</div> </div>
<div class="column"> <div class="column column-cms">
<h3>Content Management Systems</h3> <h3>Content Management Systems</h3>
<ul> <ul>
@ -66,7 +66,7 @@ date: 2020-01-31T12:54:00Z
</ul> </ul>
</div> </div>
<div class="column"> <div class="column column-modern">
<h3>Modern Frameworks and Libraries</h3> <h3>Modern Frameworks and Libraries</h3>
<ul> <ul>
@ -77,15 +77,15 @@ date: 2020-01-31T12:54:00Z
<li><p>Tailwind</p></li> <li><p>Tailwind</p></li>
</ul> </ul>
</div> </div>
</div>
<div class="column"> <div class="column column-legacy">
<h3>Legacy and Other Web Technologies</h3> <h3>Legacy and Other Web Technologies</h3>
<ul> <ul>
<li><p>jQuery</p></li> <li><p>jQuery</p></li>
<li><p>Bootstrap</p></li> <li><p>Bootstrap</p></li>
</ul> </ul>
</div>
</div> </div>
<script> <script>