ページリンクスタイルのテスト

意図とか想定 taizooo.icon

( Cosense は Wiki なので、まずは小人としてキーワード整備でもするか、と思っていました)

ページを切り出したり、キーワードを結びつけたりする際に、ページリンクと、空のページリンクと、外部リンクの識別が出来た方が良いと考えました

hover でアニメーションするので、アニメーションの色から背景色を選んでいます

が、あくまで(仮)なので、腕っぷしの良い人に調整していただきたいです :)

最高っす！baku89.icon*5

外部リンクと外部リンク(Cosense)の区別が必要かどうかはわからないです。できるだけ余計なことはしない主義なのでそのままです taizooo.icon

モバイルだと区別つかなかったです。要検討 → CSS わかってないんで適当ですが Selector 直接名指ししたら指定されました。雑です taizooo.icon

リファレンス

/glisp/settings

code:css

--body-bg: white;

code:css

--gradient-bg: linear-gradient(to right, var(--gradient-data))

code:css

--gradient-data: #2638ff 0%, #c9baec 16%, #e8c6b2 30%, #dee1f3 44%, #bef1ee 54%, #8ef6b7 63%, #6fc8d9 82%, #2638ff 100%;

code:css

data-hover-visible .line a:is(.link, .page-link, .empty-page-link):hover {

color: var(--body-bg);

text-decoration: none;

border-radius: 0.3em;

background: var(--gradient-bg);

background-attachment: fixed;

background-position: 0 0;

background-size: 1000px 1px;

animation: link-bg-anim 4s linear 0s infinite;

-webkit-animation: link-bg-anim 4s linear 0s infinite;

}

code:css

data-hover-visible

& a:is(.link, .page-link, .empty-page-link) {

text-decoration: underline;

text-decoration-color: rgba(0, 0, 0, 0.3);

}

settings

code:css

@import "https://scrapbox.io/api/code/glisp/settings/style.css";

body {

--gradient-data: #2638ff 0%, #bef1ce 20%,#9878f6 48%, #ffca99 55%, #ffebae 73%, #2638ff 100%;

}

code:pagelink.css

.line a.page-linkrel="route" {

background-color: #bef1ce;

}

.line a.empty-page-link {

background-color: #ffca99 !important;

}

ページリンクと空のページリンクと外部リンクの識別のため仮で設定しました。もっと良い実装があれば plz :)

ページリンク

settings

class="page-link"

rel="route"

ページリンク(空)

foobar

class="page-link empty-page-link"

rel="route"

外部リンク(Cosense)

/hub/taizooo:links

class="page-link"

rel="noreferrer"

外部リンク

https://x.com/taizooo

twwp™（@taizooo）さん / X

class="link"

rel="noopener noreferrer"