single page

static/css/footer.css

@@ -1,3 +1,6 @@
+footer a h5 {
+    color: var(--text-color) !important;
+}
 
 footer a {
   text-decoration: none;
@@ -24,14 +27,21 @@ footer .card-text * {
     background-color: var(--secondary-color) !important;
 }
 
+footer .card-footer {
+    background-color: var(--background-color) !important;
+    padding: .8em .7em;
+}
+
 footer .card-footer a {
     color: var(--text-secondary-color) !important;
     border-color: var(--primary-color) !important;
     transition: none;
+    background-color: var(--background-color) !important;
 }
 
 footer .card-footer a:hover {
     color: var(--primary-color) !important;
+    opacity: 0.8;
 }
 
 footer .card-footer a:focus {

static/css/header.css

@@ -1,3 +1,12 @@
+header .navbar .navbar-nav a {
+    color: var(--text-color) !important;
+}
+
+#theme-toggle {
+    background-color: var(--background-color) !important;
+    color: var(--text-color) !important;
+}
+
 .navbar-toggler {
     border: none;
     outline: none;
@@ -22,9 +31,20 @@ header .nav-link{
 .navbar .nav-link:hover {
     color: var(--primary-color) !important;
 }
-li> .dropdown-toggle:focus{
+
+li > .dropdown-toggle:focus{
     color: var(--primary-color) !important;
 }
+
+.dropdown-menu {
+    background-color: var(--background-color) !important;
+    border-color: var(--text-secondary-color) !important;
+}
+
 .dropdown-item:hover {
     background-color: var(--secondary-color) !important;
+}
+
+.dropdown-item:focus, .dropdown-item:active {
+    background-color: var(--secondary-color) !important;
 }

static/css/index.css

@@ -55,9 +55,9 @@
 }
 
 #hero a.btn.social-icon {
-    color: var(--primary-color);
+    color: var(--primary-color) !important;
     line-height: 0%;
-    border-radius: 50% ;
+    border-radius: 50%;
     margin-top: 50px;
     padding: 0.7rem;
     border: 1px solid var(--primary-color);
@@ -76,6 +76,7 @@
     margin-top: 50px;
     padding: 0.7rem 1.75rem;
     border: 1px solid var(--primary-color);
+    color: var(--text-color) !important;
     border-radius: .75rem;
     transition: none;
 }
@@ -157,7 +158,8 @@
 }
 
 #about .content {
-    opacity: 0.95 !important;
+    font-weight: 500;
+    opacity: 0.9 !important;
     line-height: 1.7rem !important;
 }
 
@@ -193,7 +195,7 @@
 }
 
 #experience .tab-pane > * {
-    opacity: 0.95;
+    opacity: 0.9;
 }
 
 #experience .tab-pane small {
@@ -217,12 +219,14 @@
 }
 
 #experience .nav-item .nav-link {
+    color: var(--text-color) !important;
     border-bottom: 2px solid transparent; 
     border-radius: 0%;
     transition: none;
 }
 
-#experience .nav-item .nav-link.active { 
+#experience .nav-item .nav-link.active {
+    color: var(--text-color) !important;
     border-bottom: 2px solid var(--primary-color); 
     opacity: 0.8;
 }
@@ -231,7 +235,7 @@
     transition: none !important;
 }
 
-#experience .nav-item .nav-link:hover  {
+#experience .nav-item .nav-link:hover {
     border-bottom: 2px solid var(--primary-color);
     opacity: 0.8;
 }
@@ -349,6 +353,12 @@
     border: 2px solid var(--primary-color) !important;
 }
 
+#education .card .card-body .education-content a {
+    color: var(--primary-color) !important;
+    text-decoration: none;
+    opacity: 0.9;
+}
+
 #education .card .card-body > a h6 {
     display: inline-block;
     text-decoration: none;
@@ -373,6 +383,7 @@
 #education .card .card-body a.btn {
     opacity: 0.9;
     border: 1px solid var(--primary-color) !important;
+    color: var(--text-color) !important;
     border-radius: .75rem;
     box-shadow: none;
     transition: none;
@@ -405,6 +416,11 @@
     cursor: alias;
 }
 
+#achievements .card h5 {
+    color: var(--text-color) !important;
+    opacity: 0.9;
+}
+
 #achievements .card:hover {
     border: 2px solid var(--text-color);
     transition: .3s;
@@ -425,13 +441,13 @@
     color: var(--text-secondary-color) !important;
 }
 
