eightball/PluralKit
1
0
Fork 0
mirror of https://github.com/PluralKit/PluralKit.git synced 2026-02-12 16:50:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

A lot more style/content changes

Browse source
This commit is contained in:
Ske 2020-06-12 15:18:51 +02:00
parent ead1ae4e7c
commit 3d7a6ec72f
18 changed files with 223 additions and 153 deletions
Download patch file Download diff file Expand all files Collapse all files

38
docs/content/.vuepress/components/Arg.vue
View file

@ -1,38 +1,30 @@
<template>
<span class="command-argument"><slot/></span>
<span class="cmd-arg"><slot/></span>
</template>
<style lang="stylus">
.command-argument {
.cmd-arg {
font-weight: bold;
line-height: 1.75;
display: inline-block;
padding: 0 0.6rem;
font-size: $exampleFontSize;
font-family: $exampleFontFamily;
border-bottom: 1px solid darken($exampleArgColor, 15%);
color: $exampleTextColor;
padding: 0 0.5rem;
background-color: $exampleArgColor;
border-radius: 4px;
line-height: 1.7;
background-color: $argBgPlain;
border-radius: 3px;
}
.custom-block.tip .command-argument {
background-color: $exampleArgColorInTip;
.cmd-inline .cmd-arg {
background-color: $argBgInline;
}
.command-example .command-argument {
background-color: $exampleArgColorInExample;
}
.custom-block.tip .command-example .command-argument {
background-color: $exampleArgColorInBoth;
.cmd-block .cmd-arg {
background-color: $argBgBlock;
}
</style>
<script>
export default {
props: ["optional", "name", "edit", "value"],
props: [],
}
</script>

81
docs/content/.vuepress/components/Cmd.vue
View file

@ -1,55 +1,70 @@
<template>
<p class="command-example">
<span class="example-comment" v-if="comment">// {{ comment }}</span>
<span class="bot-prefix">pk;</span><slot v-if="usage === undefined"/><span v-if="usage !== undefined">
<div v-bind:class="{ cmd: true, 'cmd-block': inline === undefined, 'cmd-inline': inline !== undefined }">
<div class="comment" v-if="comment">// {{ comment }}</div>
<span class="prefix">pk;</span><slot v-if="usage === undefined"/><span v-if="usage !== undefined">
<span v-for="part in parse(usage)">
<span v-if="part.type === 'str'">{{ part.str }}</span>
<span v-else-if="part.type === 'arg'"><Arg>{{ part.arg }}</Arg></span>
</span>
</span>
</p>
</div>
</template>
<style lang="stylus">
.command-example {
font-size: $exampleFontSize;
font-family: $exampleFontFamily;
color: $exampleTextColor;
background-color: $exampleBgColor;
.cmd {
// Universal command styles (text)
line-height: 1.7;
color: $cmdColor;
.comment {
font-weight: bold;
color: $accentColor;
}
.prefix {
font-weight: bold;
color: $accentColor;
}
}
.cmd-block {
// Base block command styles (also see CmdGroup)
background-color: $cmdBgBlock;
border-radius: 6px;
/*margin: 1rem 0;*/
margin: 0.5rem 0;
padding: 0.75rem 1.25rem;
clear: both;
margin-bottom: 10rem;
}
.custom-block.tip .command-example {
background-color: $exampleBgColorInTip;
.details > .cmd-block {
margin-top: 1rem;
}
.bot-prefix {
color: $examplePrefixColor;
.cmd-group .cmd-block {
// Disable most parameters above for grouped commands
// (they'll get added back by CmdGroup below)
background-color: transparent;
padding: 0.1rem 1.25rem;
}
.example-comment {
color: $exampleCommentColor;
//float: right;
//@media (max-width: $MQNarrow) {
display: block;
//float: none;
margin-bottom: -0.15rem;
//}
.cmd-inline {
display: inline-block;
color: $textColor;
background-color: $cmdBgInline;
border-radius: 3px;
padding: 0 0.7rem;
margin: 0 0.1rem;
}
.tip .cmd-inline {
background-color: $cmdBgInlineTip;
}
</style>
<script>
export default {
props: ["usage", "comment"],
props: ["usage", "comment", "inline"],
methods: {
parse(usage) {
const parts = [];

24
docs/content/.vuepress/components/CmdGroup.vue
View file

@ -1,30 +1,18 @@
<template>
<div class="command-example-group">
<div class="cmd-group">
<slot />
</div>
</template>
<style lang="stylus">
.command-example-group {
background-color: $exampleBgColor;
.cmd-group {
background-color: $codeBgColor;
border-radius: 6px;
margin: 0.5rem 0;
padding: 0.75rem 1.25rem;
clear: both;
}
.custom-block.tip .command-example-group {
background-color: $exampleBgColorInTip;
padding: 0.25rem 0;
}
.command-example-group .command-example {
margin: 0;
padding: 0;
}
.command-example-group .command-example:not(:last-child) {
margin-bottom: 0.5rem;
.details .cmd-group {
margin-top: 1rem;
}
</style>

24
docs/content/.vuepress/components/CmdInline.vue
View file

@ -1,24 +0,0 @@
<template>
<span class="example-inline"><span class="inline-bot-prefix">pk;</span><slot /></span>
</template>
<style lang="stylus">
.example-inline {
font-size: $exampleFontSize;
font-family: $exampleFontFamily;
background-color: $exampleArgColor;
color: $exampleTextColor;
padding: 0.2rem 0.4rem;
border-radius: 3px;
border-bottom: 1px solid darken($exampleArgColor, 15%);
}
.custom-block.tip .example-inline {
background-color: $exampleArgColorInTip;
}
.inline-bot-prefix {
color: $examplePrefixColor;
}
</style>

36
docs/content/.vuepress/components/CommandInfo.vue
View file

@ -1,10 +1,10 @@
<template>
<div class="command-info">
<div class="cmd-info">
<h3 :id="cmd">
<a class="header-anchor" :href="'#' + cmd">#</a>
{{ command.title }}
</h3>
<p>{{ command.summary }}</p>
<p class="summary">{{ command.summary }}</p>
<slot></slot>
@ -21,8 +21,8 @@
<h4 v-if="command.arguments">Arguments <small>(fill in above)</small></h4>
<div class="info-arg" v-for="(arg, key) in command.arguments">
<Arg>{{ key }}</Arg>
(<strong v-if="arg.type === 'string'">text</strong><strong v-if="arg.type === 'system'">system
ID</strong><span v-if="arg.optional">, <em>optional</em></span>) - {{ arg.desc }}.
(<span v-if="arg.type === 'string'">text</span><span v-if="arg.type === 'system'">system
reference</span><span v-if="arg.optional">, <em>optional</em></span>) - {{ arg.desc }}.
</div>
<h4 v-if="command.flags">Flags <small>(all optional, starts with a hyphen, place anywhere in the
@ -46,24 +46,14 @@
}
</script>
<style>
.command-info {
margin-bottom: 2.5rem;
}
.command-info h3 {
margin-bottom: 0;
}
.command-info p {
margin-top: 0.25rem;
}
.command-info h4 {
margin-bottom: 0.75rem;
}
.info-arg, .info-flag {
margin-bottom: 0.5rem;
<style lang="stylus">
.cmd-info {
.summary { margin-top: 0; }
h3, h4 { margin-bottom: 0.5rem; }
.info-arg, .info-flag {
line-height: 1.5;
margin: 0.5rem 0;
}
}
</style>

2
docs/content/.vuepress/config.js
View file

@ -30,6 +30,8 @@ module.exports = {
collapsable: false,
children: [
"/guide/quick-start",
"/guide/ids",
"/guide/listing",
"/guide/systems",
"/guide/members",
"/guide/proxying",

BIN
docs/content/.vuepress/public/fonts/inconsolata-v19-latin-500.woff Normal file
View file

Binary file not shown.

BIN
docs/content/.vuepress/public/fonts/inconsolata-v19-latin-500.woff2 Normal file
View file

Binary file not shown.

BIN
docs/content/.vuepress/public/fonts/inconsolata-v19-latin-600.woff Normal file
View file

Binary file not shown.

BIN
docs/content/.vuepress/public/fonts/inconsolata-v19-latin-600.woff2 Normal file
View file

Binary file not shown.

BIN
docs/content/.vuepress/public/fonts/inconsolata-v19-latin-regular.woff Normal file
View file

Binary file not shown.

BIN
docs/content/.vuepress/public/fonts/inconsolata-v19-latin-regular.woff2 Normal file
View file

Binary file not shown.

34
docs/content/.vuepress/styles/index.styl Normal file
View file

@ -0,0 +1,34 @@
/* inconsolata-regular - latin */
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 400;
src: local(''),
url('/fonts/inconsolata-v19-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('/fonts/inconsolata-v19-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* inconsolata-500 - latin */
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 500;
src: local(''),
url('/fonts/inconsolata-v19-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('/fonts/inconsolata-v19-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* inconsolata-600 - latin */
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 600;
src: local(''),
url('/fonts/inconsolata-v19-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('/fonts/inconsolata-v19-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
.line-number, code, pre, kbd, .cmd, .cmd-arg {
font-family: $monoFont;
font-weight: $monoWeight;
}

30
docs/content/.vuepress/styles/palette.styl
View file

@ -1,18 +1,18 @@
// THEME
$textColor = #2c3e50;
$accentColor = darken(#e8a024, 10%);
$accentColor = darken(#e8a024, 10%)
// CUSTOM
$exampleBgColor = #f3f5f7;
$exampleBgColorInTip = darken($exampleBgColor, 4%);
$exampleTextColor = darken($textColor, 5%);
$exampleArgColor = darken($exampleBgColor, 1%);
$exampleArgColorInExample = darken($exampleBgColor, 4%);
$exampleArgColorInTip = darken($exampleBgColor, 3%);
$exampleArgColorInBoth = darken($exampleBgColor, 8%);
$tipDarkenFactor = 3;
$exampleDarkenFactor = 5;
$exampleCommentColor = darken($accentColor, 15%);
$examplePrefixColor = desaturate(lighten($exampleCommentColor, 20%), 10%);
$exampleFontSize = 0.9rem;
$exampleFontFamily = source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
// COMMANDS
$cmdColor = #f8fafc;
$cmdBgBlock = #282c34;
$cmdBgInline = darken(#f3f5f7, 4%);
$cmdBgInlineTip = darken(#f3f5f7, 5%);
$argBgPlain = darken(#f3f5f7, 4%);
$argBgInline = darken(#f3f5f7, 5%);
$argBgBlock = lighten($cmdBgBlock, 15%);
// FONTS
$monoFont = Inconsolata, source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
$monoWeight = 500;