Include project styles data

package.json

@@ -11,6 +11,9 @@
   "license": "MIT",
   "devDependencies": {
     "css-loader": "^6.5.1",
+    "postcss-loader": "^6.2.0",
+    "sass": "^1.43.4",
+    "sass-loader": "^12.3.0",
     "style-loader": "^3.3.1",
     "webpack": "^5.63.0",
     "webpack-cli": "^4.9.1",

web/index.js

@@ -1 +1,2 @@
-import "./font.css"
+import "./font.css"
+import "./index.scss"

web/index.scss

@@ -0,0 +1,291 @@
+
+$main-color: #046380;
+$text-color: #002F2F;
+$background-color: #E6E2AF;
+
+$body-font: "arial", sans-serif;
+$body-font-size: 1em;
+$body-font-shadow: 0em 0em 0.1em #aaa;
+
+$menu-font: "rockwell", sans-serif;
+$menu-font-size: 1.7em;
+$menu-background-color: $background-color;
+$menu-accent-color: $main-color;
+
+$menu-logo-font-size: 2em;
+
+.scroll-container {
+  z-index: 0;
+  height: 64px;
+  margin-top: auto;
+}
+.scroll-container a {
+  left: 50%;
+  margin-top: -32px;
+  position: absolute;
+}
+.scroll-container a span {
+  position: absolute;
+  left: 50%;
+  width: 24px;
+  height: 24px;
+  margin-left: -12px;
+  margin-top: -36px;
+  border-left: 1px solid $main-color;
+  border-bottom: 1px solid $main-color;
+  transform: rotate(-45deg);
+  animation: scroll-keyframes 1.5s infinite;
+  box-sizing: border-box;
+}
+@keyframes scroll-keyframes {
+  0% {
+    transform: rotate(-45deg) translate(0, 0);
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: rotate(-45deg) translate(-20px, 20px);
+    opacity: 0;
+  }
+}
+
+body, html {
+  font-size: $body-font-size;
+  text-shadow: $body-font-shadow;
+  color: $text-color;
+  background-color: $background-color;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: 10px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+img {
+  max-width: 70vw;
+  height: auto;
+}
+
+.kg-card {
+  max-width: 70vw;
+  padding: 0.2em;
+  border-width: 2px;
+  border-radius: 0.5em;
+  border-style: solid;
+  border-color: $main-color;
+  background-color: $main-color;
+}
+
+.kg-card img {
+  vertical-align: top;
+  border-radius: 0.2em;
+}
+
+.kg-card figcaption {
+  text-align: center;
+  color: $background-color;
+  text-shadow: none;
+  padding-top: 0.3em;
+}
+
+.kg-code-card {
+  background-color: #333;
+}
+
+.kg-code-card pre {
+  text-shadow: none;
+  overflow-x: auto;
+
+  li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8 {
+    list-style-type: decimal !important;
+  }
+}
+
+a.external::after {
+  content: "⃕";
+  font-size: 0.6em;
+  vertical-align: text-top;
+  padding-left: 0.1em;
+  display: inline-block;
+}
+
+.root-container {
+  padding-bottom: 0.5em;
+  margin-left: 3em;
+  margin-right: 3em;
+  display: flex;
+  flex-direction: column;
+}
+
+.welcome-container {
+  min-height: 95vh;
+}
+
+.blog-container {
+  background-color: $background-color;
+}
+
+.blog-post-head {
+  margin-bottom: 0;
+  border-color: $main-color;
+  border-bottom-style: solid;
+  border-width: 2px;
+}
+
+.blog-post-head h1 {
+  margin-block-start: 0.43em;
+  margin-block-end: 0.43em;
+  font-family: $menu-font;
+  font-size: 2em;
+  font-weight: normal;
+}
+
+.blog-post-head-image {
+  text-align: center;
+  border-color: $main-color;
+  border-bottom-style: solid;
+  border-width: 2px;
+}
+
+.blog-post-head-image img {
+  vertical-align: top;
+}
+
+.blog-post-head > * {
+  width: 100%;
+  text-align: center;
+}
+
+.blog-post-tailer > * {
+  width: 100%;
+  text-align: center;
+  margin-top: 0;
+  margin-bottom: 2em;
+}
+
+.blog-post-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.blog-post-content > * {
+  width: 50vw;
+}
+
+.blog-post-content > .kg-card {
+  width: 100%;
+}
+
+.pinned-container {
+  background-color: $background-color;
+  z-index: 1;
+}
+
+.pinned-container .blog-post-content > * {
+  width: 80vw;
+}
+
+.pinned-container .blog-post-head {
+  display: none;
+}
+// .pinned-container .blog-post-tailer {
+//   display: none;
+// }
+
+.menu-container {
+  background-color: $menu-background-color;
+  border-bottom-style: solid;
+  border-bottom-width: 0.5em;
+  border-color: $menu-accent-color;
+  padding-bottom: 0.5em;
+  z-index: 2;
+}
+
+.menu {
+  display: flex;
+  justify-content: space-between;
+  font-family: $menu-font;
+  font-size: $menu-font-size;
+}
+
+.menu > * {
+  margin: 0;
+  padding: 0;
+}
+
+.menu a {
+  padding-bottom: 0.15em;
+  border-color: $main-color;
+}
+.menu a:link, 
+.menu a:visited {
+  color: $text-color;
+  text-decoration: none;
+}
+.menu a:hover,
+.menu a:active {
+  color: $text-color;
+  text-decoration: none;
+  border-bottom-width: 0.15em;
+  border-bottom-style: solid;
+}
+
+.menu-logo span {
+  color: $main-color;
+  font-size: $menu-logo-font-size;
+}
+
+.menu-nav {
+  display: flex;
+  list-style: none;
+}
+.menu-nav > li::before {
+  content: '';
+  font-size: $menu-logo-font-size;
+}
+.menu-nav > li {
+  padding-left: 1.3em;
+}
+
+@media all and (max-width: 1024px) {
+  .root-container {
+    margin-left: 1.4em;
+    margin-right: 1.4em;
+  }
+  .menu-nav {
+    flex-direction: column;
+    align-items: flex-end;
+  }
+  .menu-nav > li.menu-nav-li1::before {
+    display: inline;
+  }
+  .menu-nav > li::before {
+    display: none;
+  }
+}
+
+@media all and (max-width: 512px) {
+  .root-container {
+    margin-left: 0.8em;
+    margin-right: 0.8em;
+  }
+  .menu {
+    flex-direction: column;
+  }
+  .menu-nav {
+    margin-top: 0.3em;
+  }
+  .menu-nav > li.menu-nav-li1::before {
+    display: none;
+  }
+  .blog-post-content > * {
+    width: 90vw;
+  }
+  .pinned-container .blog-post-content > * {
+    width: 90vw;
+  }
+}

webpack.config.js

@@ -15,6 +15,15 @@ module.exports = {
           loader: 'style-loader'
         }, {
           loader: 'css-loader'
+        }, {
+          loader: 'postcss-loader',
+          options: {
+            postcssOptions: {
+              plugins: () => require('autoprefixer'),
+            }
+          }
+        }, {
+          loader: 'sass-loader'
         }]
       },
     ],