-
 #contact .btn {
     transition: none;
     transition: opacity 0.3s;
     border-radius: .5rem !important;
     border-color: var(--primary-color) !important;
     background-color: var(--secondary-color) !important;
+    color: var(--text-color) !important;
 }
 
 #contact .btn:hover {

static/css/list.css

@@ -10,6 +10,10 @@
     text-decoration: none;
 }
 
+#list-page .card a h5 {
+    color: var(--text-color) !important;
+}
+
 #list-page .card:hover {
     border: 1px solid var(--secondary-color);
     transition: all 0.3s ease-out;
@@ -23,8 +27,9 @@
 #list-page .post-footer {
     padding: .5rem 1rem;
     background-color: var(--secondary-color) !important;
-    color: var(--text-secondary-color) !important;
+    color: var(--text-color) !important;
     border-top: 1px solid rgba(15, 80, 100, 0.16);
+    opacity: 0.9;
 }
 
 #list-page .post-footer a {
@@ -47,6 +52,8 @@
 #list-page ul li a {
     transition: none;
     border-color: var(--secondary-color);
+    background-color: var(--secondary-color) !important;
+    color: var(--text-color) !important;
 }
 
 #list-page ul li a:focus {
@@ -55,4 +62,6 @@
 
 #list-page .page-item.active .page-link {
     border-color: var(--primary-color);
+    background-color: var(--primary-color) !important;
+    color: var(--secondary-color) !important;
 }

static/css/projects.css

@@ -6,6 +6,13 @@
 
 #projects a {
     text-decoration: none;
+    color: var(--text-color) !important;
+}
+
+#projects .badge {
+    background-color: var(--background-color) !important;
+    color: var(--text-color) !important;
+    margin: 0 1%;
 }
 
 #projects .card {
@@ -14,6 +21,7 @@
     min-height: 400px;
     overflow: hidden;
     border-radius: 1rem;
+    border: none !important;
 }
 
 #projects .card:hover {
@@ -28,6 +36,7 @@
     overflow: hidden;
     border-top-left-radius: 1rem;
     border-top-right-radius: 1rem;
+    border: none !important;
 }
 
 #projects .card .card-footer {

static/css/single.css

