Commit a8043395 authored by JoJo's avatar JoJo 💬

grid -> flex, improve responsiveness & somewhat adapt for phones

parent b1cf4c98
......@@ -6,41 +6,65 @@ body {
background-color: rgb(254, 253, 252);
}
#content {
display: grid;
padding: 40px;
grid-template-columns: 240px auto 240px;
grid-template-rows: 140px auto;
grid-gap: 40px;
}
h1 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
align-self: center;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
height: calc(4em * 1.6);
}
#table-of-contents {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
h1 > b {
margin: 0 14px;
animation: fire 1s steps(1, end) infinite;
}
@keyframes fire {
0% {
font-size: 1em;
}
50% {
font-size: 1.6em;
}
}
main {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
padding: 20px;
}
#table-of-contents {
font-size: 0.85em;
min-width: 220px;
width: 220px;
padding-right: 20px;
}
#table-of-contents > h2, main > article > div:first-child > h2 {
margin-top: 0px;
}
#table-of-contents ul {
padding-left: 24px;
}
article {
max-width: 700px;
justify-self: center;
min-width: 360px;
width: calc(100% - 240px - 20px);
}
#right-padding {
max-width: 240px;
width: calc(100% - 240px - 700px - 20px);
}
p {
padding-left: 30px;
padding: 0px 20px;
text-align: justify;
}
a {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment