-
-
-
@@ -192,10 +159,6 @@
background-size: cover;
}
- .hero.is-info a.navbar-item:hover {
- background-color: transparent;
- }
-
.hero .subtitle {
padding: 3rem 0;
line-height: 1.5;
@@ -205,8 +168,4 @@
border-radius: 0;
background: transparent;
}
-
- .button {
- border-radius: 0;
- }
diff --git a/web/src/Rollups.svelte b/web/src/Rollups.svelte
new file mode 100644
index 0000000..072a820
--- /dev/null
+++ b/web/src/Rollups.svelte
@@ -0,0 +1,74 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/web/src/logo.svg b/web/src/logo.svg
new file mode 100644
index 0000000..25bd0b2
--- /dev/null
+++ b/web/src/logo.svg
@@ -0,0 +1,29 @@
+
diff --git a/web/src/scss/astria-colors.scss b/web/src/scss/astria-colors.scss
new file mode 100644
index 0000000..65cfbe5
--- /dev/null
+++ b/web/src/scss/astria-colors.scss
@@ -0,0 +1,61 @@
+// astria colors
+$astria-white: #f5f5f5;
+$astria-whitest: #fff;
+$astria-grey-dark: #333;
+$astria-grey-light: hsl(0, 0%, 60%);
+$astria-black: hsl(203deg 45% 4%);
+$astria-red: #BB3631;
+$astria-orange: #df5822;
+$astria-orange-soft: #f09226;
+$astria-green: #3B7D4F;
+$astria-blue-light: #74A4BF;
+$astria-yellow: #E0B74A;
+
+$success: $astria-green;
+$info: $astria-blue-light;
+$warning: $astria-yellow;
+$danger: $astria-red;
+
+$astria-error-lighter: #f8d7da;
+$astria-error-light: #f5c6cb;
+$astria-error-dark: #721c24;
+
+$astria-text-light: $astria-white;
+$astria-text-dark: $astria-grey-dark;
+
+// general color overrides
+$body-background-color: $astria-black;
+$text: $astria-text-light;
+$link: $astria-white;
+$link-hover: $astria-whitest;
+
+// navbar colors
+$navbar-item-hover-color: $astria-text-dark;
+$navbar-item-hover-background-color: $astria-orange-soft;
+
+
+// gradient mixins
+@mixin astria-bg-gradient {
+ background: linear-gradient(to right, $astria-orange-soft, $astria-orange);
+}
+
+@mixin astria-border-gradient {
+ border-image: linear-gradient(to right, $astria-orange-soft, $astria-orange) 1;
+}
+
+@mixin astria-button-gradient {
+ @include astria-bg-gradient;
+ border: none;
+ @include astria-border-gradient;
+}
+
+@mixin astria-bottom-border-gradient {
+ background: linear-gradient(
+ to right,
+ $astria-orange-soft,
+ 50%,
+ $astria-orange,
+ ) left bottom no-repeat;
+ background-size: 100% 5px;
+ border-radius: 0;
+}
diff --git a/web/src/scss/button-customizations.scss b/web/src/scss/button-customizations.scss
new file mode 100644
index 0000000..4f6c8c6
--- /dev/null
+++ b/web/src/scss/button-customizations.scss
@@ -0,0 +1,49 @@
+@import './astria-colors';
+
+.button.is-square {
+ border-radius: 0;
+}
+
+.button.has-gradient-to-right-orange {
+ @include astria-button-gradient;
+}
+
+.button.is-tall {
+ padding-top: 1.5rem;
+ padding-bottom: 1.5rem;
+}
+.button.is-taller {
+ padding-top: 2rem;
+ padding-bottom: 2rem;
+}
+.button.is-wide {
+ padding-left: 2rem;
+ padding-right: 2rem;
+}
+.button.is-wider {
+ padding-left: 4rem;
+ padding-right: 4rem;
+}
+
+.button.is-ghost {
+
+ &.is-outlined-light {
+ border-color: $astria-white;
+ &:disabled {
+ background-color: transparent;
+ border-color: $astria-white;
+ cursor: not-allowed;
+ opacity: 0.5;
+ }
+ }
+
+ &:hover, &.is-hovered {
+ // this selector should be specific enough to override bulma's default,
+ // but for some reason !important was necessary here
+ text-decoration: none !important;
+ }
+
+ &:focus, &.is-focused {
+ box-shadow: none;
+ }
+}
diff --git a/web/src/scss/button-overrides.scss b/web/src/scss/button-overrides.scss
new file mode 100644
index 0000000..a6ff4d4
--- /dev/null
+++ b/web/src/scss/button-overrides.scss
@@ -0,0 +1,5 @@
+@import './astria-colors';
+
+$button-color: $astria-text-dark;
+$label-color: $astria-text-light;
+$control-radius: 12px; // buttons
diff --git a/web/src/scss/card-customizations.scss b/web/src/scss/card-customizations.scss
new file mode 100644
index 0000000..b2a7d1e
--- /dev/null
+++ b/web/src/scss/card-customizations.scss
@@ -0,0 +1,48 @@
+@import './astria-colors';
+
+.error-card {
+ background-color: $astria-error-lighter;
+ border-color: $astria-error-light;
+ color: $astria-error-dark;
+
+ * {
+ color: $astria-error-dark;
+ }
+}
+
+.card {
+ &.disabled {
+ opacity: 0.5;
+ pointer-events: none;
+ }
+
+ a.disabled {
+ pointer-events: none;
+ }
+
+ //background-color: $astria-black;
+ background: radial-gradient(144.23% 141.13% at 50.15% 0%, #221F1F 0%, #050A0D 100%);
+ box-shadow: 1px 1px 1px -1px hsla(0, 0%, 100%, 0.5) inset;
+ //padding: 3rem 1.5rem;
+
+ &.is-fuzzy-bottomed {
+ background: radial-gradient(100% 100% at 50.15% 0%, #221F1F 0%, #050A0D 100%);
+ }
+
+ .card-content {
+ .is-ghost {
+ &:hover, &.is-hovered {
+ text-decoration: none;
+ }
+
+ &:focus, &.is-focused {
+ box-shadow: none;
+ }
+ }
+ }
+
+ .card-footer {
+ border-top: none;
+ box-shadow: none;
+ }
+}
diff --git a/web/src/scss/card-overrides.scss b/web/src/scss/card-overrides.scss
new file mode 100644
index 0000000..d2cfa34
--- /dev/null
+++ b/web/src/scss/card-overrides.scss
@@ -0,0 +1,7 @@
+$card-radius: 16px;
+
+$card-shadow: none;
+$card-header-shadow: none;
+
+$modal-card-head-radius: 0;
+$modal-card-foot-radius: 0;
diff --git a/web/src/scss/fonts.scss b/web/src/scss/fonts.scss
new file mode 100644
index 0000000..f2b8fa2
--- /dev/null
+++ b/web/src/scss/fonts.scss
@@ -0,0 +1,11 @@
+// customizations for bulma
+$family-sans-serif: 'NB Akademie', sans-serif;
+$family-monospace: 'NB Akademie Mono', monospace;
+
+p {
+ letter-spacing: -0.02em;
+}
+
+h1, h2, h3, .button {
+ letter-spacing: -.05em;
+}
diff --git a/web/src/scss/form-customizations.scss b/web/src/scss/form-customizations.scss
new file mode 100644
index 0000000..e69de29
diff --git a/web/src/scss/form-overrides.scss b/web/src/scss/form-overrides.scss
new file mode 100644
index 0000000..331f6bb
--- /dev/null
+++ b/web/src/scss/form-overrides.scss
@@ -0,0 +1,7 @@
+@import 'astria-colors';
+
+$input-radius: 12px;
+$control-padding-vertical: 1.5rem;
+$input-background-color: transparent;
+$input-color: $astria-grey-light;
+$input-border-color: $astria-grey-light;
diff --git a/web/src/scss/index.scss b/web/src/scss/index.scss
new file mode 100644
index 0000000..c6ae8b3
--- /dev/null
+++ b/web/src/scss/index.scss
@@ -0,0 +1,120 @@
+html, body {
+ height: 100vh;
+}
+
+// fonts
+@import './fonts';
+
+// astria bulma overrides
+// NOTE - scss variable overrides be imported BEFORE bulma so that the overriden variables are
+// used in the bulma sass
+@import 'astria-colors';
+@import 'button-overrides';
+@import 'card-overrides';
+@import 'form-overrides';
+
+// bulma
+@import '../../node_modules/bulma/bulma';
+@import '../../node_modules/bulma/sass/utilities/initial-variables';
+@import '../../node_modules/bulma/sass/components/navbar';
+
+// NOTE - these css customizations must be imported AFTER bulma to override the css classes
+@import 'button-customizations';
+@import 'card-customizations';
+@import 'form-customizations';
+
+// body reset
+body {
+ margin: 0;
+ padding: 0;
+ background-color: $astria-black;
+}
+
+// navbar customizations
+.navbar {
+ background-color: transparent;
+ padding: 1rem 2rem;
+}
+
+.is-fullheight-with-navbar {
+ // viewport height minus navbar height minus footer height minus margins
+ min-height: calc(100vh - 72px - 24px)
+}
+
+.notifications-toast-container {
+ position: fixed;
+ top: 0;
+ right: 0;
+ z-index: 9999;
+ width: 100%;
+ max-width: 400px;
+ padding: 1rem;
+
+ .notification {
+ margin-bottom: 0.5rem;
+ }
+}
+
+/**
+ * Animations
+ */
+@keyframes fadeOut {
+ from {
+ opacity: 1;
+ }
+ to {
+ opacity: 0;
+ }
+}
+
+.fade-out {
+ animation-name: fadeOut;
+ animation-duration: 1.5s;
+ animation-fill-mode: forwards;
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+.fade-in {
+ animation-name: fadeIn;
+ animation-duration: 1s;
+ animation-fill-mode: forwards;
+}
+
+@keyframes pulse {
+ 0% {
+ transform: scale(1);
+ }
+ 50% {
+ transform: scale(0.75);
+ }
+ 100% {
+ transform: scale(1);
+ }
+}
+
+.icon-pulse {
+ animation-name: pulse;
+ animation-duration: 1s;
+ animation-iteration-count: infinite;
+ animation-timing-function: ease-in-out;
+}
+
+.icon-pulse-slow {
+ animation-name: pulse;
+ animation-duration: 3s;
+ animation-iteration-count: infinite;
+ animation-timing-function: ease-in-out;
+}
+
+.is-text-overflow {
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+
+
+
+ {#each rollups as rollup}
+
+
+
+
+
+ {/each}
+ + {rollup.name} +
+
+
+
+