Bundle CSS with Hugo's Sass feature (#705)

* migrate bootstrap and flags to bundle

* migrated main.css

* migrate navbar.css and plyr

* migrated mulish font and darkreader

* migrated static/css/sections stylesheets

* migrated list page and sidebar styles

* migrated search.html ( nothing to add )

* migration single page styles

* remove duplicated style tags

* migrate notes.  Deleted unused css in static

* migrate 404 css to bundle

* migrate katex styles

* migrate embedpdf styles

* migrated katex css

---------

Co-authored-by: Aaron Qian <[email protected]>

assets/jsconfig.json

@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+  "baseUrl": ".",
+  "paths": {
+   "*": [
+    "*"
+   ]
+  }
+ }
+}

assets/scripts/features/syntaxhighlight/hljs.js

@@ -1,4 +1,12 @@
 import hljs from 'highlight.js'
 import * as params from '@params'
 
-hljs.highlightAll(params.syntaxhighlight?.hljs)
+const defaultOptions = {
+  ignoreUnescapedHTML: true
+}
+
+hljs.configure({
+    ...defaultOptions,
+    ...(params.syntaxhighlight?.hljs || {}),
+});
+hljs.highlightAll();

assets/styles/application.template.scss

@@ -0,0 +1,64 @@
+// loading bootstrap
+// TODO: Refactor to use bootstrap sass variable for theming.
+@import 'bootstrap/scss/bootstrap';
+
+// The Mulish font, we use font-weight 300 - 700
+@import '@fontsource/mulish/300';
+@import '@fontsource/mulish/index'; // 400
+@import '@fontsource/mulish/500';
+@import '@fontsource/mulish/600';
+@import '@fontsource/mulish/700';
+
+// layouts
+@import './layouts/main';
+@import './layouts/list';
+@import './layouts/single';
+@import './layouts/notes';
+@import './layouts/404';
+
+// navigators
+@import './navigators/navbar';
+@import './navigators/sidebar';
+
+
+// sections
+@import './sections/home';
+@import './sections/about';
+@import './sections/skills';
+@import './sections/experiences';
+@import './sections/education';
+@import './sections/projects';
+@import './sections/recent-posts';
+@import './sections/achievements';
+@import './sections/accomplishments';
+@import './sections/publications';
+
+
+// override
+@import './override';
+
+// features and services, only imported if enabled.
+{{ range $feature, $featureDef := site.Params.features }}
+  {{ with $featureDef }}
+    {{ $featureEnabled := or (not (isset . "enable")) .enable }}
+    {{ if $featureEnabled }}
+      {{ with (index site.Data.toha.styles $feature) }}
+        {{ range .styles }}
+        @import '{{.}}';
+        {{ end }}
+      {{ end }}
+
+      {{ range $service, $config := .services }}
+        {{ with (index site.Data.toha.styles $feature) }}
+          {{ with .services }}
+            {{ with (index . $service) }}
+              {{ range .styles }}
+              @import '{{ . }}';
+              {{ end }}
+            {{ end }}
+          {{ end }}
+        {{ end }}
+      {{ end }}
+    {{ end }}
+  {{ end }}
+{{ end }}

assets/styles/colortheme/colortheme.css

@@ -0,0 +1,20 @@
+/* Note: No need to invert when the screen is small because the navbar is
+   collapsed to a hamburger menu. */
+   @media only screen and (min-width: 1200px) {
+    .dynamic-navbar .navbar-icon-svg-dark {
+      filter: invert(1);
+    };
+  }
+
+  @media only screen and (min-width: 1200px) {
+    .dropdown-menu-icons-only {
+      width: 25px;
+      min-width: 3rem;
+    }
+  }
+
+  .menu-icon-center {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }

assets/styles/layouts/404.scss

@@ -0,0 +1,95 @@
+body.kind-404 {
+  .navbar-toggler {
+    display: none;
+  }
+
+  .notFound {
+    padding-top: 5rem;
+    text-align: center;
+    padding-bottom: 8rem;
+  }
+
+  .notFound img {
+    height: 500px;
+  }
+
+  .notFound h1 {
+    font-style: italic;
+  }
+
+  .notFound .message {
+    position: absolute;
+    max-width: 20rem;
+    top: 40%;
+    left: 30%;
+  }
+
+  /* ============= Device specific fixes ======= */
+
+  /* Large screens such as TV */
+  @media only screen and (min-width: 1824px) {
+  }
+
+  /* Extra large devices (large desktops, 1200px and up) */
+
+  @media (max-width: 1400px) {
+  }
+
+  @media (max-width: 1200px) {
+    .notFound .message {
+      top: 50%;
+      left: 25%;
+    }
+  }
+
+  /* IPad Pro */
+  @media (max-width: 1024px) {
+  }
+
+  /*  Large devices (desktops, 992px and up) */
+
+  @media (max-width: 992px) {
+    .notFound .message {
+      top: 46%;
+      left: 25%;
+    }
+  }
+
+  /* Medium devices (tablets, 768px and up) */
+
+  @media only screen and (max-width: 768px) {
+    .notFound img {
+      height: 400px;
+    }
+
+    .notFound .message {
+      top: 20rem;
+      left: 4rem;
+    }
+  }
+
+  /* Small devices (landscape phones, 576px and up) */
+
+  @media only screen and (max-width: 576px) {
+    .notFound img {
+      height: 250px;
+    }
+
+    .notFound .message {
+      top: 20rem;
+      left: 2rem;
+    }
+  }
+
+  /* iPhoneX, iPhone 6,7,8 */
+  @media only screen and (max-width: 375px) {
+  }
+
+  /* Galaxy S5, Moto G4 */
+  @media only screen and (max-width: 360px) {
+  }
+
+  /* iPhone 5 or before */
+  @media only screen and (max-width: 320px) {
+  }  
+}