mirror of
https://github.com/seigler/dash-website
synced 2025-07-27 07:16:10 +00:00
[Feature] Flags + Team
This commit is contained in:
0xfff
parent
69c3ad9b8b
commit
935cb3316c
12 changed files with 395 additions and 54 deletions
|
|
@ -1,4 +1,4 @@
|
||||||
<div class="hero" id="hero">
|
<div class="hero hero--team" id="hero">
|
||||||
<div class="hero__background">
|
<div class="hero__background">
|
||||||
{% srcset dashorg-nodes.jpg ppi:1,2 class="hero__background-image" %}
|
{% srcset dashorg-nodes.jpg ppi:1,2 class="hero__background-image" %}
|
||||||
{% srcset_source width:1920 %}
|
{% srcset_source width:1920 %}
|
||||||
|
|
@ -11,6 +11,8 @@
|
||||||
|
|
||||||
<!-- Hero content -->
|
<!-- Hero content -->
|
||||||
<div class="hero__content">
|
<div class="hero__content">
|
||||||
|
<h1 class="hero__title">{% t pages.team.title %}</h1>
|
||||||
|
<p class="hero__lead">{% t pages.team.description %}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Hero stripe -->
|
<!-- Hero stripe -->
|
||||||
|
|
|
||||||
|
|
@ -26,27 +26,27 @@
|
||||||
|
|
||||||
{% if page.layout != 'post' %}
|
{% if page.layout != 'post' %}
|
||||||
<li class="nav__item nav__item--languages">
|
<li class="nav__item nav__item--languages">
|
||||||
<a href="#" class="nav__link">{{ site.lang }}</a>
|
<a href="#" class="nav__link" style="text-transform:uppercase;">{{site.lang}} <span class="flag {% if 'en' == site.lang %}us{% else %}{{site.lang}}{% endif %}"></span></a>
|
||||||
<ul class="nav__sublist">
|
<ul class="nav__sublist">
|
||||||
<!-- TODO: dynamically generate this list -->
|
<!-- TODO: dynamically generate this list -->
|
||||||
|
|
||||||
<li class="nav__subitem">
|
<li class="nav__subitem">
|
||||||
<a href="{{ page.url }}" class="nav__link {% if site.lang == 'en' %}is-active{% endif %}">{% t global.english %}</a>
|
<a href="{{ page.url }}" class="nav__link {% if site.lang == 'en' %}is-active{% endif %}">{% t global.english %} <span class="flag us"></span></a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav__subitem">
|
<li class="nav__subitem">
|
||||||
<a href="/es{{ page.url }}" class="nav__link {% if site.lang == 'es' %}is-active{% endif %}">{% t global.spanish %}</a>
|
<a href="/es{{ page.url }}" class="nav__link {% if site.lang == 'es' %}is-active{% endif %}">{% t global.spanish %} <span class="flag es"></span></a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav__subitem">
|
<li class="nav__subitem">
|
||||||
<a href="/pt{{ page.url }}" class="nav__link {% if site.lang == 'pt' %}is-active{% endif %}">{% t global.portugese %}</a>
|
<a href="/pt{{ page.url }}" class="nav__link {% if site.lang == 'pt' %}is-active{% endif %}">{% t global.portugese %} <span class="flag pt"></span></a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav__subitem">
|
<li class="nav__subitem">
|
||||||
<a href="/it{{ page.url }}" class="nav__link {% if site.lang == 'it' %}is-active{% endif %}">{% t global.italian %}</a>
|
<a href="/it{{ page.url }}" class="nav__link {% if site.lang == 'it' %}is-active{% endif %}">{% t global.italian %} <span class="flag it"></span></a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav__subitem">
|
<li class="nav__subitem">
|
||||||
<a href="/cn{{ page.url }}" class="nav__link {% if site.lang == 'cn' %}is-active{% endif %}">{% t global.chinese %}</a>
|
<a href="/cn{{ page.url }}" class="nav__link {% if site.lang == 'cn' %}is-active{% endif %}">{% t global.chinese %} <span class="flag cn"></span></a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav__subitem">
|
<li class="nav__subitem">
|
||||||
<a href="/ru{{ page.url }}" class="nav__link {% if site.lang == 'ru' %}is-active{% endif %}">{% t global.russian %}</a>
|
<a href="/ru{{ page.url }}" class="nav__link {% if site.lang == 'ru' %}is-active{% endif %}">{% t global.russian %} <span class="flag ru"></span></a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
|
|
|
||||||
|
|
@ -18,22 +18,22 @@
|
||||||
<!-- TODO: dynamically generate this list -->
|
<!-- TODO: dynamically generate this list -->
|
||||||
|
|
||||||
<li class="overlay-menu__subitem">
|
<li class="overlay-menu__subitem">
|
||||||
<a href="{{ page.url }}" class="overlay-menu__link {% if site.lang == 'en' %}is-active{% endif %}">{% t global.english %}</a>
|
<a href="{{ page.url }}" class="overlay-menu__link {% if site.lang == 'en' %}is-active{% endif %}"><span class="flag us"></span> {% t global.english %}</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="overlay-menu__subitem">
|
<li class="overlay-menu__subitem">
|
||||||
<a href="/es{{ page.url }}" class="overlay-menu__link {% if site.lang == 'es' %}is-active{% endif %}">{% t global.spanish %}</a>
|
<a href="/es{{ page.url }}" class="overlay-menu__link {% if site.lang == 'es' %}is-active{% endif %}"><span class="flag es"></span> {% t global.spanish %}</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="overlay-menu__subitem">
|
<li class="overlay-menu__subitem">
|
||||||
<a href="/pt{{ page.url }}" class="overlay-menu__link {% if site.lang == 'pt' %}is-active{% endif %}">{% t global.portugese %}</a>
|
<a href="/pt{{ page.url }}" class="overlay-menu__link {% if site.lang == 'pt' %}is-active{% endif %}"><span class="flag pt"></span> {% t global.portugese %}</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="overlay-menu__subitem">
|
<li class="overlay-menu__subitem">
|
||||||
<a href="/it{{ page.url }}" class="overlay-menu__link {% if site.lang == 'it' %}is-active{% endif %}">{% t global.italian %}</a>
|
<a href="/it{{ page.url }}" class="overlay-menu__link {% if site.lang == 'it' %}is-active{% endif %}"><span class="flag it"></span> {% t global.italian %}</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="overlay-menu__subitem">
|
<li class="overlay-menu__subitem">
|
||||||
<a href="/cn{{ page.url }}" class="overlay-menu__link {% if site.lang == 'cn' %}is-active{% endif %}">{% t global.chinese %}</a>
|
<a href="/cn{{ page.url }}" class="overlay-menu__link {% if site.lang == 'cn' %}is-active{% endif %}"><span class="flag cn"></span> {% t global.chinese %}</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="overlay-menu__subitem">
|
<li class="overlay-menu__subitem">
|
||||||
<a href="/ru{{ page.url }}" class="overlay-menu__link {% if site.lang == 'ru' %}is-active{% endif %}">{% t global.russian %}</a>
|
<a href="/ru{{ page.url }}" class="overlay-menu__link {% if site.lang == 'ru' %}is-active{% endif %}"><span class="flag ru"></span> {% t global.russian %}</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
|
|
|
||||||
BIN
assets/img/flags/flags16.png
Executable file
BIN
assets/img/flags/flags16.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
BIN
assets/img/flags/flags32.png
Executable file
BIN
assets/img/flags/flags32.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
268
src/scss/_flags.scss
Normal file
268
src/scss/_flags.scss
Normal file
|
|
@ -0,0 +1,268 @@
|
||||||
|
/**
|
||||||
|
* @license
|
||||||
|
* Copyright (c) 2012 Martijn Lafeber
|
||||||
|
**/
|
||||||
|
|
||||||
|
$flags-images-path: "/assets/img/flags" !default;
|
||||||
|
|
||||||
|
.flag {
|
||||||
|
display: inline-block;
|
||||||
|
height: 16px;
|
||||||
|
width: 16px;
|
||||||
|
vertical-align: text-top;
|
||||||
|
line-height: 16px;
|
||||||
|
background: url(#{$flags-images-path}/flags16.png) no-repeat;
|
||||||
|
|
||||||
|
&._African_Union{background-position:0 -16px;}
|
||||||
|
&._Arab_League{background-position:0 -32px;}
|
||||||
|
&._ASEAN{background-position:0 -48px;}
|
||||||
|
&._CARICOM{background-position:0 -64px;}
|
||||||
|
&._CIS{background-position:0 -80px;}
|
||||||
|
&._Commonwealth{background-position:0 -96px;}
|
||||||
|
&._England{background-position:0 -112px;}
|
||||||
|
&._European_Union{background-position:0 -128px;}
|
||||||
|
&._Islamic_Conference{background-position:0 -144px;}
|
||||||
|
&._Kosovo{background-position:0 -160px;}
|
||||||
|
&._NATO{background-position:0 -176px;}
|
||||||
|
&._Northern_Cyprus{background-position:0 -192px;}
|
||||||
|
&._Northern_Ireland{background-position:0 -208px;}
|
||||||
|
&._Olimpic_Movement{background-position:0 -224px;}
|
||||||
|
&._OPEC{background-position:0 -240px;}
|
||||||
|
&._Red_Cross{background-position:0 -256px;}
|
||||||
|
&._Scotland{background-position:0 -272px;}
|
||||||
|
&._Somaliland{background-position:0 -288px;}
|
||||||
|
&._Tibet{background-position:0 -304px;}
|
||||||
|
&._United_Nations{background-position:0 -320px;}
|
||||||
|
&._Wales{background-position:0 -336px;}
|
||||||
|
|
||||||
|
&.eu{background-position:0 -128px;}
|
||||||
|
|
||||||
|
&.ad{background-position:0 -352px;}
|
||||||
|
&.ae{background-position:0 -368px;}
|
||||||
|
&.af{background-position:0 -384px;}
|
||||||
|
&.ag{background-position:0 -400px;}
|
||||||
|
&.ai{background-position:0 -416px;}
|
||||||
|
&.al{background-position:0 -432px;}
|
||||||
|
&.am{background-position:0 -448px;}
|
||||||
|
&.ao{background-position:0 -464px;}
|
||||||
|
&.aq{background-position:0 -480px;}
|
||||||
|
&.ar{background-position:0 -496px;}
|
||||||
|
&.as{background-position:0 -512px;}
|
||||||
|
&.at{background-position:0 -528px;}
|
||||||
|
&.au{background-position:0 -544px;}
|
||||||
|
&.aw{background-position:0 -560px;}
|
||||||
|
&.ax{background-position:0 -576px;}
|
||||||
|
&.az{background-position:0 -592px;}
|
||||||
|
&.ba{background-position:0 -608px;}
|
||||||
|
&.bb{background-position:0 -624px;}
|
||||||
|
&.bd{background-position:0 -640px;}
|
||||||
|
&.be{background-position:0 -656px;}
|
||||||
|
&.bf{background-position:0 -672px;}
|
||||||
|
&.bg{background-position:0 -688px;}
|
||||||
|
&.bh{background-position:0 -704px;}
|
||||||
|
&.bi{background-position:0 -720px;}
|
||||||
|
&.bj{background-position:0 -736px;}
|
||||||
|
&.bm{background-position:0 -752px;}
|
||||||
|
&.bn{background-position:0 -768px;}
|
||||||
|
&.bo{background-position:0 -784px;}
|
||||||
|
&.br{background-position:0 -800px;}
|
||||||
|
&.bs{background-position:0 -816px;}
|
||||||
|
&.bt{background-position:0 -832px;}
|
||||||
|
&.bw{background-position:0 -848px;}
|
||||||
|
&.by{background-position:0 -864px;}
|
||||||
|
&.bz{background-position:0 -880px;}
|
||||||
|
&.ca{background-position:0 -896px;}
|
||||||
|
&.cg{background-position:0 -912px;}
|
||||||
|
&.cf{background-position:0 -928px;}
|
||||||
|
&.cd{background-position:0 -944px;}
|
||||||
|
&.ch{background-position:0 -960px;}
|
||||||
|
&.ci{background-position:0 -976px;}
|
||||||
|
&.ck{background-position:0 -992px;}
|
||||||
|
&.cl{background-position:0 -1008px;}
|
||||||
|
&.cm{background-position:0 -1024px;}
|
||||||
|
&.cn{background-position:0 -1040px;}
|
||||||
|
&.co{background-position:0 -1056px;}
|
||||||
|
&.cr{background-position:0 -1072px;}
|
||||||
|
&.cu{background-position:0 -1088px;}
|
||||||
|
&.cv{background-position:0 -1104px;}
|
||||||
|
&.cy{background-position:0 -1120px;}
|
||||||
|
&.cz{background-position:0 -1136px;}
|
||||||
|
&.de{background-position:0 -1152px;}
|
||||||
|
&.dj{background-position:0 -1168px;}
|
||||||
|
&.dk{background-position:0 -1184px;}
|
||||||
|
&.dm{background-position:0 -1200px;}
|
||||||
|
&.do{background-position:0 -1216px;}
|
||||||
|
&.dz{background-position:0 -1232px;}
|
||||||
|
&.ec{background-position:0 -1248px;}
|
||||||
|
&.ee{background-position:0 -1264px;}
|
||||||
|
&.eg{background-position:0 -1280px;}
|
||||||
|
&.eh{background-position:0 -1296px;}
|
||||||
|
&.er{background-position:0 -1312px;}
|
||||||
|
&.es{background-position:0 -1328px;}
|
||||||
|
&.et{background-position:0 -1344px;}
|
||||||
|
&.fi{background-position:0 -1360px;}
|
||||||
|
&.fj{background-position:0 -1376px;}
|
||||||
|
&.fm{background-position:0 -1392px;}
|
||||||
|
&.fo{background-position:0 -1408px;}
|
||||||
|
&.fr{background-position:0 -1424px;} &.bl{background-position:0 -1424px;} &.cp{background-position:0 -1424px;} &.mf{background-position:0 -1424px;} &.yt{background-position:0 -1424px;}
|
||||||
|
&.ga{background-position:0 -1440px;}
|
||||||
|
&.gb{background-position:0 -1456px;} &.sh{background-position:0 -1456px;}
|
||||||
|
&.gd{background-position:0 -1472px;}
|
||||||
|
&.ge{background-position:0 -1488px;}
|
||||||
|
&.gg{background-position:0 -1504px;}
|
||||||
|
&.gh{background-position:0 -1520px;}
|
||||||
|
&.gi{background-position:0 -1536px;}
|
||||||
|
&.gl{background-position:0 -1552px;}
|
||||||
|
&.gm{background-position:0 -1568px;}
|
||||||
|
&.gn{background-position:0 -1584px;}
|
||||||
|
&.gp{background-position:0 -1600px;}
|
||||||
|
&.gq{background-position:0 -1616px;}
|
||||||
|
&.gr{background-position:0 -1632px;}
|
||||||
|
&.gt{background-position:0 -1648px;}
|
||||||
|
&.gu{background-position:0 -1664px;}
|
||||||
|
&.gw{background-position:0 -1680px;}
|
||||||
|
&.gy{background-position:0 -1696px;}
|
||||||
|
&.hk{background-position:0 -1712px;}
|
||||||
|
&.hn{background-position:0 -1728px;}
|
||||||
|
&.hr{background-position:0 -1744px;}
|
||||||
|
&.ht{background-position:0 -1760px;}
|
||||||
|
&.hu{background-position:0 -1776px;}
|
||||||
|
&.id{background-position:0 -1792px;}
|
||||||
|
&.mc{background-position:0 -1792px;}
|
||||||
|
&.ie{background-position:0 -1808px;}
|
||||||
|
&.il{background-position:0 -1824px;}
|
||||||
|
&.im{background-position:0 -1840px;}
|
||||||
|
&.in{background-position:0 -1856px;}
|
||||||
|
&.iq{background-position:0 -1872px;}
|
||||||
|
&.ir{background-position:0 -1888px;}
|
||||||
|
&.is{background-position:0 -1904px;}
|
||||||
|
&.it{background-position:0 -1920px;}
|
||||||
|
&.je{background-position:0 -1936px;}
|
||||||
|
&.jm{background-position:0 -1952px;}
|
||||||
|
&.jo{background-position:0 -1968px;}
|
||||||
|
&.jp{background-position:0 -1984px;}
|
||||||
|
&.ke{background-position:0 -2000px;}
|
||||||
|
&.kg{background-position:0 -2016px;}
|
||||||
|
&.kh{background-position:0 -2032px;}
|
||||||
|
&.ki{background-position:0 -2048px;}
|
||||||
|
&.km{background-position:0 -2064px;}
|
||||||
|
&.kn{background-position:0 -2080px;}
|
||||||
|
&.kp{background-position:0 -2096px;}
|
||||||
|
&.kr{background-position:0 -2112px;}
|
||||||
|
&.kw{background-position:0 -2128px;}
|
||||||
|
&.ky{background-position:0 -2144px;}
|
||||||
|
&.kz{background-position:0 -2160px;}
|
||||||
|
&.la{background-position:0 -2176px;}
|
||||||
|
&.lb{background-position:0 -2192px;}
|
||||||
|
&.lc{background-position:0 -2208px;}
|
||||||
|
&.li{background-position:0 -2224px;}
|
||||||
|
&.lk{background-position:0 -2240px;}
|
||||||
|
&.lr{background-position:0 -2256px;}
|
||||||
|
&.ls{background-position:0 -2272px;}
|
||||||
|
&.lt{background-position:0 -2288px;}
|
||||||
|
&.lu{background-position:0 -2304px;}
|
||||||
|
&.lv{background-position:0 -2320px;}
|
||||||
|
&.ly{background-position:0 -2336px;}
|
||||||
|
&.ma{background-position:0 -2352px;}
|
||||||
|
&.md{background-position:0 -2368px;}
|
||||||
|
&.me{background-position:0 -2384px;}
|
||||||
|
&.mg{background-position:0 -2400px;}
|
||||||
|
&.mh{background-position:0 -2416px;}
|
||||||
|
&.mk{background-position:0 -2432px;}
|
||||||
|
&.ml{background-position:0 -2448px;}
|
||||||
|
&.mm{background-position:0 -2464px;}
|
||||||
|
&.mn{background-position:0 -2480px;}
|
||||||
|
&.mo{background-position:0 -2496px;}
|
||||||
|
&.mq{background-position:0 -2512px;}
|
||||||
|
&.mr{background-position:0 -2528px;}
|
||||||
|
&.ms{background-position:0 -2544px;}
|
||||||
|
&.mt{background-position:0 -2560px;}
|
||||||
|
&.mu{background-position:0 -2576px;}
|
||||||
|
&.mv{background-position:0 -2592px;}
|
||||||
|
&.mw{background-position:0 -2608px;}
|
||||||
|
&.mx{background-position:0 -2624px;}
|
||||||
|
&.my{background-position:0 -2640px;}
|
||||||
|
&.mz{background-position:0 -2656px;}
|
||||||
|
&.na{background-position:0 -2672px;}
|
||||||
|
&.nc{background-position:0 -2688px;}
|
||||||
|
&.ne{background-position:0 -2704px;}
|
||||||
|
&.ng{background-position:0 -2720px;}
|
||||||
|
&.ni{background-position:0 -2736px;}
|
||||||
|
&.nl{background-position:0 -2752px;} &.bq{background-position:0 -2752px;}
|
||||||
|
&.no{background-position:0 -2768px;} &.bv{background-position:0 -2768px;} &.nq{background-position:0 -2768px;} &.sj{background-position:0 -2768px;}
|
||||||
|
&.np{background-position:0 -2784px;}
|
||||||
|
&.nr{background-position:0 -2800px;}
|
||||||
|
&.nz{background-position:0 -2816px;}
|
||||||
|
&.om{background-position:0 -2832px;}
|
||||||
|
&.pa{background-position:0 -2848px;}
|
||||||
|
&.pe{background-position:0 -2864px;}
|
||||||
|
&.pf{background-position:0 -2880px;}
|
||||||
|
&.pg{background-position:0 -2896px;}
|
||||||
|
&.ph{background-position:0 -2912px;}
|
||||||
|
&.pk{background-position:0 -2928px;}
|
||||||
|
&.pl{background-position:0 -2944px;}
|
||||||
|
&.pr{background-position:0 -2960px;}
|
||||||
|
&.ps{background-position:0 -2976px;}
|
||||||
|
&.pt{background-position:0 -2992px;}
|
||||||
|
&.pw{background-position:0 -3008px;}
|
||||||
|
&.py{background-position:0 -3024px;}
|
||||||
|
&.qa{background-position:0 -3040px;}
|
||||||
|
&.re{background-position:0 -3056px;}
|
||||||
|
&.ro{background-position:0 -3072px;}
|
||||||
|
&.rs{background-position:0 -3088px;}
|
||||||
|
&.ru{background-position:0 -3104px;}
|
||||||
|
&.rw{background-position:0 -3120px;}
|
||||||
|
&.sa{background-position:0 -3136px;}
|
||||||
|
&.sb{background-position:0 -3152px;}
|
||||||
|
&.sc{background-position:0 -3168px;}
|
||||||
|
&.sd{background-position:0 -3184px;}
|
||||||
|
&.se{background-position:0 -3200px;}
|
||||||
|
&.sg{background-position:0 -3216px;}
|
||||||
|
&.si{background-position:0 -3232px;}
|
||||||
|
&.sk{background-position:0 -3248px;}
|
||||||
|
&.sl{background-position:0 -3264px;}
|
||||||
|
&.sm{background-position:0 -3280px;}
|
||||||
|
&.sn{background-position:0 -3296px;}
|
||||||
|
&.so{background-position:0 -3312px;}
|
||||||
|
&.sr{background-position:0 -3328px;}
|
||||||
|
&.st{background-position:0 -3344px;}
|
||||||
|
&.sv{background-position:0 -3360px;}
|
||||||
|
&.sy{background-position:0 -3376px;}
|
||||||
|
&.sz{background-position:0 -3392px;}
|
||||||
|
&.tc{background-position:0 -3408px;}
|
||||||
|
&.td{background-position:0 -3424px;}
|
||||||
|
&.tg{background-position:0 -3440px;}
|
||||||
|
&.th{background-position:0 -3456px;}
|
||||||
|
&.tj{background-position:0 -3472px;}
|
||||||
|
&.tl{background-position:0 -3488px;}
|
||||||
|
&.tm{background-position:0 -3504px;}
|
||||||
|
&.tn{background-position:0 -3520px;}
|
||||||
|
&.to{background-position:0 -3536px;}
|
||||||
|
&.tr{background-position:0 -3552px;}
|
||||||
|
&.tt{background-position:0 -3568px;}
|
||||||
|
&.tv{background-position:0 -3584px;}
|
||||||
|
&.tw{background-position:0 -3600px;}
|
||||||
|
&.tz{background-position:0 -3616px;}
|
||||||
|
&.ua{background-position:0 -3632px;}
|
||||||
|
&.ug{background-position:0 -3648px;}
|
||||||
|
&.us{background-position:0 -3664px;}
|
||||||
|
&.uy{background-position:0 -3680px;}
|
||||||
|
&.uz{background-position:0 -3696px;}
|
||||||
|
&.va{background-position:0 -3712px;}
|
||||||
|
&.vc{background-position:0 -3728px;}
|
||||||
|
&.ve{background-position:0 -3744px;}
|
||||||
|
&.vg{background-position:0 -3760px;}
|
||||||
|
&.vi{background-position:0 -3776px;}
|
||||||
|
&.vn{background-position:0 -3792px;}
|
||||||
|
&.vu{background-position:0 -3808px;}
|
||||||
|
&.ws{background-position:0 -3824px;}
|
||||||
|
&.ye{background-position:0 -3840px;}
|
||||||
|
&.za{background-position:0 -3856px;}
|
||||||
|
&.zm{background-position:0 -3872px;}
|
||||||
|
&.zw{background-position:0 -3888px;}
|
||||||
|
&.sx{background-position:0 -3904px;}
|
||||||
|
&.cw{background-position:0 -3920px;}
|
||||||
|
&.ss{background-position:0 -3936px;}
|
||||||
|
&.nu{background-position:0 -3952px;}
|
||||||
|
|
||||||
|
} // .f16
|
||||||
|
|
@ -2,32 +2,64 @@ $m: 'member';
|
||||||
|
|
||||||
.#{$m} {
|
.#{$m} {
|
||||||
|
|
||||||
|
margin-bottom: pxToRem(80px);
|
||||||
|
|
||||||
|
&__avatar {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 140px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
&__image-wrapper {
|
&__image-wrapper {
|
||||||
|
@include overflow-image-wrapper();
|
||||||
|
padding-bottom: ((105/140)*100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
&__image {
|
&__image {
|
||||||
|
@include overflow-image();
|
||||||
}
|
}
|
||||||
|
|
||||||
&__name {
|
&__name {
|
||||||
|
@include font-claim();
|
||||||
|
color: $color-blue;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__description {
|
&__description {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__detail {
|
&__detail {
|
||||||
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-list {
|
&-list {
|
||||||
|
font-size: 0;
|
||||||
|
margin: 0 pxToRem(-20px);
|
||||||
|
text-align: left;
|
||||||
|
@include mq($to: small) {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.#{$m} {
|
||||||
|
display: inline-block;
|
||||||
|
max-width: 500px;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 20px;
|
||||||
|
vertical-align: top;
|
||||||
|
text-align: left;
|
||||||
|
font-size: $font-size-base;
|
||||||
|
|
||||||
|
@include mq($from: small) {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
@include mq($from: medium) {
|
||||||
|
width: 33.3%;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -25,9 +25,15 @@ $nav-height: 90px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&--languages {
|
&--languages {
|
||||||
|
.nav__link {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
& > .nav__link {
|
& > .nav__link {
|
||||||
padding: 0 25px;
|
padding: 0 25px;
|
||||||
}
|
}
|
||||||
|
.nav__sublist {
|
||||||
|
padding-right: 25px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
@ -44,11 +50,25 @@ $nav-height: 90px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 100%;
|
top: 100%;
|
||||||
right: 0;
|
right: 0;
|
||||||
padding-top: 10px;
|
margin-top: -10px;
|
||||||
|
padding-top: 0;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width: 15px;
|
||||||
|
height: 1px;
|
||||||
|
background: $color-white;
|
||||||
|
opacity: 0.8;
|
||||||
|
position: absolute;
|
||||||
|
top: -7px;
|
||||||
|
right: 25px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__subitem {
|
&__subitem {
|
||||||
line-height: 45px;
|
line-height: 40px;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__link {
|
&__link {
|
||||||
|
|
@ -60,6 +80,11 @@ $nav-height: 90px;
|
||||||
$hover: rgba($color-white, 1),
|
$hover: rgba($color-white, 1),
|
||||||
$active: rgba($color-white, 1));
|
$active: rgba($color-white, 1));
|
||||||
letter-spacing: -0.008em;
|
letter-spacing: -0.008em;
|
||||||
|
|
||||||
|
.flag {
|
||||||
|
margin-top: pxToRem(4px);
|
||||||
|
margin-left: pxToRem(10px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&--black {
|
&--black {
|
||||||
|
|
|
||||||
|
|
@ -59,6 +59,11 @@
|
||||||
&, &:visited, &:hover, &:active {
|
&, &:visited, &:hover, &:active {
|
||||||
color: $color-white;
|
color: $color-white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.flag {
|
||||||
|
margin-top: 2px;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__list {
|
&__list {
|
||||||
|
|
@ -83,8 +88,9 @@
|
||||||
|
|
||||||
&__sublist {
|
&__sublist {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 320px;
|
max-width: 420px;
|
||||||
text-align: center;
|
padding: 0 30px;
|
||||||
|
text-align: left;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -101,7 +107,8 @@
|
||||||
|
|
||||||
.overlay {
|
.overlay {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
background: $color-black;
|
background: $color-blue;
|
||||||
|
// background: $gradient-dash-sky;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
@import "../fonts/montserrat/regular";
|
@import "../fonts/montserrat/regular";
|
||||||
@import "../fonts/montserrat/medium";
|
@import "../fonts/montserrat/medium";
|
||||||
|
|
||||||
$font-family-body: 'Montserrat', 'Open Sans', Helvetica, Arial, sans-serif;
|
$font-family-body: 'Montserrat', Helvetica, Arial, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif;
|
||||||
$font-family-heading: $font-family-body;
|
$font-family-heading: $font-family-body;
|
||||||
|
|
||||||
$font-weight-xlight: 200;
|
$font-weight-xlight: 200;
|
||||||
|
|
|
||||||
|
|
@ -24,6 +24,7 @@
|
||||||
@import "section";
|
@import "section";
|
||||||
@import "featurepost";
|
@import "featurepost";
|
||||||
@import "postcontent";
|
@import "postcontent";
|
||||||
|
@import "flags";
|
||||||
|
|
||||||
|
|
||||||
//stuff most pages need
|
//stuff most pages need
|
||||||
|
|
|
||||||
|
|
@ -6,41 +6,47 @@ description: pages.team.description
|
||||||
|
|
||||||
{% include hero/team.html %}
|
{% include hero/team.html %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="page page--team">
|
||||||
|
|
||||||
|
<section class="section section--claim">
|
||||||
|
<div class="section__content content">
|
||||||
|
|
||||||
<ul class="member-list">
|
<ul class="member-list">
|
||||||
{% for member in site.data.team %}
|
{% for member in site.data.team %}
|
||||||
<li class="member">
|
<li class="member" data-mh="member">
|
||||||
|
|
||||||
{% if member.image %}
|
<div class="member__avatar">
|
||||||
<div class="member__image-wrapper">
|
{% if member.image %}
|
||||||
<img class="member__image" src="/assets/img/team/{{ member.image }}" alt="{{ member.name }}">
|
<div class="member__image-wrapper">
|
||||||
</div>
|
<img class="member__image" src="/assets/img/team/{{ member.image }}" alt="{{ member.name }}">
|
||||||
{% else %}
|
</div>
|
||||||
<div class="member__image-wrapper">
|
{% else %}
|
||||||
<img class="member__image" src="/assets/img/team/anon.png" alt="{{ member.name }}">
|
<div class="member__image-wrapper">
|
||||||
</div>
|
<img class="member__image" src="/assets/img/team/anon.png" alt="{{ member.name }}">
|
||||||
{% endif %}
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="member__name">{{ member.name }}</div>
|
<div class="member__name" data-mh="member-name">{{ member.name }}</div>
|
||||||
<div class="member__title">{{ member.title }}</div>
|
<div class="member__title" data-mh="member-title">{{ member.title }}</div>
|
||||||
<div class="member__description">{{ member.description }}</div>
|
<div class="member__description">{{ member.description }}</div>
|
||||||
|
|
||||||
{% if member.email %}
|
{% if member.email %}
|
||||||
<div class="member__detail member__detail--email"><a href="mailto:{{ member.email }}">{{ member.email }}</a></div>
|
<div class="member__detail member__detail--email"><a href="mailto:{{ member.email }}">{{ member.email }}</a></div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if member.pgp %}
|
{% if member.pgp %}
|
||||||
<div class="member__detail member__detail--pgp"><a href="{{ member.pgp }}">PGP Key</a></div>
|
<div class="member__detail member__detail--pgp"><a href="{{ member.pgp }}">PGP Key</a></div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if member.twitter %}
|
{% if member.twitter %}
|
||||||
<div class="member__detail member__detail--twitter">{{ member.twitter }}</div>
|
<div class="member__detail member__detail--twitter">{{ member.twitter }}</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
</li>
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue