finish blog index (for now)
This commit is contained in:
parent
14a8ddb3f5
commit
3c878b1d11
GPG key ID:
0C98E6FF04EC3915
5 changed files with 247 additions and 68 deletions
|
|
@ -2,7 +2,7 @@
|
|||
<html lang="{{ lang }}">
|
||||
<head>
|
||||
{% block head %}
|
||||
{% include "default_head.njk" %}
|
||||
{% include "default_head.njk" %}
|
||||
{% endblock head %}
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
<div class="header-wrapper">
|
||||
{% block header %}
|
||||
{% include "default_header.njk" %}
|
||||
{% endblock header %}
|
||||
{% endblock header %}
|
||||
</div>
|
||||
<div id="mobile-warning" class="warning">
|
||||
<p>{{ "mobile-warning" | i18n }}</p>
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
{% endblock footer %}
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
|
||||
{% block scripts %}<!-- no scripts here... -->{% endblock scripts %}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{#
|
||||
{#
|
||||
possible variables:
|
||||
- cycling_tag: collection tag to cycle through
|
||||
- sidebar: .njk include file as sidebar [optional]
|
||||
|
|
@ -15,25 +15,33 @@
|
|||
<div id="feed">
|
||||
{% set current_year = 0 %}
|
||||
{% for post in collections[cycling_tag] | i18n_filter %}
|
||||
{% set post_year = post.date | date("yyyy") %}
|
||||
{% if post_year != current_year %}
|
||||
<h2 class="year-title">{{ post_year }}</h2>
|
||||
{% set current_year = post_year %}
|
||||
{% endif %}
|
||||
<div class="feed-item">
|
||||
{% set post_year = post.date | date("yyyy") %}
|
||||
{% if post_year != current_year %}
|
||||
<h2 class="year-title">{{ post_year }}</h2>
|
||||
{% set current_year = post_year %}
|
||||
{% endif %}
|
||||
<h3 id="{{ post.data.title | slugify }}" class="post-title">{{ post.data.title }}</h3>
|
||||
<h3 id="{{ post.data.title | slugify }}" class="post-title">
|
||||
<a href={{ post.url | locale_url_resolve }}>{{ post.data.title }}</a>
|
||||
</h3>
|
||||
<p class="post-date">{{ post.date | date("dd/MM/yyyy") }}</p>
|
||||
{#<p>Debug: {{ post.date }} -> {{ post.date | date("dd/MM/yyyy") }}</p>#}
|
||||
{% if post.data.description %}
|
||||
<p class="post-description">{{ post.data.description }}</p>
|
||||
<p class="post-description post-content">{{ post.data.description }}</p>
|
||||
{% else %}
|
||||
<p class="post-excerpt">{% excerpt post %}</p>
|
||||
<p class="post-excerpt post-content">{% excerpt post %}</p>
|
||||
{% endif %}
|
||||
<a href="{{ post.url | locale_url_resolve }}" class="post-link">{{ "read-more" | i18n }}</a>
|
||||
{% if post.data.image %}
|
||||
<img src="{{ post.data.image }}" alt="{{ post.data.image.alt }}" class="post-image">
|
||||
{% if post.data.image.url %}
|
||||
<a href="{{ post.url | locale_url_resolve }}"><img src="{{ post.data.image.url }}" {% if post.data.image.title %}title="{{ post.data.image.title }}"{% endif %} {% if post.data.image.alt %}alt="{{ post.data.image.alt }}"{% endif %} class="post-image"></a>
|
||||
{% endif %}
|
||||
<p class="post-link"><a href="{{ post.url | locale_url_resolve }}">{{ "read-more" | i18n }}</a></p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="end-of-feed">
|
||||
<a href="https://www.youtube.com/watch?v=mB5YeQFw1S4" target="_blank">
|
||||
<div id="tv"></div>
|
||||
</a>
|
||||
<p>{{ "end-of-feed" | i18n }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
|
|
|
|||
267
css/main.scss
267
css/main.scss
|
|
@ -5,7 +5,7 @@
|
|||
@use "main-palette" as mp;
|
||||
|
||||
$psize: 0.8em;
|
||||
$h1size: 2.0em;
|
||||
$h1size: 2em;
|
||||
$h2size: 1.8em;
|
||||
$h3size: 1.6em;
|
||||
$h4size: 1.4em;
|
||||
|
|
@ -18,16 +18,25 @@ body {
|
|||
/*background-image: url("/img/bgpat.png");
|
||||
background-repeat: repeat;*/
|
||||
|
||||
a { color: mp.$link; }
|
||||
a:hover { color: c.adjust($color: mp.$link, $saturation: 4%, $lightness: 10%); }
|
||||
a {
|
||||
color: mp.$link;
|
||||
}
|
||||
a:hover {
|
||||
color: c.adjust($color: mp.$link, $saturation: 4%, $lightness: 10%);
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
font-size: $psize;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: fonts.$ll,'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: fonts.$ll, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: mp.$border;
|
||||
|
|
@ -36,23 +45,45 @@ body {
|
|||
-moz-osx-font-smoothing: none;
|
||||
}
|
||||
|
||||
h1 { font-size: $h1size; }
|
||||
h2 { font-size: $h2size; }
|
||||
h3 { font-size: $h3size; }
|
||||
h4 { font-size: $h4size; }
|
||||
h5 { font-size: $h5size; }
|
||||
h6 { font-size: $h6size; }
|
||||
h1 {
|
||||
font-size: $h1size;
|
||||
}
|
||||
h2 {
|
||||
font-size: $h2size;
|
||||
}
|
||||
h3 {
|
||||
font-size: $h3size;
|
||||
}
|
||||
h4 {
|
||||
font-size: $h4size;
|
||||
}
|
||||
h5 {
|
||||
font-size: $h5size;
|
||||
}
|
||||
h6 {
|
||||
font-size: $h6size;
|
||||
}
|
||||
|
||||
.warning {
|
||||
padding: 2px;
|
||||
margin: 2px auto;
|
||||
text-align: center;
|
||||
border-top: 1px solid c.adjust($color: mp.$border, $saturation: 15%, $lightness: 10%);
|
||||
border-bottom: 1px solid c.adjust($color: mp.$border, $saturation: 15%, $lightness: 10%);
|
||||
background: c.adjust($color: mp.$border, $saturation: 15%, $lightness: -20%);
|
||||
border-top: 1px solid
|
||||
c.adjust($color: mp.$border, $saturation: 15%, $lightness: 10%);
|
||||
border-bottom: 1px solid
|
||||
c.adjust($color: mp.$border, $saturation: 15%, $lightness: 10%);
|
||||
background: c.adjust(
|
||||
$color: mp.$border,
|
||||
$saturation: 15%,
|
||||
$lightness: -20%
|
||||
);
|
||||
}
|
||||
|
||||
@media (min-width: general.$breakpoint) { #mobile-warning { display: none; }}
|
||||
@media (min-width: general.$breakpoint) {
|
||||
#mobile-warning {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 404
|
||||
|
|
@ -82,14 +113,14 @@ body {
|
|||
width: 780px;
|
||||
margin: 0px auto;
|
||||
p {
|
||||
font-family: fonts.$ll, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
font-family:
|
||||
fonts.$ll, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// under construction
|
||||
#under-construction {
|
||||
width: 100%;
|
||||
|
|
@ -127,7 +158,9 @@ body {
|
|||
border-bottom: 1px solid mp.$border;
|
||||
border-radius: 0% 0% 20px 0%;
|
||||
}
|
||||
.header-banner:hover{ background-image: url("/img/home_banner_hover.jpg"); }
|
||||
.header-banner:hover {
|
||||
background-image: url("/img/home_banner_hover.jpg");
|
||||
}
|
||||
}
|
||||
.navbar-wrapper {
|
||||
display: flex;
|
||||
|
|
@ -139,7 +172,7 @@ body {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -149,12 +182,22 @@ body {
|
|||
li {
|
||||
display: flex;
|
||||
margin: 2px;
|
||||
a,p {
|
||||
a,
|
||||
p {
|
||||
padding: 0.2em 0.5em;
|
||||
border: 1px solid mp.$border;
|
||||
|
||||
background: mp.$bg;
|
||||
background: linear-gradient(0deg,rgba(0, 0, 0, 1) 10%, c.adjust($color: mp.$link, $saturation: 4%, $lightness: -20%) 100%);
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 1) 10%,
|
||||
c.adjust(
|
||||
$color: mp.$link,
|
||||
$saturation: 4%,
|
||||
$lightness: -20%
|
||||
)
|
||||
100%
|
||||
);
|
||||
|
||||
color: mp.$text;
|
||||
font-family: fonts.$ll;
|
||||
|
|
@ -163,10 +206,23 @@ body {
|
|||
text-decoration: none;
|
||||
/*text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;*/
|
||||
|
||||
&:hover { background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, c.adjust($color: mp.$link, $saturation: 4%, $lightness: -10%) 100%); }
|
||||
&:hover {
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 1) 0%,
|
||||
c.adjust(
|
||||
$color: mp.$link,
|
||||
$saturation: 4%,
|
||||
$lightness: -10%
|
||||
)
|
||||
100%
|
||||
);
|
||||
}
|
||||
}
|
||||
p { cursor: default; }
|
||||
--hover-image: url('/img/nav/default_hover.jpg');
|
||||
p {
|
||||
cursor: default;
|
||||
}
|
||||
--hover-image: url("/img/nav/default_hover.jpg");
|
||||
/* TODO: finish each navbar image
|
||||
&#home:hover ~ #nav-hover { --hover-image: url('/img/nav/home_hover.jpg'); }
|
||||
&#about:hover ~ #nav-hover { --hover-image: url('/img/nav/about_hover.jpg'); }
|
||||
|
|
@ -183,7 +239,9 @@ body {
|
|||
background: mp.$bg;
|
||||
background-image: var(--hover-image, none);
|
||||
/* temporary until i finish navbar images */
|
||||
&:hover { --hover-image: url('/img/nav/temp_hover.jpg'); }
|
||||
&:hover {
|
||||
--hover-image: url("/img/nav/temp_hover.jpg");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -206,7 +264,12 @@ body {
|
|||
font-family: fonts.$ll;
|
||||
font-size: 1em;
|
||||
background: mp.$bg;
|
||||
background: linear-gradient(0deg,rgba(0, 0, 0, 1) 10%, c.adjust($color: mp.$link, $saturation: 4%, $lightness: -20%) 100%);
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 1) 10%,
|
||||
c.adjust($color: mp.$link, $saturation: 4%, $lightness: -20%)
|
||||
100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -234,7 +297,10 @@ body {
|
|||
margin-bottom: 0px;
|
||||
width: 190px;
|
||||
|
||||
h3, a { text-decoration: none; }
|
||||
h3,
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#trackInfo {
|
||||
display: flex;
|
||||
|
|
@ -250,17 +316,19 @@ body {
|
|||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
h3 {
|
||||
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
|
||||
font-family:
|
||||
"Gill Sans", "Gill Sans MT", Calibri,
|
||||
"Trebuchet MS", sans-serif;
|
||||
font-size: 0.8em;
|
||||
padding: 0px 0px 0px 4px;
|
||||
}
|
||||
p {
|
||||
font-size: 0.7em;
|
||||
padding: 0px 0px 0px 4px;
|
||||
padding: 0px 0px 0px 4px;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: hsl(0, 65%, 5%);
|
||||
&:hover {
|
||||
background: hsl(0, 65%, 5%);
|
||||
max-height: fit-content;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -269,13 +337,14 @@ body {
|
|||
|
||||
.umihara-kawase {
|
||||
margin: 0px;
|
||||
a,img {
|
||||
a,
|
||||
img {
|
||||
display: block;
|
||||
width: 81px;
|
||||
margin: 0px auto;
|
||||
margin: 0px auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.buttons-wrapper {
|
||||
margin-top: 0px;
|
||||
width: 190px;
|
||||
|
|
@ -289,18 +358,19 @@ body {
|
|||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.welcome-content { margin: 8px 4px; }
|
||||
.welcome-content {
|
||||
margin: 8px 4px;
|
||||
}
|
||||
|
||||
.welcome-aside-right {
|
||||
width: max-content;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
.recent-posts {
|
||||
width: 190px;
|
||||
ul {
|
||||
|
|
@ -318,23 +388,34 @@ body {
|
|||
#rightside {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
.true-content {
|
||||
h1, h2, h3, h4, h5, h6 { margin: 2px 4px; }
|
||||
p { margin: 8px 4px; }
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 2px 4px;
|
||||
}
|
||||
p {
|
||||
margin: 8px 4px;
|
||||
}
|
||||
ul {
|
||||
list-style-image: url(/img/icons/pichu.gif);
|
||||
list-style-type: disc;
|
||||
li {
|
||||
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
|
||||
font-family:
|
||||
"Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
|
||||
sans-serif;
|
||||
font-size: $psize;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
img {
|
||||
img {
|
||||
display: block;
|
||||
margin: 12px auto;
|
||||
}
|
||||
|
|
@ -361,12 +442,19 @@ body {
|
|||
flex-direction: column;
|
||||
width: 240px;
|
||||
|
||||
p, li {
|
||||
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
|
||||
p,
|
||||
li {
|
||||
font-family:
|
||||
"Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px dashed mp.$border;
|
||||
|
|
@ -375,7 +463,6 @@ body {
|
|||
|
||||
.true-content {
|
||||
margin: 6px ($sm - 5%) 6px $sm;
|
||||
|
||||
}
|
||||
|
||||
.blog-avatar-wrapper {
|
||||
|
|
@ -393,7 +480,7 @@ body {
|
|||
ul {
|
||||
margin: 6px 0px;
|
||||
li {
|
||||
list-style-image: url("/img/icons/kittycat.gif");
|
||||
list-style-image: url("/img/icons/kittycat.gif");
|
||||
padding: 2px 0px;
|
||||
}
|
||||
}
|
||||
|
|
@ -401,7 +488,82 @@ body {
|
|||
}
|
||||
|
||||
#feed {
|
||||
width: 100%;
|
||||
margin: 12px;
|
||||
padding: 0px 12%;
|
||||
.year-title {
|
||||
font-size: $h4size;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
.feed-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 8px auto;
|
||||
border: 1px solid mp.$border;
|
||||
padding: 4px 16px;
|
||||
.post-title {
|
||||
margin: 6px 4px 2px 4px;
|
||||
font-size: $h5size;
|
||||
text-decoration: underline dotted;
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.post-date {
|
||||
margin: 0px 4px 6px 4px;
|
||||
}
|
||||
.post-content {
|
||||
margin: 4px 4px 4px 4px;
|
||||
}
|
||||
.post-image {
|
||||
max-width: 350px;
|
||||
max-height: 200px;
|
||||
margin: 8px auto 2px auto;
|
||||
display: block;
|
||||
}
|
||||
.post-link {
|
||||
width: 50%;
|
||||
margin-left: auto;
|
||||
text-align: right;
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-family:
|
||||
fonts.$ll, "Gill Sans", "Gill Sans MT", Calibri,
|
||||
"Trebuchet MS", sans-serif;
|
||||
}
|
||||
}
|
||||
}
|
||||
.end-of-feed {
|
||||
display: block;
|
||||
max-width: 125px;
|
||||
margin: 12px auto;
|
||||
a {
|
||||
#tv {
|
||||
display: block;
|
||||
width: 125px;
|
||||
height: 92px;
|
||||
background-image: url("/img/gifcities/television.gif");
|
||||
&:hover {
|
||||
background-image: url("/img/gifcities/television_hover.jpg");
|
||||
}
|
||||
}
|
||||
&:hover ~ p {
|
||||
color: c.adjust(
|
||||
$color: mp.$text,
|
||||
$saturation: -40%,
|
||||
$lightness: -30%
|
||||
);
|
||||
}
|
||||
}
|
||||
p {
|
||||
color: mp.$bg;
|
||||
font-family:
|
||||
fonts.$ll, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
font-size: 0.8em;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -423,18 +585,19 @@ footer {
|
|||
.footer-left {
|
||||
margin: auto 0px 0px 0px;
|
||||
}
|
||||
.footer-middle .nekojiru-angel {
|
||||
.footer-middle .nekojiru-angel {
|
||||
background-image: url("/img/nekojiru.png");
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin: auto 0px 0px 0px;
|
||||
vertical-align: bottom;
|
||||
&:hover { background-image: url("/img/nekojiruhalo.png"); }
|
||||
&:hover {
|
||||
background-image: url("/img/nekojiruhalo.png");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.footer-right {
|
||||
margin: auto 0px 0px 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,12 @@ layout: post
|
|||
tags: test
|
||||
|
||||
description: |
|
||||
welcome to my website!!!
|
||||
welcome to my website!!!
|
||||
|
||||
image:
|
||||
url: /img/nekojiru-thumbs-up.png
|
||||
title: come read me!!
|
||||
alt: come read me!!
|
||||
---
|
||||
|
||||
# wait
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@ title: blog
|
|||
layout: recent_feed
|
||||
cycling_tag: posts
|
||||
sidebar: blog
|
||||
flight:
|
||||
img: /img/gifcities/mimi.gif
|
||||
url: /
|
||||
---
|
||||
# blog
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue