Rename css variables, remove ugly footer and italicize description

This commit is contained in:
Yash Mehrotra
2021-08-05 17:09:25 +05:30
parent ab152b7b9b
commit cdfbce4f3a
4 changed files with 31 additions and 31 deletions

View File

@@ -3,6 +3,7 @@
{{- partial "head.html" . -}}
<body>
<script type="text/javascript">
// Immediately set theme on page load
setThemeByUserPref();
</script>
{{- partial "header.html" . -}}

View File

@@ -2,7 +2,7 @@
<div class="post-header-section">
<h1>{{ .Title }}</h1>
<small role="doc-subtitle">This is a subheading</small>
<small role="doc-subtitle">{{ .Description }}</small>
<p class="post-date">
{{ dateFormat "January 2, 2006" .Date }}
</p>

View File

@@ -1,25 +1,25 @@
:root {
--dark-bg-color: 18, 18, 18;
--dark-primary-color: 18, 18, 18;
--dark-text-color: white;
--dark-tags-bg-color: #444444;
--dark-header-divider-color: #484848;
--dark-secondary-color: #444444;
--dark-secondary-color: #444444;
}
html {
background-color: rgb(var(--dark-bg-color));
background-color: rgb(var(--dark-primary-color));
color: var(--dark-text-color);
}
.header {
background-color: rgba(var(--dark-bg-color), 0.95);
background-color: rgba(var(--dark-primary-color), 0.95);
}
.nav-hamburger-list {
background: rgba(var(--dark-bg-color), 1);
background: rgba(var(--dark-primary-color), 1);
}
.nav-links .nav-icons-divider {
color: var(--dark-header-divider-color);
color: var(--dark-secondary-color);
}
a:hover .feather-moon {
@@ -29,16 +29,16 @@ a:hover .feather-moon {
.post-tags .post-tag:hover {
background-color: var(--dark-text-color);
color: rgb(var(--dark-bg-color));
color: rgb(var(--dark-primary-color));
}
.tags-list .post-tags .post-tag a .tag-posts-count {
background-color: var(--dark-tags-bg-color);
background-color: var(--dark-secondary-color);
}
.tags-list .post-tags .post-tag:hover a .tag-posts-count {
background-color: var(--dark-text-color);
color: rgb(var(--dark-bg-color));
color: rgb(var(--dark-primary-color));
}
.footer {
@@ -46,16 +46,16 @@ a:hover .feather-moon {
}
blockquote {
border-left-color: var(--dark-header-divider-color);
border-left-color: var(--dark-secondary-color);
}
table thead {
background-color: var(--dark-header-bg-color);
background-color: var(--dark-secondary-color);
}
table td,
table th {
border-bottom-color: var(--dark-header-divider-color);
border-bottom-color: var(--dark-secondary-color);
}
:not(pre) > code {

View File

@@ -1,14 +1,13 @@
:root {
--content-width: 810px;
--light-bg-color: 255, 255, 255;
--light-primary-color: 255, 255, 255;
--light-secondary-color: #dddddd;
--light-text-color: black;
--light-tags-bg-color: #dddddd;
--light-header-divider-color: #dfdfdf;
}
html {
background-color: rgb(var(--light-bg-color));
background-color: rgb(var(--light-primary-color));
color: var(--light-text-color);
font-family: "Jost", sans-serif;
font-weight: 400;
@@ -42,7 +41,7 @@ img {
/* HEADER */
.header {
background-color: rgba(var(--light-bg-color), 0.95);
background-color: rgba(var(--light-primary-color), 0.95);
color: inherit;
font-size: 1.2rem;
height: 50px;
@@ -104,7 +103,7 @@ img {
.nav-links .nav-icons-divider {
border-color: inherit;
border-left: 1.5px solid;
color: var(--light-header-divider-color);
color: var(--light-secondary-color);
margin: 0 10px;
}
.nav-links .dark-theme-toggle:hover {
@@ -132,9 +131,9 @@ a:hover .feather-sun {
width: 24px;
}
.nav-hamburger-list {
background: rgb(var(--light-bg-color));
border-bottom: solid 1.5px var(--light-header-divider-color);
border-top: solid 1.5px var(--light-header-divider-color);
background: rgb(var(--light-primary-color));
border-bottom: solid 1.5px var(--light-secondary-color);
border-top: solid 1.5px var(--light-secondary-color);
list-style-type: none;
margin: 0;
padding: 0;
@@ -151,7 +150,6 @@ a:hover .feather-sun {
/* FOOTER */
.footer {
bottom: 0;
border-top: 0.5px solid var(--light-header-divider-color);
color: inherit;
left: 0;
overflow: hidden;
@@ -205,7 +203,7 @@ a:hover .feather-sun {
}
.post-tags .post-tag:hover {
background-color: var(--light-text-color);
color: rgb(var(--light-bg-color));
color: rgb(var(--light-primary-color));
}
.post-tag a {
color: inherit;
@@ -246,7 +244,7 @@ pre code {
}
blockquote {
border-left: 2px solid var(--light-header-divider-color);
border-left: 2px solid var(--light-secondary-color);
color: grey;
padding-left: 1rem;
}
@@ -261,7 +259,7 @@ table {
}
table thead {
background-color: var(--light-bg-color);
background-color: var(--light-secondary-color);
}
table td,
@@ -270,7 +268,7 @@ table th {
}
table td {
border-bottom: 1px solid var(--light-header-divider-color);
border-bottom: 1px solid var(--light-secondary-color);
}
/* HOME PAGE */
@@ -318,7 +316,8 @@ main#content .post {
font-size: 1.2rem;
}
.post [role="doc-subtitle"] {
font-size: 1.3rem;
font-size: 1.2rem;
font-style: italic;
}
.post .post-date {
color: gray;
@@ -367,7 +366,7 @@ main#content .post {
padding: 5px 8px;
}
.tags-list .post-tags .post-tag a .tag-posts-count {
background-color: var(--light-tags-bg-color);
background-color: var(--light-secondary-color);
border-radius: inherit;
color: inherit;
opacity: 0.8;
@@ -377,7 +376,7 @@ main#content .post {
}
.tags-list .post-tags .post-tag:hover a .tag-posts-count {
background-color: var(--light-text-color);
color: rgb(var(--light-bg-color));
color: rgb(var(--light-primary-color));
}
@media only screen and (max-width: 820px) {