<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Celtrius' Dev Blog]]></title><description><![CDATA[Celtrius' small unity development blog.]]></description><link>https://blog.celtrius.net</link><image><url>https://cdn.hashnode.com/res/hashnode/image/upload/v1671557892730/Lc1atCuZg.webp</url><title>Celtrius&apos; Dev Blog</title><link>https://blog.celtrius.net</link></image><generator>RSS for Node</generator><lastBuildDate>Sun, 10 May 2026 13:08:26 GMT</lastBuildDate><atom:link href="https://blog.celtrius.net/rss.xml" rel="self" type="application/rss+xml"/><language><![CDATA[en]]></language><ttl>60</ttl><item><title><![CDATA[Welcome to my blog!]]></title><description><![CDATA[Hey! If you are reading this, you have successfully visited my blog on hashnode.com.
As you might have already noticed, I edited my blog page with some custom CSS. So if you like this design and want to apply it to your own page, feel free to copy th...]]></description><link>https://blog.celtrius.net/welcome-to-my-blog</link><guid isPermaLink="true">https://blog.celtrius.net/welcome-to-my-blog</guid><category><![CDATA[coding]]></category><category><![CDATA[CSS]]></category><dc:creator><![CDATA[Celtrius Studios]]></dc:creator><pubDate>Tue, 20 Dec 2022 17:44:47 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/_yMciiStJyY/upload/99147493e4238fd4c57ecaeca0c47131.jpeg" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>Hey! If you are reading this, you have successfully visited my blog on hashnode.com.</p>
<p>As you might have already noticed, I edited my blog page with some custom CSS. So if you like this design and want to apply it to your own page, feel free to copy the code down below:</p>
<p>Please note that this project is still not finished and changes in the hashnode front end may break this CSS code at any point in time.  </p>
<p><strong>Homepage:</strong></p>
<pre><code class="lang-css"><span class="hljs-comment">/*###############################*/</span>
<span class="hljs-comment">/*Currently disabled: */</span>
<span class="hljs-selector-class">.blog-theme-switcher</span>{ <span class="hljs-comment">/*disables the darkmode / lightmode switcher which is apparently not allowed so I removed this edit*/</span>

    <span class="hljs-comment">/*display: none !important;*/</span>
}

<span class="hljs-comment">/*###############################*/</span>
<span class="hljs-comment">/*General Styling: */</span>


<span class="hljs-selector-class">.dark</span> <span class="hljs-selector-class">.blog-header</span>{ <span class="hljs-comment">/*Adds a dropshadow to the header*/</span>
    <span class="hljs-attribute">-webkit-box-shadow</span>: <span class="hljs-number">0px</span> <span class="hljs-number">10px</span> <span class="hljs-number">16px</span> <span class="hljs-number">5px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">27</span>,<span class="hljs-number">27</span>,<span class="hljs-number">27</span>,<span class="hljs-number">0.57</span>); 
    <span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">0px</span> <span class="hljs-number">10px</span> <span class="hljs-number">16px</span> <span class="hljs-number">5px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">27</span>,<span class="hljs-number">27</span>,<span class="hljs-number">27</span>,<span class="hljs-number">0.57</span>);
}

<span class="hljs-selector-class">.dark</span> <span class="hljs-selector-tag">body</span>{ <span class="hljs-comment">/*Changes the general body color (visible when zooming out)*/</span>
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#1b1b1b</span> <span class="hljs-meta">!important</span>;
}

<span class="hljs-selector-id">#__next</span> <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:first-child</span>{ <span class="hljs-comment">/* Changes the color of the Newsletter Subscribtion Form on the Home Page */</span>
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#00000000</span>;
}

* <span class="hljs-selector-tag">div</span>{ <span class="hljs-comment">/* Changes the overall div border color */</span>
    <span class="hljs-attribute">border-color</span>: <span class="hljs-number">#323232</span> <span class="hljs-meta">!important</span>
}

<span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:has(.blog-sidebar-header)</span> { <span class="hljs-comment">/* Changes the sidebar color */</span>
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#202020</span> <span class="hljs-meta">!important</span>;
}

