Add theme config option
Signed-off-by: trivernis <trivernis@protonmail.com>pull/7/head
parent
6b9a30c571
commit
097eae5f4e
GPG Key ID:
DFFFCC2C7A02DB45
@ -0,0 +1,159 @@
|
|||||||
|
body {
|
||||||
|
background-color: $background-color-variant-2;
|
||||||
|
overflow-x: hidden;
|
||||||
|
color: $primary-color;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
font-family: "Fira Sans", "Noto Sans", SansSerif, sans-serif;
|
||||||
|
width: 100vh;
|
||||||
|
max-width: calc(100% - 4rem);
|
||||||
|
padding: 2rem;
|
||||||
|
margin: auto;
|
||||||
|
background-color: $background-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
font-size: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100vh;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
color: $primary-color;
|
||||||
|
|
||||||
|
pre {
|
||||||
|
font-family: "Fira Code", "Mono", monospace;
|
||||||
|
padding: 0.8em 0.2em;
|
||||||
|
background-color: $background-color-variant-1 !important;
|
||||||
|
border-radius: 0.25em;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.inlineCode {
|
||||||
|
font-family: "Fira Code", monospace;
|
||||||
|
border-radius: 0.1em;
|
||||||
|
background-color: $background-color-variant-1;
|
||||||
|
padding: 0 0.1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tableWrapper {
|
||||||
|
overflow-x: auto;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
& > table {
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
|
||||||
|
tr {
|
||||||
|
&:nth-child(odd) {
|
||||||
|
background-color: $background-color-variant-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(1) {
|
||||||
|
background-color: $background-color-variant-2;
|
||||||
|
font-weight: bold;
|
||||||
|
border-bottom: 1px solid invert($background-color)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table td, table th {
|
||||||
|
border-left: 1px solid invert($background-color);
|
||||||
|
padding: 0.2em 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
table tr td:first-child, table tr th:first-child {
|
||||||
|
border-left: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
margin-left: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $secondary-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quote {
|
||||||
|
border-left: 0.3em solid $background-color-variant-3;
|
||||||
|
border-radius: 0.2em;
|
||||||
|
padding-left: 1em;
|
||||||
|
margin-left: 0;
|
||||||
|
background-color: $background-color-variant-1;
|
||||||
|
|
||||||
|
.metadata {
|
||||||
|
font-style: italic;
|
||||||
|
padding-left: 0.5em;
|
||||||
|
color: $primary-variant-1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.figure {
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.imageDescription {
|
||||||
|
display: block;
|
||||||
|
color: $primary-variant-1;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.centered {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glossaryReference {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
border-bottom: 1px dotted $primary-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
font-family: "Fira Code", "Mono", monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
|
||||||
|
.content > section > section, .content > section > section {
|
||||||
|
page-break-inside: avoid;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: $background-color !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
$background-color: darken(#2b303b, 8%);
|
||||||
|
$background-color-variant-1: lighten($background-color, 7%);
|
||||||
|
$background-color-variant-2: lighten($background-color, 14%);
|
||||||
|
$background-color-variant-3: lighten($background-color, 21%);
|
||||||
|
$primary-color: #EEE;
|
||||||
|
$primary-variant-1: darken($primary-color, 14%);
|
||||||
|
$secondary-color: #3aa7df;
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
$background-color: darken(#002b36, 5%);
|
||||||
|
$background-color-variant-1: lighten($background-color, 7%);
|
||||||
|
$background-color-variant-2: lighten($background-color, 14%);
|
||||||
|
$background-color-variant-3: lighten($background-color, 21%);
|
||||||
|
$primary-color: #EEE;
|
||||||
|
$primary-variant-1: darken($primary-color, 14%);
|
||||||
|
$secondary-color: #0096c9;
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
$background-color: #FFF;
|
||||||
|
$background-color-variant-1: darken($background-color, 7%);
|
||||||
|
$background-color-variant-2: darken($background-color, 14%);
|
||||||
|
$background-color-variant-3: darken($background-color, 21%);
|
||||||
|
$primary-color: #000;
|
||||||
|
$primary-variant-1: lighten($primary-color, 14%);
|
||||||
|
$secondary-color: #00286a;
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
$background-color: #FFF;
|
||||||
|
$background-color-variant-1: darken($background-color, 7%);
|
||||||
|
$background-color-variant-2: darken($background-color, 14%);
|
||||||
|
$background-color-variant-3: darken($background-color, 21%);
|
||||||
|
$primary-color: #112;
|
||||||
|
$primary-variant-1: lighten($primary-color, 14%);
|
||||||
|
$secondary-color: #00348e;
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
$background-color: #fff8f0;
|
||||||
|
$background-color-variant-1: darken($background-color, 4%);
|
||||||
|
$background-color-variant-2: darken($background-color, 8%);
|
||||||
|
$background-color-variant-3: darken($background-color, 12%);
|
||||||
|
$primary-color: #112;
|
||||||
|
$primary-variant-1: lighten($primary-color, 14%);
|
||||||
|
$secondary-color: #2b61be;
|
||||||
@ -1,149 +0,0 @@
|
|||||||
body {
|
|
||||||
background-color: #DDD;
|
|
||||||
overflow-x: hidden;
|
|
||||||
color: #000;
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
font-family: "Fira Sans", "Noto Sans", SansSerif, sans-serif;
|
|
||||||
width: 100vh;
|
|
||||||
max-width: calc(100% - 4rem);
|
|
||||||
padding: 2rem;
|
|
||||||
margin: auto;
|
|
||||||
background-color: #FFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 2.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 1.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h5 {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h6 {
|
|
||||||
font-size: 0.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100vh;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
code pre {
|
|
||||||
font-family: "Fira Code", "Mono", monospace;
|
|
||||||
padding: 0.8em 0.2em;
|
|
||||||
background-color: #EEE !important;
|
|
||||||
border-radius: 0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
code.inlineCode {
|
|
||||||
font-family: "Fira Code", monospace;
|
|
||||||
border-radius: 0.1em;
|
|
||||||
background-color: #EEE;
|
|
||||||
padding: 0 0.1em
|
|
||||||
}
|
|
||||||
|
|
||||||
.tableWrapper {
|
|
||||||
overflow-x: auto;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tableWrapper > table {
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
}
|
|
||||||
|
|
||||||
table tr:nth-child(odd) {
|
|
||||||
background-color: #DDD;
|
|
||||||
}
|
|
||||||
|
|
||||||
table tr:nth-child(1) {
|
|
||||||
background-color: white;
|
|
||||||
font-weight: bold;
|
|
||||||
border-bottom: 1px solid black;
|
|
||||||
}
|
|
||||||
|
|
||||||
table td, table th {
|
|
||||||
border-left: 1px solid black;
|
|
||||||
padding: 0.2em 0.5em
|
|
||||||
}
|
|
||||||
|
|
||||||
table tr td:first-child, table tr th:first-child {
|
|
||||||
border-left: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote {
|
|
||||||
margin-left: 0;
|
|
||||||
background-color: rgba(0, 0, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.quote {
|
|
||||||
border-left: 0.3em solid gray;
|
|
||||||
border-radius: 0.2em;
|
|
||||||
padding-left: 1em;
|
|
||||||
margin-left: 0;
|
|
||||||
background-color: #EEE;
|
|
||||||
}
|
|
||||||
|
|
||||||
.quote .metadata {
|
|
||||||
font-style: italic;
|
|
||||||
padding-left: 0.5em;
|
|
||||||
color: #444
|
|
||||||
}
|
|
||||||
|
|
||||||
.figure {
|
|
||||||
width: 100%;
|
|
||||||
display: block;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.figure .imageDescription {
|
|
||||||
display: block;
|
|
||||||
color: #444;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.centered {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.glossaryReference {
|
|
||||||
text-decoration: none;
|
|
||||||
color: inherit;
|
|
||||||
border-bottom: 1px dotted #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.arrow {
|
|
||||||
font-family: "Fira Code", "Mono", monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media print {
|
|
||||||
.content > section > section, .content > section > section {
|
|
||||||
page-break-inside: avoid;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
background-color: white !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -0,0 +1,53 @@
|
|||||||
|
use crate::settings::format_settings::Theme;
|
||||||
|
use std::time::Instant;
|
||||||
|
use syntect::highlighting::ThemeSet;
|
||||||
|
use syntect::parsing::SyntaxSet;
|
||||||
|
|
||||||
|
/// Returns the css of a theme compiled from sass
|
||||||
|
pub fn get_css_for_theme(theme: Theme) -> String {
|
||||||
|
let start = Instant::now();
|
||||||
|
let vars = match theme {
|
||||||
|
Theme::GitHub => include_str!("assets/light-github.scss"),
|
||||||
|
Theme::SolarizedDark => include_str!("assets/dark-solarized.scss"),
|
||||||
|
Theme::SolarizedLight => include_str!("assets/light-solarized.scss"),
|
||||||
|
Theme::OceanDark => include_str!("assets/dark-ocean.scss"),
|
||||||
|
Theme::OceanLight => include_str!("assets/light-ocean.scss"),
|
||||||
|
};
|
||||||
|
let style = format!("{}\n{}", vars, include_str!("assets/base.scss"));
|
||||||
|
|
||||||
|
let css = compile_sass(&*style);
|
||||||
|
|
||||||
|
log::debug!("Compiled style in {} ms", start.elapsed().as_millis());
|
||||||
|
|
||||||
|
css
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Returns the syntax theme for a given theme
|
||||||
|
pub fn get_code_theme_for_theme(theme: Theme) -> (syntect::highlighting::Theme, SyntaxSet) {
|
||||||
|
lazy_static::lazy_static! { static ref PS: SyntaxSet = SyntaxSet::load_defaults_nonewlines(); }
|
||||||
|
lazy_static::lazy_static! { static ref TS: ThemeSet = ThemeSet::load_defaults(); }
|
||||||
|
|
||||||
|
let theme = match theme {
|
||||||
|
Theme::GitHub => "InspiredGitHub",
|
||||||
|
Theme::SolarizedDark => "Solarized (dark)",
|
||||||
|
Theme::SolarizedLight => "Solarized (light)",
|
||||||
|
Theme::OceanDark => "base16-ocean.dark",
|
||||||
|
Theme::OceanLight => "base16-ocean.light",
|
||||||
|
};
|
||||||
|
|
||||||
|
return (TS.themes[theme].clone(), PS.clone());
|
||||||
|
}
|
||||||
|
|
||||||
|
fn compile_sass(sass: &str) -> String {
|
||||||
|
String::from_utf8(
|
||||||
|
rsass::compile_scss(
|
||||||
|
sass.as_bytes(),
|
||||||
|
rsass::output::Format {
|
||||||
|
style: rsass::output::Style::Compressed,
|
||||||
|
precision: 5,
|
||||||
|
},
|
||||||
|
)
|
||||||
|
.unwrap(),
|
||||||
|
)
|
||||||
|
.unwrap()
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue