.docs__sidebar {
width: 280px;
padding: 40px;
display: inline-block;
vertical-align: top;
ul {
margin: 0;
padding: 0;
list-style: none;
li {
font-size: 1.25rem;
margin-bottom: 1rem;
font-weight: bold;
a + ul {
margin-top: 1rem;
}
ul {
padding-left: 1rem;
border-left: 2px solid $main-colour;
}
li {
font-size: 1rem;
line-height: 1.2rem;
font-weight: normal;
a {
padding: 0;
}
}
}
}
}
.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;
}
a {
color: $main-colour;
padding-bottom: 2px;
}
}
@media only screen and (max-width: 700px) {
.docs__sidebar {
width: 200px;
padding: 10px;
}
.docs__content {
width: calc(100% - 200px - 20px);
padding: 10px;
}
}