Adjust ads container

Author: williamd1k0

Makefile

@@ -1,7 +1,7 @@
-deploy:
-@doctl serverless deploy functions
-
 site:
 @make -C web
 
-.PHONY: deploy site
+deploy:
+@doctl serverless deploy functions
+
+.PHONY: site deploy

web/includes/adsense.html.j2

@@ -1,18 +1,16 @@
 {% if site.ads_enabled %}
 <!-- Sorry I need to pay my ̶t̶a̶x̶e̶s̶ bills... -->
-<div align="center">
+<div align="center" class="ads">
 <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9962263199785319"
-crossorigin="anonymous"></script>
+ crossorigin="anonymous"></script>
 <ins class="adsbygoogle"
-style="display:block"
-data-ad-client="ca-pub-9962263199785319"
-data-ad-slot="9576804902"
-data-ad-format="auto"
-data-full-width-responsive="true"></ins>
+style="display:block"
+data-ad-client="ca-pub-9962263199785319"
+data-ad-slot="9576804902"
+data-ad-format="auto"
+data-full-width-responsive="true"></ins>
 <script>
-window.addEventListener('load', function() {
 (adsbygoogle = window.adsbygoogle || []).push({});
-});
 </script>
 </div>
 {% endif %}

web/src/css/playground.css

@@ -1,4 +1,6 @@
-
+html, body {
+ background-color: #181b1e !important;
+}
 
 #editor, #console {
  font-size: 12px;
@@ -10,10 +12,6 @@ small a {
  left: 1%;
 }
 
-html, body {
- background-color: #181b1e !important;
-}
-
 .modal-content {
  background-color: #282a36 !important;
  color: white !important;
@@ -55,4 +53,14 @@ html, body {
 }
 #spinner.active {
  visibility: visible;
+}
+
+.main-container {
+ display: flex; 
+ justify-content: space-between;
+ flex-direction: column;
+}
+
+.ads {
+ margin-top: 3em;
 }

web/src/index.html.j2

@@ -3,9 +3,10 @@
 {% block content %}
 {{ super() }}
 {% include 'includes/navbar.html.j2' %}
-
 {% include 'includes/share-modal.html.j2' %}
-{% include 'includes/editors.html.j2' %}
 
-{% include 'includes/adsense.html.j2' %}
+<div class="main-container">
+{% include 'includes/editors.html.j2' %}
+{% include 'includes/adsense.html.j2' %}
+</div>
 {% endblock %}