Implement Jekyll

_site/css/global.css

@@ -0,0 +1,98 @@
+:root {
+    /* change theme */
+    --mdc-theme-primary: #00adb4;
+    --mdc-theme-secondary: #d84315;
+    /* ensure Bootstrap doesn't alter any font sizes set in rem */
+    font-size: initial;
+}
+
+/* implement colour theme on elements that don't have it applied by default */
+.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label, .mdc-list-item--activated .mdc-list-item__text, .mdc-drawer .mdc-list-item--activated .mdc-list-item__graphic {
+   color: var(--mdc-theme-primary);
+}
+
+/* hide unwanted overflow from mdc-text-field :before & :after */
+.mdc-text-field-container {
+   overflow: hidden;
+}
+/* give space for mdc-text-field label to show properly when field is selected */
+.mdc-text-field {
+   margin-top: 5px;
+}
+
+body {
+   font-family: 'Roboto', sans-serif;
+   text-align: center;
+}
+.mdc-text-field-helper-text {
+   margin-bottom: 10px;
+}
+.source-code-link {
+   position: fixed;
+   bottom: 15px;
+   right: 25px;
+}
+a {
+    color: var(--mdc-theme-secondary);
+}
+
+/* for MDC navbar */
+body {
+    display: flex;
+    height: 100vh;
+    margin: 0;
+}
+
+.mdc-drawer-app-content {
+    flex: auto;
+    overflow: auto;
+}
+
+.main-content {
+    overflow: auto;
+}
+
+.app-bar {
+    position: absolute;
+}
+
+.main-content, footer {
+    margin: 20px;
+}
+
+/* ensure that buttons' colours don't change on hover and background colour changes are animated */
+.mdc-button:hover, .mdc-fab:hover, .material-icons:hover, .mdc-button:focus, .mdc-fab:focus, .material-icons:focus {
+    text-decoration: none;
+    transition: background-color 0.75s;
+}
+.mdc-button:hover {
+    color: var(--mdc-theme-primary);
+}
+.mdc-fab:hover {
+    color: #fff;
+}
+.mdc-fab::before, .mdc-top-app-bar__action-item::before, .mdc-top-app-bar__navigation-icon::before {
+    transition-duration: 0.15s;
+}
+
+/* for cookie notice */
+#cookies {
+    display: none;
+    width: 100%;
+    position: fixed;
+    background: var(--mdc-theme-primary);
+    color: var(--mdc-theme-background);
+    text-align: center;
+    bottom: -100px;
+    left: 0;
+    z-index: 9999;
+}
+
+#cookies p {
+    margin: 10px;
+}
+
+#cookies p a {
+    color: var(--mdc-theme-secondary);
+    text-decoration: none;
+}

_site/css/material_icons.css

@@ -0,0 +1,23 @@
+/* fallback */
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/materialicons/v41/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}

_site/css/roboto.css

@@ -0,0 +1,56 @@
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}