Add Tailwind

mysite/.gitignore

@@ -0,0 +1 @@
+node_modules

mysite/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "pybtex-css",
+  "version": "1.0.0",
+  "description": "Pybtex CSS",
+  "dependencies": {},
+  "devDependencies": {
+    "@fullhuman/postcss-purgecss": "^1.2.0",
+    "cssnano": "^4.1.10",
+    "postcss-cli": "^6.1.3",
+    "tailwindcss": "^1.1.2"
+  },
+  "scripts": {
+    "build": "postcss -o static/style.css static-src/style.css"
+  },
+  "author": "Andrey Golovizin",
+  "license": "MIT"
+}

mysite/postcss.config.js

@@ -0,0 +1,23 @@
+const purgecss = require('@fullhuman/postcss-purgecss')({
+
+  // Specify the paths to all of the template files in your project 
+  content: [
+    'templates/**/*.html',
+    // etc.
+  ],
+  whitelist: ['highlighted'],
+
+  // Include any special characters you're using in this regular expression
+  // defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
+})
+
+module.exports = {
+  plugins: [
+    require('tailwindcss'),
+    require('autoprefixer'),
+    // purgecss,
+    require('cssnano')({
+      preset: 'default',
+    }),
+  ]
+}

mysite/static-src/style.css

@@ -0,0 +1,119 @@
+@tailwind base;
+
+@tailwind components;
+
+@tailwind utilities;
+
+/* [ON BIG SCREEN] */
+/* Wrapper */
+.container {
+    max-width: 940px;
+    margin: 3rem auto
+}
+
+.content {
+    float: left;
+    width: 80%;
+}
+
+.sidebar {
+    float: left;
+    width: 20%;
+}
+
+#page-nav {
+  /* width: 100%; */
+  background: #276749;
+  display: block;
+  /* If you want the navigation bar to stick on top
+  position: sticky;
+  top: 0;
+  */
+  padding-left: 0;
+  margin: 2rem 0;
+}
+
+/* Hide Hamburger */
+#page-nav label, #hamburger {
+  display: none;
+}
+
+/* Menu Items */
+#page-nav ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0; 
+}
+#page-nav ul li {
+  display: inline-block;
+  padding: 16px;
+  font-size: 18px;
+  box-sizing: border-box;
+}
+#page-nav ul li a {
+  /* color: #fff; */
+  text-decoration: none;
+  color: white;
+}
+#page-nav ul li.selected {
+  background: #38A169;
+}
+
+/* [ON SMALL SCREENS] */
+@media screen and (max-width: 768px){
+  /* Show Hamburger */
+  #page-nav label {
+    display: inline-block;
+    /* color: #fff; */
+    /* background: #a02620; */
+    font-style: normal;
+    font-size: 1.2em;
+    padding: 10px;
+  }
+
+  /* Break down menu items into vertical */
+  #page-nav ul li {
+    display: block;
+  }
+  #page-nav ul li {
+    border-top: 1px solid #22543D;
+  }
+
+  /* Toggle show/hide menu on checkbox click */
+  #page-nav ul {
+    display: none;
+  }
+  #page-nav input:checked ~ ul {
+    display: block;
+  }
+}
+
+/* [DOES NOT MATTER] */
+html, body {
+  padding: 0;
+  margin: 0;
+  font-family: arial, sans-serif;
+}
+
+.contact-form fieldset {
+  border: none;
+  padding: 1em 0 0 0;
+}
+
+.contact-form fieldset p {
+  display: inline-block;
+  color: #C53030;
+}
+
+.contact-form textarea {
+  width: 100%;
+  height: 10em;
+}
+
+.contact-form input {
+  width: 100%;
+}
+
+.contact-form label {
+  display: none;
+}

mysite/tailwind.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  theme: {
+    fontFamily: {
+      sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Helvetica Neue', 'Noto Sans', 'Roboto', 'Verdana', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'],
+      serif: ['Noto Serif', 'Georgia', 'Cambria', 'Times New Roman', 'Times', 'serif'],
+      mono: ['Menlo', 'Monaco', 'Noto Sans Mono', 'Source Code Pro', 'Consolas', 'Courier New', 'Liberation Mono', 'monospace']
+    },
+    listStyleType: {
+      none: 'none',
+      disc: 'disc',
+      decimal: 'decimal',
+      circle: 'circle'
+    },
+  }
+}