aboutsummaryrefslogtreecommitdiff
path: root/app/javascript/scss/components/_header.scss
diff options
context:
space:
mode:
authorhellekin <hellekin@cepheide.org>2021-01-23 15:35:49 +0100
committerhellekin <hellekin@cepheide.org>2021-01-23 15:35:49 +0100
commit73b3fffdbe730c33480682c40e7e8271e75ddf59 (patch)
tree94c60464d43c6d39150802e8110cf51be2c326ee /app/javascript/scss/components/_header.scss
parentb54d7d8aa172f85d53f44b601e4e81660d148342 (diff)
downloadincommon-map-73b3fffdbe730c33480682c40e7e8271e75ddf59.tar.gz
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...
Diffstat (limited to 'app/javascript/scss/components/_header.scss')
-rw-r--r--app/javascript/scss/components/_header.scss34
1 files changed, 34 insertions, 0 deletions
diff --git a/app/javascript/scss/components/_header.scss b/app/javascript/scss/components/_header.scss
new file mode 100644
index 0000000..3c7d460
--- /dev/null
+++ b/app/javascript/scss/components/_header.scss
@@ -0,0 +1,34 @@
+/*
+ * SPDX-FileCopyrightText: 2020 IN COMMON Collective <collective@incommon.cc
+ *
+ * SPDX-License-Identifier: LAL-1.3
+ */
+
+/* -----------------------------------------------------------------------------
+ HEADER
+----------------------------------------------------------------------------- */
+
+body > 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;
+ }
+ }
+}