Fix responsive layout for Archives page (#35)
Previously the width of date field was hardcoded at 180px and that would take up most of screen estate on mobile devices. The most important part - article titles - may become condensed and even unreadable
This commit is contained in:
parent
e2babcce12
commit
6de60cb90b
1 changed files with 11 additions and 1 deletions
|
@ -641,6 +641,8 @@ dl {
|
||||||
dl dt {
|
dl dt {
|
||||||
float: left;
|
float: left;
|
||||||
width: 180px;
|
width: 180px;
|
||||||
|
max-width: 30%;
|
||||||
|
margin-right: 1.5em;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
clear: left;
|
clear: left;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
@ -651,10 +653,18 @@ dl dt {
|
||||||
}
|
}
|
||||||
|
|
||||||
dl dd {
|
dl dd {
|
||||||
margin-left: 200px;
|
float: left;
|
||||||
|
max-width: calc(100% - 30% - 1.5em);
|
||||||
|
margin-left: 0;
|
||||||
margin-bottom: 12px
|
margin-bottom: 12px
|
||||||
}
|
}
|
||||||
|
|
||||||
|
dl:after, dl dd:after {
|
||||||
|
clear: both;
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
mark {
|
mark {
|
||||||
background-color: #ffc336
|
background-color: #ffc336
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue