Initial Commit
This commit is contained in:
klein panic
314
views/blog.html
Normal file
314
views/blog.html
Normal file
@@ -0,0 +1,314 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user