.docs__sidebar {
width: 280px;
padding: 40px;
display: inline-block;
vertical-align: top;
> ul > li > ul {
border-left: 2px solid $main-colour;
}
ul {
margin: 0;
padding: 0;
list-style: none;
li {
font-size: 1.25rem;
margin-bottom: 0.75rem;
font-weight: bold;
ul {
margin-top: 1rem;
padding-left: 1rem;
}
li {
font-size: 1rem;
font-weight: normal;
a {
padding: 0;
}
}
}
}
}
.submenu-open {
display: none;
cursor: pointer;
~ ul { display: none; }
~ label {
cursor: pointer;
&:hover {
font-weight: bolder;
}
&::after { content: "[+]"; }
}
&:checked {
~ ul { display: block; }
~ label {
font-weight: bolder;
&::after { content: "[-]"; }
}
}
}
.docs__content {
width: calc(100% - 280px - 20px);
max-width: 900px;
padding: 40px;
display: inline-block;
h1 {
margin-top: 0;
}
.gutenberg-anchor {
display: none;
text-decoration: none;
color: grey;
&:hover {
color: $main-colour;
}
}
h1, h2, h3 {
&:hover {
.gutenberg-anchor {
display: inline-block;
padding: 0;
border: 0;
}
}
}
p code, li code {
background: #f5f5f5;
padding: 2px;
border-radius: 5px;
border-radius: 5px;
word-break: break-word;
}
a {
color: $main-colour;
padding-bottom: 2px;
}
.zola-anchor {
display: inline-block;
margin-left: 1rem;
border-bottom: none;
}
}
@media only screen and (max-width: 700px) {
.docs__sidebar {
width: 100%;
padding: 10px;
text-align: center;
}
.docs__content {
width: 100%;
padding: 10px;
}
}