kubernetes
/
website
mirror of https://github.com/kubernetes/website.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

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 <neko@ayaka.moe>
pull/43766/head
Neko Ayaka 2023-11-01 11:15:16 +08:00
parent ab3810c36d
commit 3aeff30a8e
No known key found for this signature in database
14 changed files with 25 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
assets/scss/_custom.scss
View File

@ -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;

2
content/de/community/_index.html
View File

@ -246,7 +246,7 @@ VISIT SITE
<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>

2
content/en/community/_index.html
View File

@ -178,6 +178,6 @@ community_styles_migrated: true
<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>

2
content/fr/community/_index.html
View File

@ -227,7 +227,7 @@ VISIT SITE
<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>

2
content/id/community/_index.html
View File

@ -226,7 +226,7 @@ VISIT SITE
<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>

2
content/it/community/_index.html
View File

@ -227,7 +227,7 @@ VISIT SITE
<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>

2
content/ja/community/_index.html
View File

@ -226,7 +226,7 @@ VISIT SITE
<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>

2
content/ko/community/_index.html
View File

@ -178,6 +178,6 @@ community_styles_migrated: true
<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>

2
content/pt-br/community/_index.html
View File

@ -194,6 +194,6 @@ community_styles_migrated: true
<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>

2
content/ru/community/_index.html
View File

@ -226,7 +226,7 @@ VISIT SITE
<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>

2
content/vi/community/_index.html
View File

@ -226,7 +226,7 @@ VISIT SITE
<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>

2
content/zh-cn/community/_index.html
View File

@ -237,6 +237,6 @@ community_styles_migrated: true
<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>

3
static/css/community.css
View File

@ -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 {

33
static/css/legacy_community.css
View File

@ -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;
}
}
}