update: color

Author: Lemon73-Computing

style.css

@@ -1,5 +1,10 @@
 @charset "UTF-8";
 
+:root{
+    --white: #fff;
+    --black: #2f2f2f;
+}
+
 /* # # フォント # # */
 html{
     font-family: "游ゴシック", "Noto Sans", "Meiryo", "Arial", sans-serif;
@@ -9,15 +14,15 @@ html{
 /* # ライトモード # */
 @media (prefers-color-scheme: light){
     html{
-      background-color: #fff;
-      color: #2f2f2f;
+      background-color: var(--white);
+      color: var(--black);
     }
 }
 /* # ダークモード # */
 @media (prefers-color-scheme: dark){
     html{
-      background-color: #2f2f2f;
-      color: #fff;
+      background-color: var(--black);
+      color: var(--white);
     }
 }
 
@@ -42,19 +47,24 @@ main{
 
 aside{
     position: sticky;
-    height: 100%;
     top: 10px;
     width: 16%;
+    height: 100%;
     font-size: 1.0rem;
 }
 
 /* # # 携帯(縦)でのアクセス用(追従メニューの割合) # # */
-@media screen and (max-width:1080px){
-    .content{width: 100%;}
-    aside{width: 0%;}
-    aside p{font-size: 0px;}
+@media screen and (max-width: 1080px){
+    .content{
+        width: 100%;
+        padding: 0px;
+    }
+    aside{
+        width: 0%;
+        padding: 0px;
+    }
+    aside p{font-size: 0;}
     main{padding: 15px;}
-    .content, aside{padding: 0px;}
 }
 
 /* # ライトモード # */
@@ -75,8 +85,8 @@ footer{margin-top: auto;}
 
 /* # # 文字表記に関して # # */
 h2{
-    -webkit-box-shadow: 5px 5px 0 #fff;
-    box-shadow: 0px 5px 0 #fff;
+    -webkit-box-shadow: 5px 5px 0 var(--white);
+    box-shadow: 0px 5px 0 var(--white);
 }
 /* # ライトモード # */
 @media (prefers-color-scheme: light){a{color: green;}}
@@ -107,7 +117,7 @@ aside p:hover, aside p:focus{
 @media (prefers-color-scheme: dark){
     aside p{
         opacity: 0.8;
-        color: black;
+        color: var(--black);
     }
     aside p:hover, aside p:focus{opacity: 1.0;}
     aside p a{opacity: 1.0;}
@@ -120,23 +130,23 @@ aside p:hover, aside p:focus{
 }
 /* # ダークモード # */
 @media (prefers-color-scheme: dark){
-    aside p a {color: black;}
-    aside p a:hover, aside p a:focus{color: black;}
+    aside p a {color: var(--black);}
+    aside p a:hover, aside p a:focus{color: var(--black);}
 }
 
 /* # ダークモード # */
 @media (prefers-color-scheme: dark){
     h1{
         padding: 1rem 2rem;
         background: unset;
-        color:#fff;
+        color:var(--white);
     }
 
     h2{background: unset;}
 }
 
 /* # 携帯のタップした一瞬の時の色を透明に変更 # */
-a:active{-webkit-tap-highlight-color: rgba(255, 255, 255, .15);}
+a:active{-webkit-tap-highlight-color: rgba(255, 255, 255, .2);}
 
 /* # # 範囲選択の時の文字の色 # # */
 /* # ライトモード # */
@@ -145,4 +155,4 @@ a:active{-webkit-tap-highlight-color: rgba(255, 255, 255, .15);}
     a::selection{background: rgba(150 250 200 /.5);}
 }
 /* # ダークモード # */
-@media (prefers-color-scheme: dark){::selection{background: rgba(255, 255, 255, .45);}}
+@media (prefers-color-scheme: dark){::selection{background: rgba(255, 255, 255, .5);}}