Muter's Profile

by muter

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jade/1.11.0/jade.min.js"></script>
<div id="so">Please enable Javascript to show the detail... </div>
<pre id="jadecode" style="display:none">
article.card
	.thumb
	.infos
		h2.name 靜音 Muter
		h3.subtitle 關於我 / About Me
		p.txt
			| 一個安靜的閱讀者，偽文藝青年 <br>
			| 愛好設計，喜歡娛樂，會寫點小程式 <br>
			| 寄望技術能夠改變世界 <br>
			| // <br>
			| 每個人的聲音，都不應該被「靜音」
		h3.contacts
			| <a href="https://matters.news/@muter" class="matters">Matters</a> / <a href="https://t.me/WeLaxer" class="telegram">Telegram</a>
</pre>

SCSS

$host:'https://s3-us-west-2.amazonaws.com/s.cdpn.io/397014/';

@font-face {
  font-family: "Grotesque";
  src: url('#{$host}BrandonGrotesque-Regular.eot'),
       url('#{$host}BrandonGrotesque-Regular.ttf'),
       url('#{$host}BrandonGrotesque-Regular.woff');
  font-weight: normal;
}

@font-face {
  font-family: "Grotesque Black";
	src: url('#{$host}BrandonGrotesque-Black.eot'),
       url('#{$host}BrandonGrotesque-Black.ttf'),
       url('#{$host}BrandonGrotesque-Black.woff');
  font-weight: bold;
}

$big-stone:#152536;
$white:#fff;
$smalt-blue:#4e958b;
$maroon-flush:#c1a261;

$color-matters: #c0a46b;
$color-telegram: #86b0ed;

$black:#000;
$lite-grey:rgba($black, .2);
$lite-big-stone:rgba($big-stone, .7);

$card-width:420px;
$card-height:330px;

$thumb-height:250px;

$border-radius:3px;
$box-shadow:0 1px 4px rgba($black, .3);
$transition: cubic-bezier(.17,.67,.5,1.03);
$timing-1:.4s .15s;
$timing-2:.5s .25s;

$grotesque-black:'Grotesque Black', sans-serif;
$grotesque-regular:'Grotesque', sans-serif;
$merriweather:'Merriweather', sans-serif;

$new-york-city:'#{$host}new-york-city.png';
$flag:'#{$host}flag.png';

@mixin pos($pos, $left:null, $top:null, $right:null, $bottom:null) {
	position:$pos;
	left:$left;
	@if $top { top: $top; }
	@if $left { left: $left; }
	@if $right { right: $right; }
	@if $bottom { bottom: $bottom; }
}

@mixin size($width, $height) {
	width:$width;
	height:$height;
}

* {
	box-sizing:border-box;
}

html, body {
	font-size: 100%;
}
body {
	padding:0;
	margin:0;
}

a[href].matters {
	position:relative;
	&, &:link, &:visited, &:active {
		text-decoration: none;
		color: $color-matters;
		/* text-shadow: 2px 2px 2px darken($big-stone, 10); */
		padding-bottom:3px;
		font-weight: bold;
	}
	&::after {
		content:"";
		@include pos(absolute, $left:0, $bottom:0);
		background:$lite-grey;
		@include size(0, 1px);
		transition:.35s $transition;
	}
	&:hover::after {
		width:100%;
		box-shadow:$box-shadow;
	}
}

a[href].telegram...

JavaScript

$(function() {
    var djson = {
        title: "你好，我叫靜音",
    };
    document.title = djson.title;
    //jade compile
    $("#so").html(jade.compile($("#jadecode").html())(djson));
});