leafwind's profile

by leafwind

HTML

<h1>Connor aka leafwind</h1>

<div class="subtitle">
<h2>日本、軟體工程師、寫作、觀察科技與社會　　<a href="https://t.me/leafwind_tw" target="_blank">聯絡我(TG)</a></h2>
  <p class="date">最後更新日期為：2020 年 9 月 26 日</p>
</div>

<ul class="word">
  <li>曾於台灣與日本的獨角獸新創擔任軟體工程師</li>
  <li>科普寫作逾十萬字、Medium 讀者 3.2k（已停滯😅）</li>
</ul>


<ul class="link">
  <li><a href="https://medium.com/@leafwind" target="_blank">Medium</a></li>
  <li><a href="https://matters.news/@leafwind" target="_blank">Matters</a></li>
  <li><a href="https://leafwind.substack.com/" target="_blank">SubStack</a></li>
</ul>

<ul class="word">
  <li>LikeCoin 推廣者與 
    <a href="https://likecoin.bigdipper.live/validator/cosmosvaloper1g2dpslkge0wmhgpdegeg0wq549syz8tjrpnum3" target="_blank">
      驗證人
    </a>
  </li>
  <li> 經營數個寫作與工程師社群</li>
</ul>


<ul class="link">
  <li><a href="https://t.me/chinese_writing" target="_blank">寫寫村</a></li>
  <li><a href="https://t.me/joinchat/I55j7xdUGe_EqaxO-cvj5g" target="_blank">軟工森友會</a></li>
  <li><a href="https://t.me/all_about_data" target="_blank">資料森友會</a></li>
  <li><a href="https://t.me/joinchat/I55j7xqN5_WDnKe9BUwvkw" target="_blank">在日工程師</a></li>
</ul>

CSS

* {
  font-family: Noto San TC, Muli;
  
}

body {
  background: #fafafa;
  padding: 0 20px;
}

h1 {
  font-size: 20px;
}

h2 {
  font-size: 16px;
  display: block;
  margin-left: 18px;
  padding-bottom: 2px;
  font-weight: 600;
}

h3 {
  font-size: 14px;
  display: block;
  font-weight: 600;
  color: #a37d1b;
}

.subtitle {
  border-left: solid 2px #dcbf77;
  display: block;
}

.date {
  font-size: 12px;
  display: block;
  margin-left: 18px;
  margin-top: -12px;
}

p {
  color: #888;
  margin-left: 20px;
}
  
.word {
  margin-left: -20px;
  list-style-type: square;
}


.link {
  display: flex;
  list-style-type: none;
  margin-top: -10px;
  font-size: 14px;
  line-height: 14px;
}


.link li {
  color: #a37d1b;
  text-decoration: none;
  transition: 0.5s;
  display: block;
  margin: 1px 3px;
  border-radius: 8px;
  border: solid 1px #e3c57c;
}

.link a {
  color: #a37d1b;
  text-decoration: none;
  display: block;
  padding: 6px 10px;
}


.link li:hover {
  background: #a37d1b;
  text-decoration: none;
  display: block;
  margin: 1px 3px;
  opacity: 1;
  color: white;
  border: solid 1px #a37d1b;
}

.link li:hover > a {
  color: white;
  opacity: 1;
}

a {
  color: #a37d1b;
  text-decoration: none;
  transition: 0.5s;
}

a:hover {
  color: #dcbf77;
  text-decoration: none;
}