ref: variables css

src/style.css

@@ -9,6 +9,15 @@
  Text Domain:  twentytwentychild
  */
 
+/* variables */
+:root {
+  --ttc-yellow: rgb(202, 200, 39);
+  --ttc-blue: rgb(68, 191, 161);
+  --ttc-red: rgb(255, 0, 0);
+  --ttc-dark: rgb(13, 36, 35);
+  --ttc-white: rgb(255, 255, 255);
+}
+
 @font-face {
   font-family: "Roboto";
   src: url("assets/fonts/roboto-slab-bold.ttf") format("truetype");
@@ -20,24 +29,22 @@ body {
 
 body,
 #site-footer {
-  color: rgb(13, 36, 35);
-  background: rgb(255, 255, 255) url(assets/images/background.png) repeat left
-    top;
+  color: var(--ttc-dark);
+  background: var(--ttc-white) url(assets/images/background.png) repeat left top;
 }
 
 #site-header,
 .header-footer-group {
-  background: rgb(68, 191, 161) url(assets/images/background.png) repeat left
-    top;
+  background: var(--ttc-blue) url(assets/images/background.png) repeat left top;
 }
 
 #site-header * {
-  color: white;
+  color: var(--ttc-white);
 }
 
 #site-header div.site-description {
-  color: rgb(13, 36, 35);
-  background: white;
+  color: var(--ttc-dark);
+  background: var(--ttc-white);
   padding: 0.9ex;
   transform: rotate(-7deg);
   perspective: 50px;
@@ -51,7 +58,7 @@ body,
 
 #site-header div.site-description:nth-letter(3) {
   font-weight: normal;
-  color: red;
+  color: var(--ttc-red);
 }
 
 h1,
@@ -63,30 +70,30 @@ h3 {
 #site-content h1,
 #site-content h2,
 #site-content h3 {
-  color: rgb(202, 200, 39);
-  border: 0.2ex solid rgb(202, 200, 39);
+  color: var(--ttc-yellow);
+  border: 0.2ex solid var(--ttc-yellow);
   padding: 0.4ex 0.6ex;
-  background: white;
+  background: var(--ttc-white);
   font-family: "Roboto", serif;
 }
 
 #site-content h1 a,
 #site-content h2 a,
 #site-content h3 a {
-  color: rgb(202, 200, 39);
+  color: var(--ttc-yellow);
 }
 
 .footer-inner,
 .footer-inner p {
-  color: white;
+  color: var(--ttc-white);
   font-family: Agenda, Cantarell, Ubuntu, sans-serif;
 }
 
 .footer-inner h1,
 .footer-inner h2,
 .footer-inner h3 {
-  color: white;
-  background: rgb(68, 191, 161);
+  color: var(--ttc-white);
+  background: var(--ttc-blue);
   padding: 0.4ex 0.6ex;
   border: 0.25ex solid white;
   font-family: "Roboto", serif;
@@ -94,15 +101,15 @@ h3 {
 
 .footer-widgets-outer-wrapper {
   border: none;
-  color: rgb(13, 36, 35);
+  color: var(--ttc-dark);
 }
 
 .toggle-text * {
-  color: white;
+  color: var(--ttc-white);
 }
 
 .post-meta * {
-  color: rgb(13, 36, 35);
+  color: var(--ttc-dark);
 }
 
 p {
@@ -110,14 +117,14 @@ p {
 }
 
 a.wp-block-button__link {
-  background-color: rgb(68, 191, 161);
+  background-color: var(--ttc-blue);
 }
 
 .is-style-outline {
-  color: rgb(68, 191, 161);
+  color: var(--ttc-blue);
 }
 .is-style-outline a.wp-block-button__link:not(.has-text-color) {
-  color: rgb(68, 191, 161);
+  color: var(--ttc-blue);
 }
 
 div.is-style-outline a.wp-block-button__link {
@@ -125,7 +132,7 @@ div.is-style-outline a.wp-block-button__link {
 }
 
 p.has-drop-cap:not(:focus)::first-letter {
-  color: rgb(68, 191, 161);
+  color: var(--ttc-blue);
 }
 
 a.to-the-top {
@@ -133,9 +140,9 @@ a.to-the-top {
 }
 
 .entry-categories-inner a {
-  color: rgb(68, 191, 161);
+  color: var(--ttc-blue);
 }
 
 .modal-menu .ancestor-wrapper a {
-  color: rgb(68, 191, 161);
+  color: var(--ttc-blue);
 }