Haskell Day 2021のバナーを追加

Author: aMasamichiAndo

preprocessed-site/css/style.css

@@ -71,6 +71,103 @@ ul.social-buttons li {
   color: #000;
 }
 
+.ribbon > a {
+  display: inline-block;
+  position: absolute;
+  top: 3em;
+  right: -0em;
+  transform: rotate(30deg);
+  -webkit-transform: rotate(30deg);
+  -moz-transform: rotate(30deg);
+  -ms-transform: rotate(30deg);
+  -o-transform: rotate(30deg);
+  text-align: center;
+  box-shadow: 0 0.15em 0.25em 0 rgb(0 0 0 / 50%);
+}
+
+.ribbon > a:before {
+  content: '';
+  position: absolute;
+  width: 3em;
+  bottom: -0.5em;
+  left: -2em;
+  z-index: -2;
+  border: 1.5em solid #4490d0;
+  border-left-color: transparent;
+}
+
+.ribbon > a:after {
+  content: '';
+  position: absolute;
+  width: 3em;
+  bottom: -0.5em;
+  right: -2em;
+  z-index: -2;
+  border: 1.5em solid #4490d0;
+  border-right-color: transparent;
+}
+
+.ribbon > a > div {
+  display: inline-block;
+  position: relative;
+  margin: 0;
+  padding: 0 1em;
+  line-height: 3em;
+  color: #FFF;
+  font-weight: bold;
+  background: #337ab7;
+  text-shadow: 0 -0.08em rgb(0 0 0 / 50%);
+}
+
+.ribbon > a > div:before {
+  position: absolute;
+  content: '';
+  top: 100%;
+  left: 0;
+  border: none;
+  border-bottom: solid 0.5em transparent;
+  border-right: solid 1em #225099;
+}
+
+.ribbon > a > div:after {
+  position: absolute;
+  content: '';
+  top: 100%;
+  right: 0;
+  border: none;
+  border-bottom: solid 0.5em transparent;
+  border-left: solid 1em #225099;
+}
+
+.ribbon > a:hover:before,
+.ribbon > a:focus:before {
+  border-color: #f0778a;
+  border-left-color: transparent;
+}
+
+.ribbon > a:hover:after,
+.ribbon > a:focus:after {
+  border-color: #f0778a;
+  border-right-color: transparent;
+}
+
+.ribbon > a:hover > div,
+.ribbon > a:focus > div {
+  color: #FFF;
+  background: #d66c79;
+  text-decoration: none;
+}
+
+.ribbon > a:hover > div:before,
+.ribbon > a:focus > div:before {
+  border-right-color: #c0626c;
+}
+
+.ribbon > a:hover > div:after,
+.ribbon > a:focus > div:after {
+  border-left-color: #c0626c;
+}
+
 #post-navigation {
   display: flex;
   align-items: center;

preprocessed-site/templates/default.html

@@ -97,6 +97,11 @@
             </div>
             <!-- /.navbar-collapse -->
         </div>
+        <div class="ribbon">
+            <a href="https://haskell.jp/haskell-day-2021/">
+                <div>Haskell Day 2021 開催決定!</div>
+            </a>
+        </div>
         <!-- /.container -->
     </nav>