Build css files from scss

Signed-off-by: Carl Schwan <carl@carlschwan.eu>

8 files changed, 110 insertions, 6 deletions

diff --git a/.github/workflows/lint-eslint.yml b/.github/workflows/lint-eslint.yml
index 34f766be8..564a4a829 100644
--- a/.github/workflows/lint-eslint.yml
+++ b/.github/workflows/lint-eslint.yml
@@ -32,13 +32,13 @@ jobs:
           fallbackNode: '^12'
           fallbackNpm: '^6'
 
-      - name: Set up node $
+      - name: Set up node ${{ steps.versions.outputs.nodeVersion }}
         uses: actions/setup-node@v3
         with:
-          node-version: $
+          node-version: ${{ steps.versions.outputs.nodeVersion }}
 
-      - name: Set up npm $
-        run: npm i -g npm@"$"
+      - name: Set up npm ${{ steps.versions.outputs.npmVersion }}
+        run: npm i -g npm@"${{ steps.versions.outputs.npmVersion }}"
 
       - name: Install dependencies
         run: npm ci
diff --git a/Makefile b/Makefile
index 3322b3b51..03b58207e 100644
--- a/Makefile
+++ b/Makefile
@@ -83,6 +83,8 @@ endif
 # Installs npm dependencies
 .PHONY: npm
 npm:
+	$(npm) ci
+	$(npm) run build
 ifneq (, $(npm))
 	cd js && $(npm) run build
 else
diff --git a/css/explore.css b/css/explore.css
new file mode 100644
index 000000000..03efb07b0
--- /dev/null
+++ b/css/explore.css
@@ -0,0 +1,57 @@
+/**
+ * Nextcloud - News
+ *
+ * This file is licensed under the Affero General Public License version 3 or
+ * later. See the COPYING file.
+ *
+ * @author Bernhard Posselt <dev@bernhard-posselt.com>
+ * @copyright 2020, Jan C. Borchardt, https://jancborchardt.net
+ * @copyright Bernhard Posselt 2014
+ */
+/**
+ * Explore styles
+ */
+.explore #app-content-wrapper {
+  height: 100%;
+}
+
+#explore {
+  height: 100%;
+  width: 100%;
+  padding: 45px 0 45px 45px;
+}
+#explore .grid-item {
+  width: 300px;
+  border: 2px solid var(--color-border);
+  border-radius: var(--border-radius-large);
+  margin: 0 24px 24px 0;
+  padding: 24px;
+}
+#explore .grid-item .explore-title {
+  background-repeat: no-repeat;
+  background-position: 0 center;
+  background-size: 24px;
+  padding-left: 32px;
+}
+#explore .grid-item .explore-title a {
+  word-wrap: break-word;
+}
+#explore .grid-item .explore-title a:hover, #explore .grid-item .explore-title a:focus {
+  text-decoration: underline;
+}
+#explore .grid-item .explore-logo {
+  text-align: center;
+  margin-top: 25px;
+}
+#explore .grid-item .explore-logo img {
+  width: 100%;
+}
+#explore .grid-item .explore-subscribe {
+  margin-top: 16px;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/*# sourceMappingURL=explore.css.map */
diff --git a/css/explore.css.map b/css/explore.css.map
new file mode 100644
index 000000000..711109ae3
--- /dev/null
+++ b/css/explore.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["explore.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWA;AAAA;AAAA;AAGA;EACI;;;AAGJ;EACI;EACA;EACA;;AAEH;EACI;EACA;EACH;EACG;EACH;;AAEA;EACI;EACA;EACA;EACA;;AAEH;EACI;;AAEH;EAEI;;AAKN;EACI;EACA;;AAEH;EACI;;AAIL;EACI;EACH;EACA;EACA;EACA","file":"explore.css"}
\ No newline at end of file
diff --git a/css/mobile.css b/css/mobile.css
new file mode 100644
index 000000000..d5a8a6b89
--- /dev/null
+++ b/css/mobile.css
@@ -0,0 +1,39 @@
+@media only screen and (max-width: 1024px) {
+  #app-content .utils .date {
+    display: none;
+  }
+  #app-shortcuts th:first-child {
+    padding-left: 44px;
+  }
+  #app-navigation:not(.hidden) + #app-content {
+    width: 100%;
+  }
+  #mark-all-read-button {
+    display: block;
+  }
+}
+@media only screen and (max-width: 600px) {
+  #app-content .article-actions ul {
+    max-width: 164px;
+  }
+  #app-content .heading .date {
+    display: none;
+  }
+  #app-content .heading h1 {
+    margin-right: 0;
+  }
+  #app-content .utils {
+    padding-right: 15px;
+  }
+  #app-content .article {
+    padding-right: 15px;
+    padding-left: 44px;
+  }
+}
+@media only screen and (max-width: 340px) {
+  #app-content .article-actions {
+    max-width: 82px;
+  }
+}
+
+/*# sourceMappingURL=mobile.css.map */
diff --git a/css/mobile.css.map b/css/mobile.css.map
new file mode 100644
index 000000000..24468a1a6
--- /dev/null
+++ b/css/mobile.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["mobile.scss"],"names":[],"mappings":"AAEA;EACI;IACI;;EAGJ;IACI;;EAGJ;IACI;;EAGJ;IACI;;;AAIR;EACI;IACI;;EAGJ;IACI;;EAGJ;IACI;;EAGJ;IACI;;EAGJ;IACI;IACA;;;AAIR;EACI;IACI","file":"mobile.css"}
\ No newline at end of file
diff --git a/css/mobile.scss b/css/mobile.scss
index 02271a263..c904d3e42 100644
--- a/css/mobile.scss
+++ b/css/mobile.scss
@@ -1,3 +1,5 @@
+$breakpoint-mobile: 1024px;
+
 @media only screen and (max-width: $breakpoint_mobile) {
     #app-content .utils .date {
         display: none;
diff --git a/package.json b/package.json
index 45c2e1aec..d3d46fde3 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "author": "Carl Schwan <carl@carlschwan.eu>",
   "contributors": [],
   "bugs": {
-    "url": "https://jroei.com"
+    "url": "https://github.com/nextcloud/news/issues"
   },
   "license": "agpl",
   "private": true,
@@ -17,7 +17,9 @@
     "lint": "eslint --ext .js,.vue src",
     "lint:fix": "eslint --ext .js,.vue src --fix",
     "stylelint": "stylelint css/*.css css/*.scss src/**/*.scss src/**/*.vue",
-    "stylelint:fix": "stylelint css/*.css css/*.scss src/**/*.scss src/**/*.vue --fix"
+    "stylelint:fix": "stylelint css/*.css css/*.scss src/**/*.scss src/**/*.vue --fix",
+    "sass": "sass css",
+    "sass:watch": "sass --watch css"
   },
   "dependencies": {
     "@nextcloud/auth": "^2.0.0",