diff --git a/static/main.css b/static/main.css index 2b4bd69..c893f2c 100644 --- a/static/main.css +++ b/static/main.css @@ -1,23 +1,38 @@ +* { + margin: 0rem; +} + +/* Magic fix which forces outer most element to full view size for background scaling */ +html { + min-height: 100%; + min-width: 100%; + display: flex; + justify-content: center; + align-items: column; +} + body { - font-family: Open Sans, Arial; + font-family: monospace; color: #e4e4e4; - font-size: 14px; - margin: auto; - max-width: 50em; + padding-top: 2rem; + font-size: 18px; + max-width: 55rem; line-height: 1.4; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; - text-align: center; - height: 100%; - width: 100%; + /* Fancy background CSS lives here */ + background: linear-gradient(to bottom right, rgba(0,0,0, 1) 2%, rgba(65,15,75, 1) 40%, rgba(65,15,90, 1) 50%, rgba(30,15,80, 1) 60%, rgba(0,0,0, 1) 98%); } li { - margin-top: 1em; list-style-type: none; } +ul { + padding: 0rem; +} + a { color: #4361ee; text-decoration: none; @@ -33,20 +48,22 @@ a:hover { } #site-content { - height: 100%; - margin: 5em auto; - padding: 1em; - padding-bottom: 2em; - border-radius: 1em; - background: rgba(0,0,0, 0.7); - box-shadow: 1em 1em 1em 1em rgba(0,0,0, 0.5); + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + padding: 2rem; + border-radius: 1rem; + background: rgba(0,0,0, 0.78); + 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; + padding: 1rem; + text-align: center; } #ascii-header a { @@ -59,30 +76,27 @@ a:hover { text-decoration: none; } -.blog-post-date { - margin: 0; - padding: 0; +#welcome-message { + padding: 1rem; + font-weight: bold; + text-align: center; } -.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%; +.dotted-border { + border-bottom: #e4e4e4 8px dotted; width: 100%; } + +.title { + letter-spacing: -2px; + text-align: center; +} + +.blog-post-container { + padding: 1rem; + padding-top: 2rem; +} + +.blog-post-title { + padding-top: 2rem; +} diff --git a/templates/base.html b/templates/base.html index 4f56b3b..2b7c948 100644 --- a/templates/base.html +++ b/templates/base.html @@ -6,7 +6,7 @@ 🐸 CyberFrog - + 
@@ -16,21 +16,21 @@
 ██         ██    ██   ██ ██      ██   ██ ██      ██   ██ ██    ██ ██    ██    ██  ██  ██ ██      
  ██████    ██    ██████  ███████ ██   ██ ██      ██   ██  ██████   ██████  ██ ██      ██ ███████
+
-

- This is my blog made with Zola! -

-

It's currently running on Vultr for free with 500MB of RAM and OpenBSD

-
- {% block content %} {% endblock %} +
+

Welcome

+

This blog is made with 💜 and Zola!

+

It's currently running on Vultr for free with 500MB of RAM and OpenBSD +

+
+
+
+

View the latest posts

+ {% block content %} {% endblock %}
- -
-
-
-
diff --git a/templates/index.html b/templates/index.html index 43f3a35..ab1d1d4 100644 --- a/templates/index.html +++ b/templates/index.html @@ -5,7 +5,7 @@ {% for page in section.pages %} -
  • {{ page.title }}
    • +
  • {{ page.date }} // {{ page.title }}
    • {% endfor %} {% endblock content %}