diff --git a/Gemfile b/Gemfile
index bb40704..9f8a0c6 100644
--- a/Gemfile
+++ b/Gemfile
@@ -14,8 +14,6 @@ gem "importmap-rails"
gem "turbo-rails"
# Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev]
gem "stimulus-rails"
-# Use Tailwind CSS [https://github.com/rails/tailwindcss-rails]
-gem "tailwindcss-rails", "~> 3.3.1"
# Build JSON APIs with ease [https://github.com/rails/jbuilder]
gem "jbuilder"
# Use Redis adapter to run Action Cable in production
diff --git a/Gemfile.lock b/Gemfile.lock
index 5e14fbc..1820fba 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -296,12 +296,6 @@ GEM
stimulus-rails (1.3.4)
railties (>= 6.0.0)
stringio (3.2.0)
- tailwindcss-rails (3.3.2)
- railties (>= 7.0.0)
- tailwindcss-ruby (~> 3.0)
- tailwindcss-ruby (3.4.17-aarch64-linux)
- tailwindcss-ruby (3.4.17-arm64-darwin)
- tailwindcss-ruby (3.4.17-x86_64-linux)
thor (1.4.0)
timeout (0.4.4)
tsort (0.2.0)
@@ -361,7 +355,6 @@ DEPENDENCIES
rubocop-rails-omakase
selenium-webdriver
stimulus-rails
- tailwindcss-rails (~> 3.3.1)
turbo-rails
tzinfo-data
view_component
diff --git a/Procfile.dev b/Procfile.dev
index 023e98a..21e7057 100644
--- a/Procfile.dev
+++ b/Procfile.dev
@@ -1,2 +1 @@
web: bin/rails server -p 3000
-css: bin/rails tailwindcss:watch
diff --git a/app/assets/builds/.keep b/app/assets/builds/.keep
deleted file mode 100644
index e69de29..0000000
diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js
index b06fc42..f4a81d1 100644
--- a/app/assets/config/manifest.js
+++ b/app/assets/config/manifest.js
@@ -1,5 +1,5 @@
//= link_tree ../images
+//= link_tree ../fonts
//= link_directory ../stylesheets .css
//= link_tree ../../javascript .js
//= link_tree ../../../vendor/javascript .js
-//= link_tree ../builds
diff --git a/app/assets/fonts/InterVariable-Italic.woff2 b/app/assets/fonts/InterVariable-Italic.woff2
new file mode 100644
index 0000000..b3530f3
Binary files /dev/null and b/app/assets/fonts/InterVariable-Italic.woff2 differ
diff --git a/app/assets/fonts/InterVariable.woff2 b/app/assets/fonts/InterVariable.woff2
new file mode 100644
index 0000000..5a8d3e7
Binary files /dev/null and b/app/assets/fonts/InterVariable.woff2 differ
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index fe93333..09a812d 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -8,3 +8,1156 @@
*
* Consider organizing styles into separate files for maintainability.
*/
+
+@font-face {
+ font-family: 'Inter var';
+ font-style: normal;
+ font-weight: 100 900;
+ font-display: swap;
+ src: url("InterVariable.woff2") format("woff2");
+ font-named-instance: 'Regular';
+}
+
+@font-face {
+ font-family: 'Inter var';
+ font-style: italic;
+ font-weight: 100 900;
+ font-display: swap;
+ src: url("InterVariable-Italic.woff2") format("woff2");
+ font-named-instance: 'Italic';
+}
+
+*, :after, :before {
+ --tw-border-spacing-x: 0;
+ --tw-border-spacing-y: 0;
+ --tw-translate-x: 0;
+ --tw-translate-y: 0;
+ --tw-rotate: 0;
+ --tw-skew-x: 0;
+ --tw-skew-y: 0;
+ --tw-scale-x: 1;
+ --tw-scale-y: 1;
+ --tw-pan-x: ;
+ --tw-pan-y: ;
+ --tw-pinch-zoom: ;
+ --tw-scroll-snap-strictness: proximity;
+ --tw-gradient-from-position: ;
+ --tw-gradient-via-position: ;
+ --tw-gradient-to-position: ;
+ --tw-ordinal: ;
+ --tw-slashed-zero: ;
+ --tw-numeric-figure: ;
+ --tw-numeric-spacing: ;
+ --tw-numeric-fraction: ;
+ --tw-ring-inset: ;
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: rgba(59, 130, 246, .5);
+ --tw-ring-offset-shadow: 0 0 #0000;
+ --tw-ring-shadow: 0 0 #0000;
+ --tw-shadow: 0 0 #0000;
+ --tw-shadow-colored: 0 0 #0000;
+ --tw-blur: ;
+ --tw-brightness: ;
+ --tw-contrast: ;
+ --tw-grayscale: ;
+ --tw-hue-rotate: ;
+ --tw-invert: ;
+ --tw-saturate: ;
+ --tw-sepia: ;
+ --tw-drop-shadow: ;
+ --tw-backdrop-blur: ;
+ --tw-backdrop-brightness: ;
+ --tw-backdrop-contrast: ;
+ --tw-backdrop-grayscale: ;
+ --tw-backdrop-hue-rotate: ;
+ --tw-backdrop-invert: ;
+ --tw-backdrop-opacity: ;
+ --tw-backdrop-saturate: ;
+ --tw-backdrop-sepia: ;
+ --tw-contain-size: ;
+ --tw-contain-layout: ;
+ --tw-contain-paint: ;
+ --tw-contain-style:
+}
+
+::backdrop {
+ --tw-border-spacing-x: 0;
+ --tw-border-spacing-y: 0;
+ --tw-translate-x: 0;
+ --tw-translate-y: 0;
+ --tw-rotate: 0;
+ --tw-skew-x: 0;
+ --tw-skew-y: 0;
+ --tw-scale-x: 1;
+ --tw-scale-y: 1;
+ --tw-pan-x: ;
+ --tw-pan-y: ;
+ --tw-pinch-zoom: ;
+ --tw-scroll-snap-strictness: proximity;
+ --tw-gradient-from-position: ;
+ --tw-gradient-via-position: ;
+ --tw-gradient-to-position: ;
+ --tw-ordinal: ;
+ --tw-slashed-zero: ;
+ --tw-numeric-figure: ;
+ --tw-numeric-spacing: ;
+ --tw-numeric-fraction: ;
+ --tw-ring-inset: ;
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: rgba(59, 130, 246, .5);
+ --tw-ring-offset-shadow: 0 0 #0000;
+ --tw-ring-shadow: 0 0 #0000;
+ --tw-shadow: 0 0 #0000;
+ --tw-shadow-colored: 0 0 #0000;
+ --tw-blur: ;
+ --tw-brightness: ;
+ --tw-contrast: ;
+ --tw-grayscale: ;
+ --tw-hue-rotate: ;
+ --tw-invert: ;
+ --tw-saturate: ;
+ --tw-sepia: ;
+ --tw-drop-shadow: ;
+ --tw-backdrop-blur: ;
+ --tw-backdrop-brightness: ;
+ --tw-backdrop-contrast: ;
+ --tw-backdrop-grayscale: ;
+ --tw-backdrop-hue-rotate: ;
+ --tw-backdrop-invert: ;
+ --tw-backdrop-opacity: ;
+ --tw-backdrop-saturate: ;
+ --tw-backdrop-sepia: ;
+ --tw-contain-size: ;
+ --tw-contain-layout: ;
+ --tw-contain-paint: ;
+ --tw-contain-style:
+}
+
+/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/
+*, :after, :before {
+ border: 0 solid;
+ box-sizing: border-box
+}
+
+:after, :before {
+ --tw-content: ""
+}
+
+:host, html {
+ line-height: 1.5;
+ -webkit-text-size-adjust: 100%;
+ font-family: Inter var, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+ font-feature-settings: normal;
+ font-optical-sizing: none;
+ font-variation-settings: normal;
+ -moz-tab-size: 4;
+ -o-tab-size: 4;
+ tab-size: 4;
+ -webkit-tap-highlight-color: transparent
+}
+
+body {
+ line-height: inherit;
+ margin: 0
+}
+
+hr {
+ border-top-width: 1px;
+ color: inherit;
+ height: 0
+}
+
+abbr:where([title]) {
+ -webkit-text-decoration: underline dotted;
+ text-decoration: underline dotted
+}
+
+h1, h2, h3, h4, h5, h6 {
+ font-size: inherit;
+ font-weight: inherit
+}
+
+a {
+ color: inherit;
+ text-decoration: inherit
+}
+
+b, strong {
+ font-weight: bolder
+}
+
+code, kbd, pre, samp {
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+ font-feature-settings: normal;
+ font-size: 1em;
+ font-variation-settings: normal
+}
+
+small {
+ font-size: 80%
+}
+
+sub, sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline
+}
+
+sub {
+ bottom: -.25em
+}
+
+sup {
+ top: -.5em
+}
+
+table {
+ border-collapse: collapse;
+ border-color: inherit;
+ text-indent: 0
+}
+
+button, input, optgroup, select, textarea {
+ color: inherit;
+ font-family: inherit;
+ font-feature-settings: inherit;
+ font-size: 100%;
+ font-variation-settings: inherit;
+ font-weight: inherit;
+ letter-spacing: inherit;
+ line-height: inherit;
+ margin: 0;
+ padding: 0
+}
+
+button, select {
+ text-transform: none
+}
+
+button, input:where([type=button]), input:where([type=reset]), input:where([type=submit]) {
+ -webkit-appearance: button;
+ background-color: transparent;
+ background-image: none
+}
+
+:-moz-focusring {
+ outline: auto
+}
+
+:-moz-ui-invalid {
+ box-shadow: none
+}
+
+progress {
+ vertical-align: baseline
+}
+
+::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+ height: auto
+}
+
+[type=search] {
+ -webkit-appearance: textfield;
+ outline-offset: -2px
+}
+
+::-webkit-search-decoration {
+ -webkit-appearance: none
+}
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button;
+ font: inherit
+}
+
+summary {
+ display: list-item
+}
+
+blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
+ margin: 0
+}
+
+fieldset {
+ margin: 0
+}
+
+fieldset, legend {
+ padding: 0
+}
+
+menu, ol, ul {
+ list-style: none;
+ margin: 0;
+ padding: 0
+}
+
+dialog {
+ padding: 0
+}
+
+textarea {
+ resize: vertical
+}
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+ color: #9ca3af;
+ opacity: 1
+}
+
+input::placeholder, textarea::placeholder {
+ color: #9ca3af;
+ opacity: 1
+}
+
+[role=button], button {
+ cursor: pointer
+}
+
+:disabled {
+ cursor: default
+}
+
+audio, canvas, embed, iframe, img, object, svg, video {
+ display: block;
+ vertical-align: middle
+}
+
+img, video {
+ height: auto;
+ max-width: 100%
+}
+
+[hidden]:where(:not([hidden=until-found])) {
+ display: none
+}
+
+[multiple], [type=date], [type=datetime-local], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], input:where(:not([type])), select, textarea {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ background-color: #fff;
+ border-color: #6b7280;
+ border-radius: 0;
+ border-width: 1px;
+ font-size: 1rem;
+ line-height: 1.5rem;
+ padding: .5rem .75rem;
+ --tw-shadow: 0 0 #0000
+}
+
+[multiple]:focus, [type=date]:focus, [type=datetime-local]:focus, [type=email]:focus, [type=month]:focus, [type=number]:focus, [type=password]:focus, [type=search]:focus, [type=tel]:focus, [type=text]:focus, [type=time]:focus, [type=url]:focus, [type=week]:focus, input:where(:not([type])):focus, select:focus, textarea:focus {
+ outline: 2px solid transparent;
+ outline-offset: 2px;
+ --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: #2563eb;
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+ border-color: #2563eb;
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
+}
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+ color: #6b7280;
+ opacity: 1
+}
+
+input::placeholder, textarea::placeholder {
+ color: #6b7280;
+ opacity: 1
+}
+
+::-webkit-datetime-edit-fields-wrapper {
+ padding: 0
+}
+
+::-webkit-date-and-time-value {
+ min-height: 1.5em;
+ text-align: inherit
+}
+
+::-webkit-datetime-edit {
+ display: inline-flex
+}
+
+::-webkit-datetime-edit, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-meridiem-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-year-field {
+ padding-bottom: 0;
+ padding-top: 0
+}
+
+select {
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
+ background-position: right .5rem center;
+ background-repeat: no-repeat;
+ background-size: 1.5em 1.5em;
+ padding-right: 2.5rem;
+ -webkit-print-color-adjust: exact;
+ print-color-adjust: exact
+}
+
+[multiple], [size]:where(select:not([size="1"])) {
+ background-image: none;
+ background-position: 0 0;
+ background-repeat: unset;
+ background-size: initial;
+ padding-right: .75rem;
+ -webkit-print-color-adjust: unset;
+ print-color-adjust: unset
+}
+
+[type=checkbox], [type=radio] {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ background-color: #fff;
+ background-origin: border-box;
+ border-color: #6b7280;
+ border-width: 1px;
+ color: #2563eb;
+ display: inline-block;
+ flex-shrink: 0;
+ height: 1rem;
+ padding: 0;
+ -webkit-print-color-adjust: exact;
+ print-color-adjust: exact;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+ vertical-align: middle;
+ width: 1rem;
+ --tw-shadow: 0 0 #0000
+}
+
+[type=checkbox] {
+ border-radius: 0
+}
+
+[type=radio] {
+ border-radius: 100%
+}
+
+[type=checkbox]:focus, [type=radio]:focus {
+ outline: 2px solid transparent;
+ outline-offset: 2px;
+ --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
+ --tw-ring-offset-width: 2px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: #2563eb;
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
+}
+
+[type=checkbox]:checked, [type=radio]:checked {
+ background-color: currentColor;
+ background-position: 50%;
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ border-color: transparent
+}
+
+[type=checkbox]:checked {
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0'/%3E%3C/svg%3E")
+}
+
+@media (forced-colors: active) {
+ [type=checkbox]:checked {
+ -webkit-appearance: auto;
+ -moz-appearance: auto;
+ appearance: auto
+ }
+}
+
+[type=radio]:checked {
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")
+}
+
+@media (forced-colors: active) {
+ [type=radio]:checked {
+ -webkit-appearance: auto;
+ -moz-appearance: auto;
+ appearance: auto
+ }
+}
+
+[type=checkbox]:checked:focus, [type=checkbox]:checked:hover, [type=radio]:checked:focus, [type=radio]:checked:hover {
+ background-color: currentColor;
+ border-color: transparent
+}
+
+[type=checkbox]:indeterminate {
+ background-color: currentColor;
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E");
+ background-position: 50%;
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ border-color: transparent
+}
+
+@media (forced-colors: active) {
+ [type=checkbox]:indeterminate {
+ -webkit-appearance: auto;
+ -moz-appearance: auto;
+ appearance: auto
+ }
+}
+
+[type=checkbox]:indeterminate:focus, [type=checkbox]:indeterminate:hover {
+ background-color: currentColor;
+ border-color: transparent
+}
+
+[type=file] {
+ background: unset;
+ border-color: inherit;
+ border-radius: 0;
+ border-width: 0;
+ font-size: unset;
+ line-height: inherit;
+ padding: 0
+}
+
+[type=file]:focus {
+ outline: 1px solid ButtonText;
+ outline: 1px auto -webkit-focus-ring-color
+}
+
+h1 {
+ font-size: 3rem;
+ line-height: 1
+}
+
+h1, h2 {
+ font-weight: 700
+}
+
+h2 {
+ font-size: 2.25rem;
+ line-height: 2.5rem
+}
+
+h3 {
+ font-size: 1.875rem;
+ line-height: 2.25rem
+}
+
+h3, h4 {
+ font-weight: 700
+}
+
+h4 {
+ font-size: 1.5rem;
+ line-height: 2rem
+}
+
+h5 {
+ font-size: 1.25rem
+}
+
+h5, h6 {
+ font-weight: 700;
+ line-height: 1.75rem
+}
+
+h6 {
+ font-size: 1.125rem
+}
+
+p {
+ font-size: 1rem;
+ line-height: 1.5rem
+}
+
+hr {
+ margin-bottom: 1.25rem;
+ margin-top: 1.25rem
+}
+
+a {
+ color: rgb(var(--color-magenta)/var(--tw-text-opacity, 1))
+}
+
+a, a:hover {
+ --tw-text-opacity: 1
+}
+
+a:hover {
+ color: rgb(var(--color-violet)/var(--tw-text-opacity, 1))
+}
+
+.absolute {
+ position: absolute
+}
+
+.relative {
+ position: relative
+}
+
+.bottom-0 {
+ bottom: 0
+}
+
+.right-0 {
+ right: 0
+}
+
+.col-span-6 {
+ grid-column: span 6/span 6
+}
+
+.mx-4 {
+ margin-left: 1rem;
+ margin-right: 1rem
+}
+
+.mx-auto {
+ margin-left: auto;
+ margin-right: auto
+}
+
+.my-4 {
+ margin-bottom: 1rem;
+ margin-top: 1rem
+}
+
+.my-5 {
+ margin-bottom: 1.25rem;
+ margin-top: 1.25rem
+}
+
+.mb-1 {
+ margin-bottom: .25rem
+}
+
+.mb-10 {
+ margin-bottom: 2.5rem
+}
+
+.mb-2 {
+ margin-bottom: .5rem
+}
+
+.mb-4 {
+ margin-bottom: 1rem
+}
+
+.mb-6 {
+ margin-bottom: 1.5rem
+}
+
+.ml-3 {
+ margin-left: .75rem
+}
+
+.mr-3 {
+ margin-right: .75rem
+}
+
+.mt-1 {
+ margin-top: .25rem
+}
+
+.mt-2 {
+ margin-top: .5rem
+}
+
+.mt-4 {
+ margin-top: 1rem
+}
+
+.mt-5 {
+ margin-top: 1.25rem
+}
+
+.block {
+ display: block
+}
+
+.inline {
+ display: inline
+}
+
+.flex {
+ display: flex
+}
+
+.inline-flex {
+ display: inline-flex
+}
+
+.contents {
+ display: contents
+}
+
+.h-16 {
+ height: 4rem
+}
+
+.h-8 {
+ height: 2rem
+}
+
+.w-16 {
+ width: 4rem
+}
+
+.w-auto {
+ width: auto
+}
+
+.w-full {
+ width: 100%
+}
+
+.min-w-0 {
+ min-width: 0
+}
+
+.max-w-7xl {
+ max-width: 80rem
+}
+
+.max-w-xl {
+ max-width: 36rem
+}
+
+.flex-1 {
+ flex: 1 1 0%
+}
+
+.flex-shrink-0 {
+ flex-shrink: 0
+}
+
+.items-center {
+ align-items: center
+}
+
+.justify-between {
+ justify-content: space-between
+}
+
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
+ --tw-space-x-reverse: 0;
+ margin-left: calc(1rem * (1 - var(--tw-space-x-reverse)));
+ margin-right: calc(1rem * var(--tw-space-x-reverse))
+}
+
+.divide-y > :not([hidden]) ~ :not([hidden]) {
+ --tw-divide-y-reverse: 0;
+ border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
+ border-top-width: calc(1px * (1 - var(--tw-divide-y-reverse)))
+}
+
+.divide-solar2 > :not([hidden]) ~ :not([hidden]) {
+ --tw-divide-opacity: 1;
+ border-color: rgb(var(--color-solar2)/var(--tw-divide-opacity, 1))
+}
+
+.overflow-hidden {
+ overflow: hidden
+}
+
+.rounded-lg {
+ border-radius: .5rem
+}
+
+.rounded-md {
+ border-radius: .375rem
+}
+
+.border {
+ border-width: 1px
+}
+
+.border-transparent {
+ border-color: transparent
+}
+
+.bg-blue {
+ --tw-bg-opacity: 1;
+ background-color: rgb(var(--color-blue)/var(--tw-bg-opacity, 1))
+}
+
+.bg-cyan {
+ --tw-bg-opacity: 1;
+ background-color: rgb(var(--color-cyan)/var(--tw-bg-opacity, 1))
+}
+
+.bg-magenta {
+ --tw-bg-opacity: 1;
+ background-color: rgb(var(--color-magenta)/var(--tw-bg-opacity, 1))
+}
+
+.bg-red {
+ --tw-bg-opacity: 1;
+ background-color: rgb(var(--color-red)/var(--tw-bg-opacity, 1))
+}
+
+.bg-solar3 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(var(--color-solar3)/var(--tw-bg-opacity, 1))
+}
+
+.bg-solar4 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(var(--color-solar4)/var(--tw-bg-opacity, 1))
+}
+
+.bg-solar5 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(var(--color-solar5)/var(--tw-bg-opacity, 1))
+}
+
+.bg-yellow {
+ --tw-bg-opacity: 1;
+ background-color: rgb(var(--color-yellow)/var(--tw-bg-opacity, 1))
+}
+
+.p-4 {
+ padding: 1rem
+}
+
+.px-2 {
+ padding-left: .5rem;
+ padding-right: .5rem
+}
+
+.px-3 {
+ padding-left: .75rem;
+ padding-right: .75rem
+}
+
+.px-4 {
+ padding-left: 1rem;
+ padding-right: 1rem
+}
+
+.py-16 {
+ padding-bottom: 4rem;
+ padding-top: 4rem
+}
+
+.py-2 {
+ padding-bottom: .5rem;
+ padding-top: .5rem
+}
+
+.py-4 {
+ padding-bottom: 1rem;
+ padding-top: 1rem
+}
+
+.py-5 {
+ padding-bottom: 1.25rem;
+ padding-top: 1.25rem
+}
+
+.py-6 {
+ padding-bottom: 1.5rem;
+ padding-top: 1.5rem
+}
+
+.text-center {
+ text-align: center
+}
+
+.text-2xl {
+ font-size: 1.5rem;
+ line-height: 2rem
+}
+
+.text-3xl {
+ font-size: 1.875rem;
+ line-height: 2.25rem
+}
+
+.text-4xl {
+ font-size: 2.25rem;
+ line-height: 2.5rem
+}
+
+.text-base {
+ font-size: 1rem;
+ line-height: 1.5rem
+}
+
+.text-lg {
+ font-size: 1.125rem;
+ line-height: 1.75rem
+}
+
+.text-sm {
+ font-size: .875rem;
+ line-height: 1.25rem
+}
+
+.text-xl {
+ font-size: 1.25rem;
+ line-height: 1.75rem
+}
+
+.font-bold {
+ font-weight: 700
+}
+
+.font-extrabold {
+ font-weight: 800
+}
+
+.font-medium {
+ font-weight: 500
+}
+
+.leading-4 {
+ line-height: 1rem
+}
+
+.leading-6 {
+ line-height: 1.5rem
+}
+
+.text-solar1 {
+ --tw-text-opacity: 1;
+ color: rgb(var(--color-solar1)/var(--tw-text-opacity, 1))
+}
+
+.text-solar2 {
+ --tw-text-opacity: 1;
+ color: rgb(var(--color-solar2)/var(--tw-text-opacity, 1))
+}
+
+.text-white {
+ --tw-text-opacity: 1;
+ color: rgb(var(--color-white)/var(--tw-text-opacity, 1))
+}
+
+.text-yellow {
+ --tw-text-opacity: 1;
+ color: rgb(var(--color-yellow)/var(--tw-text-opacity, 1))
+}
+
+.underline {
+ text-decoration-line: underline
+}
+
+.shadow {
+ --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
+ --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color)
+}
+
+.shadow, .shadow-sm {
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
+
+.shadow-sm {
+ --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
+ --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color)
+}
+
+.outline-none {
+ outline: 2px solid transparent;
+ outline-offset: 2px
+}
+
+:root {
+ --color-black: 0 0 0;
+ --color-base03: 0 43 54;
+ --color-base02: 7 54 66;
+ --color-base01: 88 110 117;
+ --color-base00: 101 123 131;
+ --color-base0: 131 148 150;
+ --color-base1: 147 161 161;
+ --color-base2: 238 232 213;
+ --color-base3: 253 246 227;
+ --color-white: 255 255 255;
+ --color-yellow: 181 137 0;
+ --color-orange: 203 75 22;
+ --color-red: 220 50 47;
+ --color-magenta: 211 54 130;
+ --color-violet: 108 113 196;
+ --color-blue: 38 139 210;
+ --color-cyan: 42 161 152;
+ --color-green: 133 153 0
+}
+
+.theme-dark {
+ --color-solar1: var(--color-base1);
+ --color-solar2: var(--color-base0);
+ --color-solar3: var(--color-base01);
+ --color-solar4: var(--color-base02);
+ --color-solar5: var(--color-base03)
+}
+
+.theme-light {
+ --color-solar1: var(--color-base01);
+ --color-solar2: var(--color-base00);
+ --color-solar3: var(--color-base1);
+ --color-solar4: var(--color-base2);
+ --color-solar5: var(--color-base3)
+}
+
+.hover\:bg-cyan:hover {
+ --tw-bg-opacity: 1;
+ background-color: rgb(var(--color-cyan)/var(--tw-bg-opacity, 1))
+}
+
+.hover\:bg-magenta:hover {
+ --tw-bg-opacity: 1;
+ background-color: rgb(var(--color-magenta)/var(--tw-bg-opacity, 1))
+}
+
+.hover\:bg-red:hover {
+ --tw-bg-opacity: 1;
+ background-color: rgb(var(--color-red)/var(--tw-bg-opacity, 1))
+}
+
+.hover\:bg-solar3:hover {
+ --tw-bg-opacity: 1;
+ background-color: rgb(var(--color-solar3)/var(--tw-bg-opacity, 1))
+}
+
+.hover\:bg-yellow:hover {
+ --tw-bg-opacity: 1;
+ background-color: rgb(var(--color-yellow)/var(--tw-bg-opacity, 1))
+}
+
+.hover\:text-solar3:hover {
+ --tw-text-opacity: 1;
+ color: rgb(var(--color-solar3)/var(--tw-text-opacity, 1))
+}
+
+.hover\:ring-2:hover {
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
+}
+
+.hover\:ring-magenta:hover {
+ --tw-ring-opacity: 1;
+ --tw-ring-color: rgb(var(--color-magenta)/var(--tw-ring-opacity, 1))
+}
+
+.hover\:ring-white:hover {
+ --tw-ring-opacity: 1;
+ --tw-ring-color: rgb(var(--color-white)/var(--tw-ring-opacity, 1))
+}
+
+.focus\:outline-none:focus {
+ outline: 2px solid transparent;
+ outline-offset: 2px
+}
+
+.focus\:ring-2:focus {
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
+}
+
+.focus\:ring-cyan:focus {
+ --tw-ring-opacity: 1;
+ --tw-ring-color: rgb(var(--color-cyan)/var(--tw-ring-opacity, 1))
+}
+
+.focus\:ring-red:focus {
+ --tw-ring-opacity: 1;
+ --tw-ring-color: rgb(var(--color-red)/var(--tw-ring-opacity, 1))
+}
+
+.focus\:ring-solar3:focus {
+ --tw-ring-opacity: 1;
+ --tw-ring-color: rgb(var(--color-solar3)/var(--tw-ring-opacity, 1))
+}
+
+.focus\:ring-yellow:focus {
+ --tw-ring-opacity: 1;
+ --tw-ring-color: rgb(var(--color-yellow)/var(--tw-ring-opacity, 1))
+}
+
+.focus\:ring-offset-2:focus {
+ --tw-ring-offset-width: 2px
+}
+
+@media (min-width: 640px) {
+ .sm\:ml-6 {
+ margin-left: 1.5rem
+ }
+
+ .sm\:mt-0 {
+ margin-top: 0
+ }
+
+ .sm\:block {
+ display: block
+ }
+
+ .sm\:flex {
+ display: flex
+ }
+
+ .sm\:items-center {
+ align-items: center
+ }
+
+ .sm\:gap-4 {
+ gap: 1rem
+ }
+
+ .sm\:p-6 {
+ padding: 1.5rem
+ }
+
+ .sm\:px-6 {
+ padding-left: 1.5rem;
+ padding-right: 1.5rem
+ }
+
+ .sm\:py-24 {
+ padding-bottom: 6rem;
+ padding-top: 6rem
+ }
+
+ .sm\:text-5xl {
+ font-size: 3rem;
+ line-height: 1
+ }
+
+ .sm\:tracking-tight {
+ letter-spacing: -.025em
+ }
+}
+
+@media (min-width: 768px) {
+ .md\:flex {
+ display: flex
+ }
+
+ .md\:w-2\/3 {
+ width: 66.666667%
+ }
+
+ .md\:items-center {
+ align-items: center
+ }
+
+ .md\:justify-between {
+ justify-content: space-between
+ }
+}
+
+@media (min-width: 1024px) {
+ .lg\:px-8 {
+ padding-left: 2rem;
+ padding-right: 2rem
+ }
+
+ .lg\:text-6xl {
+ font-size: 3.75rem;
+ line-height: 1
+ }
+}
diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
deleted file mode 100644
index f901e09..0000000
--- a/app/assets/stylesheets/application.tailwind.css
+++ /dev/null
@@ -1,70 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
- --color-black: 0 0 0;
- --color-base03: 0 43 54;
- --color-base02: 7 54 66;
- --color-base01: 88 110 117;
- --color-base00: 101 123 131;
- --color-base0: 131 148 150;
- --color-base1: 147 161 161;
- --color-base2: 238 232 213;
- --color-base3: 253 246 227;
- --color-white: 255 255 255;
- --color-yellow: 181 137 0;
- --color-orange: 203 75 22;
- --color-red: 220 50 47;
- --color-magenta: 211 54 130;
- --color-violet: 108 113 196;
- --color-blue: 38 139 210;
- --color-cyan: 42 161 152;
- --color-green: 133 153 0;
-}
-
-.theme-dark {
- --color-solar1: var(--color-base1);
- --color-solar2: var(--color-base0);
- --color-solar3: var(--color-base01);
- --color-solar4: var(--color-base02);
- --color-solar5: var(--color-base03);
-}
-
-.theme-light {
- --color-solar1: var(--color-base01);
- --color-solar2: var(--color-base00);
- --color-solar3: var(--color-base1);
- --color-solar4: var(--color-base2);
- --color-solar5: var(--color-base3);
-}
-
-@layer base {
- h1 {
- @apply text-5xl font-bold;
- }
- h2 {
- @apply text-4xl font-bold;
- }
- h3 {
- @apply text-3xl font-bold;
- }
- h4 {
- @apply text-2xl font-bold;
- }
- h5 {
- @apply text-xl font-bold;
- }
- h6 {
- @apply text-lg font-bold;
- }
- p {
- @apply text-base
- }
- hr {
- @apply mt-5 mb-5
- }
- a {
- @apply text-magenta hover:text-violet
- }
-}
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index f969757..a57a67f 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -19,7 +19,6 @@
<%# Includes all stylesheet files in app/assets/stylesheets %>
- <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
<%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
diff --git a/app/views/layouts/component_preview.html.erb b/app/views/layouts/component_preview.html.erb
index d029dcd..54bb4d6 100644
--- a/app/views/layouts/component_preview.html.erb
+++ b/app/views/layouts/component_preview.html.erb
@@ -5,9 +5,8 @@
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
- <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
- <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+ <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
@@ -23,4 +22,4 @@
-