update layout and colors

This commit is contained in:
yequari 2024-08-02 21:55:34 -07:00
parent f8eeb0f218
commit 2901a05633
9 changed files with 79 additions and 44 deletions

View File

@ -1,6 +1,7 @@
---
title: yequari.com
---
# Back at it again, for the very first time
Welcome to my homepage! I like to program and tinker with computers. My other hobbies include video games, tabletop RPGs, and collecting Transformers figures. On this site I like to write about the web, games, and random thoughts I have. I also publish my notes on various topics.
# Hello
Welcome to my homepage! I program and tinker with computers. This site is a collection of notes, ramblings, things I like, and more. My hobbies include video games, TTRPGs, and collecting Transformers figures.

View File

@ -1,29 +1,20 @@
{{ define "main" }}
<div class="index-wrapper">
<div class="box index-status">
</div>
<div class="box index-content">
{{ .Content }}
</div>
<div class="box index-blog">
<h3>Latest Blog Posts</h3>
<ul>
{{ range first 3 (where .Site.RegularPages.ByDate.Reverse "Section" "blog") }}
<li><a class="title u-url p-name" href="{{ .RelPermalink }}">{{ .Title }}</a></li>
{{ end }}
</ul>
</div>
<div class="box index-social">
<h3>Social</h3>
{{- partial "social.html" . -}}
</div>
<div class="box index-banners">
<h3>Check Out These Sites</h3>
<a href="/links">More Links</a>
</div>
<div class="box index-recent">
<h3>What I'm Up To</h3>
<a href="/now">See More</a>
</div>
<div class="box index-content">
{{ .Content }}
</div>
<div class="box index-blog">
{{- partial "index-latest-blogs.html" . -}}
</div>
<div class="box index-social">
{{- partial "index-socials.html" . -}}
</div>
<!-- <div class="box index-banners"> -->
<!-- </div> -->
<div class="box index-recent">
{{- partial "index-now.html" . -}}
</div>
<!-- <div class="box index-bookmarks"> -->
<!-- </div> -->
</div>
{{ end }}

View File

@ -0,0 +1 @@
<h3>Read These Articles</h3>

View File

@ -0,0 +1,9 @@
<h3>Latest Blog Posts</h3>
<ul>
{{ range first 3 (where .Site.RegularPages.ByDate.Reverse "Section" "blog") }}
<li>
<time class="dt-published" datetime="{{ .PublishDate }}">{{ .PublishDate.Format "1/2/06" }}</time>
<a class="title u-url p-name" href="{{ .RelPermalink }}">{{ .Title }}</a>
</li>
{{ end }}
</ul>

View File

@ -0,0 +1,12 @@
<h3>Check Out These Sites</h3>
<div id="index-links">
<a href="#"><img src="/images/link-banners/manatee_banner2.png"></a>
<a href="#"><img src="/images/link-banners/isthisloss.png"></a>
<a href="#"><img src="/images/link-banners/iusearchbtw.png"></a>
<a href="#"><img src="/images/link-banners/poweredbymozilla.png"></a>
<a href="#"><img src="/images/link-banners/yqbanner.png"></a>
<a href="#"><img src="/images/link-banners/sendmeawebmention.png"></a>
</div>
<p>
<a href="/links">/links</a> =&gt;
</p>

View File

@ -0,0 +1,6 @@
<h3>What I'm Up To</h3>
<ul>
<li>Helping out at the <a href="https://32bit.cafe">32-Bit Cafe</a></li>
<li>Playing <strong>Zenless Zone Zero</strong></li>
<li>Learning C#</li>
</ul>

View File

@ -1,3 +1,4 @@
<h3>Socials</h3>
<ul class="social">
{{ range site.Menus.social }}
<li class="social">

View File

@ -15,7 +15,7 @@
</section>
<section>
<!-- <h1>Social</h1> -->
{{ partial "social.html" .}}
{{ partial "index-socials.html" .}}
</section>
<!-- <section> -->
<!-- <h1>Quote of the Day</h1> -->

View File

@ -72,9 +72,8 @@
.index-wrapper {
display: grid;
grid-template-columns: repeat(5, 20% [col-start]);
grid-template-rows: repeat(5, 33% [row-start]);
column-gap: 0.5vw;
grid-template-columns: repeat(10, 10% [col-start]);
grid-template-rows: repeat(6, 33% [row-start]);
}
.box {
@ -85,7 +84,7 @@
.index-content {
grid-row: 1 / 2;
grid-column: 2 / 5;
grid-column: 1 / span 6;
}
/* .index-status { */
@ -96,38 +95,53 @@
.index-social {
grid-row: 2 / 3;
grid-column: 5 / 6;
grid-column: 9 / span 2;
}
.index-blog {
grid-row: 2 / 3;
grid-column: 3 / 5;
grid-column: 5 / span 4;
}
.index-banners {
grid-row: 2 / 3;
grid-column: 1 / 3
grid-row: 3 / 4;
grid-column: 1 / span 5;
}
.index-recent {
grid-row: 1 / 2;
grid-column: 7 / span 4;
}
.index-bookmarks {
grid-row: 3 / 4;
grid-column: 6 / span 5;
}
@media only screen and (max-width: 700px) {
.index-content {
grid-row: 1 / 2;
.box {
grid-column: 1 / 6;
}
.index-status {
.index-content {
grid-row: 1 / 2;
}
.index-recent {
grid-row: 2 / 3;
grid-column: 1 / 6;
}
.index-banners {
grid-row: 3 / 4;
}
.index-social {
grid-row: 3 / 4;
grid-column: 1 / 6;
grid-row: 4 / 5;
}
.index-blog {
grid-row: 4 / 5;
grid-column: 1 / 6;
grid-row: 5 / 6;
}
}