You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cordova.apache.org by er...@apache.org on 2022/11/01 01:15:10 UTC
[cordova-docs] branch master updated: site(team): improve layout design (#1270)
This is an automated email from the ASF dual-hosted git repository.
erisu pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/cordova-docs.git
The following commit(s) were added to refs/heads/master by this push:
new 5ba9758df site(team): improve layout design (#1270)
5ba9758df is described below
commit 5ba9758df180d68bb1cb64df1d801ff316361df7
Author: エリス <er...@users.noreply.github.com>
AuthorDate: Tue Nov 1 10:15:03 2022 +0900
site(team): improve layout design (#1270)
---
www/contribute/team.html | 53 ++++++++++++++++--------------
www/static/css-src/_team.scss | 76 +++++++++++++++++++++++++++++++++++++++++++
www/static/css-src/main.scss | 1 +
3 files changed, 106 insertions(+), 24 deletions(-)
diff --git a/www/contribute/team.html b/www/contribute/team.html
index 029b2c292..a3b39e6a9 100644
--- a/www/contribute/team.html
+++ b/www/contribute/team.html
@@ -3,6 +3,15 @@ layout: team
title: Team
---
+<svg xmlns="http://www.w3.org/2000/svg" hidden style="display: none !important">
+ <symbol id="browser" viewBox="461.6 9.3 30 30">
+ <path d="M476.7 10.3c-7.7 0-14 6.3-14 14s6.3 14 14 14 14-6.3 14-14-6.3-14-14-14m9.8 9h-5.1c-.3-2.1-.8-4-1.4-5.5 2.8.9 5.1 2.9 6.5 5.5m-6.8 5-.1 3h-5.8l-.1-3 .1-3h5.8l.1 3m-3 11h-.9c-.6-1.1-1.4-3.1-1.8-6h5.3c-.4 2.9-1.1 4.8-1.8 6h-.8m-2.7-16c.4-2.9 1.1-4.8 1.8-6h1.8c.6 1.1 1.4 3.1 1.8 6H474zm-.6-5.5c-.6 1.5-1.1 3.4-1.4 5.5h-5.1c1.3-2.6 3.6-4.6 6.5-5.5m-7.3 7.5h5.7l-.1 3 .1 3h-5.7c-.3-1-.4-2-.4-3s.1-2 .4-3m.8 8h5.1c.3 2.1.8 4 1.4 5.5-2.9-.9-5.2-2.9-6.5-5.5m13.1 5.5c.6-1.5 1.1-3.4 1 [...]
+ </symbol>
+ <symbol id="twitter" viewBox="0 0 248 204">
+ <path fill="#1d9bf0" d="M221.95 51.29c.15 2.17.15 4.34.15 6.53 0 66.73-50.8 143.69-143.69 143.69v-.04c-27.44.04-54.31-7.82-77.41-22.64 3.99.48 8 .72 12.02.73 22.74.02 44.83-7.61 62.72-21.66-21.61-.41-40.56-14.5-47.18-35.07 7.57 1.46 15.37 1.16 22.8-.87-23.56-4.76-40.51-25.46-40.51-49.5v-.64c7.02 3.91 14.88 6.08 22.92 6.32C11.58 63.31 4.74 33.79 18.14 10.71c25.64 31.55 63.47 50.73 104.08 52.76-4.07-17.54 1.49-35.92 14.61-48.25 20.34-19.12 52.33-18.14 71.45 2.19 11.31-2.23 22.15-6. [...]
+ </symbol>
+</svg>
+
<div class="row">
<div class="col-sm-12 text-center">
<h1>Team</h1>
@@ -10,29 +19,25 @@ title: Team
</div>
</div>
-{% for member in site.members %}
-<div class="row">
- <div class="col-sm-8 col-xs-8">
- <span>
- <h2>{{ member.name }}</h2>
- <p>{{ member.subtitle }}</p>
- </span>
- </div>
-</div>
-<div class="row">
- <div class="col-sm-8">
- <p>
- {{ member.content }}
- </p>
- </div>
- <div class="col-sm-3 col-sm-offset-1 team-member-profile">
- <img height="256" width="256" src="{{ member.imageurl }}"><img>
- {% if member.twitter %}
- <a href="{{ member.twitter }}">Twitter</a>
- {% endif %}
- {% if member.homepage %}
- <a href="{{ member.homepage }}">Homepage</a>
- {% endif %}
+<div class="team">
+ {% for member in site.members %}
+ <div class="team-card">
+ <div class="team-card-header">
+ <img class="team-member-profile-image" src="{{ member.imageurl }}" alt="{{ member.name }} profile image" />
+ <div>
+ <h2>{{ member.name }}</h2>
+ <p>{{ member.subtitle }}</p>
+ <div>
+ {% if member.twitter %}
+ <a class="social" target="_blank" href="{{ member.twitter }}"><svg class="social-icon twitter"><use href="#twitter" /></svg></a>
+ {% endif %}
+ {% if member.homepage %}
+ <a class="social" target="_blank" href="{{ member.homepage }}"><svg class="social-icon browser"><use href="#browser" /></svg></a>
+ {% endif %}
+ </div>
+ </div>
+ </div>
+ <div class="team-card-content">{{ member.content }}</div>
</div>
+ {% endfor %}
</div>
-{% endfor %}
diff --git a/www/static/css-src/_team.scss b/www/static/css-src/_team.scss
new file mode 100644
index 000000000..5fe32237a
--- /dev/null
+++ b/www/static/css-src/_team.scss
@@ -0,0 +1,76 @@
+.team {
+ margin-top: 20px;
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-content: center;
+ align-items: center;
+
+ .team-card {
+ width: 80vw;
+ background: #f4f4f4;
+ border-radius: 4px;
+ padding: 35px;
+ margin: 10px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ align-content: center;
+ justify-content: space-between;
+ align-self: stretch;
+
+ .team-card-header {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ align-content: center;
+ margin-bottom: 25px;
+
+ h2 {
+ // h2 tag was slighly darkened to for better contrast with the background color
+ color: #585858
+ }
+
+ .team-member-profile-image {
+ margin-right: 20px;
+ border-radius: 50%;
+ height: 128px;
+ width: 128px;
+ }
+
+ .social {
+ height: 20px;
+ width: 20px;
+ display: inline-block;
+ margin-right: 5px;
+
+ .social-icon {
+ height: 100%;
+ width: 100%;
+ fill: currentColor;
+ }
+ }
+ }
+
+ .team-card-content > p {
+ margin-bottom: 0px;
+ }
+ }
+
+ @media (max-width: 540px) {
+ .team-card > .team-card-header > .team-member-profile-image {
+ height: 96px;
+ width: 96px;
+ }
+ }
+
+ @media (max-width: 420px) {
+ .team-card > .team-card-header {
+ align-items: flex-start;
+ flex-direction: column;
+ }
+ }
+}
diff --git a/www/static/css-src/main.scss b/www/static/css-src/main.scss
index aeab6af1c..939f5fb93 100644
--- a/www/static/css-src/main.scss
+++ b/www/static/css-src/main.scss
@@ -228,3 +228,4 @@ code {
@import 'contribute';
@import 'contact';
@import 'artwork';
+@import 'team';
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@cordova.apache.org
For additional commands, e-mail: commits-help@cordova.apache.org