vue-cal

app/src/plugins/app@vendor/vue-cal/scss/_base.scss

@@ -0,0 +1,76 @@
+
+// Global structure.
+// --------------------------------------------------------
+* {margin: 0;padding: 0;}
+
+html {scroll-behavior: smooth;}
+
+#app {overflow-x: hidden;}
+
+.w-app {
+  font: 15px 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: #fff !important;
+  color: #2c3e50;
+  margin-top: 8em;
+  padding-top: 12em;
+}
+
+.page-container {
+  width: 100%;
+  max-width: $page-max-width;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+// Shared classes & styles.
+// --------------------------------------------------------
+a {
+  text-decoration: none;
+  color: $primary;
+
+  &[name] {
+    position: relative;
+    top: -4em;
+    display: block;
+  }
+}
+
+.scrollable {
+  height: 250px;
+  overflow-y: scroll;
+  padding-right: 1.8em;
+}
+
+.footer {
+  font-size: 0.9em;
+  font-style: italic;
+  margin: 3em 0 3.5em;
+
+  .w-icon {
+    font-size: 1.2em;
+
+    &.heart {transition: 1s ease-out;cursor: pointer;}
+    &.heart:hover {animation: pulse 1.8s ease-out infinite;}
+  }
+}
+
+@keyframes pulse {
+  0%, 20%, 30%, 35%, 45%, 100% {transform: scale(1);}
+  25%, 40% {transform: scale(1.3);}
+}
+
+// Media queries.
+// --------------------------------------------------------
+@media screen and (max-width: ($page-max-width + (2 * $container-padding-md))) {
+  :root {--container-padding: #{$container-padding-md};}
+  .page-container {
+    padding-left: var(--container-padding);
+    padding-right: var(--container-padding);
+  }
+}
+
+@media screen and (max-width: (500 + (2 * $container-padding-sm))) {
+  :root {--container-padding: #{$container-padding-sm};}
+}

app/src/plugins/app@vendor/vue-cal/scss/_variables.scss

@@ -0,0 +1,16 @@
+$primary: #42b983;
+$page-max-width: 1200px;
+$container-padding-md: 20px;
+$container-padding-sm: 12px;
+
+@mixin backdrop-blur($blur: 4px, $fallback-color: rgba(255, 255, 255, 0.9), $blur-color: rgba(255, 255, 255, 0.6)) {
+  background-color: $fallback-color; // Slightly transparent fallback by default.
+
+  // If backdrop support: very transparent and blurred.
+  @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
+    & {
+      background-color: $blur-color;
+      backdrop-filter: blur($blur);
+    }
+  }
+}

app/src/plugins/app@vendor/vue-cal/scss/index.scss

@@ -0,0 +1,2 @@
+@import './variables';
+@import './base';