314 lines
14 KiB
HTML
314 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Blog - Kleinpanic</title>
|
|
<link rel="stylesheet" href="/style.css">
|
|
<style>
|
|
body {
|
|
font-family: 'Courier New', monospace;
|
|
background-color: #000;
|
|
color: #fff;
|
|
margin: 0;
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
}
|
|
|
|
/* ASCII art */
|
|
.ascii-art-left, .ascii-art-right {
|
|
position: fixed;
|
|
opacity: 0.15;
|
|
font-size: 12px; /* Smaller font size for better scaling */
|
|
white-space: pre-wrap;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Position the ASCII art */
|
|
.ascii-art-left {
|
|
left: 0;
|
|
top: 0;
|
|
transform: scale(1.0);
|
|
}
|
|
|
|
.ascii-art-right {
|
|
right: 0;
|
|
top: 0;
|
|
transform: scale(1.0);
|
|
}
|
|
|
|
/* ASCII header style */
|
|
.ascii-header, .ascii-table-wrapper {
|
|
z-index: 10;
|
|
text-align: center;
|
|
background-color: rgba(255, 255, 255, 0.05); /* Light grey with transparency */
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
transition: background-color 0.3s ease, transform 0.3s ease;
|
|
}
|
|
|
|
.ascii-header pre {
|
|
font-size: 14px;
|
|
background: linear-gradient(135deg, #ff4081, #ff8c00, #ffd700, #00fa9a, #1e90ff, #ff4081);
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
animation: gradient-animation 6s ease infinite;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ascii-header pre:hover {
|
|
transform: scale(1.05);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.ascii-table-wrapper:hover {
|
|
background-color: rgba(255, 255, 255, 0.1); /* Slightly brighter grey on hover */
|
|
box-shadow: 0 6px 12px rgba(255, 255, 255, 0.2);
|
|
transform: scale(1.01);
|
|
}
|
|
|
|
@keyframes gradient-animation {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|
|
|
|
.blog-link {
|
|
display: block; /* Make the anchor act like a block-level element */
|
|
text-decoration: none; /* Remove underline from the link */
|
|
}
|
|
|
|
.blog-link:hover .blog-preview {
|
|
background-color: #333333; /* Fallback solid background color */
|
|
background-color: rgba(255, 255, 255, 0.1); /* Desired rgba background color */
|
|
transform: scale(1.01); /* Slight zoom on hover */
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.blog-preview {
|
|
font-size: 16px;
|
|
color: #f0f0f0;
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
transition: background-color 0.3s ease, transform 0.3s ease;
|
|
margin-bottom: 20px;
|
|
white-space: pre; /* ASCII look */
|
|
width: 800px; /* Set fixed width */
|
|
height: auto; /* Set fixed height for previews */
|
|
overflow: hidden; /* Prevent overflow of text */
|
|
}
|
|
|
|
.blog-preview h3 {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.blog-preview a {
|
|
text-decoration: none;
|
|
color: #1e90ff;
|
|
}
|
|
|
|
.blog-preview a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.blog-preview p {
|
|
margin: 10px 0;
|
|
color: #ccc;
|
|
}
|
|
|
|
/* Clickable container styling */
|
|
.clickable-container {
|
|
cursor: pointer;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Hover effect for clickable container */
|
|
.clickable-container:hover {
|
|
transform: scale(1.05);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
/* Separator line style */
|
|
.ascii-line {
|
|
border: 0;
|
|
height: 1px;
|
|
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
|
|
}
|
|
.post-title {
|
|
color: #ff4081; /* Pink for the post title */
|
|
font-size: 18px;
|
|
margin: 0;
|
|
}
|
|
|
|
.post-date, .post-preview {
|
|
color: #ffaa00; /* Amber for the date and preview */
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.blog-preview p {
|
|
margin: 5px 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- ASCII Art Background -->
|
|
<div class="ascii-art-left">
|
|
<pre>
|
|
|
|
|
|
+========+
|
|
===============+
|
|
======================
|
|
============================
|
|
==================================
|
|
========================================
|
|
================================================
|
|
======================================================
|
|
============================================================
|
|
==================================================================
|
|
=========================================================================+
|
|
================================================================================
|
|
====================================++=-::::::-=++====================================
|
|
=================================+= .=+=================================
|
|
===============================+- -================================
|
|
==============================: :+============================#
|
|
============================+ +======================+#####
|
|
==========================+ +=================*########
|
|
========================+ +============*###########
|
|
======================== -========###############
|
|
======================. .====##################
|
|
====================+. ..:--:.. .#####################
|
|
==================== ================ -########################
|
|
===================. -====================- +###########################
|
|
==================- :========================: .###############################
|
|
=================+ +==========================+ .##################################
|
|
=================- +==========================+#####################################
|
|
================= =========================+########################################
|
|
================+ .======================*###########################################
|
|
================+ -===================###############################################
|
|
================= =================##################################################
|
|
================+ -============+%%%%%%###############################################
|
|
================+ .=========+%%%%%%%%%%%%############################################
|
|
================= ======*%%%%%%%%%%%%%%%%%%#########################################
|
|
=================- +=#%%%%%%%%%%%%%%%%%%%%%%%%%#####################################
|
|
=================+ %%%%%%%%%%%%%%%%%%%%%%%%%%%% .##################################
|
|
==================- -%%%%%%%%%%%%%%%%%%%%%%%%= .###############################
|
|
===================. +%%%%%%%%%%%%%%%%%%%%+ +###########################
|
|
==================== #%%%%%%%%%%%%%%# -########################
|
|
=====================. .:=++=:. :#####################
|
|
==================%%%%. .%%%%##################
|
|
===============%%%%%%%%* +%%%%%%%%###############
|
|
===========+%%%%%%%%%%%%% %%%%%%%%%%%%%############
|
|
========*%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%#########
|
|
=====#%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%#####
|
|
=#%%%%%%%%%%%%%%%%%%%%%%%%%%%%= -%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#
|
|
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%= =%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
|
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%* .*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
|
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#+--::--+#%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
|
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
|
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
|
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
|
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
|
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
|
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
|
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
|
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
|
%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
|
%%%%%%%%%%%%%%%%%%%%%%
|
|
%%%%%%%%%%%%%%%%
|
|
%%%%%%%%%%
|
|
|
|
</pre>
|
|
</div>
|
|
<div class="ascii-art-right">
|
|
<pre>
|
|
|
|
|
|
.+%%%#:
|
|
%%%%%%%%%:
|
|
%%%%%%%%%%%.
|
|
:*#%%%%%%*: %%%%%%%%%%%-
|
|
:#%%%%%%%%%%%%%%%%%%%%- +%%%%%%%%%%.
|
|
+%%%%%%%%%%%%%%%%%%%%%%%%%%%% :%%%%%%%%%%
|
|
.%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%:.%%%= ...
|
|
.%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%+
|
|
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%.
|
|
.%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%-
|
|
-%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%+
|
|
:%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%= ::
|
|
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%. :%*:#+*= .#+
|
|
#%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%# %- #+.%.%%%*
|
|
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%. +%##+.% -%%.
|
|
:%%%%%- %%. %%* %: . %%%%%%+ . ..
|
|
*%%%%%- %%# +%%%%%% =% .#%%%%: %%: @%= #%%%%%* . . .: %=..... . . :-% :
|
|
*%%%%%- %%# +% .:: =%%+. %: %%= %%* #%%%%%# % +*=%*% %- :%*%+*.%.% -%-%*%:
|
|
-%%%%%- %%# ++ -- .* .:: %: %%= %%* #%%%%%+ % +*.%%% +%% ##-% .% %%#% %%%
|
|
%%%%%#**%%%**#%#--#%#==##*--=#%%***%%#**%%%**%%%%%%.
|
|
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% ... .. ... .. ... .. %-. %. .. . .
|
|
.%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%: :=#+-%= .%+..%-%=#+:%.%:%-.% %.**=%.%-.
|
|
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%* %#%%-%%#:%%% %%%.#=:% %:%%%% %#-%%#.%
|
|
*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#
|
|
=%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*
|
|
.%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%:
|
|
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*
|
|
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
|
:%%%%%%%%%%%%%%%%%%%%%%%%%%%%%:
|
|
#%%%%%%%%%%%%%%%%%%%%%%.
|
|
:=#%%%%%%%%%%+:
|
|
|
|
</pre>
|
|
</div>
|
|
<!-- ASCII Art Header for Blog Page, wrapped with an anchor -->
|
|
<div class="ascii-header clickable-container">
|
|
<pre>
|
|
_______ _ _ ___ _ ____ _
|
|
|__ __| | | |/ / | (_) | _ \| |
|
|
| | | |__ ___ | ' /| | ___ _ _ __ | |_) | | ___ __ _
|
|
| | | '_ \ / _ \| < | |/ _ \ | '_ \ | _ <| |/ _ \ / _` |
|
|
| | | | | | __/| . \| | __/ | | | || |_) | | (_) | (_| |
|
|
|_| |_| |_|\___||_|\_\_|\___|_|_| |_||____/|_|\___/ \__, |
|
|
__/ |
|
|
|___/
|
|
</pre>
|
|
</div>
|
|
|
|
<!-- Separator Line -->
|
|
<hr class="ascii-line">
|
|
|
|
<!-- RSS feed link -->
|
|
<div style="margin-top: 20px;">
|
|
<a href="/blog/rss.xml">Subscribe to the RSS Feed</a>
|
|
</div>
|
|
|
|
<!-- Separator Line -->
|
|
<hr class="ascii-line">
|
|
|
|
<!-- Blog preview section -->
|
|
<div id="blog-container">
|
|
<!-- Dynamic blog previews will be injected here by JavaScript -->
|
|
</div>
|
|
<!-- External JS file -->
|
|
<script src="/js/blog.js"></script>
|
|
|
|
<!-- Separator Line -->
|
|
<hr class="ascii-line">
|
|
|
|
<script src="/js/clickableHeader.js"></script>
|
|
|
|
</body>
|
|
</html> |