Style fix

ilanlal · Sep 13, 2023 · ea96cb0 · ea96cb0
1 parent 6dbbaf8
commit ea96cb0
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 47 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -4,11 +4,16 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="ערוץ חדשות בקוד פתוח כל חדשות היום מהארץ ומהעולם במקום אחד. מבזקי חדשות, כתבות כלכלה, ספורט, רכילות, בריאות, טכנולוגיה מהארץ ומהעולם"
     />
+    <meta property="og:title" content="חדשות היום, כלכלה, ספורט, רכילות, בריאות, טכנולוגיה | מעריב" />
+    <meta property="og:description" content="ערוץ חדשות בקוד פתוח, כל חדשות היום מהארץ ומהעולם במקום אחד. מבזקי חדשות, כתבות כלכלה, ספורט, רכילות, בריאות, טכנולוגיה מהארץ ומהעולם." />
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="חדשות היום, כלכלה, ספורט, רכילות, בריאות, טכנולוגיה | חדשות בקוד פתוח" />
+
+
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -24,10 +29,10 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>חדשות בקוד פתוח</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <noscript>עליך לאפשר הפעלה של JavaScript כדי לצפות בתוכן.</noscript>
     <div id="root"></div>
     <!--
       This HTML file is a template.

diff --git a/src/components/Home.css b/src/components/Home.css
@@ -18,7 +18,7 @@
 
 .rss-panel {
   display: block;
-  width: 1200px;
+  width: 980px;
   margin: 50px auto;
 }
 

diff --git a/src/components/channels/Channel.css b/src/components/channels/Channel.css
@@ -1,8 +1,7 @@
 .channel {
     text-align: right;
-    margin-top: 100px;
-    max-width: 640px;
-    display: inline-block;
+    margin: 50px auto;
+    width: 800px;
 }
 
 .channel button {
@@ -20,78 +19,66 @@
     opacity: 1;
 }
 
-.rss-title {
-    display: block;
-    font-size: 0.9em;
-    text-align: center;
-    width: 100%;
-}
-.rss-list {
-    display: block;
-    height: 100%;
+.channel .rss-list {
+    display: block;    height: 100%;
     width: 100%;
     padding: 0;
     margin: 0;
 }
 
-.rss-item {
+.channel .rss-item {
     display: inline-block;
+    font-size: 1.1em;
+    margin: 20px 0;
+    width: 100%;
 }
 
-.rss-item img {
+.channel .rss-item img {
     display: block;
-    height: 100%;
-    border-radius: 13px;
+    height: 200px;
     width: auto;
     margin: 8px;
-    float: left;
+    float: right;
 }
 
-.rss-item .rss-item-title {
+.channel .rss-item .rss-item-title {
     padding: 0;
     margin: 0;
-    display: inline-block;
+    display: block;
     text-align: right;
-    vertical-align: top;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 100%;
-    font-size: 1.0em;
+    width: 100%;
+    font-size: 1.3em;
     text-decoration: none;
 }
 
-.rss-item .rss-item-content {
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    max-width: 100%;
-    font-size: 0.8em;
+.channel .rss-item .rss-item-content {
+    width: 100%;
+    font-size: 1.0em;
     text-decoration: none;
     padding: 0;
     margin: 0;
     height:100px;
     text-align: right;
     vertical-align: top;
 }
-.rss-item .rss-item-enclosure {
+.channel .rss-item .rss-item-enclosure {
     display: block;
 }
 
-.rss-item .rss-item-meta {
+.channel .rss-item .rss-item-meta {
     display: block;
     padding: 4px 0;
     text-align: right;
 
     font-size: 0.7em;
 }
 
-.rss-item a {
+.channel .rss-item a {
     padding: 4px 0;
     text-decoration: none;   
 }
 
-.rss-item .rss-item-meta span {
+.channel .rss-item .rss-item-meta span {
     display: inline-block;
     text-align: left;
     padding: 0 4px;

diff --git a/src/components/widgets/feed-containers/NewsBlock.css b/src/components/widgets/feed-containers/NewsBlock.css
@@ -1,7 +1,7 @@
 .feed-container {
-    display: table;
+    display: inline-block;
     width: 100%;
-    margin-top: 40px;
+    height: min-content;
 }
 
 .feed-container .rss-title {
@@ -17,7 +17,7 @@
 }
 
 .feed-container .rss-list {
-    display: table-row;
+    display: block;
     height: 100%;
     width: 100%;
     padding: 0;
@@ -33,6 +33,7 @@
 .feed-container .rss-item .rss-item-content {
     display: block;
     text-align: right;
+    font-size: 1.0em;
 }
 
 .feed-container .rss-list .rss-item img,
@@ -56,9 +57,10 @@
     margin: 0 auto;
     font-size: 1.0em;
     padding: 0 4px;
-    display: block;
+    display: inline-block;
     width: 100%;
     background-color: #f5f5f5;
+    height: 100%;
 }
 
 .feed-container .rss-item.one-column .rss-item-title {
@@ -82,15 +84,18 @@
 }
 
 .feed-container .rss-item.tow-column {
-    width: 46%;
+    display: inline-block;
+    font-size: 1.0em;
+    width: 48%;
     cursor: pointer;
     margin: 6px 4px;
     padding: 6px 4px;
+
 }
 
 .feed-container .rss-item.tow-column img {
     height: 100px;
-    float: right;
+    width: auto;
 }
 
 .feed-container .rss-item.three-column {
@@ -104,12 +109,23 @@
 }
 
 .feed-container .rss-item.one-column .rss-item-content {
-    height: auto;
+    height: 100%;
     font-size: 1.6em;
 }
 
 .feed-container .rss-item .rss-item-enclosure {
     display: block;
+    padding: 0;
+    margin: 0;
+    height: 100%;
+    width: 100%;
+}
+
+.feed-container .rss-item .rss-item-enclosure img {
+    display: block;
+    padding: 8px;
+    align-content: center;
+    float: right;
 }
 
 .feed-container .rss-item .rss-item-meta {