From 2edd1fcfa700d6836fed48b6b90ac41177c9d055 Mon Sep 17 00:00:00 2001
From: "Dominik V. Salonen" <contact@quad.moe>
Date: Mon, 3 Sep 2018 10:25:14 +0000
Subject: [PATCH] Initial style fixes + Semicolon galore Whoever wrote this
 team really hates ending their CSS blocks with semicolons for some reason.

---
 static/css/style.css | 319 +++++++++++++++++++++----------------------
 1 file changed, 152 insertions(+), 167 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 11dc482..f89fea7 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -13,14 +13,6 @@
     }
 }
 
-/*ul.p-menu__lists::before {
-    content: "‣";
-    color: #ED5276;
-    font-size: 1.5rem;
-    font-weight: bold;
-    font-family: monospace, sans-serif;
-}
-*/
 .p-title__link {
     color: #ccc;
 }
@@ -32,17 +24,17 @@
 /* Base style */
 
 * {
-    transition-duration: 0.5s;
-    box-sizing: border-box
+    transition-duration: 0.25s;
+    box-sizing: border-box;
 }
 
 html {
-    font-size: 62.5%
+    font-size: 62.5%;
 }
 
 body {
     color: #747369d4;
-    background: #111114;
+    background: #1e1919;
     line-height: 1.57
     font-size: 1.0rem;
     font-family: -apple-system, BlinkMacSystemFont, YakuHanJP, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
@@ -55,66 +47,66 @@ h4,
 h5,
 h6 {
     font-weight: 300;
-    font-family: Open Sans, sans-serif
+    font-family: Open Sans, sans-serif;
 }
 
 h1 {
-    font-size: 3.2rem
+    font-size: 3.2rem;
 }
 
 h2 {
-    font-size: 2.8rem
+    font-size: 2.8rem;
 }
 
 h3 {
-    font-size: 2.4rem
+    font-size: 2.4rem;
 }
 
 h4 {
-    font-size: 2.0rem
+    font-size: 2.0rem;
 }
 
 h5 {
-    font-size: 1.8rem
+    font-size: 1.8rem;
 }
 
 h6 {
-    font-size: 1.6rem
+    font-size: 1.6rem;
 }
 
 p {
-    font-size: 1.6rem
+    font-size: 1.6rem;
 }
 
 a {
-    color: #337ab7;
-    text-decoration: none
+    color: #FF5555;
+    text-decoration: none;
 }
 
 a:hover {
-    color: #175081
+    color: #FF9999;
 }
 
 ul li {
-    list-style: disc
+    list-style: disc;
 }
 
 ol li {
-    list-style: decimal
+    list-style: decimal;
 }
 
 li {
-    font-size: 1.6rem
+    font-size: 1.6rem;
 }
 
 dt {
     margin-top: 16px;
-    font-size: 1.6rem
+    font-size: 1.6rem;
 }
 
 dd {
     margin: 8px 0 0 20px;
-    font-size: 1.6rem
+    font-size: 1.6rem;
 }
 
 pre {
@@ -124,54 +116,54 @@ pre {
     background-color: #f8f8f8;
     font-size: 1.2rem;
     word-wrap: break-word;
-    overflow: auto
+    overflow: auto;
 }
 
 code {
     line-height: 1.8;
-    font-size: 1.4rem
+    font-size: 1.4rem;
 }
 
 table {
     border-collapse: collapse;
     border-spacing: 0;
-    font-size: 1.6rem
+    font-size: 1.6rem;
 }
 
 th,
 td {
     padding: 8px;
-    border: 1px solid #eee
+    border: 1px solid #eee;
 }
 
 th {
     background-color: #fafafa;
-    font-weight: 400
+    font-weight: 400;
 }
 
 del {
-    color: #999
+    color: #999;
 }
 
 blockquote {
     margin: 0;
     padding: 8px 12px;
-    border-left: 3px solid #ccc
+    border-left: 3px solid #ccc;
 }
 
 blockquote * {
-    margin: 0
+    margin: 0;
 }
 
 img {
     max-width: 100%;
-    height: auto
+    height: auto;
 }
 
 .l-header {
     display: block;
     padding: 0px 0 36px 0;
-    text-align: center
+    text-align: center;
 }
 
 .l-nav {
@@ -182,16 +174,16 @@ img {
 .l-main {
     width: 96%;
     max-width: 720px;
-    margin: 10px auto 0
+    margin: 10px auto 0;
 }
 
 .l-footer {
-    padding: 24px 0
+    padding: 24px 0;
 }
 
 .c-title {
     font-weight: 300;
-    font-family: Open Sans, sans-serif
+    font-family: Open Sans, sans-serif;
 }
 
 .c-links {
@@ -204,7 +196,7 @@ img {
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     margin: 8px 0 0;
-    padding: 0
+    padding: 0;
 }
 
 .c-links a {
@@ -223,17 +215,17 @@ img {
     border-color: #555;
     border-radius: 50%;
     color: #555;
-    transition: .2s
+    transition: .2s;
 }
 
 .c-links a:hover {
     background: #555;
-    color: #fff
+    color: #fff;
 }
 
 .c-links__item {
     margin: 8px 8px 0;
-    list-style: none
+    list-style: none;
 }
 
 .c-links__icon {
@@ -243,36 +235,36 @@ img {
 }
 
 .c-article__title {
-    font-size: 2.4rem
+    font-size: 2.4rem;
 }
 
 .c-article__title a {
-    color: #111
+    color: #111;
 }
 
 .c-article__title a:hover {
-    color: #175081
+    color: #175081;
 }
 
 .c-article__meta {
     font-size: 1.6rem;
-    line-height: 1
+    line-height: 1;
 }
 
 .c-article__summary {
     font-size: 1.4rem;
     color: #999;
-    line-height: 1.57
+    line-height: 1.57;
 }
 
 .c-article__summary p {
-    margin: 0
+    margin: 0;
 }
 
 .c-article__btn {
     display: inline-block;
     padding-bottom: 4px;
-    font-size: 1.6rem
+    font-size: 1.6rem;
 }
 
 .c-article__btn:after {
@@ -284,7 +276,7 @@ img {
     border: solid currentColor;
     border-width: 1px 1px 0 0;
     -webkit-transform: rotate(45deg);
-    transform: rotate(45deg)
+    transform: rotate(45deg);
 }
 
 .c-avatar {
@@ -300,17 +292,17 @@ img {
     width: 100px;
     height: 100px;
     border-radius: 50%;
-    overflow: hidden
+    overflow: hidden;
 }
 
 .c-avatar img {
     max-width: 100%;
-    height: auto
+    height: auto;
 }
 
 .c-time {
     display: block;
-    font-size: 1.6rem
+    font-size: 1.6rem;
 }
 
 .c-tag {
@@ -318,32 +310,32 @@ img {
     margin: 8px 6px 0 0;
     padding: 4px;
     font-size: 1.6rem;
-    color: #555
+    color: #555;
 }
 
 .c-tag:before {
     content: "#";
     display: inline-block;
     margin-right: 2px;
-    color: currentColor
+    color: currentColor;
 }
 
 .c-tag:hover {
-    background: #fafafa
+    background: #fafafa;
 }
 
 .c-pagination {
-    font-size: 1.6rem
+    font-size: 1.6rem;
 }
 
 .c-pagination a {
     display: inline-block;
     padding: 8px 16px;
-    transition: .2s
+    transition: .2s;
 }
 
 .c-pagination a:hover {
-    background: #fafafa
+    background: #fafafa;
 }
 
 .c-pagination__ctrl {
@@ -352,14 +344,14 @@ img {
     display: flex;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
-    justify-content: space-between
+    justify-content: space-between;
 }
 
 .c-pagination__newer,
 .c-pagination__older {
     -webkit-box-flex: 1;
     -ms-flex: 1 1 0%;
-    flex: 1 1 0%
+    flex: 1 1 0%;
 }
 
 .c-pagination__newer a:before {
@@ -373,11 +365,11 @@ img {
     border: solid currentColor;
     border-width: 2px 0 0 2px;
     -webkit-transform: rotate(-45deg);
-    transform: rotate(-45deg)
+    transform: rotate(-45deg);
 }
 
 .c-pagination__older {
-    text-align: right
+    text-align: right;
 }
 
 .c-pagination__older a:after {
@@ -391,24 +383,24 @@ img {
     border: solid currentColor;
     border-width: 2px 2px 0 0;
     -webkit-transform: rotate(45deg);
-    transform: rotate(45deg)
+    transform: rotate(45deg);
 }
 
 .c-pagination__count {
     display: block;
-    text-align: center
+    text-align: center;
 }
 
 .p-title {
     margin: 0 0 20px 0;
-    font-size: 4.4rem
+    font-size: 4.4rem;
 }
 
 .p-subtitle {
     margin: 12px 0 0;
     font-size: 1.4rem;
     font-weight: 300;
-    font-family: Open Sans, sans-serif
+    font-family: Open Sans, sans-serif;
 }
 
 .p-tag-title {
@@ -417,31 +409,31 @@ img {
     padding-bottom: 8px;
     border-bottom: 1px solid currentColor;
     color: #555;
-    font-size: 2.4rem
+    font-size: 2.4rem;
 }
 
 .p-tag-title:before {
     content: "#";
     display: inline-block;
-    margin-right: 4px
+    margin-right: 4px;
 }
 
 .p-copyright {
     margin: 24px 0 0;
     text-align: center;
-    font-size: 1.2rem
+    font-size: 1.2rem;
 }
 
 .p-list-article {
-    margin-top: 40px
+    margin-top: 40px;
 }
 
 .p-list-article:first-child {
-    margin-top: 0
+    margin-top: 0;
 }
 
 .p-list-article__btn {
-    margin-top: 16px
+    margin-top: 16px;
 }
 
 
@@ -449,18 +441,19 @@ img {
 
 .p-menu {
     width: 100%;
-    background: #000;
-    padding-top: 12px;
-    padding-bottom: 14px;
+    background: #f2f0ec;
+    padding: 12px 0;
     margin-bottom: 4rem;
     display: inline-block;
-    border-left: 1rem solid #ED5276cc;
+    border-bottom: 0.25rem solid #FF5555;
 }
 
-/* change */
-.p-menu:hover{
-    /*border-left: 4px solid #ED5276cc;*/
-    opacity: 0.65
+.p-menu a {
+    color: #000;
+}
+
+.p-menu a:hover {
+    color: #FF5555;
 }
 
 .p-menu__lists {
@@ -483,45 +476,37 @@ img {
 .p-menu__listitem {
     display: inline-block;
     padding: 0 6px 0px 6px;
-    list-style: none
+    list-style: none;
 }
 
 @media(min-width:640px) {
     .p-menu__listitem {
-        margin: 0px 24px 0 0
+        margin: 0px 24px 0 0;
     }
 }
 
-.p-menu__listitem a {
-    padding-bottom: 4px
-}
-
-.p-menu__listitem a:hover {
-    border-bottom: 1px solid currentColor
-}
-
 .p-menu__listitem ul {
-    padding-left: 12px
+    padding-left: 12px;
 }
 
 .p-menu__listitem ul li {
-    margin: 4px 0 0
+    margin: 4px 0 0;
 }
 
 .p-menu__listitem ul li:before {
     content: "-";
-    margin-right: 4px
+    margin-right: 4px;
 }
 
 .p-menu__parent span {
-    color: #337ab7
+    color: #337ab7;
 }
 
 .p-author {
     display: block;
     position: relative;
     width: 100%;
-    margin: 20px auto 0
+    margin: 20px auto 0;
 }
 
 @media(min-width:640px) {
@@ -529,7 +514,7 @@ img {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
-        margin: 80px auto 0
+        margin: 80px auto 0;
     }
 }
 
@@ -542,12 +527,12 @@ img {
     margin: auto;
     text-align: center;
     font-size: 1.4rem;
-    color: #999
+    color: #999;
 }
 
 @media(min-width:640px) {
     .p-author:before {
-        top: -50px
+        top: -50px;
     }
 }
 
@@ -558,54 +543,54 @@ img {
 .p-author__body {
     -webkit-box-flex: 1;
     -ms-flex: 1 1 0%;
-    flex: 1 1 0%
+    flex: 1 1 0%;
 }
 
 @media(min-width:640px) {
     .p-author__body {
-        padding-left: 16px
+        padding-left: 16px;
     }
 }
 
 .p-author__body p {
-    margin: 0
+    margin: 0;
 }
 
 .p-pagination {
-    margin: 30px 0
+    margin: 30px 0;
 }
 
 @media(min-width:640px) {
     .p-pagination {
-        margin: 60px 0
+        margin: 60px 0;
     }
 }
 
 .p-pagination__count {
-    margin-top: 24px
+    margin-top: 24px;
 }
 
 .p-article__thumbnail {
-    margin-top: 24px
+    margin-top: 24px;
 }
 
 .p-article__body {
     margin: 40px 0 30px;
-    word-wrap: break-word
+    word-wrap: break-word;
 }
 
 @media(min-width:640px) {
     .p-article__body {
-        margin: 40px 0 60px
+        margin: 40px 0 60px;
     }
 }
 
 .p-article__body img[data-action^=zoom]:hover {
-    cursor: zoom-in
+    cursor: zoom-in;
 }
 
 .p-article__body .zoom-img-wrap img:hover {
-    cursor: zoom-out
+    cursor: zoom-out;
 }
 
 .p-notfound {
@@ -618,12 +603,12 @@ img {
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
-    height: 300px
+    height: 300px;
 }
 
 .p-notfound h1 {
     font-size: 10rem;
-    font-weight: 700
+    font-weight: 700;
 }
 
 .p-screen-reader-text {
@@ -631,7 +616,7 @@ img {
     position: absolute!important;
     height: 1px;
     width: 1px;
-    overflow: hidden
+    overflow: hidden;
 }
 
 .p-screen-reader-text:hover,
@@ -653,16 +638,16 @@ img {
     text-decoration: none;
     top: 5px;
     width: auto;
-    z-index: 100000
+    z-index: 100000;
 }
 
 .p-related {
-    margin-bottom: 100px
+    margin-bottom: 100px;
 }
 
 .p-related__list {
     padding: 0;
-    font-size: 0
+    font-size: 0;
 }
 
 .p-related__item {
@@ -670,15 +655,15 @@ img {
     width: 230px;
     height: 150px;
     margin-right: 15px;
-    list-style: none
+    list-style: none;
 }
 
 .p-related__item:nth-child(3n) {
-    margin-right: 0
+    margin-right: 0;
 }
 
 .p-related__item:nth-child(n+4) {
-    margin-top: 15px
+    margin-top: 15px;
 }
 
 .p-related__item a {
@@ -699,7 +684,7 @@ img {
     background-color: #92c6f2;
     color: #fafafa;
     font-weight: 400;
-    font-family: Open Sans, sans-serif
+    font-family: Open Sans, sans-serif;
 }
 
 .p-related__item a:before {
@@ -710,67 +695,67 @@ img {
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, .3);
-    transition: .1s
+    transition: .1s;
 }
 
 .p-related__item a:hover:before {
-    background: rgba(0, 0, 0, .6)
+    background: rgba(0, 0, 0, .6);
 }
 
 .p-related__item span {
-    position: relative
+    position: relative;
 }
 
 .u-dn {
-    display: none!important
+    display: none!important;
 }
 
 .u-db {
-    display: block!important
+    display: block!important;
 }
 
 .u-di {
-    display: inline!important
+    display: inline!important;
 }
 
 .u-dib {
-    display: inline-block!important
+    display: inline-block!important;
 }
 
 .u-align-left {
     display: block!important;
     margin-left: 0!important;
-    margin-right: auto!important
+    margin-right: auto!important;
 }
 
 .u-align-center {
     display: block!important;
     margin-right: auto!important;
-    margin-left: auto!important
+    margin-left: auto!important;
 }
 
 .u-align-right {
     display: block!important;
     margin-left: auto!important;
-    margin-right: 0!important
+    margin-right: 0!important;
 }
 
 /* zoom.css */
 img[data-action=zoom] {
     cursor: pointer;
-    cursor: -moz-zoom-in
+    cursor: -moz-zoom-in;
 }
 
 .zoom-img,
 .zoom-img-wrap {
     position: relative;
     z-index: 666;
-    transition: all .3s
+    transition: all .3s;
 }
 
 img.zoom-img {
     cursor: pointer;
-    cursor: -moz-zoom-out
+    cursor: -moz-zoom-out;
 }
 
 .zoom-overlay {
@@ -784,17 +769,17 @@ img.zoom-img {
     pointer-events: none;
     filter: "alpha(opacity=0)";
     opacity: 0;
-    transition: opacity .3s
+    transition: opacity .3s;
 }
 
 .zoom-overlay-open .zoom-overlay {
     filter: "alpha(opacity=100)";
-    opacity: 1
+    opacity: 1;
 }
 
 .zoom-overlay-open,
 .zoom-overlay-transitioning {
-    cursor: default
+    cursor: default;
 }
 
 /* Slick css */
@@ -812,7 +797,7 @@ img.zoom-img {
     -khtml-user-select: none;
     -ms-touch-action: pan-y;
     touch-action: pan-y;
-    -webkit-tap-highlight-color: transparent
+    -webkit-tap-highlight-color: transparent;
 }
 
 .slick-list {
@@ -820,22 +805,22 @@ img.zoom-img {
     display: block;
     overflow: hidden;
     margin: 0;
-    padding: 0
+    padding: 0;
 }
 
 .slick-list:focus {
-    outline: none
+    outline: none;
 }
 
 .slick-list.dragging {
     cursor: pointer;
-    cursor: hand
+    cursor: hand;
 }
 
 .slick-slider .slick-track,
 .slick-slider .slick-list {
     -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0)
+    transform: translate3d(0, 0, 0);
 }
 
 .slick-track {
@@ -844,70 +829,70 @@ img.zoom-img {
     left: 0;
     display: block;
     margin-left: auto;
-    margin-right: auto
+    margin-right: auto;
 }
 
 .slick-track:before,
 .slick-track:after {
     display: table;
-    content: ''
+    content: '';
 }
 
 .slick-track:after {
-    clear: both
+    clear: both;
 }
 
 .slick-loading .slick-track {
-    visibility: hidden
+    visibility: hidden;
 }
 
 .slick-slide {
     display: none;
     float: left;
     height: 100%;
-    min-height: 1px
+    min-height: 1px;
 }
 
 [dir=rtl] .slick-slide {
-    float: right
+    float: right;
 }
 
 .slick-slide img {
-    display: block
+    display: block;
 }
 
 .slick-slide.slick-loading img {
-    display: none
+    display: none;
 }
 
 .slick-slide.dragging img {
-    pointer-events: none
+    pointer-events: none;
 }
 
 .slick-initialized .slick-slide {
-    display: block
+    display: block;
 }
 
 .slick-loading .slick-slide {
-    visibility: hidden
+    visibility: hidden;
 }
 
 .slick-vertical .slick-slide {
     display: block;
     height: auto;
-    border: 1px solid transparent
+    border: 1px solid transparent;
 }
 
 .slick-arrow.slick-hidden {
-    display: none
+    display: none;
 }
 
 .slick-slider {
-    position: relative
+    position: relative;
 }
 
 .slick-slide {
-    margin: 0 8px
+    margin: 0 8px;
 }
 
 .slick-arrow {
@@ -919,11 +904,11 @@ img.zoom-img {
     height: 28px;
     border: none;
     border-radius: 50%;
-    background: #555
+    background: #555;
 }
 
 .slick-arrow:hover {
-    cursor: pointer
+    cursor: pointer;
 }
 
 .slick-arrow:after {
@@ -937,33 +922,33 @@ img.zoom-img {
     margin: auto;
     width: 5px;
     height: 5px;
-    border: solid #fafafa
+    border: solid #fafafa;
 }
 
 @media(max-width:767px) {
     .slick-arrow {
-        display: none!important
+        display: none!important;
     }
 }
 
 .slick-prev {
-    left: -32px
+    left: -32px;
 }
 
 .slick-prev:after {
     left: 1px;
     border-width: 2px 0 0 2px;
     -webkit-transform: rotate(-45deg);
-    transform: rotate(-45deg)
+    transform: rotate(-45deg);
 }
 
 .slick-next {
-    right: -32px
+    right: -32px;
 }
 
 .slick-next:after {
     right: 1px;
     border-width: 2px 2px 0 0;
     -webkit-transform: rotate(45deg);
-    transform: rotate(45deg)
+    transform: rotate(45deg);
 }