hugo-geekblog/static/mobile.css

61 lines
1.1 KiB
CSS

@media screen and (max-width:45rem) {
.gblog-brand {
font-size: 2.2rem
}
.gblog-nav .container {
padding: 0
}
.gblog-nav__list {
background: #454b5b;
flex-direction: column;
justify-content: center;
max-height: 0;
overflow: hidden
}
.gblog-nav__entry {
padding: 1rem 0;
border: 0;
border-radius: 0;
display: block;
margin: 0;
text-align: center
}
.gblog-nav__entry.is-active,
.gblog-nav__entry:hover {
background: #3a3f4d
}
.gblog-nav__control {
display: block;
text-align: center
}
.gblog-nav__control label {
padding: 1rem 0
}
.gblog-error {
padding: 6rem 1rem
}
.gblog-error .icon {
font-size: 5rem
}
.gblog-error__message {
padding-left: 2rem
}
.gblog-error__line {
padding: .25rem 0
}
.gblog-error__title {
font-size: 2rem
}
.gblog-footer__item {
width: 100%
}
}
#menu-control:checked ~ .gblog-nav__list {
max-height: 100%
}
#menu-control:checked ~ .gblog-nav__control .icon.menu {
display: none
}
#menu-control:checked ~ .gblog-nav__control .icon.clear {
display: inline-block
}