custom modified

assets/css/blog/author.css

@@ -0,0 +1,109 @@
+.author {
+    display: flex;
+    margin-top: 60px;
+}
+
+.author + .author {
+    margin-top: 30px;
+}
+
+.author-image-placeholder {
+    flex-shrink: 0;
+    overflow: hidden;
+    width: 70px;
+    height: 70px;
+    border-radius: 50%;
+}
+
+.author-wrapper {
+    margin-left: 25px;
+    max-width: 550px;
+}
+
+.author-header {
+    display: flex;
+    align-items: center;
+}
+
+.author-header-wrapper {
+    position: relative;
+}
+
+.author-name {
+    position: relative;
+    display: flex;
+    align-items: center;
+    margin-bottom: 0;
+    font-size: 18px;
+    font-weight: 800;
+    cursor: pointer;
+}
+
+.author-name::after {
+    content: "\e92e";
+    margin-left: 1px;
+    font-family: Alto, sans-serif;
+    font-size: 19px;
+}
+
+.author-social {
+    position: absolute;
+    top: 100%;
+    left: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 5px;
+    margin-left: -26px;
+    padding: 8px 0;
+    font-size: 12px;
+    line-height: 1;
+    background-color: var(--dark-gray-color);
+    border-radius: 3px;
+    opacity: 0;
+    transition: opacity 0.2s var(--animation-base), transform 0.2s var(--animation-base);
+    transform: translateY(5px);
+    pointer-events: none;
+}
+
+.author-social::before {
+    content: "\e900";
+    position: absolute;
+    top: -12px;
+    left: 7px;
+    color: var(--dark-gray-color);
+    font-family: Alto, sans-serif;
+    font-size: 19px;
+}
+
+.author-social.enabled {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+}
+
+.author-social-item {
+    padding: 5px 11px;
+    color: var(--white-color);
+    font-weight: 700;
+    white-space: nowrap;
+}
+
+.author-location-icon {
+    position: relative;
+    top: 1px;
+}
+
+.author-bio {
+    margin-top: 8px;
+    font-size: 15px;
+}
+
+.author-location {
+    margin-top: 12px;
+    margin-left: -2px;
+    color: var(--secondary-text-color);
+    font-size: 11px;
+    font-weight: 800;
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+}

assets/css/blog/comment.css

@@ -0,0 +1,9 @@
+.comment-container {
+    margin-top: 45px;
+    padding: 30px 0;
+    background-color: var(--light-gray-color);
+}
+
+.comment-container a {
+    color: var(--primary-color) !important;
+}

assets/css/blog/content.css

@@ -0,0 +1,107 @@
+/* Content refers to styling all page and post content that is
+created within the Ghost editor. The main content handles
+headings, text, images and lists. We deal with cards lower down. */
+
+/* Default vertical spacing */
+.gh-content > * + * {
+    margin-top: 2.8rem;
+    margin-bottom: 0;
+}
+
+/* [id] represents all headings h1-h6, reset all margins */
+.gh-content > [id] {
+    margin: 0;
+    font-weight: 800;
+}
+
+.has-serif-title .gh-content > [id] {
+    font-family: var(--font-serif);
+}
+
+/* Add back a top margin to all headings, unless a heading
+is the very first element in the post content */
+.gh-content > [id]:not(:first-child) {
+    margin-top: 4.8rem;
+}
+
+/* Add a small margin between a heading and anything after it */
+.gh-content > [id] + * {
+    margin-top: 1.6rem;
+}
+
+.gh-content > [id] + .kg-card {
+    margin-top: 2.8rem;
+}
+
+/* A larger margin before/after HRs and blockquotes */
+.gh-content > hr,
+.gh-content > blockquote {
+    position: relative;
+    margin-top: 4.8rem;
+}
+
+.gh-content > hr + *,
+.gh-content > blockquote + * {
+    margin-top: 4.8rem;
+}
+
+/* Cards */
+.gh-content :not(.kg-card):not([id]) + .kg-card {
+    margin-top: 4.8rem;
+}
+
+.gh-content .kg-card + :not(.kg-card) {
+    margin-top: 4.8rem;
+}
+
+/* Now the content typography styles */
+.gh-content > h2 {
+    font-size: 2.3rem;
+}
+
+.gh-content > h3 {
+    font-size: 2rem;
+    font-weight: 600;
+}
+
+.gh-content a {
+    color: var(--ghost-accent-color);
+    text-decoration: underline;
+    word-break: break-word;
+}
+
+.gh-content > ol,
+.gh-content > ul,
+.gh-content > dl,
+.gh-content > p {
+    font-size: 1.7rem;
+}
+
+.gh-content .kg-callout-card .kg-callout-text,
+.gh-content .kg-toggle-card .kg-toggle-content > ol,
+.gh-content .kg-toggle-card .kg-toggle-content > ul,
+.gh-content .kg-toggle-card .kg-toggle-content > p {
+    font-size: 1.6rem;
+}
+
+.has-serif-body .gh-content > blockquote,
+.has-serif-body .gh-content > ol,
+.has-serif-body .gh-content > ul,
+.has-serif-body .gh-content > dl,
+.has-serif-body .gh-content > p,
+.has-serif-body .gh-content .kg-callout-text,
+.has-serif-body .gh-content .kg-toggle-content > ol,
+.has-serif-body .gh-content .kg-toggle-content > ul,
+.has-serif-body .gh-content .kg-toggle-content > p {
+    font-family: var(--font-serif);
+}
+
+.gh-content > ul,
+.gh-content > ol,
+.gh-content > dl {
+    padding-left: 4rem;
+}
+
+.gh-content li + li {
+    margin-top: 0.8rem;
+}

assets/css/blog/featured.css

@@ -0,0 +1,27 @@
+.featured-posts {
+    margin: 45px 0;
+}
+
+.featured-posts .post {
+    margin-bottom: 0;
+}
+
+.featured-posts .post-header,
+.featured-posts .post-title {
+    margin-bottom: 0;
+}
+
+.featured-posts .post-header {
+    text-align: center;
+}
+
+.featured-posts .post-title {
+    font-size: 18px;
+    line-height: 1.3;
+}
+
+@media (max-width: 767px) {
+    .featured-posts {
+        margin: 0;
+    }
+}

assets/css/blog/navigation.css

@@ -0,0 +1,18 @@
+.navigation {
+    display: flex;
+    margin-top: -15px;
+}
+
+.navigation-item {
+    flex: 1;
+}
+
+.navigation-item-link {
+    font-size: 17px;
+    font-weight: 700;
+}
+
+.navigation-next {
+    margin-left: 30px;
+    text-align: right;
+}

assets/css/blog/pagination.css

@@ -0,0 +1,26 @@
+.pagination {
+    display: flex;
+    align-items: center;
+    margin-top: 30px;
+    margin-bottom: 45px;
+}
+
+.pagination-left,
+.pagination-right {
+    flex: 2;
+    font-weight: 700;
+}
+
+.pagination-right {
+    text-align: right;
+}
+
+.page-number {
+    padding: 16px 16px;
+    border: 1px solid var(--mid-gray-color);
+    color: var(--secondary-text-color);
+    font-size: 13px;
+    line-height: 0;
+    font-weight: 700;
+    border-radius: 30px;
+}