<span class="hljs-selector-class">.blog-main-logo</span>{ <span class="hljs-comment">/*Changes Logo in Header and Sidebar*/</span>
   <span class="hljs-attribute">content</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">'https://raw.githubusercontent.com/Celtrius/CeltriusHome/main/WhiteBanner.webp'</span>); 
}

<span class="hljs-selector-class">.blog-header</span> <span class="hljs-selector-class">.blog-main-logo</span>{ <span class="hljs-comment">/*Changes Logo and its width*/</span>
    <span class="hljs-attribute">content</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">'https://raw.githubusercontent.com/Celtrius/CeltriusHome/main/WhiteBanner.webp'</span>);
    <span class="hljs-attribute">width</span>: <span class="hljs-number">30rem</span>;
}

<span class="hljs-selector-class">.blog-sidebar-header</span> <span class="hljs-selector-class">.blog-main-logo</span>{ <span class="hljs-comment">/*Changes Logo and its width in the sidebar*/</span>
    <span class="hljs-attribute">content</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">'https://raw.githubusercontent.com/Celtrius/CeltriusHome/main/WhiteBanner.webp'</span>);
    <span class="hljs-attribute">width</span>: <span class="hljs-number">13rem</span>;
}

<span class="hljs-keyword">@media</span> (<span class="hljs-attribute">max-width:</span> <span class="hljs-number">767px</span>){ <span class="hljs-comment">/* Mobile Edits*/</span>
    <span class="hljs-selector-class">.blog-header</span> <span class="hljs-selector-class">.blog-main-logo</span>{ <span class="hljs-comment">/*Logo in Header*/</span>
    <span class="hljs-attribute">width</span>: <span class="hljs-number">75vw</span>;
    }
    <span class="hljs-selector-class">.blog-sidebar-header</span> <span class="hljs-selector-class">.blog-main-logo</span>{ <span class="hljs-comment">/*Logo in Sidebar*/</span>
    <span class="hljs-attribute">width</span>: <span class="hljs-number">13rem</span>;
    }
}

<span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:has(.blog-sidebar-header)</span>{
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#242525</span> <span class="hljs-meta">!important</span>;
}

<span class="hljs-comment">/*###############################*/</span>
<span class="hljs-comment">/* Post Catalogue Edits: */</span>

<span class="hljs-selector-class">.dark</span> <span class="hljs-selector-class">.blog-article-card-cover</span>{ <span class="hljs-comment">/*Edits big Card*/</span>
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#303030</span> <span class="hljs-meta">!important</span>;
    <span class="hljs-attribute">border-color</span>: <span class="hljs-number">#3c3c3c</span> <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-class">.dark</span> <span class="hljs-selector-class">.blog-featured-container</span> &gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:not(.blog-article-card)</span> { <span class="hljs-comment">/* Edits smaller cards*/</span>
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#303030</span> <span class="hljs-meta">!important</span>;;
    <span class="hljs-attribute">border-color</span>: <span class="hljs-number">#3c3c3c</span> <span class="hljs-meta">!important</span>;
}

<span class="hljs-comment">/*###############################*/</span>
<span class="hljs-comment">/*Button Edits: */</span>

<span class="hljs-selector-class">.dark</span> <span class="hljs-selector-class">.blog-featured-area</span> { <span class="hljs-comment">/* Changes the Featured Post Background Color */</span>
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#242525</span> <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-class">.dark</span> <span class="hljs-selector-class">.blog-footer-area</span>{ <span class="hljs-comment">/* Footer Area Color */</span>
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#1b1b1b</span> <span class="hljs-meta">!important</span>;
    <span class="hljs-attribute">border-color</span>: <span class="hljs-number">#323232</span> <span class="hljs-meta">!important</span>;

}
<span class="hljs-selector-class">.dark</span> <span class="hljs-selector-class">.blog-author-container</span>{ <span class="hljs-comment">/* Footer Area Color */</span>
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#202020</span> <span class="hljs-meta">!important</span>;
}

<span class="hljs-comment">/*###############################*/</span>
<span class="hljs-comment">/*Subscribe to Newsletter Box: */</span>

