mirror of
https://github.com/tiennm99/hugoDocs.git
synced 2026-10-20 00:15:24 +00:00
Add new theme
This commit is contained in:
Bjørn Erik Pedersen committed
1 parent
b19d68ee55
commit
bdf97b7b45
152 files changed
+4679
-291
No files matched your search
@@ -0,0 +1,7 @@
|
||||
/* The ordeer of these does not matter. */
|
||||
@import "./content.css";
|
||||
@import "./fonts.css";
|
||||
@import "./helpers.css";
|
||||
@import "./shortcodes.css";
|
||||
@import "./tableofcontents.css";
|
||||
@import "./view-transitions.css";
|
||||
@@ -0,0 +1,85 @@
|
||||
/* Background */ .bg { background-color: var(--color-light); }
|
||||
/* PreWrapper */ .chroma { background-color: var(--color-light); }
|
||||
/* Other */ .chroma .x { }
|
||||
/* Error */ .chroma .err { color: #a61717; background-color: #e3d2d2 }
|
||||
/* CodeLine */ .chroma .cl { }
|
||||
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
|
||||
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
|
||||
/* LineHighlight */ .chroma .hl { background-color: #ffffcc }
|
||||
/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
|
||||
/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
|
||||
/* Line */ .chroma .line { display: flex; }
|
||||
/* Keyword */ .chroma .k { font-weight: bold }
|
||||
/* KeywordConstant */ .chroma .kc { font-weight: bold }
|
||||
/* KeywordDeclaration */ .chroma .kd { font-weight: bold }
|
||||
/* KeywordNamespace */ .chroma .kn { font-weight: bold }
|
||||
/* KeywordPseudo */ .chroma .kp { font-weight: bold }
|
||||
/* KeywordReserved */ .chroma .kr { font-weight: bold }
|
||||
/* KeywordType */ .chroma .kt { color: #445588; font-weight: bold }
|
||||
/* Name */ .chroma .n { }
|
||||
/* NameAttribute */ .chroma .na { color: #008080 }
|
||||
/* NameBuiltin */ .chroma .nb { color: #999999 }
|
||||
/* NameBuiltinPseudo */ .chroma .bp { }
|
||||
/* NameClass */ .chroma .nc { color: #445588; font-weight: bold }
|
||||
/* NameConstant */ .chroma .no { color: #008080 }
|
||||
/* NameDecorator */ .chroma .nd { }
|
||||
/* NameEntity */ .chroma .ni { color: #800080 }
|
||||
/* NameException */ .chroma .ne { color: #990000; font-weight: bold }
|
||||
/* NameFunction */ .chroma .nf { color: #990000; font-weight: bold }
|
||||
/* NameFunctionMagic */ .chroma .fm { }
|
||||
/* NameLabel */ .chroma .nl { }
|
||||
/* NameNamespace */ .chroma .nn { color: #555555 }
|
||||
/* NameOther */ .chroma .nx { }
|
||||
/* NameProperty */ .chroma .py { }
|
||||
/* NameTag */ .chroma .nt { color: #000080 }
|
||||
/* NameVariable */ .chroma .nv { color: #008080 }
|
||||
/* NameVariableClass */ .chroma .vc { }
|
||||
/* NameVariableGlobal */ .chroma .vg { }
|
||||
/* NameVariableInstance */ .chroma .vi { }
|
||||
/* NameVariableMagic */ .chroma .vm { }
|
||||
/* Literal */ .chroma .l { }
|
||||
/* LiteralDate */ .chroma .ld { }
|
||||
/* LiteralString */ .chroma .s { color: #bb8844 }
|
||||
/* LiteralStringAffix */ .chroma .sa { color: #bb8844 }
|
||||
/* LiteralStringBacktick */ .chroma .sb { color: #bb8844 }
|
||||
/* LiteralStringChar */ .chroma .sc { color: #bb8844 }
|
||||
/* LiteralStringDelimiter */ .chroma .dl { color: #bb8844 }
|
||||
/* LiteralStringDoc */ .chroma .sd { color: #bb8844 }
|
||||
/* LiteralStringDouble */ .chroma .s2 { color: #bb8844 }
|
||||
/* LiteralStringEscape */ .chroma .se { color: #bb8844 }
|
||||
/* LiteralStringHeredoc */ .chroma .sh { color: #bb8844 }
|
||||
/* LiteralStringInterpol */ .chroma .si { color: #bb8844 }
|
||||
/* LiteralStringOther */ .chroma .sx { color: #bb8844 }
|
||||
/* LiteralStringRegex */ .chroma .sr { color: #808000 }
|
||||
/* LiteralStringSingle */ .chroma .s1 { color: #bb8844 }
|
||||
/* LiteralStringSymbol */ .chroma .ss { color: #bb8844 }
|
||||
/* LiteralNumber */ .chroma .m { color: #009999 }
|
||||
/* LiteralNumberBin */ .chroma .mb { color: #009999 }
|
||||
/* LiteralNumberFloat */ .chroma .mf { color: #009999 }
|
||||
/* LiteralNumberHex */ .chroma .mh { color: #009999 }
|
||||
/* LiteralNumberInteger */ .chroma .mi { color: #009999 }
|
||||
/* LiteralNumberIntegerLong */ .chroma .il { color: #009999 }
|
||||
/* LiteralNumberOct */ .chroma .mo { color: #009999 }
|
||||
/* Operator */ .chroma .o { font-weight: bold }
|
||||
/* OperatorWord */ .chroma .ow { font-weight: bold }
|
||||
/* Punctuation */ .chroma .p { }
|
||||
/* Comment */ .chroma .c { color: #999988; font-style: italic }
|
||||
/* CommentHashbang */ .chroma .ch { color: #999988; font-style: italic }
|
||||
/* CommentMultiline */ .chroma .cm { color: #999988; font-style: italic }
|
||||
/* CommentSingle */ .chroma .c1 { color: #999988; font-style: italic }
|
||||
/* CommentSpecial */ .chroma .cs { color: #999999; font-weight: bold; font-style: italic }
|
||||
/* CommentPreproc */ .chroma .cp { color: #999999; font-weight: bold }
|
||||
/* CommentPreprocFile */ .chroma .cpf { color: #999999; font-weight: bold }
|
||||
/* Generic */ .chroma .g { }
|
||||
/* GenericDeleted */ .chroma .gd { color: #000000; background-color: #ffdddd }
|
||||
/* GenericEmph */ .chroma .ge { font-style: italic }
|
||||
/* GenericError */ .chroma .gr { color: #aa0000 }
|
||||
/* GenericHeading */ .chroma .gh { color: #999999 }
|
||||
/* GenericInserted */ .chroma .gi { color: #000000; background-color: #ddffdd }
|
||||
/* GenericOutput */ .chroma .go { color: #888888 }
|
||||
/* GenericPrompt */ .chroma .gp { color: #555555 }
|
||||
/* GenericStrong */ .chroma .gs { font-weight: bold }
|
||||
/* GenericSubheading */ .chroma .gu { color: #aaaaaa }
|
||||
/* GenericTraceback */ .chroma .gt { color: #aa0000 }
|
||||
/* GenericUnderline */ .chroma .gl { text-decoration: underline }
|
||||
/* TextWhitespace */ .chroma .w { color: #bbbbbb }
|
||||
@@ -0,0 +1,85 @@
|
||||
/* Background */.dark .bg { background-color: var(--color-dark); }
|
||||
/* PreWrapper */ .dark .chroma { background-color: var(--color-dark); }
|
||||
/* Other */ .dark .chroma .x { }
|
||||
/* Error */ .dark .chroma .err { color: #ef6155 }
|
||||
/* CodeLine */ .dark .chroma .cl { }
|
||||
/* LineTableTD */ .dark .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
|
||||
/* LineTable */ .dark .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
|
||||
/* LineHighlight */ .dark .chroma .hl { background-color: #ffffcc }
|
||||
/* LineNumbersTable */ .dark .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
|
||||
/* LineNumbers */ .dark .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
|
||||
/* Line */ .dark .chroma .line { display: flex; }
|
||||
/* Keyword */ .dark .chroma .k { color: #815ba4 }
|
||||
/* KeywordConstant */ .dark .chroma .kc { color: #815ba4 }
|
||||
/* KeywordDeclaration */ .dark .chroma .kd { color: #815ba4 }
|
||||
/* KeywordNamespace */ .dark .chroma .kn { color: #5bc4bf }
|
||||
/* KeywordPseudo */ .dark .chroma .kp { color: #815ba4 }
|
||||
/* KeywordReserved */ .dark .chroma .kr { color: #815ba4 }
|
||||
/* KeywordType */ .dark .chroma .kt { color: #fec418 }
|
||||
/* Name */ .dark .chroma .n { }
|
||||
/* NameAttribute */ .dark .chroma .na { color: #06b6ef }
|
||||
/* NameBuiltin */ .dark .chroma .nb { }
|
||||
/* NameBuiltinPseudo */ .dark .chroma .bp { }
|
||||
/* NameClass */ .dark .chroma .nc { color: #fec418 }
|
||||
/* NameConstant */ .dark .chroma .no { color: #ef6155 }
|
||||
/* NameDecorator */ .dark .chroma .nd { color: #5bc4bf }
|
||||
/* NameEntity */ .dark .chroma .ni { }
|
||||
/* NameException */ .dark .chroma .ne { color: #ef6155 }
|
||||
/* NameFunction */ .dark .chroma .nf { color: #06b6ef }
|
||||
/* NameFunctionMagic */ .dark .chroma .fm { }
|
||||
/* NameLabel */ .dark .chroma .nl { }
|
||||
/* NameNamespace */ .dark .chroma .nn { color: #fec418 }
|
||||
/* NameOther */ .dark .chroma .nx { color: #06b6ef }
|
||||
/* NameProperty */ .dark .chroma .py { }
|
||||
/* NameTag */ .dark .chroma .nt { color: #5bc4bf }
|
||||
/* NameVariable */ .dark .chroma .nv { color: #ef6155 }
|
||||
/* NameVariableClass */ .dark .chroma .vc { }
|
||||
/* NameVariableGlobal */ .dark .chroma .vg { }
|
||||
/* NameVariableInstance */ .dark .chroma .vi { }
|
||||
/* NameVariableMagic */ .dark .chroma .vm { }
|
||||
/* Literal */ .dark .chroma .l { color: #f99b15 }
|
||||
/* LiteralDate */ .dark .chroma .ld { color: #48b685 }
|
||||
/* LiteralString */ .dark .chroma .s { color: #48b685 }
|
||||
/* LiteralStringAffix */ .dark .chroma .sa { color: #48b685 }
|
||||
/* LiteralStringBacktick */ .dark .chroma .sb { color: #48b685 }
|
||||
/* LiteralStringChar */ .dark .chroma .sc { }
|
||||
/* LiteralStringDelimiter */ .dark .chroma .dl { color: #48b685 }
|
||||
/* LiteralStringDoc */ .dark .chroma .sd { color: #776e71 }
|
||||
/* LiteralStringDouble */ .dark .chroma .s2 { color: #48b685 }
|
||||
/* LiteralStringEscape */ .dark .chroma .se { color: #f99b15 }
|
||||
/* LiteralStringHeredoc */ .dark .chroma .sh { color: #48b685 }
|
||||
/* LiteralStringInterpol */ .dark .chroma .si { color: #f99b15 }
|
||||
/* LiteralStringOther */ .dark .chroma .sx { color: #48b685 }
|
||||
/* LiteralStringRegex */ .dark .chroma .sr { color: #48b685 }
|
||||
/* LiteralStringSingle */ .dark .chroma .s1 { color: #48b685 }
|
||||
/* LiteralStringSymbol */ .dark .chroma .ss { color: #48b685 }
|
||||
/* LiteralNumber */ .dark .chroma .m { color: #f99b15 }
|
||||
/* LiteralNumberBin */ .dark .chroma .mb { color: #f99b15 }
|
||||
/* LiteralNumberFloat */ .dark .chroma .mf { color: #f99b15 }
|
||||
/* LiteralNumberHex */ .dark .chroma .mh { color: #f99b15 }
|
||||
/* LiteralNumberInteger */ .dark .chroma .mi { color: #f99b15 }
|
||||
/* LiteralNumberIntegerLong */ .dark .chroma .il { color: #f99b15 }
|
||||
/* LiteralNumberOct */ .dark .chroma .mo { color: #f99b15 }
|
||||
/* Operator */ .dark .chroma .o { color: #5bc4bf }
|
||||
/* OperatorWord */ .dark .chroma .ow { color: #5bc4bf }
|
||||
/* Punctuation */ .dark .chroma .p { }
|
||||
/* Comment */ .dark .chroma .c { color: #776e71 }
|
||||
/* CommentHashbang */ .dark .chroma .ch { color: #776e71 }
|
||||
/* CommentMultiline */ .dark .chroma .cm { color: #776e71 }
|
||||
/* CommentSingle */ .dark .chroma .c1 { color: #776e71 }
|
||||
/* CommentSpecial */ .dark .chroma .cs { color: #776e71 }
|
||||
/* CommentPreproc */ .dark .chroma .cp { color: #776e71 }
|
||||
/* CommentPreprocFile */ .dark .chroma .cpf { color: #776e71 }
|
||||
/* Generic */ .dark .chroma .g { }
|
||||
/* GenericDeleted */ .dark .chroma .gd { color: #ef6155 }
|
||||
/* GenericEmph */ .dark .chroma .ge { font-style: italic }
|
||||
/* GenericError */ .dark .chroma .gr { }
|
||||
/* GenericHeading */ .dark .chroma .gh { font-weight: bold }
|
||||
/* GenericInserted */ .dark .chroma .gi { color: #48b685 }
|
||||
/* GenericOutput */ .dark .chroma .go { }
|
||||
/* GenericPrompt */ .dark .chroma .gp { color: #776e71; font-weight: bold }
|
||||
/* GenericStrong */ .dark .chroma .gs { font-weight: bold }
|
||||
/* GenericSubheading */ .dark .chroma .gu { color: #5bc4bf; font-weight: bold }
|
||||
/* GenericTraceback */ .dark .chroma .gt { }
|
||||
/* GenericUnderline */ .dark .chroma .gl { }
|
||||
/* TextWhitespace */ .dark .chroma .w { }
|
||||
@@ -0,0 +1,38 @@
|
||||
@import "./chroma_dark.css";
|
||||
@import "./chroma.css";
|
||||
@import "./highlight.css";
|
||||
|
||||
/* Some contrast ratio fixes as reported by Google Page Speed. */
|
||||
.chroma .c1 {
|
||||
@apply text-gray-500;
|
||||
}
|
||||
|
||||
.dark .chroma .c1 {
|
||||
@apply text-gray-400;
|
||||
}
|
||||
|
||||
.content {
|
||||
@apply prose prose-stone max-w-none dark:prose-invert dark:text-slate-400;
|
||||
/* headings */
|
||||
@apply prose-h6:font-bold;
|
||||
/* lead */
|
||||
@apply prose-lead:text-slate-500 prose-lead:text-xl prose-lead:mt-2 sm:prose-lead:mt-4 prose-lead:leading-relaxed dark:prose-lead:text-slate-400;
|
||||
/* links */
|
||||
@apply prose-a:text-primary prose-a:hover:text-primary/70 prose-a:underline;
|
||||
@apply prose-a:prose-code:underline prose-a:prose-code:hover:text-primary/70 prose-a:prose-code:hover:underline;
|
||||
/* pre */
|
||||
@apply prose-pre:text-gray-800 prose-pre:border-1 prose-pre:border-gray-100 prose-pre:bg-light dark:prose-pre:bg-dark dark:prose-pre:ring-1 dark:prose-pre:ring-slate-300/10;
|
||||
/* code */
|
||||
@apply prose-code:px-0.5 prose-code:text-gray-900 prose-code:dark:text-gray-300 border-none;
|
||||
@apply prose-code:before:hidden prose-code:after:hidden prose-code:font-mono;
|
||||
/* tables */
|
||||
@apply prose-table:border-2 prose-table:border-gray-100 prose-table:dark:border-gray-800 prose-table:relative prose-table:overflow-scroll prose-table:prose-th:font-bold prose-table:prose-th:bg-blue-500 dark:prose-table:prose-th:bg-blue-500/50 prose-table:prose-th:p-2 prose-table:prose-td:p-2 prose-table:prose-th:text-white;
|
||||
/* hr */
|
||||
@apply dark:prose-hr:border-slate-800;
|
||||
}
|
||||
|
||||
/* This will not match highlighting inside e.g. the code-toggle shortcode. */
|
||||
/* For more fine grained control of this, see components/shortcodes.css. */
|
||||
.content > .highlight {
|
||||
@apply border-1 border-gray-200 dark:border-slate-600 mt-6 mb-8;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
@font-face {
|
||||
font-family: "Mulish";
|
||||
font-style: normal;
|
||||
src: url("../fonts/Mulish-VariableFont_wght.ttf") format("truetype");
|
||||
font-weight: 1 999;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Mulish";
|
||||
font-style: italic;
|
||||
src: url("../fonts/Mulish-Italic-VariableFont_wght.ttf") format("truetype");
|
||||
font-weight: 1 999;
|
||||
font-display: swap;
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
/* Helper class to limit a text block to two lines. */
|
||||
.two-lines-ellipsis {
|
||||
display: block;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* Helper class to limit a text block to three lines. */
|
||||
.three-lines-ellipsis {
|
||||
display: block;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
.highlight {
|
||||
@apply bg-light dark:bg-dark rounded-none;
|
||||
}
|
||||
|
||||
.highlight pre {
|
||||
@apply m-0 p-3 w-full h-full overflow-x-auto dark:border-black rounded-none;
|
||||
}
|
||||
|
||||
.highlight pre code {
|
||||
@apply m-0 p-0 w-full h-full;
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
.shortcode-code {
|
||||
.highlight {
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
.tableofcontents {
|
||||
ul {
|
||||
@apply list-none;
|
||||
li {
|
||||
@apply mb-2;
|
||||
a {
|
||||
@apply text-primary;
|
||||
&:hover {
|
||||
@apply text-primary/60;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
/* Global slight fade */
|
||||
::view-transition-old(root),
|
||||
::view-transition-new(root) {
|
||||
animation-duration: 200ms;
|
||||
}
|
||||
|
||||
::view-transition-old(qr),
|
||||
::view-transition-new(qr) {
|
||||
animation-duration: 800ms;
|
||||
animation-delay: 250ms;
|
||||
}
|
||||
|
||||
.view-transition-qr {
|
||||
view-transition-name: qr;
|
||||
}
|
||||
|
||||
/* Turbo styles */
|
||||
.turbo-progress-bar {
|
||||
@apply bg-blue-500;
|
||||
opacity: 0.35;
|
||||
height: 3px;
|
||||
}
|
||||
Reference in new issue
Block a user