made major changes to my Githubpages

What I did

• Introduce IE Buster
• Update Ruby version from 2.5.1
• Make Dark-theme better
• Add top-image and githubpage-svg

IE Buster

リンク: IE Buster

IE環境下ではSVG周辺でデザインが崩れることが確認されたが、Chrome使用を促すJSを追加した。

Update Ruby-version to 2.7.0

Ruby用に作成している仮想環境のアップデートの序にRubyのバージョンを最新版に上げた。

• 参照: 永久保存版！？伊藤さん式・Railsアプリのアップグレード手順

• エラー内容

  • 他のgemやミドルウェアとの依存関係に由来するもの
  • rubyのキーワード因数に関する非推奨警告

Dark theme

前回までは、基本グレーで背景に青、差し色でオレンジを使用していた。

• Material Design Dark theme
• Color Tool
• DarkModeのデザインを中心とした色彩設計の考え方

Add top-image and others

トップ画面にプロフィール画像を追加し、またサイトリンクQRコードを表示されるように、javascriptを作成した。

<script>
  'use script';
  {
    const githubpage = document.getElementById('githubpage-svg');
    const profile = document.getElementById('profile-img');

    profile.addEventListener('click', ()=>{
      profile.classList.remove('active');
      githubpage.classList.add('active');
    });

    githubpage.addEventListener('click', ()=>{
      githubpage.classList.remove('active');
      profile.classList.add('active');
    });
  }
</script>

残す改修予定

• add Tags
• AMPの導入。