feat: basic support to web css

src/Makefile

@@ -6,15 +6,15 @@ windows = windows
 macos = macos
 linux = linux
 typora = typora
-pandoc = pandoc
+bare = bare
 
 $(shell mkdir -p $(working_dir))
 $(shell mkdir -p $(target_dir))
 
 $(shell cp -r $(base_dir)/scss $(working_dir)/scss)
 $(shell cp -r $(base_dir)/headers $(working_dir)/headers)
 
-# $(1) is the name of operating system, $(2) is typora or pandoc, $(3) is light or dark theme
+# $(1) is the name of operating system, $(2) is typora or bare, $(3) is light or dark theme
 define build
 	mkdir -p $(target_dir)/$(1)-$(2)
 	mkdir -p $(target_dir)/$(1)-$(2)/target
@@ -40,25 +40,24 @@ define build-typora
 	cp -r $(base_dir)/../resources $(target_dir)/$(1)-$(typora)/resources
 endef
 
-define build-pandoc
-	$(call build,$(linux),$(pandoc),light)
-	$(call build,$(linux),$(pandoc),dark)
+define build-bare
+	$(call build,$(bare),$(bare),light)
 endef
 
 .PHONY: all
 all:
 	make windows
 	make macos
 	make linux
-	make pandoc
+	make bare
 
 .PHONY: all-and-compress
 all-and-compress:
 	make all
 	cd $(target_dir)/$(windows)-$(typora); zip -r $(target_dir)/latex-theme-$(windows).zip ./*
 	cd $(target_dir)/$(macos)-$(typora); zip -r $(target_dir)/latex-theme-$(macos).zip ./*
 	cd $(target_dir)/$(linux)-$(typora); zip -r $(target_dir)/latex-theme-$(linux).zip ./*
-#	cd $(target_dir)/$(pandoc)-$(typora); zip -r $(target_dir)/latex-theme-$(pandoc).zip ./*
+#	cd $(target_dir)/$(bare)-$(bare); zip -r $(target_dir)/latex-theme-$(bare).zip ./*
 
 .PHONY: windows
 windows:
@@ -72,9 +71,9 @@ macos:
 linux:
 	$(call build-typora,$(linux))
 
-.PHONY: pandoc
-pandoc:
-	$(call build-pandoc,$(linux))
+.PHONY: bare
+bare:
+	$(call build-bare,$(linux))
 
 .PHONY: clean
 clean:

src/headers/bare/light.scss

@@ -0,0 +1,5 @@
+$os: "linux";
+$theme: "light";
+$css-type: "bare";
+
+@import "../../scss/include.scss";

src/headers/linux/dark.scss

@@ -1,4 +1,5 @@
 $os: "linux";
 $theme: "dark";
+$css-type: "typora";
 
 @import "../../scss/include.scss";

src/headers/linux/light.scss

@@ -1,4 +1,5 @@
 $os: "linux";
 $theme: "light";
+$css-type: "typora";
 
 @import "../../scss/include.scss";

src/headers/macos/dark.scss

@@ -1,4 +1,5 @@
 $os: "macos";
 $theme: "dark";
+$css-type: "typora";
 
 @import "../../scss/include.scss";

src/headers/macos/light.scss

@@ -1,4 +1,5 @@
 $os: "macos";
 $theme: "light";
+$css-type: "typora";
 
 @import "../../scss/include.scss";

src/headers/windows/dark.scss

@@ -1,4 +1,5 @@
 $os: "windows";
 $theme: "dark";
+$css-type: "typora";
 
 @import "../../scss/include.scss";

src/headers/windows/light.scss

@@ -1,4 +1,5 @@
 $os: "windows";
 $theme: "light";
+$css-type: "typora";
 
 @import "../../scss/include.scss";

src/scss/dark.scss

@@ -114,7 +114,7 @@
     background-color: #282828;
   }
   /*
-  #write pre.md-fences {
+  #{$wrap} pre.md-fences {
     padding: 10rem;
   }
   .md-fences {

src/scss/heading.scss

@@ -1,4 +1,4 @@
-#write {
+#{$wrap} {
   // 标题属性
   h1,
   h2,

src/scss/settings.scss

@@ -1,3 +1,11 @@
+@if $css-type == "bare" {
+  $wrap: 'body' !global;
+} @else if $css-type == "typora" {
+  $wrap: '#write' !global;
+} @else {
+  @error "Unknown css-type: #{$css-type}";
+}
+
 :root {
   @if $os == "windows" {
     $ui-font: "\"阿里巴巴普惠体 2.0\"", "\"微软雅黑\"" !global;

src/scss/table.scss

@@ -1,4 +1,4 @@
-#write {
+#{$wrap} {
   // 三线表
   table {
     /* 三线表第一条线宽度 */

src/scss/text.scss

@@ -1,6 +1,10 @@
 body {
-  padding: 0 !important;
-  margin: 0 !important;
+  @if $css-type == "typora" {
+    padding: 0 !important;
+    margin: 0 !important;
+  } @else if $css-type == "bare" {
+    margin: 0 auto !important;
+  }
   line-height: var(--base-line-height);
   /* counter-reset: tableHead 0 imgHead 0; */
   @if $theme == "dark" {
@@ -11,15 +15,15 @@ body {
 }
 
 @media print {
-  #write {
+  #{$wrap} {
     padding: 0 !important;
   }
   @page {
     margin: 1.8cm 2cm 1.2cm 2cm !important; /* 页边距 */
   }
 }
 
-#write {
+#{$wrap} {
   font-family: var(--base-Latin-font), var(--base-Chinese-font), serif;
   font-size: var(--base-font-size);
   /* A4标准宽度 */

src/scss/typora.scss

@@ -1,5 +1,5 @@
 @media screen {
-  #write {
+  #{$wrap} {
     padding: var(--set-margin);
     @if $theme == "light" {
       /* 添加一个淡蓝色的边框 */
@@ -86,10 +86,10 @@ pre.md-meta-block {
 }
 
 // override the default style for focused headings
-#write > h3.md-focus:before,
-#write > h4.md-focus:before,
-#write > h5.md-focus:before,
-#write > h6.md-focus:before,
+#{$wrap} > h3.md-focus:before,
+#{$wrap} > h4.md-focus:before,
+#{$wrap} > h5.md-focus:before,
+#{$wrap} > h6.md-focus:before,
 h3.md-focus:before,
 h4.md-focus:before,
 h5.md-focus:before,