├── .gitignore ├── LICENSE ├── README.md └── styles ├── articles.css ├── home.css └── pages.css /.gitignore: -------------------------------------------------------------------------------- 1 | .history -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Pankaj 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ARCHIVED - I DON'T USE HASHNODE FOR MY BLOGS ANYMORE 2 | 3 | ## Hashnode Custom CSS 4 | 5 | Hashnode allows you to add custom styles for your blog. This custom CSS tweaks a lot of things in both light and dark mode. 6 | 7 | CSS template files can be accessed in `styles` folder. All you have to do is, copy and paste these styles in their respective code editors on Hashnode Custom CSS page. 8 | 9 | ## What changes are offered by these custom styles? 10 | 11 | 1. Sticky header on home, articles, and pages 12 | 2. Minor tweaks in the header 13 | 3. Light mode theme for the code editor 14 | 4. Text heading styles 15 | 5. Font color improvements in dark mode 16 | 6. Shaky effect on reactions 17 | 18 | ## Demo 19 | 20 | REMOVED 21 | -------------------------------------------------------------------------------- /styles/articles.css: -------------------------------------------------------------------------------- 1 | .blog-impressum > .prose { padding-bottom: 3rem; } 2 | .blog-impressum > .prose > h3 { visibility: hidden; } 3 | 4 | .dark .blog-impressum { border: 1px solid #3c4654; } 5 | 6 | .dark .dark\:bg-brand-dark-grey-900 { background-color: #222830; } 7 | .dark .dark\:bg-brand-black { background-color: #222830; } 8 | .dark .blog-header { background-color: #222830; } 9 | .dark .text-brand-blue { color: #aabbcc; } 10 | .dark .dark\:border-brand-grey-800 { border-color: #222830; } 11 | .dark .blog-series { border-color: #38404c; } 12 | .dark .dark\:bg-brand-grey-900 { background-color: #1b2021; } 13 | 14 | pre { border: 1px solid gainsboro; } 15 | h2 { letter-spacing: 1px; display: inline-block; position: relative; z-index: 2; } 16 | h2:before { content: ''; display: block; height: 14px; width: 104%; background: #88e0bb; position: absolute; bottom: 1px; z-index: -1; left: -2%; } 17 | .dark h2:before { content: ''; display: block; height: 10px; width: 104%; background: #027565; position: absolute; bottom: 1px; z-index: -1; left: -2%; } 18 | 19 | strong { letter-spacing: 1px; display: inline-block; position: relative; z-index: 2; } 20 | strong:before { content: ''; display: block; height: 9px; width: 100%; background: #b9f033; position: absolute; bottom: 7px; z-index: -1; left: 0; } 21 | .dark strong:before { content: ''; display: block; height: 2px; width: 100%; background: #ced100; position: absolute; bottom: 5px; z-index: -1; left: 0; transform: rotate(179deg); } 22 | 23 | .dark .prose a { color: #93b0ff; } 24 | 25 | .prose pre { color: #373737; background-color: #ffffff; } 26 | 27 | .hljs-params, .hljs-class .hljs-title { color: #166fc1; } 28 | .dark .hljs-params, .hljs-class .hljs-title { color: #68aff0; } 29 | 30 | .hljs-code, .hljs-title, .hljs-section, .hljs-selector-class { color: #63bd00; } 31 | .hljs-comment { color: #afafaf; } 32 | .dark .hljs-comment { color: #5a5a5a; } 33 | .hljs, .hljs-tag, .hljs-subst { color: #0e0e0e; } 34 | .dark .hljs, .hljs-tag, .hljs-subst { color: #f8f8f2; } 35 | .dark .prose pre { color: #e2e8f0; background-color: #222830; border-color: #45505e; } 36 | .dark .hljs-string, .dark .hljs-type, .dark .hljs-built_in, .dark .hljs-builtin-name, 37 | .dark .hljs-selector-id, .dark .hljs-selector-attr, .dark .hljs-selector-pseudo, .dark .hljs-addition, 38 | .dark .hljs-variable, .dark .hljs-template-variable { color: #9db0ff; } 39 | .dark .hljs-code, .dark .hljs-title, .dark .hljs-section, .dark .hljs-selector-class { color: #47cd92; } 40 | .dark .hljs-keyword, .hljs-selector-tag, .hljs-name, .hljs-attr { color: #ff82af; } 41 | 42 | .hljs-string, .hljs-type, .hljs-built_in, .hljs-builtin-name, 43 | .hljs-selector-id, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-addition, 44 | .hljs-variable, .hljs-template-variable { color: #035af9; } 45 | 46 | .blog-post-area { padding-top: 20px; } 47 | .post-cover { border-radius: 8px; } 48 | .dark .border-brand-blue { border-color: #4c5869; } 49 | .border-brand-blue { border-color: #e0e0e0; } 50 | .button-transparent.active { color: #5c5c5c; } 51 | .dark .button-transparent.active { color: #949494; } 52 | .dark .button-primary { border-color: #c5c5c5; color: #eae7e7; } 53 | 54 | .btn-reaction-spp:hover { 55 | animation: shake 0.8s cubic-bezier(.36,.07,.19,.97) both; 56 | transform: translate3d(0, 0, 0); 57 | backface-visibility: hidden; 58 | perspective: 1000px; 59 | } 60 | 61 | @keyframes shake { 62 | 10%, 90% { transform: translate3d(-1px, 0, 0); } 63 | 20%, 80% { transform: translate3d(2px, 0, 0); } 64 | 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 65 | 40%, 60% { transform: translate3d(4px, 0, 0); } 66 | } 67 | 68 | .blog-post-detail-card { padding-top: 1rem; } 69 | 70 | @media (min-width: 640px) { 71 | .blog-author-card { padding-top: 2rem; } 72 | } 73 | 74 | @media (min-width: 768px) { 75 | .blog-author-card { padding-top: 2rem; } 76 | } 77 | 78 | @media (min-width: 1024px) { 79 | .blog-author-card { padding-top: 3rem; } 80 | .blog-header { position: fixed; width: 100%; background: #fff; } 81 | .dark .blog-header { position: fixed; width: 100%; } 82 | .blog-header + div { padding-top: 8.4rem; } 83 | } 84 | 85 | @media (min-width: 1280px) { 86 | .blog-author-card { padding-top: 2rem; } 87 | .blog-header + div { padding-top: 9.5rem; } 88 | .sticky { top: 90px !important; } 89 | } 90 | 91 | @media (min-width: 1600px) { 92 | .blog-author-card { padding-top: 1.5rem; } 93 | } 94 | -------------------------------------------------------------------------------- /styles/home.css: -------------------------------------------------------------------------------- 1 | .blog-impressum > .prose { padding-bottom: 3rem; } 2 | .blog-impressum > .prose > h3 { visibility: hidden; } 3 | 4 | .dark .blog-impressum { border: 1px solid #3c4654; } 5 | 6 | .dark .blog-header { background-color: #222830; } 7 | .blog-header + div { border-bottom: 1px solid #eee; } 8 | .dark .dark\:bg-brand-dark-grey-900 { background-color: #222830; } 9 | .dark .dark\:bg-brand-black { background-color: #222830; } 10 | .dark .blog-header + div { border-color: #2d3748; border-color: rgba(45, 55, 72, 1); background-color: #222830; } 11 | .dark .prose a { color: #93b0ff; } 12 | .blog-author-card { padding-top: 2rem; padding-bottom: 0; margin-bottom: 2.2rem; } 13 | .blog-content-area { padding-top: 3rem; } 14 | .blog-subscription-form { margin-bottom: 3rem; } 15 | .blog-follow-wrapper { display: none; } 16 | .blog-author-area-photo { border: 3px dotted #36c1a2; } 17 | .dark .button-primary { color: #fff; border-color: #fff; } 18 | 19 | @media (min-width: 640px) { 20 | .blog-author-card { padding-top: 2rem; } 21 | } 22 | 23 | @media (min-width: 768px) { 24 | .blog-author-card { padding-top: 2rem; } 25 | } 26 | 27 | @media (min-width: 1024px) { 28 | .blog-author-card { padding-top: 3rem; } 29 | .blog-header { position: fixed; width: 100%; background: #fff; } 30 | .dark .blog-header { position: fixed; width: 100%; } 31 | .blog-header + div { padding-top: 8.4rem; } 32 | } 33 | 34 | @media (min-width: 1280px) { 35 | .blog-author-card { padding-top: 2rem; } 36 | .blog-header + div { padding-top: 9.5rem; } 37 | } 38 | 39 | @media (min-width: 1600px) { 40 | .blog-author-card { padding-top: 1.5rem; } 41 | } 42 | -------------------------------------------------------------------------------- /styles/pages.css: -------------------------------------------------------------------------------- 1 | .blog-impressum > .prose { padding-bottom: 3rem; } 2 | .blog-impressum > .prose > h3 { visibility: hidden; } 3 | 4 | .dark .blog-impressum { border: 1px solid #3c4654; } 5 | 6 | .dark .dark\:bg-black { background-color: #222830; } 7 | .dark .dark\:bg-brand-black { background-color: #222830; } 8 | .dark .blog-header { background-color: #222830; } 9 | .blog-header + div { border-bottom: 1px solid #eee; } 10 | .dark .blog-header + div { border-color: #2d3748; border-color: rgba(45, 55, 72, 1); } 11 | .dark .prose a { color: #93b0ff; } 12 | .blog-page-card { padding-top: 2rem; } 13 | 14 | @media (min-width: 640px) { 15 | .blog-author-card { padding-top: 2rem; } 16 | } 17 | 18 | @media (min-width: 768px) { 19 | .blog-author-card { padding-top: 2rem; } 20 | } 21 | 22 | @media (min-width: 1024px) { 23 | .blog-author-card { padding-top: 3rem; } 24 | .blog-header { position: fixed; width: 100%; background: #fff; } 25 | .dark .blog-header { position: fixed; width: 100%; } 26 | .blog-header + div { padding-top: 8.4rem; } 27 | } 28 | 29 | @media (min-width: 1280px) { 30 | .blog-author-card { padding-top: 2rem; } 31 | .blog-header + div { padding-top: 9.5rem; } 32 | } 33 | 34 | @media (min-width: 1600px) { 35 | .blog-author-card { padding-top: 1.5rem; } 36 | } 37 | --------------------------------------------------------------------------------