From 73b3fffdbe730c33480682c40e7e8271e75ddf59 Mon Sep 17 00:00:00 2001 From: hellekin Date: Sat, 23 Jan 2021 15:35:49 +0100 Subject: Move CSS to Webpack Using both the asset pipeline and webpack is confusing and leads to unpredictable results in production. This commit moves all (S)CSS to Webpack under `app/javascript/scss` so that we can test whether the development interface results in a consistent production deployment. In order to load the ForkAwesome fonts we used a long path: `$fa-font-path: "../../../node_modules/fork-awesome/fonts";` Not sure whether this works... --- app/assets/stylesheets/application/_body.scss | 167 --------------------- app/assets/stylesheets/application/_debug.scss | 18 --- app/assets/stylesheets/application/_flash.scss | 35 ----- app/assets/stylesheets/application/_fonts.scss | 12 -- app/assets/stylesheets/application/_footer.scss | 20 --- app/assets/stylesheets/application/_header.scss | 34 ----- app/assets/stylesheets/application/_map.scss | 19 --- app/assets/stylesheets/application/_user_info.scss | 70 --------- 8 files changed, 375 deletions(-) delete mode 100644 app/assets/stylesheets/application/_body.scss delete mode 100644 app/assets/stylesheets/application/_debug.scss delete mode 100644 app/assets/stylesheets/application/_flash.scss delete mode 100644 app/assets/stylesheets/application/_fonts.scss delete mode 100644 app/assets/stylesheets/application/_footer.scss delete mode 100644 app/assets/stylesheets/application/_header.scss delete mode 100644 app/assets/stylesheets/application/_map.scss delete mode 100644 app/assets/stylesheets/application/_user_info.scss (limited to 'app/assets/stylesheets/application') diff --git a/app/assets/stylesheets/application/_body.scss b/app/assets/stylesheets/application/_body.scss deleted file mode 100644 index 72d90df..0000000 --- a/app/assets/stylesheets/application/_body.scss +++ /dev/null @@ -1,167 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2020 IN COMMON Collective main, > header, > footer { - display: block; - width: calc(100% - 16px); - max-width: 1110px; - margin-left: auto; - margin-right: auto; - padding-left: 8px; - padding-right: 8px; - } -} - -img { - max-width: 100%; -} - -main { - position: relative; - padding-top: 5.8572em; - &:before { - content: ""; - display: table; - } -} - -main > article { - background-color: rgba(255, 255, 255, 0.8); - z-index: 990; -} - -body>aside { - position: fixed; - z-index: 1000; - background-color: var(--incommon-clear85); - top: 5rem; - bottom: 0; - border-top-right-radius: 1rem; -} - - -:root { - --font-family: Helvetica, Arial, sans-serif; - --scheme-type: light; - --primary: #222; - --secondary: #fff; - --tertiary: #08c; - --quaternary: #e45735; - --header-background: #fff; - --header-primary: #333; - --highlight: #ffff4d; - --danger: #e45735; - --success: #090; - --love: #fa6c8d; - --always-black-rgb: 0, 0, 0; - --primary-rgb: 34,34,34; - --primary-low-rgb: 232.9,232.9,232.9; - --secondary-rgb: 255,255,255; - --tertiary-rgb: 0,136,204; - --primary-very-low: #f8f8f8; - --primary-low: #e9e9e9; - --primary-low-mid: #bdbdbd; - --primary-medium: #919191; - --primary-high: #646464; - --primary-very-high: #434343; - --header-primary-low: #ebebeb; - --header-primary-low-mid: #c2c2c2; - --header-primary-medium: #999; - --header-primary-high: #707070; - --header-primary-very-high: #525252; - --secondary-low: #4d4d4d; - --secondary-medium: gray; - --secondary-high: #a6a6a6; - --secondary-very-high: #ededed; - --tertiary-low: #d1f0ff; - --tertiary-medium: #6cf; - --tertiary-high: #0aadff; - --tertiary-hover: #069; - --quaternary-low: #f7cdc2; - --highlight-low: #ffffca; - --highlight-medium: #ffffa6; - --highlight-high: #a6a600; - --danger-low: #fbe6e1; - --danger-low-mid: rgba(242,171,154,0.7); - --danger-medium: #ec8972; - --danger-hover: #c63c1b; - --success-low: #b8ffb8; - --success-medium: #4dff4d; - --success-hover: #007a00; - --love-low: #fee9ee; - --wiki: green; - --blend-primary-secondary-5: #f9f9f9; - --primary-med-or-secondary-med: #919191; - --primary-med-or-secondary-high: #919191; - --primary-high-or-secondary-low: #646464; - --primary-low-mid-or-secondary-high: #bdbdbd; - --primary-low-mid-or-secondary-low: #bdbdbd; - --primary-or-primary-low-mid: #222; - --highlight-low-or-medium: #ffffca; - --tertiary-low-or-tertiary-high: #d1f0ff; - --tertiary-med-or-tertiary: #6cf; - --secondary-or-primary: #fff; - --tertiary-or-white: #08c; - --facebook-or-white: #4267b2; - --twitter-or-white: #1da1f2; - --hljs-comment: #998; - --hljs-number: #099; - --hljs-string: #d14; - --hljs-literal: #458; - --hljs-tag: #000080; - --hljs-attribute: #008080; - --hljs-symbol: #990073; - --hljs-bg: #f8f8f8; - --google: #fff; - --google-hover: #f2f2f2; - --instagram: #e1306c; - --instagram-hover: #ac194b; - --facebook: #4267b2; - --facebook-hover: #2d477a; - --cas: #70ba61; - --twitter: #1da1f2; - --twitter-hover: #0c85d0; - --github: #100e0f; - --github-hover: #463e42; - --discord: #7289da; - --discord-hover: #4a67cf; - --gold: #e7c300; - --silver: silver; - --bronze: #cd7f32; - --incommon-blue: #216778; - --incommon-blue50: rgba(33, 103, 120, 0.5); - --incommon-clear85: rgba(237, 238, 201, 0.85); - --icon-menu-off: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzQzNDQiCiAgIHdpZHRoPSIzNi4yNSIKICAgaGVpZ2h0PSIzNi4yNSIKICAgdmVyc2lvbj0iMS4xIj4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE0MzUwIj4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzNDM0OCIgLz4KICA8cGF0aAogICAgIGlkPSJwYXRoNDM0MiIKICAgICBkPSJtIDE5LjQ4NDMzLDIxLjIzNDQgcSAwLjY0MDYyLC0xLjQ4NDQgMC42NDA2MiwtMy4xMDk0IDAsLTEuNjI1IC0wLjY0MDYyLC0zLjA5MzcgLTAuNjI1LC0xLjQ4NDQgLTEuNzAzMSwtMi41NjI1IC0xLjA3ODE0LC0xLjA3ODEgLTIuNTYyNDksLTEuNzAzMSAtMS40Njg3MywtMC42NDA3IC0zLjA5MzcxLC0wLjY0MDcgLTEuNjI0OTcsMCAtMy4xMDkzOSwwLjY0MDcgUSA3LjU0NjksMTEuMzkwNyA2LjQ2ODc3LDEyLjQ2ODggNS4zOTA2MywxMy41NDY5IDQuNzUsMTUuMDMxMyA0LjEyNSwxNi41IDQuMTI1LDE4LjEyNSBxIDAsMS42MjUgMC42MjUsMy4xMDk0IDAuNjQwNjIsMS40Njg3IDEuNzE4NzcsMi41NDY5IDEuMDc4MTMsMS4wNzggMi41NDY4NywxLjcxODcgMS40ODQzNSwwLjYyNSAzLjEwOTM5LDAuNjI1IDEuNjI0OTgsMCAzLjA5MzcxLC0wLjYyNSAxLjQ4NDM1LC0wLjY0MDcgMi41NjI0OSwtMS43MTg3IDEuMDc4MTQsLTEuMDc4MiAxLjcwMzEsLTIuNTQ2OSB6IG0gMTIuMDAwMDYsMCBxIDAuNjQwNjMsLTEuNDg0NCAwLjY0MDYzLC0zLjEwOTQgMCwtMS42MjUgLTAuNjQwNjMsLTMuMDkzNyAtMC42MjUsLTEuNDg0NCAtMS43MDMwOSwtMi41NjI1IC0xLjA3ODEzLC0xLjA3ODEgLTIuNTYyNDgsLTEuNzAzMSAtMS40Njg3NCwtMC42NDA3IC0zLjA5MzcxLC0wLjY0MDcgaCAtNi4wMzEyNiBxIDEuODU5MzMsMS40MDYzIDIuOTM3NDcsMy41IDEuMDkzNzUsMi4wOTM4IDEuMDkzNzUsNC41IDAsMi40MDYzIC0xLjA5Mzc1LDQuNSAtMS4wNzgxNCwyLjA5MzcgLTIuOTM3NDcsMy41IGggNi4wMzEyNiBxIDEuNjI0OTcsMCAzLjA5MzcxLC0wLjYyNSAxLjQ4NDM1LC0wLjY0MDcgMi41NjI0OCwtMS43MTg3IDEuMDc4MTQsLTEuMDc4MiAxLjcwMzA5LC0yLjU0NjkgeiBNIDMzLjMyODEyLDE0LjI1IHEgMC43OTY4OCwxLjg0MzggMC43OTY4OCwzLjg3NSAwLDIuMDMxMyAtMC43OTY4OCwzLjg5MDYgLTAuNzk2ODcsMS44NDM4IC0yLjE0MDU5LDMuMTg3NSAtMS4zMjgxMSwxLjMyODEgLTMuMTg3NTEsMi4xMjUgLTEuODQzNzMsMC43OTY5IC0zLjg3NDk4LDAuNzk2OSBIIDEyLjEyNDk2IHEgLTIuMDMxMjYsMCAtMy44OTA1OSwtMC43OTY5IFEgNi4zOTA2NSwyNi41MzEyIDUuMDQ2ODYsMjUuMjAzMSAzLjcxODc1LDIzLjg1OTQgMi45MjE4NywyMi4wMTU2IDIuMTI1LDIwLjE1NjMgMi4xMjUsMTguMTI1IDIuMTI1LDE2LjA5MzggMi45MjE4NywxNC4yNSAzLjcxODc1LDEyLjM5MDYgNS4wNDY4NiwxMS4wNjI1IDYuMzkwNTgsOS43MTg4IDguMjM0MzcsOC45MjE5IDEwLjA5MzcsOC4xMjUgMTIuMTI0OTYsOC4xMjUgaCAxMi4wMDAwOCBxIDIuMDMxMjUsMCAzLjg3NDk4LDAuNzk2OSAxLjg1OTMzLDAuNzk2OSAzLjE4NzUxLDIuMTQwNiAxLjM0MzcyLDEuMzI4MSAyLjE0MDU5LDMuMTg3NSB6IgogICAgIHN0eWxlPSJmaWxsOiMwMDgwODAiIC8+CiAgPGNpcmNsZQogICAgIHI9IjguMDE1MDAwMyIKICAgICBjeT0iMTguMTMzODMxIgogICAgIGN4PSIxMi4xMjU3MDQiCiAgICAgaWQ9InBhdGg0ODk1IgogICAgIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZWRlZWM5O2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDoxOC42MzU4NjIzNTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLWRhc2hvZmZzZXQ6MDtzdHJva2Utb3BhY2l0eToxO3BhaW50LW9yZGVyOmZpbGwgbWFya2VycyBzdHJva2UiIC8+Cjwvc3ZnPgo='); - --icon-menu-on: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzM0NDMiCiAgIHdpZHRoPSIzNi4yNSIKICAgaGVpZ2h0PSIzNi4yNSIKICAgdmVyc2lvbj0iMS4xIj4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGEzNDQ5Ij4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzMzQ0NyIgLz4KICA8cGF0aAogICAgIGlkPSJwYXRoMzQ0MSIKICAgICBkPSJtIDIuOTE4ODU3NCwyMi4wMTY3OSBxIC0wLjc5Mzg1NzEsLTEuODYzNjc0IC0wLjc5Mzg1NzEsLTMuODkzNjggMCwtMi4wMzAwMDYgMC43OTM4NTcxLC0zLjg3NDc3OSBRIDMuNzIwMjc0OSwxMi4zODg0MzggNS4wNDcxNTAxLDExLjA2MTU2MiA2LjM5MjkyNjgsOS43MTU3ODUzIDguMjMzOTE5NCw4LjkxODE0ODMgMTAuMDkzODEzLDguMTI0MjkxMyAxMi4xMjc2LDguMTI0MjkxMyBoIDExLjk5ODU4MiBxIDIuMDMwMDA2LDAgMy44NzQ3NzgsMC43OTM4NTcgMS44NTk4OTQsMC43OTc2MzcgMy4xODY3NjksMi4xNDM0MTM3IDEuMzQ1Nzc3LDEuMzI2ODc2IDIuMTQzNDE1LDMuMTg2NzY5IDAuNzkzODU2LDEuODQ0NzczIDAuNzkzODU2LDMuODc0Nzc5IDAsMi4wMzM3ODUgLTAuNzkzODU2LDMuODkzNjggLTAuNzk3NjM4LDEuODQ0NzcyIC0yLjE0MzQxNSwzLjE4Njc2OSAtMS4zMjMwOTUsMS4zMjY4NzUgLTMuMTg2NzY5LDIuMTI0NTEyIC0xLjg0NDc3MiwwLjc5NzYzOCAtMy44NzQ3NzgsMC43OTc2MzggSCAxMi4xMjc2IHEgLTIuMDMzNzg3LDAgLTMuODkzNjgwNiwtMC43OTM4NTggUSA2LjM5MjkyNjgsMjYuNTMwNDM0IDUuMDQ3MTUwMSwyNS4yMDM1NTkgMy43MjAyNzQ5LDIzLjg2MTU2MiAyLjkyMjYzNzYsMjIuMDE2NzkgWiBNIDIxLjAxODc5OSwyNS41MDIyIHEgMS40ODU2NDYsMC42MjM3NDUgMy4xMTExNjMsMC42MjM3NDUgMS42MjU1MTcsMCAzLjA5MjI2MiwtMC42MjM3NDUgMS40ODU2NDcsLTAuNjQyNjQ2IDIuNTYzMDI1LC0xLjcyMDAyNCAxLjA4MTE1NywtMS4wNzczNzcgMS43MDExMjIsLTIuNTQ3OTAzIDAuNjQyNjQ2LC0xLjQ4NTY0NiAwLjY0MjY0NiwtMy4xMTExNjMgMCwtMS42MjU1MTcgLTAuNjQyNjQ2LC0zLjA5MjI2MiAtMC42MTk5NjUsLTEuNDg1NjQ3IC0xLjcwMTEyMiwtMi41NjMwMjUgLTEuMDc3Mzc4LC0xLjA3NzM3NyAtMi41NjMwMjUsLTEuNzAxMTIyIC0xLjQ2Njc0NSwtMC42NDI2NDYgLTMuMDkyMjYyLC0wLjY0MjY0NiAtMS42MjU1MTcsMCAtMy4xMTExNjMsMC42NDI2NDYgLTEuNDcwNTI2LDAuNjIzNzQ1IC0yLjU0NzkwNCwxLjcwMTEyMiAtMS4wNzczNzcsMS4wNzczNzggLTEuNzIwMDIzLDIuNTYzMDI1IC0wLjYyMzc0NSwxLjQ2Njc0NSAtMC42MjM3NDUsMy4wOTIyNjIgMCwxLjYyNTUxNyAwLjYyMzc0NSwzLjExMTE2MyAwLjY0MjY0NiwxLjQ3MDUyNiAxLjcyMDAyMywyLjU0NzkwMyAxLjA3NzM3OCwxLjA3NzM3OCAyLjU0NzkwNCwxLjcyMDAyNCB6IgogICAgIHN0eWxlPSJmaWxsOiMwMDgwODA7ZmlsbC1vcGFjaXR5OjEiIC8+CiAgPGNpcmNsZQogICAgIHI9IjguMDE1MDAwMyIKICAgICBjeT0iMTguMTMyMDc4IgogICAgIGN4PSIyNC4xMjI3ODkiCiAgICAgaWQ9InBhdGg0ODk1IgogICAgIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZWRlZWM5O2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDoxOC42MzU4NjIzNTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLWRhc2hvZmZzZXQ6MDtzdHJva2Utb3BhY2l0eToxO3BhaW50LW9yZGVyOmZpbGwgbWFya2VycyBzdHJva2UiIC8+Cjwvc3ZnPgo='); -} diff --git a/app/assets/stylesheets/application/_debug.scss b/app/assets/stylesheets/application/_debug.scss deleted file mode 100644 index 0e3aaa7..0000000 --- a/app/assets/stylesheets/application/_debug.scss +++ /dev/null @@ -1,18 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2020 IN COMMON Collective span { - display: block; - padding: 0.5rem; - } - - .alert { - background-color: var(--danger-medium); - } - .notice { - background-color: var(--highlight-low); - } -} diff --git a/app/assets/stylesheets/application/_fonts.scss b/app/assets/stylesheets/application/_fonts.scss deleted file mode 100644 index 5bb13f1..0000000 --- a/app/assets/stylesheets/application/_fonts.scss +++ /dev/null @@ -1,12 +0,0 @@ -/* Override ForkAwesome font path to match Webpack's */ -$fa-font-path: '/packs/media/fonts'; - -/* Align font icon with the marker's head */ -.extra-marker-svg i.fa { - position: absolute; - top: 9px; - font-size: 16px; - left: -2px; - right: 0px; - text-align: center; -} diff --git a/app/assets/stylesheets/application/_footer.scss b/app/assets/stylesheets/application/_footer.scss deleted file mode 100644 index 4ab34a2..0000000 --- a/app/assets/stylesheets/application/_footer.scss +++ /dev/null @@ -1,20 +0,0 @@ -body>footer { - position: absolute; - z-index: 1004; - margin: 0 auto; - background-color: rgba(0,0,0,0.5); - color: white; - text-align: center; - bottom: 0; - left: 0; - right: 0; - width: 10rem; - border-top-left-radius: 1rem; - border-top-right-radius: 1rem; -} - -.app-version a:link, -.app-version a:visited { - color: whitesmoke; -} - diff --git a/app/assets/stylesheets/application/_header.scss b/app/assets/stylesheets/application/_header.scss deleted file mode 100644 index 3c7d460..0000000 --- a/app/assets/stylesheets/application/_header.scss +++ /dev/null @@ -1,34 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2020 IN COMMON Collective header { - position: fixed; - backface-visibility: hidden; - top: 0; - left: 0; - right: 0; - width: 100%; - margin: 0 auto; - height: 4em; - background-color: var(--header-background); - box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25); - margin-bottom: 15px; - display: flex; - align-items: center; - z-index: 999; - - > h1 { - display: flex; - font-size: 1em; - img { - height: 2.667em; - } - } -} diff --git a/app/assets/stylesheets/application/_map.scss b/app/assets/stylesheets/application/_map.scss deleted file mode 100644 index ba86dd4..0000000 --- a/app/assets/stylesheets/application/_map.scss +++ /dev/null @@ -1,19 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2020 IN COMMON Collective a { - display: block; - height: 100%; - width: 2.2857em; - height: 2.2857em; - padding: 0.2143em; - text-decoration: none; - cursor: pointer; - border-top: 1px solid transparent; - border-left: 1px solid transparent; - border-right: 1px solid transparent; - transition: all linear 0.15s; - outline: none; - - > img { - border-radius: 50%; - } - } - } - - &.authenticated { - - } - &.anonymous { - } -} -- cgit v1.2.3