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">
|
||||
{% srcset dashorg-nodes.jpg ppi:1,2 class="hero__background-image" %}
|
||||
{% srcset_source width:1920 %}
|
||||
|
|
@ -11,6 +11,8 @@
|
|||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Hero stripe -->
|
||||
|
|
|
|||
|
|
@ -26,27 +26,27 @@
|
|||
|
||||
{% if page.layout != 'post' %}
|
||||
<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">
|
||||
<!-- TODO: dynamically generate this list -->
|
||||
|
||||
<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 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 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 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 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 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>
|
||||
</ul>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -18,22 +18,22 @@
|
|||
<!-- TODO: dynamically generate this list -->
|
||||
|
||||
<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 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 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 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 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 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>
|
||||
</ul>
|
||||
</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} {
|
||||
|
||||
margin-bottom: pxToRem(80px);
|
||||
|
||||
&__avatar {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
max-width: 140px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
&__image-wrapper {
|
||||
|
||||
@include overflow-image-wrapper();
|
||||
padding-bottom: ((105/140)*100%);
|
||||
}
|
||||
|
||||
&__image {
|
||||
|
||||
@include overflow-image();
|
||||
}
|
||||
|
||||
&__name {
|
||||
|
||||
@include font-claim();
|
||||
color: $color-blue;
|
||||
}
|
||||
|
||||
&__title {
|
||||
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
&__description {
|
||||
|
||||
margin-bottom: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&__detail {
|
||||
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&-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 {
|
||||
.nav__link {
|
||||
padding-right: 0;
|
||||
}
|
||||
& > .nav__link {
|
||||
padding: 0 25px;
|
||||
}
|
||||
.nav__sublist {
|
||||
padding-right: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -44,11 +50,25 @@ $nav-height: 90px;
|
|||
position: absolute;
|
||||
top: 100%;
|
||||
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 {
|
||||
line-height: 45px;
|
||||
line-height: 40px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__link {
|
||||
|
|
@ -60,6 +80,11 @@ $nav-height: 90px;
|
|||
$hover: rgba($color-white, 1),
|
||||
$active: rgba($color-white, 1));
|
||||
letter-spacing: -0.008em;
|
||||
|
||||
.flag {
|
||||
margin-top: pxToRem(4px);
|
||||
margin-left: pxToRem(10px);
|
||||
}
|
||||
}
|
||||
|
||||
&--black {
|
||||
|
|
|
|||
|
|
@ -59,6 +59,11 @@
|
|||
&, &:visited, &:hover, &:active {
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.flag {
|
||||
margin-top: 2px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&__list {
|
||||
|
|
@ -83,8 +88,9 @@
|
|||
|
||||
&__sublist {
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
text-align: center;
|
||||
max-width: 420px;
|
||||
padding: 0 30px;
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
|
@ -101,7 +107,8 @@
|
|||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
background: $color-black;
|
||||
background: $color-blue;
|
||||
// background: $gradient-dash-sky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
@import "../fonts/montserrat/regular";
|
||||
@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-weight-xlight: 200;
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
@import "section";
|
||||
@import "featurepost";
|
||||
@import "postcontent";
|
||||
@import "flags";
|
||||
|
||||
|
||||
//stuff most pages need
|
||||
|
|
|
|||
|
|
@ -6,41 +6,47 @@ description: pages.team.description
|
|||
|
||||
{% 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">
|
||||
{% for member in site.data.team %}
|
||||
<li class="member">
|
||||
<ul class="member-list">
|
||||
{% for member in site.data.team %}
|
||||
<li class="member" data-mh="member">
|
||||
|
||||
{% if member.image %}
|
||||
<div class="member__image-wrapper">
|
||||
<img class="member__image" src="/assets/img/team/{{ member.image }}" alt="{{ member.name }}">
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="member__image-wrapper">
|
||||
<img class="member__image" src="/assets/img/team/anon.png" alt="{{ member.name }}">
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="member__avatar">
|
||||
{% if member.image %}
|
||||
<div class="member__image-wrapper">
|
||||
<img class="member__image" src="/assets/img/team/{{ member.image }}" alt="{{ member.name }}">
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="member__image-wrapper">
|
||||
<img class="member__image" src="/assets/img/team/anon.png" alt="{{ member.name }}">
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="member__name">{{ member.name }}</div>
|
||||
<div class="member__title">{{ member.title }}</div>
|
||||
<div class="member__description">{{ member.description }}</div>
|
||||
<div class="member__name" data-mh="member-name">{{ member.name }}</div>
|
||||
<div class="member__title" data-mh="member-title">{{ member.title }}</div>
|
||||
<div class="member__description">{{ member.description }}</div>
|
||||
|
||||
{% if member.email %}
|
||||
<div class="member__detail member__detail--email"><a href="mailto:{{ member.email }}">{{ member.email }}</a></div>
|
||||
{% endif %}
|
||||
{% if member.email %}
|
||||
<div class="member__detail member__detail--email"><a href="mailto:{{ member.email }}">{{ member.email }}</a></div>
|
||||
{% endif %}
|
||||
|
||||
{% if member.pgp %}
|
||||
<div class="member__detail member__detail--pgp"><a href="{{ member.pgp }}">PGP Key</a></div>
|
||||
{% endif %}
|
||||
{% if member.pgp %}
|
||||
<div class="member__detail member__detail--pgp"><a href="{{ member.pgp }}">PGP Key</a></div>
|
||||
{% endif %}
|
||||
|
||||
{% if member.twitter %}
|
||||
<div class="member__detail member__detail--twitter">{{ member.twitter }}</div>
|
||||
{% endif %}
|
||||
{% if member.twitter %}
|
||||
<div class="member__detail member__detail--twitter">{{ member.twitter }}</div>
|
||||
{% endif %}
|
||||
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue