Improve readabilities by restricting X (Twitter) widget width and height in /community page

nekomeowww · nekomeowww · commit 3aeff30a8ef0 · 2023-11-01T11:15:16.000+08:00
1. Limit embedded X (Twitter) widget iframe with
   - 600px of width with data-width attribute,
   - 800px of height with data-height attribute.
2. Adjusted the styles of the container of X (Twitter) widget for better UI/UX with centered elements.

Signed-off-by: Neko Ayaka &lt;neko@ayaka.moe&gt;
diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss
@@ -680,19 +680,6 @@ main.content {
   }
 }
 
-/* COMMUNITY legacy styles */
-/* Leave these in place until localizations are caught up */
-
-.newcommunitywrapper {
-  .news {
-    margin-left: 0;
-
-    @media screen and (min-width: 768px) {
-      margin-left: 10%;
-    }
-  }
-}
-
 /* CASE-STUDIES */
 
 // Many of the case studies have small variations in markup and styles;
diff --git a/content/de/community/_index.html b/content/de/community/_index.html
@@ -246,7 +246,7 @@ <h1 style="margin-bottom:2%">Aktuelle Neuigkeiten</h1>
 
 <br>
 <div class="twittercol1">
-<a class="twitter-timeline" data-tweet-limit="1" href="https://twitter.com/kubernetesio?ref_src=twsrc%5Etfw">Tweets von kubernetesio</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+<a class="twitter-timeline" data-tweet-limit="1" data-width="600" data-height="800" href="https://twitter.com/kubernetesio?ref_src=twsrc%5Etfw">Tweets von kubernetesio</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 </div>
 
 <br>
diff --git a/content/en/community/_index.html b/content/en/community/_index.html
@@ -178,6 +178,6 @@ <h2>Global community</h2>
 <div class="community-section community-frame" id="news">
   <h2>Recent News</h2>
   <div class="twittercol1">
-    <a class="twitter-timeline" data-tweet-limit="1" href="https://twitter.com/kubernetesio?ref_src=twsrc%5Etfw">Tweets by kubernetesio</a>
+    <a class="twitter-timeline" data-tweet-limit="1" data-width="600" data-height="800" href="https://twitter.com/kubernetesio?ref_src=twsrc%5Etfw">Tweets by kubernetesio</a>
   </div>
 </div>
diff --git a/content/fr/community/_index.html b/content/fr/community/_index.html
@@ -227,7 +227,7 @@ <h1 style="margin-bottom:2%">Actualités récentes</h1>
 
 <br>
 <div class="twittercol1">
-<a class="twitter-timeline" data-tweet-limit="1" href="https://twitter.com/kubernetesio?ref_src=twsrc%5Etfw">Tweets de kubernetesio</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+<a class="twitter-timeline" data-tweet-limit="1" data-width="600" data-height="800" href="https://twitter.com/kubernetesio?ref_src=twsrc%5Etfw">Tweets de kubernetesio</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 </div>
 
 <br>
diff --git a/content/id/community/_index.html b/content/id/community/_index.html
@@ -226,7 +226,7 @@ <h1 style="margin-bottom:2%">Berita Terkini</h1>
 
 <br>
 <div class="twittercol1">
-<a class="twitter-timeline" data-tweet-limit="1" href="https://twitter.com/kubernetesio?ref_src=twsrc%5Etfw">Tweet oleh kubernetesio</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+<a class="twitter-timeline" data-tweet-limit="1" data-width="600" data-height="800" href="https://twitter.com/kubernetesio?ref_src=twsrc%5Etfw">Tweet oleh kubernetesio</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 </div>
 
 <br>
diff --git a/content/it/community/_index.html b/content/it/community/_index.html
@@ -227,7 +227,7 @@ <h1 style="margin-bottom:2%">Notizie Recenti</h1>
 
 <br>
 <div class="twittercol1">
-<a class="twitter-timeline" data-tweet-limit="1" href="https://twitter.com/kubernetesio?ref_src=twsrc%5Etfw">I tweet di kubernetesio</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+<a class="twitter-timeline" data-tweet-limit="1" data-width="600" data-height="800" href="https://twitter.com/kubernetesio?ref_src=twsrc%5Etfw">I tweet di kubernetesio</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 </div>
 
 <br>
diff --git a/content/ja/community/_index.html b/content/ja/community/_index.html
@@ -226,7 +226,7 @@ <h1 style="margin-bottom:2%">最新ニュース</h1>
 
 <br>
 <div class="twittercol1">
-<a class="twitter-timeline" data-tweet-limit="1" href="https://twitter.com/kubernetesio?ref_src=twsrc%5Etfw">kubernetesioさんのツイート</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+<a class="twitter-timeline" data-tweet-limit="1" data-width="600" data-height="800" href="https://twitter.com/kubernetesio?ref_src=twsrc%5Etfw">kubernetesioさんのツイート</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 </div>
 
 <br>
