Testing style/layout changes for responsive design

2025-02-02 20:13:30 +10:00
2 changed files with 45 additions and 47 deletions
--- a/static/main.css
+++ b/static/main.css
@ -1,20 +1,33 @@
+* {
+  margin: 0rem;
+  padding: 0rem;
+}
+
+html {
+  color: #000000;
+}
+
+/* Magic background CSS lives here */
 body {
-  font-family: Open Sans, Arial;
+  font-family: monospace;
  color: #e4e4e4;
-  font-size: 14px;
+  font-size: 18px;
  margin: auto;
-  max-width: 50em;
+  max-width: 57rem;
  line-height: 1.4;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  text-align: center;
-  height: 100%;
-  width: 100%;
+  background: linear-gradient(to bottom right, rgba(0,0,0,1) 10%, rgba(65,14,105, 1) 40%, rgba(55,17,95, 1) 50%, rgba(32,14,84, 1) 60%, rgba(0,0,0,1) 90%);
+}
+
+ul {
+  margin-top: 4rem;
 }

 li {
-  margin-top: 1em;
+  margin-top: 1rem;
  list-style-type: none;
 }

@ -33,20 +46,21 @@ a:hover {
 }

 #site-content {
-  height: 100%;
-  margin: 5em auto;
-  padding: 1em;
-  padding-bottom: 2em;
-  border-radius: 1em;
+  margin: 5rem auto;
+  padding: 1rem;
+  padding-bottom: 2rem;
+  border-radius: 1rem;
  background: rgba(0,0,0, 0.7);
-  box-shadow: 1em 1em 1em 1em rgba(0,0,0, 0.5);
+  box-shadow: 1rem 1rem 1rem 1rem rgba(0,0,0, 0.5);
 }

 #ascii-header {
  font-size: 10px;
  color: #e4e4e4;
  text-decoration: none;
-  border-bottom: #541287 0.8em dotted;
+  margin: 1rem;
+  padding-bottom: 14px;
+  border-bottom: #e4e4e4 8px dotted;
 }

 #ascii-header a {
@ -59,30 +73,13 @@ a:hover {
  text-decoration: none;
 }

-.blog-post-date {
- margin: 0;
- padding: 0;
+#welcome-message {
+  margin: 1rem;
+  padding-bottom: 14px;
+  font-weight: bold;
+  border-bottom: #e4e4e4 8px dotted;
 }

-.blog-title {
-  margin-bottom: 0;
-}
-
-
-/* Magic background CSS lives here */
-#bg-effect-container {
-  z-index: -1;
-  position: absolute;
-  bottom: 0%;
-  left: 0%;
-  height: 100%;
-  width: 100%;
-  background-color: #000000;
-  overflow: hidden;
-}
-
-.bg-effect {
-  background: linear-gradient(to bottom right, rgba(0,0,0,1) 10%, rgba(65,14,105, 0.6) 40%, rgba(55,17,95,0.7) 50%, rgba(32,14,84,0.6) 60%, rgba(0,0,0,1) 90%);
-  height: 100%;
-  width: 100%;
+.title {
+  letter-spacing: -2px;
 }
--- a/templates/base.html
+++ b/templates/base.html
@ -6,7 +6,7 @@
  <title>🐸 CyberFrog</title>
 </head>

-<body>
+<body id="bg-effect">
  <div id="site-content">
  <!-- Credits to http://patorjk.com/software/taag/ for the header, made using "ANSI Regular" font -->
  <div id="ascii-header"><a href="/"><pre>
@ -17,20 +17,21 @@
 ██████    ██    ██████  ███████ ██   ██ ██      ██   ██  ██████   ██████  ██ ██      ██ ███████ 
  </pre></a></div>
    <main id="main-content">
-      <h1 class="title">
-        This is my blog made with <a target="_blank" href="https://www.getzola.org">Zola!</a>
-      </h1>
-      <h3>It's currently running on <a target="_blank" href="https://www.vultr.com">Vultr</a> for free with 500MB of RAM and <a target="_blank" href="https://www.openbsd.org">OpenBSD</a></h3>
+      <div id="welcome-message">
+        <h1 class="title">
+          Welcome
+        </h1>
+        <p>
+        This blog is made with 💜 and <a target="_blank" href="https://www.getzola.org">Zola!</a>
+        </br>
+        It's currently running on <a target="_blank" href="https://www.vultr.com">Vultr</a> for free with 500MB of RAM and <a target="_blank" href="https://www.openbsd.org">OpenBSD</a>
+        </p>
+      </div>
      <div class="blog-posts">
        {% block content %} {% endblock %}
      </div>
    </main>
  </div>
-  <!-- The wonderful frog pool -->
-  <div id="bg-effect-container">
-    <div class="bg-effect">
-    </div>
-  </div>
 </body>

 </html>