mirror of
https://github.com/zen-browser/surfer.git
synced 2025-07-09 17:55:32 +02:00
📝 Fix up docs
This commit is contained in:
trickypr
parent
d0e6248fd2
commit
41f7b46d93
32 changed files with 33 additions and 621 deletions
61
docs/sass/_search.scss
Normal file
61
docs/sass/_search.scss
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
.search-container {
|
||||
display: none;
|
||||
|
||||
&--is-visible {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#search {
|
||||
width: 100%;
|
||||
display: block;
|
||||
border:none;
|
||||
border-left: 1px solid $color;
|
||||
padding:1px 0;
|
||||
text-align: left;
|
||||
line-height: $baseline;
|
||||
font-size: $font-size;
|
||||
font-family:$font-family;
|
||||
color:$color;
|
||||
background:transparent;
|
||||
}
|
||||
|
||||
#search:focus {
|
||||
outline:none;
|
||||
border:none;
|
||||
}
|
||||
|
||||
.search-results {
|
||||
&__header {
|
||||
font-weight: bold;
|
||||
padding: 1rem 0rem;
|
||||
}
|
||||
|
||||
&__items {
|
||||
margin: 0 2vw;
|
||||
padding: 0;
|
||||
list-style: circle;
|
||||
}
|
||||
|
||||
&__item {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
&__teaser {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#on_right {
|
||||
display: block;
|
||||
text-align: right;
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
|
||||
#search-ico {
|
||||
font-family: 'FabricMDL2Icons';
|
||||
cursor: pointer;
|
||||
font-size: $baseline;
|
||||
line-height: 1;
|
||||
}
|
||||
34
docs/sass/_variables.scss
Normal file
34
docs/sass/_variables.scss
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
:root {
|
||||
--bg: #f9f9f9;
|
||||
--fg: #222;
|
||||
|
||||
--links: #00f;
|
||||
--hover-links: #c00;
|
||||
--visited-links: #009;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg: #333;
|
||||
--fg: #f9f9f9;
|
||||
|
||||
--links: rgb(142, 142, 255);
|
||||
--hover-links: rgb(204, 101, 101);
|
||||
--visited-links: rgb(86, 86, 151);
|
||||
}
|
||||
}
|
||||
|
||||
$baseline: 1.5rem;
|
||||
|
||||
$background: var(--bg);
|
||||
$color: var(--fg);
|
||||
|
||||
$links: var(--links);
|
||||
$hover-links: var(--hover-links);
|
||||
$visited-links: var(--visited-links);
|
||||
|
||||
$font-size: 1.125rem;
|
||||
$font-family: Segoe UI, system-ui, -apple-system, sans-serif;
|
||||
$line-height: 1.75;
|
||||
$code_font: 400 1.125rem/1.75 SFMono-Regular, Consolas, Liberation Mono, Menlo,
|
||||
monospace;
|
||||
40
docs/sass/fabric-icons-inline.scss
Normal file
40
docs/sass/fabric-icons-inline.scss
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
/*
|
||||
Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fabric-assets-license
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'FabricMDL2Icons';
|
||||
src: url('data:application/octet-stream;base64,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') format('truetype');
|
||||
}
|
||||
|
||||
.ms-Icon {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
display: inline-block;
|
||||
font-family: 'FabricMDL2Icons';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
speak: none;
|
||||
}
|
||||
|
||||
// Mixins
|
||||
@mixin ms-Icon--ChevronRightSmall { content: "\E970"; }
|
||||
@mixin ms-Icon--ChromeClose { content: "\E8BB"; }
|
||||
@mixin ms-Icon--Copy { content: "\E8C8"; }
|
||||
@mixin ms-Icon--GlobalNavButton { content: "\E700"; }
|
||||
@mixin ms-Icon--MiniLink { content: "\E732"; }
|
||||
@mixin ms-Icon--Page { content: "\E7C3"; }
|
||||
@mixin ms-Icon--ProductRelease { content: "\EE2E"; }
|
||||
@mixin ms-Icon--Save { content: "\E74E"; }
|
||||
@mixin ms-Icon--Search { content: "\E721"; }
|
||||
|
||||
|
||||
// Classes
|
||||
.ms-Icon--ChevronRightSmall:before { @include ms-Icon--ChevronRightSmall }
|
||||
.ms-Icon--ChromeClose:before { @include ms-Icon--ChromeClose }
|
||||
.ms-Icon--Copy:before { @include ms-Icon--Copy }
|
||||
.ms-Icon--GlobalNavButton:before { @include ms-Icon--GlobalNavButton }
|
||||
.ms-Icon--MiniLink:before { @include ms-Icon--MiniLink }
|
||||
.ms-Icon--Page:before { @include ms-Icon--Page }
|
||||
.ms-Icon--ProductRelease:before { @include ms-Icon--ProductRelease }
|
||||
.ms-Icon--Save:before { @include ms-Icon--Save }
|
||||
.ms-Icon--Search:before { @include ms-Icon--Search }
|
||||
340
docs/sass/main.scss
Normal file
340
docs/sass/main.scss
Normal file
|
|
@ -0,0 +1,340 @@
|
|||
@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;
|
||||
}
|
||||
|
||||
#wrap {
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
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: 0.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: 0.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, 0.1);
|
||||
}
|
||||
|
||||
#on_right {
|
||||
margin-top: $baseline;
|
||||
}
|
||||
}
|
||||
|
||||
@import 'fabric-icons-inline';
|
||||
@import 'search';
|
||||
Loading…
Add table
Add a link
Reference in a new issue