docs/sass/main.scss

342 lines
4.8 KiB
SCSS
Raw Normal View History

2021-03-13 22:45:21 +05:30
@import "variables";
html {
font-kerning: normal;
text-rendering: optimizeLegibility;
scroll-behavior: smooth;
}
body {
margin:$baseline 0;
font-size:$font-size;
font-family:$font-family;
line-height: $line-height;
background:$background;
color:$color;
}
@keyframes fade-in {
0% {
opacity: 0;
}
50% {
opacity: 0.8;
}
100% {
opacity: 1;
}
}
a {
&:link {
color:$links;
text-decoration: none;
}
&:hover {
color:$hover-links;
}
&:visited {
color:$visited-links;
}
}
h2,
h3,
h4 {
.anchor {
visibility: hidden;
text-decoration: none;
cursor: pointer;
line-height: 1;
color:$color;
}
&:hover {
.anchor {
visibility: visible;
animation: fade-in 0.3s ease-in-out;
font-family: 'FabricMDL2Icons';
}
}
}
pre {
margin:$baseline 0;
border-radius: 4px;
padding:$baseline;
overflow: auto;
position: relative;
code {
background:transparent;
&::after {
content: attr(data-lang);
font-style: italic;
line-height: 1;
opacity:0.3;
position:absolute;
bottom:$baseline;
right:$baseline;
z-index:1;
}
}
}
code {
font: $code_font;
}
.copy-code-button {
font-family: 'FabricMDL2Icons';
display:none;
background:$background;
border-radius: 4px;
border:none;
cursor: pointer;
animation: fade-in 0.3s ease-in-out;
font-size: $baseline;
color:$color;
z-index: 10;
position:absolute;
top:$baseline;
right:$baseline;
}
pre:hover .copy-code-button {
display: block;
}
nav {
position: sticky;
height: 92vh;
top:$baseline;
left:$baseline;
bottom: $baseline;
padding-right: $baseline;
width: 20rem;
img {
width:128px;
}
h1 {
margin:0;
line-height: 1;
}
}
#toc {
margin-left:calc(#{$baseline} + #{$font-size});
padding:0;
margin:0 0 0 $baseline;
font-size: 80%;
li {
color:$color;
margin-left: $font-size;
&::before {
display: inline-block;
content:"";
}
ul {
padding:0;
}
}
}
main {
display: flex;
flex-flow: row nowrap;
animation: fade-in 0.4s ease-in-out;
}
#release {
text-align: left;
margin:$baseline 0;
&::before {
display: inline-block;
content: "\EE2E";
font-family: 'FabricMDL2Icons';
margin-right:calc(#{$baseline} / 8);
}
}
@keyframes slideIn {
0% {
max-height:0;
opacity:0
}
100% {
max-height:999px;
opacity:1
}
}
@keyframes slideOut {
0% {
height:auto;
opacity:1
}
100% {
height:0;
opacity:0
}
}
nav label {
display:block;
}
#trees {
overflow-y: auto;
height: 80%;
}
.subtree {
overflow:hidden;
margin:calc(#{$baseline} / 8) 0;
transition: overflow 0.2s ease-in-out;
padding: 0;
}
.tree-toggle-label {
user-select:none;
cursor:pointer;
}
.tree-toggle-label::before {
display:inline-block;
content:"\E970";
font-family:'FabricMDL2Icons';
font-size:.75rem;
transform:rotate(0deg);
transform-origin:50% 50% 0px;
transition:transform 0.1s linear 0s;
margin-right: 2px;
}
.tree-toggle {
position:absolute;
opacity:0;
z-index:-1;
}
.tree-toggle:checked+.tree-toggle-label::before {
content:"\E970";
font-family:'FabricMDL2Icons';
font-size:.75rem;
transform:rotate(90deg);
transform-origin:50% 50% 0px;
transition:transform 0.1s linear 0s;
margin-right: 2px;
}
.tree-toggle:checked+.tree-toggle-label {
font-weight:bold;
}
.tree-toggle+.tree-toggle-label+.subtree {
animation-name:slideOut;
animation-duration:0.25s;
animation-fill-mode:both;
}
.tree-toggle:checked+.tree-toggle-label+.subtree {
animation-name:slideIn;
animation-duration:0.25s;
animation-fill-mode:both;
}
.subtree li {
list-style-type: none;
margin-left: $baseline;
a {
color:$color;
}
&::before {
content: "\E7C3";
font-family:'FabricMDL2Icons';
font-size:0.75rem;
}
}
.active a {
font-weight: bold;
}
article {
width: calc(100% - (#{$baseline} * 4 + 20rem));
margin-left:calc(#{$baseline} * 2);
img {
max-width:100%;
}
}
#mobile {
display: none;
}
@media screen and (max-width: 1023px) {
main {
flex-flow: column nowrap;
width: 100%;
}
nav {
position: inherit;
height:auto;
margin:$baseline $baseline 0 $baseline;
}
article {
width: calc(100% - (#{$baseline} * 2));
margin:0 $baseline;
z-index:1;
}
#mobile {
font-family: 'FabricMDL2Icons';
cursor: pointer;
font-size: $baseline;
margin:0 $baseline 0 0;
display: block;
color:$color;
}
#trees {
display: none;
position:absolute;
background: $background;
height:auto;
width:100vw;
z-index:10;
box-shadow: 0 2px 0 rgba(0,0,0,.1);
}
2021-03-14 17:06:06 +05:30
#on_right {
margin-top:$baseline;
}
2021-03-13 22:45:21 +05:30
}
@import "fabric-icons-inline";
@import "search";