From c76feee204acb2520cb0819551c9cdf014d8a214 Mon Sep 17 00:00:00 2001 From: moo Date: Tue, 23 Jun 2026 22:15:34 -0700 Subject: [PATCH] mod main page to add miniblog under blog --- public/index.html | 5 ++++- public/styles.css | 2 +- sass/styles.scss | 15 +++++++++++++++ templates/index.html | 5 ++++- 4 files changed, 24 insertions(+), 3 deletions(-) diff --git a/public/index.html b/public/index.html index c7a3754..700e278 100644 --- a/public/index.html +++ b/public/index.html @@ -21,7 +21,10 @@ About Projects More - Blog +
+ Blog + Minis +
Fun Project diff --git a/public/styles.css b/public/styles.css index 91b0353..018fcc1 100644 --- a/public/styles.css +++ b/public/styles.css @@ -1 +1 @@ -html{background-color:linen}*{margin:0;padding:0;box-sizing:border-box;border-radius:5%;}@font-face{font-family:"Funnel";src:url("fonts/Funnel_Display/static/FunnelDisplay-SemiBold.ttf") format("truetype")}@font-face{font-family:"BoldFunnel";src:url("fonts/Funnel_Display/static/FunnelDisplay-Bold.ttf") format("truetype")}@font-face{font-family:"Dosis";src:url("fonts/Dosis/static/Dosis-Medium.ttf") format("truetype")}h1,h2,h3,h4,h5,h6{font-family:Funnel,Arial}p,a{font-family:Dosis,Arial;margin-top:.5rem;margin-bottom:.5rem}body{min-height:100vh;overflow-x:hidden;background:linen;display:flex}.container{display:flex;width:100%;min-height:100vh;position:relative}.kaomoji-sidebar{position:fixed;top:0;height:100vh;width:60px;font-size:24px;display:flex;align-items:center;justify-content:center;background:linen;overflow:hidden;z-index:100}.kaomoji-sidebar .scroll-text{transform:rotate(.25turn);white-space:nowrap;animation:scroll 90s linear infinite}.kaomoji-left{left:0;border-right:1px solid #000}.kaomoji-right{right:0;border-left:1px solid #000}.kaomoji-right .scroll-text{transform:rotate(.5turn)}@keyframes scroll{0%{transform:rotate(90deg) translateX(-64%)}100%{transform:rotate(90deg) translateX(80%)}}.content{flex:1;margin:0 60px;padding:20px;width:calc(100% - 120px);max-width:1400px;margin-left:auto;margin-right:auto;position:relative}.section-container{position:relative;margin-bottom:40px}.header{position:relative;padding:40px;margin-left:40px;background:rgba(0,0,0,0);margin-bottom:40px}.header h1{font-family:BoldFunnel}.header .nav .prooject{text-size-adjust:.5}.header::after{content:"";position:absolute;bottom:-20px;left:-60px;width:calc(100% + 120px);height:2px;background:#000;transform:rotate(-3deg);transform-origin:center}.about-section{position:relative;padding:40px;background:rgba(0,0,0,0);margin-bottom:40px;margin-left:20px}.project-section{position:relative;padding:40px;background:linen;margin-bottom:40px;margin-left:20px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.project-section::before{content:"";position:absolute;top:-20px;left:-60px;width:calc(100% + 120px);height:2px;background:#000;transform:rotate(3deg);transform-origin:center}.more-section{position:relative;padding:40px;margin-left:20px;background:linen}.more-section::before{content:"";position:absolute;top:-20px;left:-60px;width:calc(100% + 120px);height:2px;background:#000;transform:rotate(-5deg);transform-origin:center}.image-placeholder{border:3px dashed #000;border-radius:10px;height:300px;display:flex;align-items:center;justify-content:center;font-size:24px}nav{display:flex;gap:20px;margin-top:20px}nav a{color:#000;text-decoration:none;font-weight:bold}nav a:hover{text-decoration:underline}h1 a{color:#000;text-decoration:none}h1 a:hover{text-decoration:underline}h1{font-size:2.5em;margin-bottom:10px;color:#000}h2{font-size:2em;margin-bottom:20px;color:#000}p{font-size:1.1em;line-height:1.6;color:#000}.content-body,.post,.about-section,.project-section,.more-section{position:relative;padding:40px;margin-left:20px;background:rgba(0,0,0,0)}.section-title{font-size:2.1em;margin-bottom:24px}.post-list{list-style:none;display:flex;flex-direction:column;gap:24px}.post-list-item{position:relative;padding-bottom:20px}.post-list-item::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#000;transform:rotate(-1deg)}.post-list-item a{color:#000;text-decoration:none;font-size:1.3em}.post-list-item a:hover{text-decoration:underline}.post-excerpt,.post-content{margin-top:12px}.subtitle{margin-bottom:20px}.miniblog-post{padding-top:28px;padding-bottom:28px}@media (max-width: 768px){.project-section{grid-template-columns:1fr}.content-body,.post,.about-section,.project-section,.more-section{padding:24px}}.decorations .stronk{transform:rotate(6deg);text-align:center}.woah{transform:rotate(-8deg);text-align:middle;vertical-align:top;font-family:Arial,Helvetica,sans-serif}.giallo{border-radius:5px;padding:1rem} \ No newline at end of file +html{background-color:linen}*{margin:0;padding:0;box-sizing:border-box;border-radius:5%;}@font-face{font-family:"Funnel";src:url("fonts/Funnel_Display/static/FunnelDisplay-SemiBold.ttf") format("truetype")}@font-face{font-family:"BoldFunnel";src:url("fonts/Funnel_Display/static/FunnelDisplay-Bold.ttf") format("truetype")}@font-face{font-family:"Dosis";src:url("fonts/Dosis/static/Dosis-Medium.ttf") format("truetype")}h1,h2,h3,h4,h5,h6{font-family:Funnel,Arial}p,a{font-family:Dosis,Arial;margin-top:.5rem;margin-bottom:.5rem}body{min-height:100vh;overflow-x:hidden;background:linen;display:flex}.container{display:flex;width:100%;min-height:100vh;position:relative}.kaomoji-sidebar{position:fixed;top:0;height:100vh;width:60px;font-size:24px;display:flex;align-items:center;justify-content:center;background:linen;overflow:hidden;z-index:100}.kaomoji-sidebar .scroll-text{transform:rotate(.25turn);white-space:nowrap;animation:scroll 90s linear infinite}.kaomoji-left{left:0;border-right:1px solid #000}.kaomoji-right{right:0;border-left:1px solid #000}.kaomoji-right .scroll-text{transform:rotate(.5turn)}@keyframes scroll{0%{transform:rotate(90deg) translateX(-64%)}100%{transform:rotate(90deg) translateX(80%)}}.content{flex:1;margin:0 60px;padding:20px;width:calc(100% - 120px);max-width:1400px;margin-left:auto;margin-right:auto;position:relative}.section-container{position:relative;margin-bottom:40px}.header{position:relative;padding:40px;margin-left:40px;background:rgba(0,0,0,0);margin-bottom:40px}.header h1{font-family:BoldFunnel}.header .nav .prooject{text-size-adjust:.5}.header::after{content:"";position:absolute;bottom:-20px;left:-60px;width:calc(100% + 120px);height:2px;background:#000;transform:rotate(-3deg);transform-origin:center}.about-section{position:relative;padding:40px;background:rgba(0,0,0,0);margin-bottom:40px;margin-left:20px}.project-section{position:relative;padding:40px;background:linen;margin-bottom:40px;margin-left:20px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.project-section::before{content:"";position:absolute;top:-20px;left:-60px;width:calc(100% + 120px);height:2px;background:#000;transform:rotate(3deg);transform-origin:center}.more-section{position:relative;padding:40px;margin-left:20px;background:linen}.more-section::before{content:"";position:absolute;top:-20px;left:-60px;width:calc(100% + 120px);height:2px;background:#000;transform:rotate(-5deg);transform-origin:center}.image-placeholder{border:3px dashed #000;border-radius:10px;height:300px;display:flex;align-items:center;justify-content:center;font-size:24px}nav{display:flex;gap:20px;margin-top:20px}nav a{color:#000;text-decoration:none;font-weight:bold}nav a:hover{text-decoration:underline}h1 a{color:#000;text-decoration:none}h1 a:hover{text-decoration:underline}h1{font-size:2.5em;margin-bottom:10px;color:#000}h2{font-size:2em;margin-bottom:20px;color:#000}p{font-size:1.1em;line-height:1.6;color:#000}.content-body,.post,.about-section,.project-section,.more-section{position:relative;padding:40px;margin-left:20px;background:rgba(0,0,0,0)}.section-title{font-size:2.1em;margin-bottom:24px}.post-list{list-style:none;display:flex;flex-direction:column;gap:24px}.post-list-item{position:relative;padding-bottom:20px}.post-list-item::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#000;transform:rotate(-1deg)}.post-list-item a{color:#000;text-decoration:none;font-size:1.3em}.post-list-item a:hover{text-decoration:underline}.post-excerpt,.post-content{margin-top:12px}.subtitle{margin-bottom:20px}.miniblog-post{padding-top:28px;padding-bottom:28px}@media (max-width: 768px){.project-section{grid-template-columns:1fr}.content-body,.post,.about-section,.project-section,.more-section{padding:24px}}.decorations .stronk{transform:rotate(6deg);text-align:center}.woah{transform:rotate(-8deg);text-align:middle;vertical-align:top;font-family:Arial,Helvetica,sans-serif}.giallo{border-radius:5px;padding:1rem}#blogs a{display:block}#blogs::before{content:"";position:absolute;width:2rem;height:2px;background:#000;transform:rotate(-1deg);transform:translateY(2rem);transform-origin:center} \ No newline at end of file diff --git a/sass/styles.scss b/sass/styles.scss index 1d1f78f..9632fd9 100644 --- a/sass/styles.scss +++ b/sass/styles.scss @@ -342,4 +342,19 @@ p { .giallo { border-radius: 5px; padding: 1rem; +} + +#blogs a { + display: block; +} + +#blogs::before { + content: ''; + position: absolute; + width: calc(2rem); + height: 2px; + background: #000; + transform: rotate(-1deg); + transform: translateY(2rem); + transform-origin: center; } \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index c7a3754..700e278 100644 --- a/templates/index.html +++ b/templates/index.html @@ -21,7 +21,10 @@ About Projects More - Blog +
+ Blog + Minis +
Fun Project -- 2.47.3