@@ -0,0 +1,260 @@
+#single {
+    padding: 60px 0;
+    line-height: 1.7em;
+    font-size: 17px;
+}
+
+#single .title > h1 {
+    opacity: 0.8;
+    color: var(--text-color) !important;
+}
+
+#single .title small {
+    opacity: 0.7;
+}
+
+#single .featured-image {
+    padding: 1rem;
+    padding-top: 0;
+}
+
+#single .featured-image img {
+    border-radius: 1rem;
+    box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
+    margin-bottom: 1rem;
+}
+
+#single .page-content a {
+    display: inline-block;
+    text-decoration: none;
+    color: var(--primary-color) !important;
+}
+
+#single .page-content a::after {
+    content: "";
+    display: block;
+    width: 0px;
+    height: 2px;
+    bottom: 0.37em;
+    background-color: var(--primary-color);
+    transition: all 0.25s cubic-bezier(0.645,0.045,0.355,1);
+    opacity: 0.5;
+}
+
+#single .page-content a:hover::after, #single .page-content a:focus::after, #single .page-content a:active::after {
+    width: 100%;
+}
+
+#single .page-content h1, #single .page-content h2, #single .page-content h3, #single .page-content h4, #single .page-content h5, #single .page-content h6 {
+    color: var(--primary-color) !important;
+    margin-bottom: 0.7em;
+    opacity: 0.9;
+}
+
+#single .page-content blockquote {
+    padding: 20px 30px;
+    border-left: 6px solid var(--primary-color) !important;
+    color: var(--text-secondary-color) !important;
+    font-weight: 600;
+    font-size: 20px;
+    margin: 30px 0;
+    border-radius: 5px;
+}
+
+#single .page-content blockquote, #single .page-content blockquote * {
+    background-color: var(--secondary-color) !important;
+}
+
+/* table */
+#single .page-content table {
+    width: auto;
+    border-radius: 5px;
+    padding: 0.1rem;
+    margin-bottom: 1.2em;
+    max-width: 100%;
+    display: block;
+    overflow-x: auto;
+    opacity: 0.8;
+}
+
+#single .page-content table > tr {
+    height: 40px !important;
+}
+
+#single .page-content table > thead > tr > th {
+    padding: 0.5rem !important;
+    background-color: var(--primary-color) !important;
+    color: var(--secondary-color) !important;
+    border: 1px solid var(--secondary-color);
+    opacity: 0.9;
+}
+#single .page-content table > tbody > tr > td {
+    padding: 0.5rem !important;
+    border: 1px solid var(--secondary-color);
+    background-color: var(--secondary-color) !important;
+    opacity: 0.9;
+}
+
+#single .page-content table > thead > tr {
+    background-color: var(--secondary-color) !important;
+    color: var(--secondary-color) !important;
+}
+
+/* code */
+
+#single .page-content pre {
+  border-radius: 0.7em !important;
+  margin: 5px;
+  margin-bottom: 2em;
+  padding: 2em;
+  background-color: var(--secondary-color) !important;
+  color: var(--text-secondary-color) !important;
+  max-height: 450px;
+}
+
+#single .page-content pre > code {
+  color: var(--text-secondary-color) !important;
+}
+
+#single .page-content code {
+  color: var(--primary-color) !important;
+}
+
+/* kbd and mark */
+
+#single .page-content kbd {
+  color: var(--primary-color) !important;
+  background-color: var(--secondary-color) !important;
+}
+
+#single .page-content mark {
+  color: var(--primary-color) !important;
+  background-color: var(--secondary-color) !important;
+}
+
+/* list */
+
+#single .page-content ol, #single .page-content ul {
+    margin-bottom: 1.2em;
+    padding-left: 1.5em;
+    list-style-position: inside;
+    opacity: 0.9;
+}
+
+#single .page-content ol li li, #single .page-content ul li li {
+    margin-bottom: 0.5em;
+    padding-left: 1.5em;
+}
+
+/* sidebar */
+
+#single aside {
+    background-color: var(--secondary-color);
+    border-radius: .7rem;
+    padding: .7rem 1rem;
+    margin-bottom: 1em;
+}
+
+#single .sticky-sidebar {
+  position: sticky;
+  top: 50px;
+}
+
+/* Tags */
+#single aside.tags h5 {
+    margin: .7em 0;
+    margin-bottom: 1em;
+}
+
+
+#single aside.tags ul.tags-ul li a {
+    padding: 10px 15px;
+    margin-bottom: 2px;
+    border-radius: 8px;
+    background-color: var(--background-color);
+    text-decoration: none;
+    color: var(--text-color);
+}
+
+#single aside.tags ul.tags-ul li {
+    margin-bottom: 1.2rem;
+}
+
+#single aside.tags ul.tags-ul li:hover {
+    opacity: 0.8;
+}
+
+
+/*TOC*/
+#single aside.toc {
+    padding: .7rem 1rem;
+}
+
+#single aside.toc h5 {
+    margin: .7em 0;
+    margin-bottom: 1em;
+    color: var(--text-color);
+}
+
+#single aside.toc .toc-content ol, #single aside.toc .toc-content ul {
+    margin-bottom: 1em;
+    padding-left: .5em;
+    list-style: none;
+    opacity: 0.9;
+}
+
+#single aside.toc .toc-content ol li a, #single aside.toc .toc-content ul li a {
+    font-size: 16px;
+    text-decoration: none;
+    color: var(--text-color);
+    opacity: 0.9;
+}
+
+#single aside.toc .toc-content ol li a:hover, #single aside.toc .toc-content ul li a:hover {
+    color: var(--primary-color);
+    opacity: 1.2;
+}
+
+#single aside.toc .toc-content ol li li, #single aside.toc .toc-content ul li li {
+    padding-left: .7em;
+}
+
+/* Social */
+
+#single aside.social {
+    padding: .7rem 1rem;
+}
+
+#single aside.social h5 {
+    margin: .7em 0;
+    margin-bottom: 1em;
+    color: var(--text-color);
+}
+
+#single aside.social .social-content {
+    margin-bottom: 1em;
+    opacity: 0.9;
+}
+
+#single aside.social .social-content ul {
+    margin-bottom: 1em;
+    opacity: 0.9;
+}
+
+#single aside.social .social-content ul li a {
+    border: 1px solid var(--primary-color);
+    padding: .7rem;
+    color: var(--text-color);
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+#single aside.social .social-content ul li {
+    margin: .7rem .5rem;
+    margin-left: 0;
+}
+
+#single aside.social .social-content ul li:hover a {
+    opacity: .8;
+    color: var(--primary-color);
+}

static/css/theme.css

@@ -1,5 +1,5 @@
 /* light mode */
-.light, *{
+.light > *{
     background-color: var(--background-color) !important;
     color: var(--text-color) !important;
 }