redstrate/redstrate.com
1
Fork 0
Code Activity Actions

Replace CSS grid with flexbox solution

Browse source
This commit is contained in:
Joshua Goins 2022-09-20 12:34:16 -04:00
parent 459438d6d0
commit a16fe23d3f
1 changed files with 17 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
themes/red/assets/css/site.css
View file

@ -1,27 +1,12 @@
/* desktop devices */ /* desktop devices */
@media (min-width: 768px) { @media (min-width: 768px) {
body {
grid-template:
"head head"
"nav main"
"nav foot";
}
aside { aside {
width: 250px; flex: 200px 0 0;
} }
} }
/* mobile devices */ /* mobile devices */
@media (max-width: 768px) { @media (max-width: 768px) {
body {
grid-template:
"head"
"nav"
"main"
"foot";
}
aside { aside {
width: 100%; width: 100%;
} }
@ -33,39 +18,48 @@ body {
background-color: #e3e3e3; background-color: #e3e3e3;
accent-color: var(--accent-color); accent-color: var(--accent-color);
display: grid; display: flex;
flex-flow: row wrap;
} }
header { header {
grid-area: head; flex-grow: 1;
flex-basis: 100%;
margin: 10px;
} }
aside { aside {
background-color: white; background-color: white;
grid-area: nav;
text-align: center; text-align: center;
border: 1px solid black; border: 1px solid black;
border-radius: 3px; border-radius: 3px;
padding: 15px; padding: 15px;
margin: 10px;
} }
article { article {
background-color: white; background-color: white;
grid-area: main;
border: 1px solid black; border: 1px solid black;
border-radius: 3px; border-radius: 3px;
padding: 15px; padding: 15px;
flex: 2 0px;
margin: 10px;
} }
footer { footer {
background-color: white; background-color: white;
grid-area: foot; flex-grow: 1;
flex-basis: 100%;
margin: 10px;
} }