fix: Update user group list page
Signed-off-by: TheYoungManLi <cjl@kubesphere.io>
|
|
@ -104,7 +104,7 @@
|
|||
|
||||
.innerBox {
|
||||
position: relative;
|
||||
width: 293px;
|
||||
width: 232px;
|
||||
height: 300px;
|
||||
border-radius: 10px;
|
||||
background: #FFFFFF;
|
||||
|
|
@ -118,7 +118,7 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 10;
|
||||
padding: 32px 24px 32px 32px;
|
||||
padding: 24px 19px 24px 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
|
@ -192,92 +192,102 @@
|
|||
z-index: -1;
|
||||
}
|
||||
|
||||
.imageList {
|
||||
margin-left: 13px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
.imageBox{
|
||||
overflow: hidden;
|
||||
|
||||
.normalPic {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 212px;
|
||||
height: 300px;
|
||||
border-radius: 10px;
|
||||
// background: #C4C4C4;
|
||||
padding: 20px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
transition-delay: .2s;
|
||||
transition-duration: .5s;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
border-radius: 10px;
|
||||
width: 383px;
|
||||
.imageList {
|
||||
width: 1140px;
|
||||
margin-left: 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
flex: 1;
|
||||
|
||||
.normalPic {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 212px;
|
||||
height: 300px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.nameText {
|
||||
text-align: center;
|
||||
width: 60px;
|
||||
height: 24px;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.1) 96.81%), #242E42;
|
||||
box-shadow: 0px 8px 16px rgba(33, 43, 61, 0.2), 0px 10px 50px rgba(34, 43, 62, 0.1);
|
||||
border-radius: 18px;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.textBox {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
padding: 20px;
|
||||
padding-bottom: 16px;
|
||||
opacity: 0;
|
||||
background: linear-gradient(180deg, rgba(23, 28, 52, 0) 0%, rgba(23, 28, 52, 0.8) 100%);
|
||||
border-radius: 10px;
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
// background: #C4C4C4;
|
||||
padding: 20px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
transition: width .5s;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
border-radius: 10px;
|
||||
width: 444px;
|
||||
height: 300px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: -1;
|
||||
transition: transform .5s;
|
||||
}
|
||||
|
||||
.nameText {
|
||||
text-align: center;
|
||||
width: 60px;
|
||||
height: 24px;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.1) 96.81%), #242E42;
|
||||
box-shadow: 0px 8px 16px rgba(33, 43, 61, 0.2), 0px 10px 50px rgba(34, 43, 62, 0.1);
|
||||
border-radius: 18px;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
letter-spacing: -0.0444444px;
|
||||
color: #FFFFFF;
|
||||
margin-bottom: 8px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.des {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
|
||||
.textBox {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
padding: 20px;
|
||||
padding-bottom: 16px;
|
||||
opacity: 0;
|
||||
background: linear-gradient(180deg, rgba(23, 28, 52, 0) 0%, rgba(23, 28, 52, 0.8) 100%);
|
||||
border-radius: 10px;
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
letter-spacing: -0.0444444px;
|
||||
color: #FFFFFF;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.des {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
margin: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
margin: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.pic-hover {
|
||||
width: 380px;
|
||||
cursor: pointer;
|
||||
|
||||
.textBox {
|
||||
opacity: 1;
|
||||
transition-delay: .7s;
|
||||
}
|
||||
|
||||
.chengdu{
|
||||
left: 0px;
|
||||
}
|
||||
&:last-child{
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
width: 444px;
|
||||
cursor: pointer;
|
||||
|
||||
.textBox {
|
||||
opacity: 1;
|
||||
transition-delay: .6s;
|
||||
}
|
||||
|
||||
.chengdu {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -324,30 +334,33 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
.imageList{
|
||||
flex-direction: column;
|
||||
margin-left: 0px;
|
||||
|
||||
.normalPic{
|
||||
.imageBox{
|
||||
.imageList{
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
margin-left: 0px;
|
||||
|
||||
img{
|
||||
.normalPic{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.textBox{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:nth-of-type(even){
|
||||
margin: 20px 0px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 421px) {
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.textBox{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:nth-of-type(even){
|
||||
margin: 20px 0px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 421px) {
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -841,4 +854,14 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flex-end {
|
||||
transform: translateX(-232px);
|
||||
justify-content: flex-end !important;
|
||||
}
|
||||
|
||||
.flex-start {
|
||||
transform: translateX(0px);
|
||||
justify-content: flex-start !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
---
|
||||
title: "用户委员会-广州站"
|
||||
draft: true
|
||||
weight: 4
|
||||
stationName: 广州站
|
||||
coverImage: /images/user-group/list/cityCards/guangzhou.png
|
||||
|
||||
css: "scss/user-group-single.scss"
|
||||
|
||||
topSection:
|
||||
kubSphere: KubeSphere
|
||||
committee: 社区用户委员会
|
||||
description: KubeSphere 社区用户委员会—广州站,成立于 2021 年 5 月 15 日,是由活跃在广州的 KubeSphere 社区用户和成员组成的。初创核心成员 4 人。
|
||||
image: /images/user-group/guangzhou/banner.png
|
||||
mobile_image: /images/user-group/guangzhou/m-banner.png
|
||||
|
||||
station:
|
||||
name_en: KubeSphere Community
|
||||
name:
|
||||
text1: 申请加入
|
||||
text2: 社区用户委员会—广州站
|
||||
description:
|
||||
- 不管你是否是 KubeSphere 的用户,只要你对云原生技术感兴趣,对组织活动有热情,对发展 KubeSphere 社区有想法,即可申请加入 KubeSphere 社区上海用户委员会。
|
||||
- 如果你想加入 KubeSphere 社区用户委员会—上海站,成为其中的一名委员(成员),为发展 KubeSphere 社区贡献自己的一份力量,可添加上海站站长微信申请,并可加入 KubeSphere 开源社区上海站微信群。
|
||||
manager:
|
||||
name: 张海立
|
||||
image: /images/user-group/shanghai/zhanghaili.png
|
||||
wxCode: /images/user-group/shanghai/zhanghailivx.jpeg
|
||||
position: 广州站站长
|
||||
icon: /images/user-group/guangzhou/guangzhou.svg
|
||||
icon_name: KubeSphere 社区用户委员会
|
||||
station_name: "- 广州站 -"
|
||||
|
||||
returns:
|
||||
title: 为什么加入我们?
|
||||
list:
|
||||
- text: 结识更多的云原生领域的技术大牛、志同道合的朋友
|
||||
bg: /images/user-group/list/returns/bg1.svg
|
||||
|
||||
- text: 提升自身在云原生领域的知名度,拓宽学习和交流云原生技术的渠道
|
||||
bg: /images/user-group/list/returns/bg2.svg
|
||||
|
||||
- text: 提升自身多项能力:交流沟通能力、组织协调能力等
|
||||
bg: /images/user-group/list/returns/bg3.svg
|
||||
|
||||
- text: KubeSphere 社区周边纪念礼品、社区认证证书及社区 Title
|
||||
bg: /images/user-group/list/returns/bg4.svg
|
||||
|
||||
members:
|
||||
title: 核心成员
|
||||
list:
|
||||
- name: 张海立
|
||||
position: 站长
|
||||
des: 驭势科技云平台研发总监,开源爱好者,云原生社区上海站 PMC 成员,KubeSphere Ambassador;日常云原生领域工作涉及 Kubernetes、DevOps、可观察性、服务网格等。
|
||||
image: /images/user-group/shanghai/zhanghaili.png
|
||||
|
||||
- name: 申红磊
|
||||
position: 副站长
|
||||
des: 关注内容:容器、DevSecOps 领域、Spring Cloud、Istio 以及微服务中间件;行业解决方案和发展趋势,云上架构的规划与设计,微服务方案与咨询等。
|
||||
image: /images/user-group/shanghai/shl.png
|
||||
|
||||
- name: 刘德涵
|
||||
position: 委员
|
||||
des: 韵达科技资深运维,Docker,Linux、Kubernetes 运维,Devops,CI/CD,微服务应用部署,链路监控、helm,基础架构设计,快速定位运维相关问题,多年的运维操作经验,协助社区成员解决相关问题。
|
||||
image: /images/user-group/shanghai/liudehan.jpeg
|
||||
|
||||
- name: 张浩飞
|
||||
position: 委员
|
||||
des: 现在任职高级运维工程师,负责公司 K8s 的搭建,维护,与新技术的探索。
|
||||
image: /images/user-group/shanghai/zhanghaofei.jpeg
|
||||
|
||||
activities:
|
||||
videos:
|
||||
- image: https://pek3b.qingstor.com/kubesphere-community/images/driverless-cic-cover.png
|
||||
link: https://kubesphere.com.cn/live/driverless-cic/
|
||||
|
||||
- image: https://pek3b.qingstor.com/kubesphere-community/images/uisee0916-live-cover.png
|
||||
link: https://kubesphere.com.cn/live/uisee0916-live/
|
||||
|
||||
- image: https://pek3b.qingstor.com/kubesphere-community/images/uisee0923-live-cover.png
|
||||
link: https://kubesphere.com.cn/live/uisee0923-live/
|
||||
|
||||
- image: https://pek3b.qingstor.com/kubesphere-community/images/mqtt1230-live-cover.png
|
||||
link: https://kubesphere.com.cn/live/mqtt1230-live/
|
||||
|
||||
review:
|
||||
- text: 在 KubeSphere 中快速部署使用 GitLab 并构建 DevOps 项目
|
||||
description: 本次分享将和大家一起动手来实践一下在 KubeSphere 部署 GitLab CE(Community Edition 社区版)并构建与之联动的 DevOps 项目。
|
||||
link: https://kubesphere.com.cn/blogs/kubesphere-gitlab-devops/
|
||||
|
||||
- text: 在 Kubernetes 中安装和使用 Apache APISIX Ingress 网关
|
||||
description: 通过 KubeSphere 的应用管理能力快速使用 Apache APISIX Ingress Controller
|
||||
link: https://kubesphere.com.cn/blogs/use-apache-apisix-ingress-in-kubesphere/
|
||||
|
||||
- text: 在 Kubernetes 中部署云原生开发工具 Nocalhost
|
||||
description: 本文将介绍如何在 KubeSphere 中快速部署 Nocalhost Server,用于提供一个帮助研发团队统一管理 Nocalhost 应用部署的管理平台。
|
||||
link: https://kubesphere.com.cn/blogs/kubesphere-nocalhost/
|
||||
|
||||
- text: 面向无人驾驶“云端大脑”可用性的云原生实践
|
||||
description: 本次分享介绍了驭势科技使用 KubeSphere 的历程,在云服务高可用方面自制 Operator 实现热备切换的工作,以及基于 SkyWalking 进行车云链路追踪的一些实践。
|
||||
link: https://kubesphere.com.cn/case/uisee/
|
||||
---
|
||||
|
|
@ -42,18 +42,21 @@
|
|||
</div>
|
||||
{{ end }}
|
||||
|
||||
<div id="imageList" class="imageList">
|
||||
{{ range $Pages }}
|
||||
<div class="imageBox">
|
||||
<div id="imageList" class="imageList">
|
||||
{{ range $Pages }}
|
||||
<a class="normalPic" href="{{ .Permalink }}" target="_blank">
|
||||
<image src="{{ .Params.coverImage }}"></image>
|
||||
<div class="nameText">{{ .Params.stationName }}</div>
|
||||
<div class="textBox">
|
||||
<div class="title"> KubeSphere 社区用户委员会 — {{ .Params.stationName }}</div>
|
||||
<div class="des">{{ .Params.topSection.description }}</div>
|
||||
</div>
|
||||
<image src="{{ .Params.coverImage }}"></image>
|
||||
<div class="nameText">{{ .Params.stationName }}</div>
|
||||
<div class="textBox">
|
||||
<div class="title"> KubeSphere 社区用户委员会 — {{ .Params.stationName }}</div>
|
||||
<div class="des">{{ .Params.topSection.description }}</div>
|
||||
</div>
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<img class="tr-svg" src="/images/user-group/list/city-rect1.svg">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -103,89 +106,89 @@
|
|||
<div class="right"></div>
|
||||
</div>
|
||||
{{ with .conditions }}
|
||||
<div class="condition">
|
||||
<image class="icon" src="{{ .image }}"></image>
|
||||
<div class="text">
|
||||
<span class="title">{{ .text }}</span>
|
||||
<span class="des">
|
||||
{{ range .description }}
|
||||
<span>
|
||||
{{ .head }} <a target="_blank" href="{{ .link.link_address }}">{{ .link.text }}</a>{{ .tail }}
|
||||
</span>
|
||||
{{ end }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-condition">
|
||||
<div class="top">
|
||||
<image class="icon" src="{{ .image }}"></image>
|
||||
<span class="title">{{ .text }}</span>
|
||||
</div>
|
||||
<div class="condition">
|
||||
<image class="icon" src="{{ .image }}"></image>
|
||||
<div class="text">
|
||||
<span class="title">{{ .text }}</span>
|
||||
<span class="des">
|
||||
{{ range .description }}
|
||||
<span>
|
||||
{{ .head }} <a target="_blank" href="{{ .link.link_address }}">{{ .link.text }}</a>{{ .tail }}
|
||||
</span>
|
||||
<span>
|
||||
{{ .head }} <a target="_blank" href="{{ .link.link_address }}">{{ .link.text }}</a>{{ .tail }}
|
||||
</span>
|
||||
{{ end }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-condition">
|
||||
<div class="top">
|
||||
<image class="icon" src="{{ .image }}"></image>
|
||||
<span class="title">{{ .text }}</span>
|
||||
</div>
|
||||
<span class="des">
|
||||
{{ range .description }}
|
||||
<span>
|
||||
{{ .head }} <a target="_blank" href="{{ .link.link_address }}">{{ .link.text }}</a>{{ .tail }}
|
||||
</span>
|
||||
{{ end }}
|
||||
</span>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ with .apply }}
|
||||
<div class="apply">
|
||||
<image class="icon" src="{{ .image }}"></image>
|
||||
<div class="text">
|
||||
<span class="title">{{ .text }}</span>
|
||||
{{ with .des }}
|
||||
<span class="des">
|
||||
{{ .head }} <a target="_blank" href="{{ .link.link_address }}">{{ .link.text }}</a>{{ .tail }}
|
||||
</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-apply">
|
||||
<div class="top">
|
||||
<image class="icon" src="{{ .image }}"></image>
|
||||
<span class="title">{{ .text }}</span>
|
||||
|
||||
</div>
|
||||
<div class="apply">
|
||||
<image class="icon" src="{{ .image }}"></image>
|
||||
<div class="text">
|
||||
<span class="title">{{ .text }}</span>
|
||||
{{ with .des }}
|
||||
<span class="des">
|
||||
{{ .head }} <a target="_blank" href="{{ .link.link_address }}">{{ .link.text }}</a>{{ .tail }}
|
||||
</span>
|
||||
<span class="des">
|
||||
{{ .head }} <a target="_blank" href="{{ .link.link_address }}">{{ .link.text }}</a>{{ .tail }}
|
||||
</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-apply">
|
||||
<div class="top">
|
||||
<image class="icon" src="{{ .image }}"></image>
|
||||
<span class="title">{{ .text }}</span>
|
||||
|
||||
</div>
|
||||
{{ with .des }}
|
||||
<span class="des">
|
||||
{{ .head }} <a target="_blank" href="{{ .link.link_address }}">{{ .link.text }}</a>{{ .tail }}
|
||||
</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ with .requirements }}
|
||||
<div class="apply">
|
||||
<image class="icon" src="{{ .image }}"></image>
|
||||
<div class="text">
|
||||
<span class="title">{{ .text }}</span>
|
||||
<span class="des" style="line-height: 32px;">
|
||||
{{ range .des }}
|
||||
<span>
|
||||
{{ .head }}<a target="_blank" href="{{ .link.link_address }}">{{ .link.text }}</a>{{.tail}}
|
||||
</span>
|
||||
{{ end }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-apply">
|
||||
<div class="top">
|
||||
<image class="icon" src="{{ .image }}"></image>
|
||||
<span class="title">{{ .text }}</span>
|
||||
</div>
|
||||
<ol class="des" style="line-height: 32px;">
|
||||
<div class="apply">
|
||||
<image class="icon" src="{{ .image }}"></image>
|
||||
<div class="text">
|
||||
<span class="title">{{ .text }}</span>
|
||||
<span class="des" style="line-height: 32px;">
|
||||
{{ range .des }}
|
||||
<li>
|
||||
{{ .head }}<a target="_blank" href="{{ .link.link_address }}">{{ .link.text }}</a>{{.tail}}
|
||||
</li>
|
||||
{{ end }}
|
||||
</ol>
|
||||
<span>
|
||||
{{ .head }}<a target="_blank" href="{{ .link.link_address }}">{{ .link.text }}</a>{{.tail}}
|
||||
</span>
|
||||
{{ end }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-apply">
|
||||
<div class="top">
|
||||
<image class="icon" src="{{ .image }}"></image>
|
||||
<span class="title">{{ .text }}</span>
|
||||
</div>
|
||||
<ol class="des" style="line-height: 32px;">
|
||||
{{ range .des }}
|
||||
<li>
|
||||
{{ .head }}<a target="_blank" href="{{ .link.link_address }}">{{ .link.text }}</a>{{.tail}}
|
||||
</li>
|
||||
{{ end }}
|
||||
</ol>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -200,10 +203,10 @@
|
|||
<p class="title">{{ .title }}</p>
|
||||
<div class="cards">
|
||||
{{ range .list }}
|
||||
<div class="card">
|
||||
<span class="text">{{ .text }}</span>
|
||||
<image class="bg" src="{{ .bg }}"></image>
|
||||
</div>
|
||||
<div class="card">
|
||||
<span class="text">{{ .text }}</span>
|
||||
<image class="bg" src="{{ .bg }}"></image>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -214,15 +217,21 @@
|
|||
<script>
|
||||
var imageList = $('#imageList')
|
||||
imageList.children().each(function (index, item) {
|
||||
if (index === 0) {
|
||||
$(item).addClass('pic-hover')
|
||||
if (imageList.children().length >= 4) {
|
||||
if (index === imageList.children().length - 1) {
|
||||
$(item).hover(function () {
|
||||
$('#imageList').removeClass('flex-start')
|
||||
$('#imageList').addClass('flex-end')
|
||||
})
|
||||
} else {
|
||||
$(item).hover(function () {
|
||||
if ($('#imageList').hasClass('flex-end')) {
|
||||
$('#imageList').removeClass('flex-end')
|
||||
$('#imageList').addClass('flex-start')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
$(item).hover(function () {
|
||||
imageList.children().each(function (index, item) {
|
||||
$(item).removeClass('pic-hover')
|
||||
})
|
||||
$(item).addClass('pic-hover')
|
||||
})
|
||||
})
|
||||
</script>
|
||||
{{ end }}
|
||||
|
After Width: | Height: | Size: 321 KiB |
|
After Width: | Height: | Size: 4.4 MiB |
|
After Width: | Height: | Size: 264 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 338 KiB |
|
After Width: | Height: | Size: 327 KiB |
|
After Width: | Height: | Size: 109 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 91 KiB |
|
After Width: | Height: | Size: 125 KiB |
|
Before Width: | Height: | Size: 203 KiB After Width: | Height: | Size: 230 KiB |
|
After Width: | Height: | Size: 187 KiB |
|
Before Width: | Height: | Size: 178 KiB After Width: | Height: | Size: 263 KiB |
|
Before Width: | Height: | Size: 133 KiB After Width: | Height: | Size: 195 KiB |