<span class="hljs-selector-class">.dark</span> <span class="hljs-selector-class">.blog-subscription-form-wrapper</span> {
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#1b1b1b</span> <span class="hljs-meta">!important</span>;
}

<span class="hljs-selector-class">.dark</span> <span class="hljs-selector-tag">input</span><span class="hljs-selector-class">.blog-subscription-form-input</span> {
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#202020</span>;
    <span class="hljs-attribute">border-color</span>: <span class="hljs-number">#282828</span>;
}
<span class="hljs-selector-class">.dark</span> <span class="hljs-selector-tag">input</span><span class="hljs-selector-class">.blog-subscription-form-input</span><span class="hljs-selector-pseudo">:focus</span> {
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#202020</span>;
    <span class="hljs-attribute">border-color</span>: <span class="hljs-number">#282828</span>;
}


<span class="hljs-comment">/*###############################*/</span>
<span class="hljs-comment">/*Button Edits: */</span>

<span class="hljs-selector-tag">button</span><span class="hljs-selector-class">.blog-follow-button</span> {  <span class="hljs-comment">/* Edits Follow Button in header*/</span>
    <span class="hljs-attribute">background-color</span>:<span class="hljs-number">#ff224e</span>; 
    <span class="hljs-attribute">border-color</span>: <span class="hljs-number">#ff224e</span>;
    <span class="hljs-attribute">color</span>: <span class="hljs-number">#ffffff</span>;
}
<span class="hljs-selector-tag">button</span><span class="hljs-selector-class">.blog-more-icon</span> { <span class="hljs-comment">/* Edits Dropdown Button in header*/</span>
    <span class="hljs-attribute">background-color</span>:<span class="hljs-number">#ff224e</span>; 
    <span class="hljs-attribute">border-color</span>: <span class="hljs-number">#ff224e</span>;
    <span class="hljs-attribute">color</span>: <span class="hljs-number">#ffffff</span>;
}
<span class="hljs-selector-tag">button</span><span class="hljs-selector-class">.blog-subscription-form-button</span>{ <span class="hljs-comment">/* Edits Subscribtion Button in the Newsletter Section at the bottom of the page*/</span>
    <span class="hljs-attribute">background-color</span>:<span class="hljs-number">#ff224e</span> <span class="hljs-meta">!important</span>; 
    <span class="hljs-attribute">border-color</span>: <span class="hljs-number">#ff224e</span>;
    <span class="hljs-attribute">color</span>: <span class="hljs-number">#ffffff</span> <span class="hljs-meta">!important</span>;
}

<span class="hljs-selector-class">.dark</span> <span class="hljs-selector-tag">a</span><span class="hljs-selector-attr">[aria-label=<span class="hljs-string">"Publish with Hashnode"</span>]</span> { <span class="hljs-comment">/*Changes the background color of the "Publish with Hashnode" Button in the Footer*/</span>
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#242525</span> <span class="hljs-meta">!important</span>;
    <span class="hljs-attribute">border-color</span>: <span class="hljs-number">#302f2f</span> <span class="hljs-meta">!important</span>;
}

<span class="hljs-comment">/*###############################*/</span>
<span class="hljs-comment">/*Hasnode More Drop Down Edits: */</span>

<span class="hljs-selector-class">.dark</span> <span class="hljs-selector-tag">div</span><span class="hljs-selector-attr">[data-id=<span class="hljs-string">"hashnode-more-dropdown"</span>]</span>{ <span class="hljs-comment">/*Adds a shadow to the Hashnode More Dropdown when not logged in*/</span>
    <span class="hljs-attribute">-webkit-box-shadow</span>: <span class="hljs-number">0px</span> <span class="hljs-number">0px</span> <span class="hljs-number">16px</span> <span class="hljs-number">5px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0.3</span>); 
    <span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">0px</span> <span class="hljs-number">0px</span> <span class="hljs-number">16px</span> <span class="hljs-number">5px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0.3</span>);
    <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">15px</span>;
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#1b1b1b</span> <span class="hljs-meta">!important</span>;
}

