From 0929719a845897cc8567cf972e07a69a71f0fa6f Mon Sep 17 00:00:00 2001 From: Star Rauchenberger Date: Thu, 30 Nov 2023 13:29:08 -0500 Subject: Migrate to a full rails app --- app/assets/stylesheets/application.css | 15 ++ app/assets/stylesheets/general.css.scss | 263 +++++++++++++++++++++++++ app/assets/stylesheets/wittle/application.css | 15 -- app/assets/stylesheets/wittle/general.css.scss | 263 ------------------------- 4 files changed, 278 insertions(+), 278 deletions(-) create mode 100644 app/assets/stylesheets/application.css create mode 100644 app/assets/stylesheets/general.css.scss delete mode 100644 app/assets/stylesheets/wittle/application.css delete mode 100644 app/assets/stylesheets/wittle/general.css.scss (limited to 'app/assets/stylesheets') diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css new file mode 100644 index 0000000..288b9ab --- /dev/null +++ b/app/assets/stylesheets/application.css @@ -0,0 +1,15 @@ +/* + * This is a manifest file that'll be compiled into application.css, which will include all the files + * listed below. + * + * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's + * vendor/assets/stylesheets directory can be referenced here using a relative path. + * + * You're free to add application-wide styles to this file and they'll appear at the bottom of the + * compiled file so the styles you add here take precedence over styles defined in any other CSS + * files in this directory. Styles in this file should be added after the last require_* statement. + * It is generally better to create a new file per style scope. + * + *= require_tree . + *= require_self + */ diff --git a/app/assets/stylesheets/general.css.scss b/app/assets/stylesheets/general.css.scss new file mode 100644 index 0000000..7ee3169 --- /dev/null +++ b/app/assets/stylesheets/general.css.scss @@ -0,0 +1,263 @@ +#puzzle { + touch-action: none; +} + +#banner { + background-image: image-url("wittle_header.png"); + background-size: cover; + width: 600px; + height: 245px; + margin: 0 auto; + + h1 { + margin: 0; + + a { + display: block; + width: 600px; + height: 245px; + text-indent: -5000px; + text-decoration: none; + margin: 0; + } + } +} + +h1 { + text-align: center; +} + +.puzzle-description { + text-align: center; + display: block; + margin-top: -1em; + margin-bottom: 2em; + font-size: 1.25em; +} + +#trace-settings { + margin: 1em auto; + width: 540px; + + summary { + text-align: center; + } +} + +#sens, #volume { + background-image: linear-gradient(to right, #EEE, #555); +} + +/* Slider control main bar */ +input[type="range"] { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; + border-radius: 3px; + height: 15px; + margin-bottom: 5px; + margin-top: 5px; + outline: none; + width: 100%; +} +/* Slider control icon */ +input[type="range"]::-webkit-slider-thumb { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; + background: image-url('slider.png'); + background-size: 17px 33px; + height: 33px; + width: 17px; +} +input[type="range"]::-moz-range-thumb { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; + background: image-url('slider.png'); + background-size: 17px 33px; + height: 33px; + width: 17px; +} +input[type="range"]::-ms-thumb { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; + background: image-url('slider.png'); + background-size: 17px 33px; + height: 33px; + width: 17px; +} + +#submission-form { + margin: 1em auto; + width: 540px; + text-align: center; + + form { + border: 1px solid black; + width: max-content; + padding: 0 2em; + margin: 0 auto; + } +} + +#scores { + display: flex; + + div { + flex: 0 0 48%; + + h2 { + text-align: center; + } + + table { + width: max-content; + margin: 0 auto; + } + } +} + +#activation-button { + button { + display: block; + margin: 0 auto; + width: 25%; + background-color: #04AA6D; + padding: 14px 28px; + font-size: 16px; + cursor: pointer; + text-align: center; + color: white; + } +} + +#timer { + width: max-content; + margin: 0.5em auto 0; + font-size: 3em; + + %label { + padding: 0; + } +} + +.score-field { + padding-left: 1em; + text-align: right; +} + +#archive { + width: 50%; + margin: 0 auto; + border-spacing: 0; + text-align: center; + + tr { + &.odd { + background-color: #fff; + } + + &.even { + background-color: #edf; + } + } + + th, td { + padding: 0.5em; + } + + ul { + list-style-type: none; + padding: 0; + } +} + +#current-date { + margin-top: 1em; + text-align: center; +} + +#choose-difficulty { + margin: 1em auto 2em; + width: max-content; + display: flex; +} + +#normal-link { + width: 215px; + margin-right: 1em; + + a { + background-image: image-url("wittle_normal.png"); + background-size: cover; + display: block; + width: 215px; + height: 215px; + text-indent: -5000px; + text-decoration: none; + margin: 0; + } +} + +#hard-link { + width: 215px; + margin-right: 1em; + + a { + background-image: image-url("wittle_hard.png"); + background-size: cover; + display: block; + width: 215px; + height: 215px; + text-indent: -5000px; + text-decoration: none; + margin: 0; + } +} + +#expert-link { + width: 215px; + + a { + background-image: image-url("wittle_expert.png"); + background-size: cover; + display: block; + width: 215px; + height: 215px; + text-indent: -5000px; + text-decoration: none; + margin: 0; + } +} + +.summary { + width: 50%; + min-width: 600px; + margin: 0 auto 1em; +} + +.puzzle-status { + text-align: center; + margin-bottom: 0; +} + +.breadcrumb { + text-align: center; + + a, a:visited { + color: #555d66; + text-decoration: none; + } + + a:hover { + text-decoration: underline; + } +} + +#new-puzzles { + text-align: center; + font-size: 1.25em; + margin-bottom: 1em; +} diff --git a/app/assets/stylesheets/wittle/application.css b/app/assets/stylesheets/wittle/application.css deleted file mode 100644 index 0ebd7fe..0000000 --- a/app/assets/stylesheets/wittle/application.css +++ /dev/null @@ -1,15 +0,0 @@ -/* - * This is a manifest file that'll be compiled into application.css, which will include all the files - * listed below. - * - * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, - * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path. - * - * You're free to add application-wide styles to this file and they'll appear at the bottom of the - * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS - * files in this directory. Styles in this file should be added after the last require_* statement. - * It is generally better to create a new file per style scope. - * - *= require_tree . - *= require_self - */ diff --git a/app/assets/stylesheets/wittle/general.css.scss b/app/assets/stylesheets/wittle/general.css.scss deleted file mode 100644 index 12e5486..0000000 --- a/app/assets/stylesheets/wittle/general.css.scss +++ /dev/null @@ -1,263 +0,0 @@ -#puzzle { - touch-action: none; -} - -#banner { - background-image: image-url("wittle/wittle_header.png"); - background-size: cover; - width: 600px; - height: 245px; - margin: 0 auto; - - h1 { - margin: 0; - - a { - display: block; - width: 600px; - height: 245px; - text-indent: -5000px; - text-decoration: none; - margin: 0; - } - } -} - -h1 { - text-align: center; -} - -.puzzle-description { - text-align: center; - display: block; - margin-top: -1em; - margin-bottom: 2em; - font-size: 1.25em; -} - -#trace-settings { - margin: 1em auto; - width: 540px; - - summary { - text-align: center; - } -} - -#sens, #volume { - background-image: linear-gradient(to right, #EEE, #555); -} - -/* Slider control main bar */ -input[type="range"] { - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; - border-radius: 3px; - height: 15px; - margin-bottom: 5px; - margin-top: 5px; - outline: none; - width: 100%; -} -/* Slider control icon */ -input[type="range"]::-webkit-slider-thumb { - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; - background: image-url('wittle/slider.png'); - background-size: 17px 33px; - height: 33px; - width: 17px; -} -input[type="range"]::-moz-range-thumb { - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; - background: image-url('wittle/slider.png'); - background-size: 17px 33px; - height: 33px; - width: 17px; -} -input[type="range"]::-ms-thumb { - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; - background: image-url('wittle/slider.png'); - background-size: 17px 33px; - height: 33px; - width: 17px; -} - -#submission-form { - margin: 1em auto; - width: 540px; - text-align: center; - - form { - border: 1px solid black; - width: max-content; - padding: 0 2em; - margin: 0 auto; - } -} - -#scores { - display: flex; - - div { - flex: 0 0 48%; - - h2 { - text-align: center; - } - - table { - width: max-content; - margin: 0 auto; - } - } -} - -#activation-button { - button { - display: block; - margin: 0 auto; - width: 25%; - background-color: #04AA6D; - padding: 14px 28px; - font-size: 16px; - cursor: pointer; - text-align: center; - color: white; - } -} - -#timer { - width: max-content; - margin: 0.5em auto 0; - font-size: 3em; - - %label { - padding: 0; - } -} - -.score-field { - padding-left: 1em; - text-align: right; -} - -#archive { - width: 50%; - margin: 0 auto; - border-spacing: 0; - text-align: center; - - tr { - &.odd { - background-color: #fff; - } - - &.even { - background-color: #edf; - } - } - - th, td { - padding: 0.5em; - } - - ul { - list-style-type: none; - padding: 0; - } -} - -#current-date { - margin-top: 1em; - text-align: center; -} - -#choose-difficulty { - margin: 1em auto 2em; - width: max-content; - display: flex; -} - -#normal-link { - width: 215px; - margin-right: 1em; - - a { - background-image: image-url("wittle/wittle_normal.png"); - background-size: cover; - display: block; - width: 215px; - height: 215px; - text-indent: -5000px; - text-decoration: none; - margin: 0; - } -} - -#hard-link { - width: 215px; - margin-right: 1em; - - a { - background-image: image-url("wittle/wittle_hard.png"); - background-size: cover; - display: block; - width: 215px; - height: 215px; - text-indent: -5000px; - text-decoration: none; - margin: 0; - } -} - -#expert-link { - width: 215px; - - a { - background-image: image-url("wittle/wittle_expert.png"); - background-size: cover; - display: block; - width: 215px; - height: 215px; - text-indent: -5000px; - text-decoration: none; - margin: 0; - } -} - -.summary { - width: 50%; - min-width: 600px; - margin: 0 auto 1em; -} - -.puzzle-status { - text-align: center; - margin-bottom: 0; -} - -.breadcrumb { - text-align: center; - - a, a:visited { - color: #555d66; - text-decoration: none; - } - - a:hover { - text-decoration: underline; - } -} - -#new-puzzles { - text-align: center; - font-size: 1.25em; - margin-bottom: 1em; -} -- cgit 1.4.1