style the list pages

center the lists
This commit is contained in:
Ray Elliott 2020-02-18 20:34:13 +00:00
parent 9803754024
commit 56ec9a6391
1 changed files with 24 additions and 3 deletions

View File

@ -85,22 +85,39 @@
.list {
ul {
position: relative;
width: 100%;
margin: 3.2rem 0 3.2rem 0;
list-style: none;
padding: 0;
@media only screen and (max-width: 768px) {
text-align: center;
}
li {
font-size: 1.8rem;
@media only screen and (max-width: 768px) {
margin: 1.6rem 0 1.6rem 0;
}
@media only screen and (min-width: 768px) {
display: flex;
margin-bottom: 0.8rem;
}
.date {
display: inline-block;
width: 20rem;
width: 50%;
text-align: right;
margin-right: 3rem;
padding-right: 1.5rem;
@media only screen and (max-width: 768px) {
width: 100%;
text-align: center;
font-size: 0.9em;
display: block;
text-align: left;
padding-right: 0;
}
@media only screen and (min-width: 768px) {
display: flex;
align-items: start;
justify-content: flex-end;
}
}
.title {
@ -108,6 +125,10 @@
color: $fg-color;
font-family: $heading-font-family;
font-weight: $heading-font-weight--bold;
@media only screen and (min-width: 768px) {
padding-left: 1.5rem;
max-width: 20ch;
}
&:hover,
&:focus {
color: $link-color;