nwtgck / Ryo Ota
settings
Gyazo
（上記の画像は一覧のときに白紙だとそっけなくなるので入っている。）

フッター
新規作成のときに、自分のプロジェクトなのか編集権限のある他のプロジェクトなのか判断しやすくなる。
この style.css をこのページの一番下に書いたら反映されなかったのでここに書いた。
.app:not(.presentation) .page::after {
/* 画像を使うパターン content: url("https://images-na.ssl-images-amazon.com/images/I/51L7tTg9PML._SX350_BO1,204,203,200_.jpg"); */
/* content: 'フッターのテスト'; */
content: url("https://nwtgck.org/static/nwtgck-30x30.jpg");
/* content: url("https://i.gyazo.com/d64983527b8ed7806c8559669c563614.png"); */
display: block;
/* margin-top: 1rem; */
/* padding: 0rem 0; */
text-align: right;
/* border: solid #0003; border-width: 1px 0; font: 500 normal 1.8rem/1 sans-serif */
}

タグのデザイン
/* ＃で始まるタグをラベル風にする */
a[type="hashTag"] {
display: inline-block;
margin: 4px;
font-size: 14px;
height: 32px;
width: auto;
padding-left: 8px;
padding-right: 8px;
padding-top: 2px;
padding-bottom: 2px;
border-radius: 2px;
border-style: none;
color: #090909 !important;
background-color: rgba(12, 12, 13, 0.1);
}
a[type="hashTag"]:hover {
background-color: rgba(12, 12, 13, 0.2);
}
a[type="hashTag"]:active {
background-color: rgba(12, 12, 13, 0.3);
}

ページリンク
a.link, a[type="link"] {
color: #5884f1 !important;
}

空ページへのリンク
a[type="link"].empty-page-link {
color: #309b98 !important;
}

ブランドアイコンの変更
/* Overwrite the brand icon */
a.navbar-brand.dropdown-toggle {
position: relative;
}
a.navbar-brand.dropdown-toggle::before {
content: "";
width: 44px;
height: 44px;
display: block;
position: absolute;
top: 5px;
left: -1px;
background-image: url(https://gyazo.com/d64983527b8ed7806c8559669c563614.png);
background-size: contain;
background-repeat: no-repeat;
/* (from: http://www.safaridesign.jp/design-note/css_circle_clipping_a_photo/) */
border-radius: 50%;
}

プロジェクトタイトル系
.project-home > .title {
/* Make title line-height more narrow */
line-height: 1.2em;
}
/* Project description */
.project-home > .title:after {
/* content: "\A\A　技術的なこと、想いとか \A 🎋ReadableStreamがアップロード出来るようになりますように🌟"; */
/* content: "\A\A　静的に安全性を保証できる技術が好き"; */
content: "\A\A　技術的なこととか、たまに非技術も。";
white-space: pre;
font-size: 0.7em;
}

外部リンクにアイコンつける
/* External links */
.line a.link:not(.icon)::after {
font-family:'FontAwesome';
content: ' \f08e';
display: inline-block;
}

.deco-\< {
background-color: #fafbfc;
border: 1px solid #c6cbd1;
border-bottom-color: #959da5;
border-radius: 3px;
box-shadow: inset 0 -1px 0 #959da5;
color: #444d56;
display: inline-block;
line-height: 10px;
padding: 5px 8px;
vertical-align: middle;
}

ピンしたページのスタイル
ピンがはっきり分かって良い。
/* ピンしたページのスタイル */
/*
.grid li.page-list-item a .pin { background-color: transparent; background-image: none }
.grid li.page-list-item a .pin::after {
content: '\f08d';
font-family: 'FontAwesome';
font-size: 20px;
color: #996633;
bottom: 0;
display: inline-block;
transform: rotate(35deg);
/* (base: https://ferret-plus.com/8961) */
filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.5));
}
*/

Most related