<span class="hljs-selector-tag">div</span><span class="hljs-selector-attr">[data-id=<span class="hljs-string">"hashnode-more-dropdown"</span>]</span> <span class="hljs-selector-tag">a</span><span class="hljs-selector-attr">[href=<span class="hljs-string">"https://hashnode.com/login"</span>]</span>{ <span class="hljs-comment">/* Changes the Color of the Button inside the Hashnode More Dropdown*/</span>
    <span class="hljs-attribute">background-color</span>:<span class="hljs-number">#ff224e</span>; 
    <span class="hljs-attribute">border-color</span>: <span class="hljs-number">#ff224e</span>;
    <span class="hljs-attribute">color</span>: <span class="hljs-number">#ffffff</span>;
}

<span class="hljs-selector-tag">path</span><span class="hljs-selector-attr">[d=<span class="hljs-string">"M4.39 18.71c-5.133 5.131-5.133 13.449 0 18.58l14.868 14.862c5.133 5.13 13.454 5.13 18.586 0L52.713 37.29c5.132-5.13 5.132-13.448 0-18.579L37.844 3.848c-5.132-5.13-13.453-5.13-18.586 0L4.39 18.71Zm30.666 15.793a9.193 9.193 0 0 0 0-13.006 9.2 9.2 0 0 0-13.01 0 9.193 9.193 0 0 0 0 13.006 9.202 9.202 0 0 0 13.01 0Z"</span>]</span>{
    <span class="hljs-comment">/* Changes the Color of the Hashnode SVG Logo*/</span>
    <span class="hljs-attribute">fill</span>: <span class="hljs-number">#ff214f</span> <span class="hljs-meta">!important</span>;
}
</code></pre>
<p>Articles:</p>
<pre><code class="lang-css">* <span class="hljs-selector-tag">div</span>{ <span class="hljs-comment">/* Changes the overall div border color */</span>
    <span class="hljs-attribute">border-color</span>: <span class="hljs-number">#323232</span> <span class="hljs-meta">!important</span>
}

<span class="hljs-selector-class">.blog-main-logo</span>{ <span class="hljs-comment">/*Changes Logo and its width*/</span>
    <span class="hljs-attribute">content</span>: <span class="hljs-built_in">url</span>(https://i.imgur.com/YFASdcD.png);
    <span class="hljs-attribute">width</span>: <span class="hljs-number">50%</span>;
}
<span class="hljs-keyword">@media</span> (<span class="hljs-attribute">max-width:</span> <span class="hljs-number">921px</span>){
    <span class="hljs-selector-class">.blog-main-logo</span>{ <span class="hljs-comment">/*Changes Logo and its width for mobile devices*/</span>
    <span class="hljs-attribute">width</span>: <span class="hljs-number">80%</span>;
    }
}

<span class="hljs-selector-class">.blog-article-page</span>{
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#242525</span> <span class="hljs-meta">!important</span>;
}

<span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:has(.blog-sidebar-header)</span>{
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#242525</span> <span class="hljs-meta">!important</span>;
}


<span class="hljs-selector-class">.dark</span> <span class="hljs-selector-class">.blog-article-page</span>{
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#242525</span> <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-class">.dark</span> <span class="hljs-selector-class">.blog-post-detail-card</span>{
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#202020</span> <span class="hljs-meta">!important</span>;
}

<span class="hljs-selector-class">.dark</span> <span class="hljs-selector-tag">body</span>{ <span class="hljs-comment">/*Changes the general body color (visible when zooming out)*/</span>
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#1b1b1b</span> <span class="hljs-meta">!important</span>;
}

<span class="hljs-selector-class">.dark</span> <span class="hljs-selector-tag">body</span> &gt;<span class="hljs-selector-id">#__next</span>&gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:first-child</span> {
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#242525</span> <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-class">.dark</span> <span class="hljs-selector-class">.blog-footer-area</span>{ <span class="hljs-comment">/* Footer Area Color */</span>
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#1b1b1b</span> <span class="hljs-meta">!important</span>;
    <span class="hljs-attribute">border-color</span>: <span class="hljs-number">#323232</span> <span class="hljs-meta">!important</span>;

}

