feat: initial webapp structure from notion2site

2026-05-18 23:16:44 +00:00 · 2021-01-15 11:31:09 -05:00
parent 253400fba9
commit 5765d3f5bc
47 changed files with 1894 additions and 68 deletions
--- a/components/styles.module.css
+++ b/components/styles.module.css
@@ -0,0 +1,145 @@
+@keyframes spinner {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-size: 16px;
+  line-height: 1.5;
+  color: rgb(55, 53, 47);
+  caret-color: rgb(55, 53, 47);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica,
+    'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol';
+}
+
+.loadingIcon {
+  animation: spinner 0.6s linear infinite;
+  display: block;
+  width: 24px;
+  height: 24px;
+  color: rgba(55, 53, 47, 0.4);
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.errorImage {
+  max-width: 100%;
+  width: 640px;
+}
+
+.notion {
+  padding-bottom: calc(max(10vh, 120px));
+}
+
+.demoFooter {
+  position: fixed;
+  z-index: 800;
+  bottom: 1em;
+  left: 10vw;
+  right: 10vw;
+  border-radius: 4px;
+  background: #eb625a;
+  padding: 16px 24px;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+
+  color: #fff;
+}
+
+.demoLhs a,
+.demoLhs a:visited,
+.demoLhs a:hover,
+.demoLhs a:active {
+  text-decoration: none;
+  color: #fff;
+}
+
+.demoLhs {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.demoTitle {
+  font-size: 1.2em;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  padding-right: 0.5em;
+  margin-right: 0.5em;
+  border-right: 1px solid #fff;
+  white-space: nowrap;
+}
+
+.demoTitle img {
+  height: 1.5em;
+  margin-right: 0.5em;
+}
+
+.demoDesc {
+  font-size: 0.9em;
+}
+
+.demoCta {
+  display: block;
+  margin-left: 0.5em;
+  font-size: 0.9em;
+  text-decoration: none;
+  color: #fff;
+  border-radius: 2px;
+  padding: 8px 12px;
+
+  background: transparent;
+  border: 1px solid #fff;
+  transition: all 300ms ease;
+  font-weight: 500;
+  white-space: nowrap;
+  transform: scale(1);
+}
+
+.demoCta:hover {
+  background: #fff;
+  color: #eb625a;
+
+  transition: all 200ms ease;
+  transform: scale(1.05);
+}
+
+.demoCta:active {
+  transition: all 100ms ease;
+  transform: scale(1.03);
+}
+
+@media only screen and (max-width: 740px) {
+  .demoFooter {
+    left: 1em;
+    right: 1em;
+  }
+
+  .demoTitle {
+    border: 0 none;
+  }
+
+  .demoDesc {
+    display: none;
+  }
+}