Fix design of Explore page

Signed-off-by: Jan C. Borchardt <hey@jancborchardt.net>

2 files changed, 64 insertions, 109 deletions

diff --git a/css/explore.css b/css/explore.css
deleted file mode 100644
index 8bf60a754..000000000
--- a/css/explore.css
+++ /dev/null
@@ -1,109 +0,0 @@
-/**
- * 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 Bernhard Posselt 2014
- */
-
-/**
- * Explore styles
- */
-.explore #app-content-wrapper {
-    height: 100%;
-}
-
-#explore {
-    height: 100%;
-    width: 100%;
-    padding: 45px 0 45px 45px;
-}
-
-
-#explore .grid-item {
-    float: left;
-    width: 300px;
-    border-collapse: collapse;
-    border: 1px solid #ccc;
-    margin: 0 25px 25px 0;
-}
-
-#explore h1 {
-    font-size: 13pt;
-    background-repeat: no-repeat;
-    background-position: 0 center;
-    background-size: 24px 24px;
-    padding: 5px 0 0 35px;
-}
-
-#explore h1 a {
-    word-wrap: break-word;
-}
-
-#explore h1 a:hover {
-    text-decoration: underline;
-}
-
-#explore .category-wrapper {
-    text-align: center;
-}
-
-#explore .category {
-    font-weight: normal;
-    font-size: 10pt;
-    color: var(--color-primary-text);
-    background-color: var(--color-primary);
-    padding: 10px;
-    font-weight: bold;
-}
-
-#explore .grid-item-content {
-    padding: 30px;
-}
-
-#explore .explore-logo {
-    text-align: center;
-    margin-top: 25px;
-}
-
-#explore .explore-logo img {
-    width: 100%;
-}
-
-#explore .explore-subscribe {
-    padding-top: 15px;
-    text-align: right;
-}
-
-#explore .explore-content {
-    padding-top: 25px;
-}
-
-#explore .explore-filter {
-    text-align: right;
-    padding: 0 30px 30px;
-}
-
-#explore .explore-filter input,
-#explore .explore-filter select {
-    margin-left: 10px;
-    display: inline-block;
-}
-
-#explore .explore-filter input {
-    width: 200px;
-}
-
-#explore .explore-footer {
-    clear: both;
-    margin: 75px 0;
-    text-align: center;
-}
-
-#explore .explore-footer a {
-    font-size: 11pt;
-    color: #0000AA;
-    text-decoration: underline;
-}
diff --git a/css/explore.scss b/css/explore.scss
new file mode 100644
index 000000000..d459ae825
--- /dev/null
+++ b/css/explore.scss
@@ -0,0 +1,64 @@
+/**
+ * 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;
+
+	.grid-item {
+	    width: 300px;
+	    border: 2px solid var(--color-border);
+		border-radius: var(--border-radius-large);
+	    margin: 0 24px 24px 0;
+		padding: 24px;
+
+		.explore-title {
+		    background-repeat: no-repeat;
+		    background-position: 0 center;
+		    background-size: 24px;
+		    padding-left: 32px;
+
+			a {
+			    word-wrap: break-word;
+
+				&:hover,
+				&:focus {
+				    text-decoration: underline;
+				}
+			}
+		}
+
+		.explore-logo {
+		    text-align: center;
+		    margin-top: 25px;
+
+			img {
+			    width: 100%;
+			}
+		}
+
+		.explore-subscribe {
+	    	margin-top: 16px;
+			max-width: 100%;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+	}
+}