128 lines
2.3 KiB
SCSS
128 lines
2.3 KiB
SCSS
.sideNav {
|
|
float: right;
|
|
background: transparent;
|
|
/* 50px padding in main */
|
|
margin: -50px -50px 10px 10px;
|
|
padding: 20px;
|
|
border-bottom-left-radius: 1em;
|
|
border-top-right-radius: 1em;
|
|
border: none;
|
|
border-left: 1px solid var(--blog_content-border);
|
|
border-bottom: 1px solid var(--blog_content-border);
|
|
|
|
h4 {
|
|
margin: 0 0 10px 0;
|
|
}
|
|
|
|
ol {
|
|
list-style-type: "\1405\0020\0020";
|
|
list-style-position: inside;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
li {
|
|
margin: 0;
|
|
padding: 0;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
width: 200px;
|
|
}
|
|
|
|
li:hover {
|
|
&::marker {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
a:link, a:visited, a:hover, a:active {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
li.thisPage {
|
|
font-weight: bold;
|
|
}
|
|
|
|
h4.thisPage, h4:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
.barNav {
|
|
display: grid;
|
|
grid-template-columns: 1fr max-content max-content max-content max-content max-content 1fr;
|
|
align-items: center;
|
|
background: transparent;
|
|
padding: 10px;
|
|
|
|
select {
|
|
padding: 5px;
|
|
border-radius: 1em;
|
|
border: 1px solid var(--blog_content-border);
|
|
background: var(--blog_background-main);
|
|
}
|
|
|
|
&.top {
|
|
margin: -50px -50px 20px;
|
|
border-bottom: 1px solid var(--blog_content-border);
|
|
}
|
|
|
|
&.bottom {
|
|
margin: 20px -50px -50px;
|
|
border-top: 1px solid var(--blog_content-border);
|
|
}
|
|
|
|
a:link, a:visited, a:active {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
text-overflow: clip;
|
|
}
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.longLink {
|
|
display: inline;
|
|
}
|
|
.shortLink {
|
|
display: none;
|
|
}
|
|
|
|
@media screen and (max-width: 599px) {
|
|
.longLink {
|
|
display: none;
|
|
}
|
|
.shortLink {
|
|
display: inline;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* TODO: Move to asciidoc footer in Content.module.scss */
|
|
.bottom {
|
|
clear: both;
|
|
}
|
|
|
|
|
|
/* To bottom as this should override everything */
|
|
|
|
.mobile {
|
|
display: none;
|
|
}
|
|
|
|
.desktop {
|
|
display: block;
|
|
}
|
|
|
|
@media screen and (max-width: 900px) {
|
|
.mobile {
|
|
display: grid;
|
|
}
|
|
|
|
.desktop {
|
|
display: none;
|
|
}
|
|
} |