<span class="hljs-selector-tag">button</span><span class="hljs-selector-attr">[variant=<span class="hljs-string">"primary"</span>]</span>{
    <span class="hljs-attribute">background-color</span>:<span class="hljs-number">#ff224e</span> <span class="hljs-meta">!important</span>; 
    <span class="hljs-attribute">border-color</span>: <span class="hljs-number">#ff224e</span> <span class="hljs-meta">!important</span>;
    <span class="hljs-attribute">color</span>: <span class="hljs-number">#ffffff</span> <span class="hljs-meta">!important</span>;
}


<span class="hljs-comment">/*###############################*/</span>
<span class="hljs-comment">/*Button Edits: */</span>

<span class="hljs-selector-tag">button</span><span class="hljs-selector-class">.blog-follow-button</span> {  <span class="hljs-comment">/* Edits Follow Button in header*/</span>
    <span class="hljs-attribute">background-color</span>:<span class="hljs-number">#ff224e</span>; 
    <span class="hljs-attribute">border-color</span>: <span class="hljs-number">#ff224e</span>;
    <span class="hljs-attribute">color</span>: <span class="hljs-number">#ffffff</span>;
}
<span class="hljs-selector-tag">button</span><span class="hljs-selector-class">.blog-more-icon</span> { <span class="hljs-comment">/* Edits Dropdown Button in header*/</span>
    <span class="hljs-attribute">background-color</span>:<span class="hljs-number">#ff224e</span>; 
    <span class="hljs-attribute">border-color</span>: <span class="hljs-number">#ff224e</span>;
    <span class="hljs-attribute">color</span>: <span class="hljs-number">#ffffff</span>;
}
<span class="hljs-selector-tag">button</span><span class="hljs-selector-class">.blog-subscription-form-button</span>{ <span class="hljs-comment">/* Edits Subscribtion Button in the Newsletter Section at the bottom of the page*/</span>
    <span class="hljs-attribute">background-color</span>:<span class="hljs-number">#ff224e</span> <span class="hljs-meta">!important</span>; 
    <span class="hljs-attribute">border-color</span>: <span class="hljs-number">#ff224e</span>;
    <span class="hljs-attribute">color</span>: <span class="hljs-number">#ffffff</span> <span class="hljs-meta">!important</span>;
}

<span class="hljs-selector-class">.dark</span> <span class="hljs-selector-tag">a</span><span class="hljs-selector-attr">[aria-label=<span class="hljs-string">"Publish with Hashnode"</span>]</span> { <span class="hljs-comment">/*Changes the background color of the "Publish with Hashnode" Button in the Footer*/</span>
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#242525</span> <span class="hljs-meta">!important</span>;
}

<span class="hljs-comment">/*###############################*/</span>
<span class="hljs-comment">/*Hasnode More Drop Down Edits: */</span>

<span class="hljs-selector-class">.dark</span> <span class="hljs-selector-tag">div</span><span class="hljs-selector-attr">[data-id=<span class="hljs-string">"hashnode-more-dropdown"</span>]</span>{ <span class="hljs-comment">/*Adds a shadow to the Hashnode More Dropdown when not logged in*/</span>
    <span class="hljs-attribute">-webkit-box-shadow</span>: <span class="hljs-number">0px</span> <span class="hljs-number">0px</span> <span class="hljs-number">16px</span> <span class="hljs-number">5px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0.3</span>); 
    <span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">0px</span> <span class="hljs-number">0px</span> <span class="hljs-number">16px</span> <span class="hljs-number">5px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0.3</span>);
    <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">15px</span>;
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#1b1b1b</span> <span class="hljs-meta">!important</span>;
}

