2020_medium

medium

by imjhane

HTML

<div class="title">
<h1>Deerlight</h1>
<h1 class="separate">╳</h1>
<h1>Jhane Chou</h1>
</div>
<p class="date">最後更新：2020 年 06 月 02 日</p>

<div class="subtitle">
  <h2>最新文章</h2>
</div>

<ol class="word">
  <li>
  <a href="https://medium.com/deerlight" target="_blank">持續自學的日子</a>
  </li>
  
  <li>
  <a href="https://medium.com/deerlight" target="_blank">設計接案，報價經驗談</a>
  </li>
  
  <li>
  <a href="https://medium.com/deerlight" target="_blank">學習素描需要知道的N件事</a>
  </li>
</ol>



<ul class="link">
  <li>
    <a href="https://medium.com/deerlight/tagged/aesthetics" target="_blank">
      💛 美感樣成
    </a>
  </li>
  <li>
    <a href="https://medium.com/deerlight/tagged/freelancers" target="_blank">
      🍺 自由接案
    </a>
  </li>
  <li>
    <a href="https://medium.com/deerlight/tagged/skills" target="_blank">
      🥠 設計技巧
    </a>
  </li>
</ul>

<ul class="link">
  <li>
    <a href="https://medium.com/deerlight/tagged/writing" target="_blank">
      📒 寫作
    </a>
  </li>
  <li>
    <a href="https://medium.com/deerlight/tagged/daily-blog" target="_blank">
      🍦 日常
    </a>
  </li>
  <li>
  <a href="https://medium.com/deerlight/tagged/designer" 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: 14px;
  padding-bottom: 2px;
  font-weight: 500;
  color: #a37d1b;
}

h3 {
  font-size: 14px;
  font-weight: 500;
  color: #a37d1b;
}

.title {
  display: flex;
}

.separate {
  opacity: 0.2;
}

.subtitle {
  margin-bottom: -10px;
}

.date {
  font-size: 14px;
  margin: -8px 0 20px 0;
}

p {
  color: #888;
}
  
.word {
  margin-left: 6px;
  list-style-type: upper-roman;
  border-left: solid 2px #dcbf77;
  margin-bottom: 20px;
}

.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;
}

.word a {
  color: black;
  text-decoration: none;
  transition: 0.5s;
}


a {
  transition: 0.4s;
}

a:hover {
  opacity: 0.5;
}

.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;
}