mod main page to add miniblog under blog

diff --git a/public/index.html b/public/index.html
index c7a3754e288e709f5d074a838ae58146f1b3f377..700e278c797184677bc5265b1253c70e60251f88 100644 (file)
--- a/public/index.html
+++ b/public/index.html
@@ -21,7 +21,10 @@
           <a href="#about">About</a>
           <a href="#projects">Projects</a>
           <a href="#more">More</a>
-          <a href="blog">Blog</a>
+          <div id="blogs">
+            <a href="blog">Blog</a>
+            <a href="miniblog">Minis</a>
+          </div>
           <a href="boo" target="_blank">Fun</a>
           <a href="tictactoe">Project</a>
           <!-- <div class="prooject"> -->

diff --git a/public/styles.css b/public/styles.css
index 91b035319b744d106b0d74369b68f0ee1eae9c62..018fcc14d7d8557ecdbf075ed4c5926e8d816727 100644 (file)
--- 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 1d1f78ff7a11f58ad8602e451462ffacdedfb51c..9632fd98b28d7673dd8e850317e07a8b75f8b91f 100644 (file)
--- 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 c7a3754e288e709f5d074a838ae58146f1b3f377..700e278c797184677bc5265b1253c70e60251f88 100644 (file)
--- a/templates/index.html
+++ b/templates/index.html
@@ -21,7 +21,10 @@
           <a href="#about">About</a>
           <a href="#projects">Projects</a>
           <a href="#more">More</a>
-          <a href="blog">Blog</a>
+          <div id="blogs">
+            <a href="blog">Blog</a>
+            <a href="miniblog">Minis</a>
+          </div>
           <a href="boo" target="_blank">Fun</a>
           <a href="tictactoe">Project</a>
           <!-- <div class="prooject"> -->