<span class="hljs-selector-tag">div</span><span class="hljs-selector-attr">[data-id=<span class="hljs-string">"hashnode-more-dropdown"</span>]</span> <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:first-child</span> <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:first-child</span> <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-child(2)</span> <span class="hljs-selector-tag">a</span><span class="hljs-selector-attr">[href=<span class="hljs-string">"https://hashnode.com"</span>]</span>{ <span class="hljs-comment">/* Changes the Color of the Button inside the Hashnode More Dropdown*/</span>
    <span class="hljs-attribute">background-color</span>:<span class="hljs-number">#ff224e</span>; 
    <span class="hljs-attribute">border-color</span>: <span class="hljs-number">#ff224e</span>;
    <span class="hljs-attribute">color</span>: <span class="hljs-number">#ffffff</span>;
}
</code></pre>
<p><strong>Pages:</strong></p>
<pre><code class="lang-css"><span class="hljs-comment">/*###############################*/</span>
<span class="hljs-comment">/*General Styling: */</span>

<span class="hljs-selector-class">.dark</span> <span class="hljs-selector-class">.blog-header</span>{ <span class="hljs-comment">/*Adds a dropshadow to the header*/</span>
    <span class="hljs-attribute">-webkit-box-shadow</span>: <span class="hljs-number">0px</span> <span class="hljs-number">10px</span> <span class="hljs-number">16px</span> <span class="hljs-number">5px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">27</span>,<span class="hljs-number">27</span>,<span class="hljs-number">27</span>,<span class="hljs-number">0.57</span>); 
    <span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">0px</span> <span class="hljs-number">10px</span> <span class="hljs-number">16px</span> <span class="hljs-number">5px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">27</span>,<span class="hljs-number">27</span>,<span class="hljs-number">27</span>,<span class="hljs-number">0.57</span>);
}

<span class="hljs-selector-class">.dark</span> <span class="hljs-selector-tag">body</span>{ <span class="hljs-comment">/*Changes the general body color (visible when zooming out)*/</span>
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#1b1b1b</span> <span class="hljs-meta">!important</span>;
}

<span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:has(.blog-sidebar-header)</span>{
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#242525</span> <span class="hljs-meta">!important</span>;
}

* <span class="hljs-selector-tag">div</span>{ <span class="hljs-comment">/* Changes the overall div border color */</span>
    <span class="hljs-attribute">border-color</span>: <span class="hljs-number">#323232</span> <span class="hljs-meta">!important</span>
}

<span class="hljs-selector-class">.dark</span> <span class="hljs-selector-tag">body</span>{ <span class="hljs-comment">/*Changes the general body color (visible when zooming out)*/</span>
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#1b1b1b</span> <span class="hljs-meta">!important</span>;
}

<span class="hljs-selector-class">.blog-main-logo</span>{ <span class="hljs-comment">/*Changes Logo and its width*/</span>
    <span class="hljs-attribute">content</span>: <span class="hljs-built_in">url</span>(https://i.imgur.com/YFASdcD.png);
    <span class="hljs-attribute">width</span>: <span class="hljs-number">50%</span>;
}
<span class="hljs-keyword">@media</span> (<span class="hljs-attribute">max-width:</span> <span class="hljs-number">921px</span>){
    <span class="hljs-selector-class">.blog-main-logo</span>{ <span class="hljs-comment">/*Changes Logo and its width for mobile devices*/</span>
    <span class="hljs-attribute">width</span>: <span class="hljs-number">80%</span>;
    }
}



<span class="hljs-selector-class">.blog-page-area</span>{
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#242525</span> <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-class">.dark</span> <span class="hljs-selector-class">.blog-article-card-cover</span>{ <span class="hljs-comment">/*Edits big Card*/</span>
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#303030</span> <span class="hljs-meta">!important</span>;
}
<span class="hljs-comment">/*
#__next div:first-child{ /* Changes the color of the Newsletter Subscribtion Form on the Home Page
    background-color: #323232 !important
} */</span>

<span class="hljs-selector-class">.dark</span> <span class="hljs-selector-tag">body</span> &gt;<span class="hljs-selector-id">#__next</span>&gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:first-child</span> {
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#242525</span> <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-class">.dark</span> <span class="hljs-selector-class">.blog-footer-area</span>{ <span class="hljs-comment">/* Footer Area Color */</span>
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#1b1b1b</span> <span class="hljs-meta">!important</span>;
    <span class="hljs-attribute">border-color</span>: <span class="hljs-number">#323232</span> <span class="hljs-meta">!important</span>;

}
<span class="hljs-comment">/*###############################*/</span>
<span class="hljs-comment">/*Button Edits: */</span>

