copy files from explore.scss file

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>

1 files changed, 74 insertions, 5 deletions

diff --git a/src/components/routes/Explore.vue b/src/components/routes/Explore.vue
index 837314f27..7ba2bd3e9 100644
--- a/src/components/routes/Explore.vue
+++ b/src/components/routes/Explore.vue
@@ -1,16 +1,15 @@
 <template>
-	<div id="explore" style="display: flex; justify-items: center;">
+	<div id="explore">
 		<AddFeed v-if="showAddFeed" :feed="feed" @close="closeShowAddFeed()" />
 		<div v-if="!exploreSites" style="margin: auto;">
 			{{ t('news', 'No feeds found to add') }}
 		</div>
-		<div v-else class="grid-container" style="display:flex;flex-wrap: wrap;">
+		<div v-else class="grid-container">
 			<div v-for="entry in exploreSites"
 				:key="entry.title"
-				style="flex-grow: 1; max-width: calc(50% - 24px); min-width: 300px; display: flex; flex-direction: column;"
 				class="explore-feed grid-item">
 				<h2 v-if="entry.favicon"
-					class="explore-title"
+					class="explore-title icon"
 					:style="{ backgroundImage: 'url(' + entry.favicon + ')' }">
 					<a target="_blank" rel="noreferrer" :href="entry.url">
 						{{ entry.title }}
@@ -22,7 +21,7 @@
 				<div class="explore-content" style="flex-grow: 1">
 					<p>{{ entry.description }}</p>
 
-					<div class="explore-logo">
+					<div v-if="entry.image" class="explore-logo">
 						<img :src="entry.image">
 					</div>
 				</div>
@@ -107,3 +106,73 @@ const ExploreComponent = Vue.extend({
 export default ExploreComponent
 
 </script>
+
+<style scoped>
+#explore {
+    height: 100%;
+    width: 100%;
+    padding: 45px 0 45px 45px;
+		display: flex;
+		justify-items: center;
+}
+
+#explore .grid-container {
+	display:flex;
+	flex-wrap: wrap;
+}
+
+#explore .grid-item {
+    width: 300px;
+    border: 2px solid var(--color-border);
+    border-radius: var(--border-radius-large);
+    margin: 0 24px 24px 0;
+    padding: 24px;
+		flex-grow: 1;
+		max-width: calc(50% - 24px);
+		display: flex;
+		flex-direction: column;
+}
+
+#explore .grid-item .explore-title {
+    background-repeat: no-repeat;
+    background-position: 0 center;
+    background-size: 24px;
+}
+
+#explore .grid-item .explore-title.icon {
+	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;
+}
+
+#explore .grid-item .explore-content {
+	justify-content: center;
+  display: flex;
+  flex-direction: column;
+	margin-bottom: 10px;
+}
+</style>