diff --git a/content/ko/community/_index.html b/content/ko/community/_index.html
@@ -178,6 +178,6 @@ <h2>글로벌 커뮤니티</h2>
 <div class="community-section community-frame" id="news">
   <h2>최근 소식</h2>
   <div class="twittercol1">
-    <a class="twitter-timeline" data-tweet-limit="1" href="https://twitter.com/kubernetesio?ref_src=twsrc%5Etfw">kubernetesio의 트윗</a>
+    <a class="twitter-timeline" data-tweet-limit="1" data-width="600" data-height="800" href="https://twitter.com/kubernetesio?ref_src=twsrc%5Etfw">kubernetesio의 트윗</a>
   </div>
 </div>
diff --git a/content/pt-br/community/_index.html b/content/pt-br/community/_index.html
@@ -194,6 +194,6 @@ <h2>Comunidade global</h2>
 <div class="community-section community-frame" id="news">
   <h2>Notícias Recentes</h2>
   <div class="twittercol1">
-    <a class="twitter-timeline" data-tweet-limit="1" href="https://twitter.com/kubernetesio?ref_src=twsrc%5Etfw">Tuítes por kubernetesio</a>
+    <a class="twitter-timeline" data-tweet-limit="1" data-width="600" data-height="800" href="https://twitter.com/kubernetesio?ref_src=twsrc%5Etfw">Tuítes por kubernetesio</a>
   </div>
 </div>
diff --git a/content/ru/community/_index.html b/content/ru/community/_index.html
@@ -226,7 +226,7 @@ <h1 style="margin-bottom:2%">Последние новости</h1>
 
 <br>
 <div class="twittercol1">
-<a class="twitter-timeline" data-tweet-limit="1" href="https://twitter.com/kubernetesio?ref_src=twsrc%5Etfw">Твиты от kubernetesio</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+<a class="twitter-timeline" data-tweet-limit="1" data-width="600" data-height="800" href="https://twitter.com/kubernetesio?ref_src=twsrc%5Etfw">Твиты от kubernetesio</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 </div>
 
 <br>
diff --git a/content/vi/community/_index.html b/content/vi/community/_index.html
@@ -226,7 +226,7 @@ <h1 style="margin-bottom:2%">Bản tin gần đây</h1>
 
 <br>
 <div class="twittercol1">
-<a class="twitter-timeline" data-tweet-limit="1" href="https://twitter.com/kubernetesio?ref_src=twsrc%5Etfw">Tweets bởi kubernetesio</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+<a class="twitter-timeline" data-tweet-limit="1" data-width="600" data-height="800" href="https://twitter.com/kubernetesio?ref_src=twsrc%5Etfw">Tweets bởi kubernetesio</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 </div>
 
 <br>
diff --git a/content/zh-cn/community/_index.html b/content/zh-cn/community/_index.html
@@ -237,6 +237,6 @@ <h2>全球社区</h2>
   <h2>最新新闻</h2>
   <div class="twittercol1">
     <!-- <a class="twitter-timeline" data-tweet-limit="1" href="https://twitter.com/kubernetesio?ref_src=twsrc%5Etfw">Tweets by kubernetesio</a> -->
-    <a class="twitter-timeline" data-tweet-limit="1" href="https://twitter.com/kubernetesio?ref_src=twsrc%5Etfw">kubernetesio 账号发布的推文</a>
+    <a class="twitter-timeline" data-tweet-limit="1" data-width="600" data-height="800" href="https://twitter.com/kubernetesio?ref_src=twsrc%5Etfw">kubernetesio 账号发布的推文</a>
   </div>
 </div>
diff --git a/static/css/community.css b/static/css/community.css
@@ -330,6 +330,9 @@ body.cid-community .community-section.community-frame {
 
 body.cid-community .community-section.community-frame .twittercol1 {
   width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 body.cid-community details > summary {
diff --git a/static/css/legacy_community.css b/static/css/legacy_community.css
@@ -9,7 +9,7 @@ div.community_main {
   padding: 50px 100px;
 }
 
-div.community_main ul, 
+div.community_main ul,
 div.community_main li {
   list-style: disc;
   list-style-position: inside;
@@ -44,10 +44,10 @@ html {
 }
 
 .twittercol1 {
-  width: 60%;
-  margin-left: 20%;
-  float: left;
-  padding: 2%
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 code {
@@ -441,13 +441,10 @@ h2:after {
 
 
 .news {
-  float: left;
-  width: 80%;
-  padding-top: 3%;
-  padding-bottom: 3%;
-  margin-left: 10%;
-  text-align: center;
-
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
 .newscol {
@@ -504,7 +501,7 @@ h2:after {
     font-weight: bold;
 
   }
-  
+
 }
 
 @media (max-width:1000px) {
@@ -588,14 +585,6 @@ h2:after {
 }
 
 @media (max-width:750px) {
-
-
-  .twittercol1 {
-    width: 95%;
-    float: left;
-    padding: 2%
-  }
-
   .conducttextnobutton {
     margin-bottom: 4%;
   }
@@ -855,4 +844,4 @@ h2:after {
     font-size: 0.7em !important;
   }
 
-}
+}