<span class="hljs-selector-tag">button</span><span class="hljs-selector-class">.blog-follow-button</span> {  <span class="hljs-comment">/* Edits Follow Button in header*/</span>
    <span class="hljs-attribute">background-color</span>:<span class="hljs-number">#ff224e</span>; 
    <span class="hljs-attribute">border-color</span>: <span class="hljs-number">#ff224e</span>;
    <span class="hljs-attribute">color</span>: <span class="hljs-number">#ffffff</span>;
}
<span class="hljs-selector-tag">button</span><span class="hljs-selector-class">.blog-more-icon</span> { <span class="hljs-comment">/* Edits Dropdown Button in header*/</span>
    <span class="hljs-attribute">background-color</span>:<span class="hljs-number">#ff224e</span>; 
    <span class="hljs-attribute">border-color</span>: <span class="hljs-number">#ff224e</span>;
    <span class="hljs-attribute">color</span>: <span class="hljs-number">#ffffff</span>;
}
<span class="hljs-selector-tag">button</span><span class="hljs-selector-class">.blog-subscription-form-button</span>{ <span class="hljs-comment">/* Edits Subscribtion Button in the Newsletter Section at the bottom of the page*/</span>
    <span class="hljs-attribute">background-color</span>:<span class="hljs-number">#ff224e</span> <span class="hljs-meta">!important</span>; 
    <span class="hljs-attribute">border-color</span>: <span class="hljs-number">#ff224e</span>;
    <span class="hljs-attribute">color</span>: <span class="hljs-number">#ffffff</span> <span class="hljs-meta">!important</span>;
}

<span class="hljs-selector-class">.dark</span> <span class="hljs-selector-tag">a</span><span class="hljs-selector-attr">[aria-label=<span class="hljs-string">"Publish with Hashnode"</span>]</span> { <span class="hljs-comment">/*Changes the background color of the "Publish with Hashnode" Button in the Footer*/</span>
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#242525</span> <span class="hljs-meta">!important</span>;
}

<span class="hljs-comment">/*###############################*/</span>
<span class="hljs-comment">/*Hasnode More Drop Down Edits: */</span>

<span class="hljs-selector-class">.dark</span> <span class="hljs-selector-tag">div</span><span class="hljs-selector-attr">[data-id=<span class="hljs-string">"hashnode-more-dropdown"</span>]</span>{ <span class="hljs-comment">/*Adds a shadow to the Hashnode More Dropdown when not logged in*/</span>
    <span class="hljs-attribute">-webkit-box-shadow</span>: <span class="hljs-number">0px</span> <span class="hljs-number">0px</span> <span class="hljs-number">16px</span> <span class="hljs-number">5px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0.3</span>); 
    <span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">0px</span> <span class="hljs-number">0px</span> <span class="hljs-number">16px</span> <span class="hljs-number">5px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0.3</span>);
    <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">15px</span>;
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#1b1b1b</span> <span class="hljs-meta">!important</span>;
}

<span class="hljs-selector-tag">div</span><span class="hljs-selector-attr">[data-id=<span class="hljs-string">"hashnode-more-dropdown"</span>]</span> <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:first-child</span> <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:first-child</span> <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-child(2)</span> <span class="hljs-selector-tag">a</span><span class="hljs-selector-attr">[href=<span class="hljs-string">"https://hashnode.com"</span>]</span>{ <span class="hljs-comment">/* Changes the Color of the Button inside the Hashnode More Dropdown*/</span>
    <span class="hljs-attribute">background-color</span>:<span class="hljs-number">#ff224e</span>; 
    <span class="hljs-attribute">border-color</span>: <span class="hljs-number">#ff224e</span>;
    <span class="hljs-attribute">color</span>: <span class="hljs-number">#ffffff</span>;
}
</code></pre>
]]></content:encoded></item></channel></rss>