init: create project & upload files
This commit is contained in:
commit
a284a54a53
|
@ -0,0 +1,4 @@
|
|||
# Browserslist <https://browsersl.ist>
|
||||
|
||||
defaults
|
||||
since 2012
|
|
@ -0,0 +1,9 @@
|
|||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
end_of_line = lf
|
||||
max_line_length = 120
|
||||
insert_final_newline = true
|
||||
indent_style = space
|
||||
indent_size = 2
|
|
@ -0,0 +1,6 @@
|
|||
version: 2
|
||||
updates:
|
||||
- package-ecosystem: npm
|
||||
directory: /
|
||||
schedule:
|
||||
interval: daily
|
|
@ -0,0 +1,28 @@
|
|||
name: Release
|
||||
|
||||
on:
|
||||
push:
|
||||
tags:
|
||||
- 'v*'
|
||||
|
||||
jobs:
|
||||
# NPM Registry Release
|
||||
release:
|
||||
# Use Ubuntu 22.04
|
||||
runs-on: ubuntu-22.04
|
||||
steps:
|
||||
# Step I
|
||||
- name: Get Source Code
|
||||
uses: actions/checkout@v3
|
||||
with:
|
||||
fetch-depth: 0
|
||||
# Step II
|
||||
- name: Publish to NPM Registry
|
||||
run: pnpm ci:publish
|
||||
env:
|
||||
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
|
||||
# Step III
|
||||
- name: Generate Changelog
|
||||
run: npx changelogithub@0.12
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
|
@ -0,0 +1,4 @@
|
|||
dist/
|
||||
.env.local
|
||||
|
||||
node_modules/
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"cSpell.enabled": false
|
||||
}
|
|
@ -0,0 +1,44 @@
|
|||
module.exports = (grunt) ->
|
||||
require('load-grunt-tasks')(grunt)
|
||||
|
||||
grunt.initConfig(
|
||||
# NPM Package Declare
|
||||
pkg: grunt.file.readJSON('package.json')
|
||||
# Sass Compile
|
||||
sass:
|
||||
options:
|
||||
implementation: require('sass')
|
||||
exp:
|
||||
options:
|
||||
outputStyle: 'expanded'
|
||||
files:
|
||||
'dist/bundle.css': 'src/index.scss'
|
||||
min:
|
||||
options:
|
||||
outputStyle: 'compressed'
|
||||
files:
|
||||
'dist/bundle.min.css': 'src/index.scss'
|
||||
# PostCSS Process
|
||||
postcss:
|
||||
options:
|
||||
map:
|
||||
inline: false
|
||||
annotation: 'dist/'
|
||||
exp:
|
||||
options:
|
||||
processors: [require('autoprefixer')()]
|
||||
src: 'dist/bundle.css'
|
||||
dest: 'dist/bundle.css'
|
||||
min:
|
||||
options:
|
||||
processors: [
|
||||
require('autoprefixer')()
|
||||
require('cssnano')(
|
||||
preset: 'default'
|
||||
)
|
||||
]
|
||||
src: 'dist/bundle.min.css'
|
||||
dest: 'dist/bundle.min.css'
|
||||
)
|
||||
|
||||
grunt.registerTask('build', ['sass', 'postcss'])
|
File diff suppressed because it is too large
Load Diff
|
@ -0,0 +1,35 @@
|
|||
{
|
||||
"name": "x-markdown-css",
|
||||
"version": "0.0.0-dev",
|
||||
"description": "A simple and customizable Markdown CSS for everyone.",
|
||||
"main": "index.js",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/kuohuanhuan/x-markdown-css.git"
|
||||
},
|
||||
"author": "kuohuanhuan",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/kuohuanhuan/x-markdown-css/issues"
|
||||
},
|
||||
"homepage": "https://github.com/kuohuanhuan/x-markdown-css#readme",
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "grunt build"
|
||||
},
|
||||
"dependencies": {
|
||||
"sass": "^1.58.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@lodder/grunt-postcss": "^3.1.1",
|
||||
"autoprefixer": "^10.4.13",
|
||||
"coffeescript": "^2.7.0",
|
||||
"cssnano": "^5.1.15",
|
||||
"grunt": "^1.6.1",
|
||||
"grunt-sass": "^3.1.0",
|
||||
"load-grunt-tasks": "^5.1.0",
|
||||
"postcss": "^8.4.21"
|
||||
}
|
||||
}
|
|
@ -0,0 +1,4 @@
|
|||
@use 'scss/vars' as *;
|
||||
|
||||
@import 'scss/markdown';
|
||||
@import 'scss/prose';
|
|
@ -0,0 +1,13 @@
|
|||
$shiki-light: #f8f8f8;
|
||||
$shiki-dark: #0e0e0e;
|
||||
$link-border: hsla(0, 0%, 50%, .3);
|
||||
$code: #111827;
|
||||
$ol-counter: #6b7280;
|
||||
$ul-counter: #d1d5db;
|
||||
$hr-border: hsla(0, 0%, 50%, .3);
|
||||
$blockquote-border: hsla(0, 0%, 50%, .3);
|
||||
$figcaption: #6b7280;
|
||||
$pre: #e5e7eb;
|
||||
$thead: #111827;
|
||||
$thead-border: #d1d5db;
|
||||
$tr-border: #e5e7eb;
|
|
@ -0,0 +1,2 @@
|
|||
$font-sans: 'Open Sans', 'Noto Sans TC', 'Inter', 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
||||
$font-monospace: 'DM Mono', 'Jetbrains Mono', 'Fira Code', 'Input Mono', 'Ubuntu', monospace;
|
|
@ -0,0 +1,3 @@
|
|||
$general: #bbb;
|
||||
$dark: #ddd;
|
||||
$darker: #fff;
|
|
@ -0,0 +1,3 @@
|
|||
$general: #555;
|
||||
$dark: #222;
|
||||
$darker: #000;
|
|
@ -0,0 +1,177 @@
|
|||
.markdown-body {
|
||||
color: var(--xm-c-general);
|
||||
font-family: var(--xm-font-sans) !important;
|
||||
pre {
|
||||
&:not(.shiki, .highlight) {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
.shiki,
|
||||
.highlight {
|
||||
margin: .5rem 0;
|
||||
font-size: 1.05rem;
|
||||
font-family: var(--xm-font-monospace) !important;
|
||||
line-height: 1.4;
|
||||
&.shiki-light {
|
||||
background: var(--xm-c-shiki-light) !important;
|
||||
}
|
||||
&.shiki-dark {
|
||||
background: var(--xm-c-shiki-dark) !important;
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
a {
|
||||
font-weight: inherit;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid var(--xm-c-link-border);
|
||||
transition: border .3s ease-in-out;
|
||||
&:hover {
|
||||
border-bottom: 1px solid var(--xm-c-general);
|
||||
}
|
||||
code {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
hr {
|
||||
margin: 2rem auto;
|
||||
width: 50px;
|
||||
}
|
||||
blockquote {
|
||||
padding: .6rem 1.2rem;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
line-height: 1.5rem;
|
||||
opacity: .8;
|
||||
> * {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
p {
|
||||
&:first-of-type::before {
|
||||
content: none;
|
||||
}
|
||||
&:first-of-type::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:first-child {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
.dark {
|
||||
.shiki-light {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
html {
|
||||
&:not(.dark) {
|
||||
.shiki-dark {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.itrem {
|
||||
text-decoration: none;
|
||||
opacity: .6;
|
||||
transition: .2s all ease-out;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.header-anchor {
|
||||
float: left;
|
||||
margin-top: .125rem;
|
||||
margin-left: -1.2rem;
|
||||
padding-right: .5rem;
|
||||
font-size: .85rem;
|
||||
text-decoration: none;
|
||||
border: 0 !important;
|
||||
opacity: 0;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
&:hover {
|
||||
.header-anchor {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
.header-anchor {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
&:hover {
|
||||
.header-anchor {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
.header-anchor {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
&:hover {
|
||||
.header-anchor {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
.header-anchor {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
&:hover {
|
||||
.header-anchor {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
.header-anchor {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
h5 {
|
||||
&:hover {
|
||||
.header-anchor {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
.header-anchor {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
h6 {
|
||||
&:hover {
|
||||
.header-anchor {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
.header-anchor {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,267 @@
|
|||
.markdown-body,
|
||||
.prose {
|
||||
max-width: 65ch;
|
||||
font-size: 1rem;
|
||||
color: var(--xm-c-general);
|
||||
line-height: 1.75;
|
||||
code {
|
||||
font-size: .875rem;
|
||||
font-weight: 600;
|
||||
color: var(--xm-c-dark);
|
||||
&::before, &::after {
|
||||
content: '`';
|
||||
}
|
||||
}
|
||||
a {
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
color: var(--xm-c-darker);
|
||||
code {
|
||||
color: var(--xm-c-code);
|
||||
}
|
||||
}
|
||||
strong {
|
||||
font-weight: 600;
|
||||
color: var(--xm-c-dark);
|
||||
}
|
||||
li {
|
||||
margin-top: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
ol {
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
list-style-type: none;
|
||||
> li {
|
||||
position: relative;
|
||||
padding-left: 1.75rem;
|
||||
&::before {
|
||||
content: counter(list-item, decimal) '.';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
font-weight: 400;
|
||||
color: var(--xm-c-ol-counter);
|
||||
}
|
||||
}
|
||||
}
|
||||
ul {
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
list-style-type: none;
|
||||
> li {
|
||||
position: relative;
|
||||
padding-left: 1.75rem;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: calc(.875rem - .1875rem);
|
||||
left: .25rem;
|
||||
width: .375rem;
|
||||
height: .375rem;
|
||||
background-color: var(--xm-c-ul-counter);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
hr {
|
||||
margin-top: 3rem;
|
||||
border-color: var(--xm-c-hr-border);
|
||||
margin-bottom: 3rem;
|
||||
+ * {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
blockquote,
|
||||
q {
|
||||
margin-top: 1.6rem;
|
||||
padding-left: 1rem;
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
color: inherit;
|
||||
border-color: var(--xm-c-blockquote-color);
|
||||
border-left-width: .25rem;
|
||||
quotes: '\201C''\201D''\2018''\2019';
|
||||
margin-bottom: 1.6rem;
|
||||
p {
|
||||
&:first-of-type::before {
|
||||
content: open-quote;
|
||||
}
|
||||
&:last-of-type::after {
|
||||
content: close-quote;
|
||||
}
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
margin-bottom: .8889rem;
|
||||
font-size: 2.25rem;
|
||||
font-weight: 800;
|
||||
color: var(--xm-c-darker);
|
||||
line-height: 1.1111;
|
||||
}
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--xm-c-dark);
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.3334;
|
||||
code {
|
||||
font-size: .875rem;
|
||||
}
|
||||
+ * {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
margin-top: 1.6rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: inherit;
|
||||
margin-bottom: .6rem;
|
||||
line-height: 1.6;
|
||||
opacity: .7;
|
||||
code {
|
||||
font-size: .9rem;
|
||||
}
|
||||
+ * {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
margin-top: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: inherit;
|
||||
margin-bottom: .5rem;
|
||||
line-height: 1.5;
|
||||
+ * {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
figure {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
figcaption {
|
||||
margin-top: .8571rem;
|
||||
font-size: .875rem;
|
||||
color: var(--xm-c-figcaption);
|
||||
line-height: 1.4286;
|
||||
}
|
||||
> * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
pre {
|
||||
overflow-x: auto;
|
||||
margin-top: 1.7143rem;
|
||||
padding-top: .8571rem, 1.1429rem;
|
||||
font-size: .875rem;
|
||||
color: var(--xm-c-pre);
|
||||
line-height: 1.7143;
|
||||
margin-bottom: 1.7143rem;
|
||||
border-radius: .375rem;
|
||||
code {
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
font-weight: 400;
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
border-width: 0;
|
||||
border-radius: 0;
|
||||
line-height: inherit;
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
table {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
width: 100%;
|
||||
table-layout: auto;
|
||||
font-size: .875rem;
|
||||
text-align: left;
|
||||
line-height: 1.7143;
|
||||
}
|
||||
thead {
|
||||
font-weight: 600;
|
||||
color: var(--xm-c-thead);
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: var(--xm-c-thead-border);
|
||||
th {
|
||||
vertical-align: bottom;
|
||||
padding-right: .5714rem;
|
||||
padding-bottom: .5714rem;
|
||||
padding-left: .5714rem;
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
tr {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: var(--xm-c-tr-border);
|
||||
&:last-child {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
td {
|
||||
vertical-align: top;
|
||||
padding: .5714rem;
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
img {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
video {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
h6 {
|
||||
text-transform: uppercase;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 500;
|
||||
opacity: .5;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
> :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
b {
|
||||
color: var(--xm-c-dark);
|
||||
}
|
||||
em {
|
||||
color: inherit;
|
||||
}
|
||||
ul ul,
|
||||
ul ol,
|
||||
ol ul,
|
||||
ol ol {
|
||||
margin-top: .75rem;
|
||||
margin-bottom: .75rem;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,25 @@
|
|||
@use 'sass:meta' as *;
|
||||
|
||||
@use '_vars/constants';
|
||||
@use '_vars/colors';
|
||||
@use '_vars/light';
|
||||
@use '_vars/dark';
|
||||
|
||||
:root {
|
||||
@each $name, $val in module-variables('constants') {
|
||||
--xm-#{$name}: #{$val};
|
||||
}
|
||||
@each $name, $val in module-variables('colors') {
|
||||
--xm-c-#{$name}: #{$val};
|
||||
}
|
||||
}
|
||||
.markdown-body {
|
||||
@each $name, $val in module-variables('light') {
|
||||
--xm-c-#{$name}: #{$val};
|
||||
}
|
||||
}
|
||||
.dark .markdown-body {
|
||||
@each $name, $val in module-variables('dark') {
|
||||
--xm-c-#{$name}: #{$val};
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue