Heading

Layout Features

  • Fully responsive layout on any size device.
  • Fixed width divs that add a scrollbar as opposed to stretching.
  • Navigation section moves to top when window is resized.
Navigation
Heading

This is my first ever blog where I talk about all my thoughts, feelings, irrelevant digressions and intrusions. My accent is not podcast friendly but my thoughts deserve to be broadcasted.

Heading

The great thing about this is that you can write as much as you like, and it just adds a scrollbar. Just keep writing until you can write no more!

:root { --dk-color:#bf776b; --mid-color:#f2b1a4; --lt-color:#ffe8e3; --dkest-color:#8e534a; --accent:#226051; } html, body { margin:0; padding-top:25px; padding:0; height:100%; font-family:Verdana; font-size:11px; background-image:url('https://neothemes.neocities.org/images/roses-bg.gif'); background-repeat:repeat; color:var(--dkest-color); padding:1px; overflow-y:hidden; } body a { color:var(--accent); font-weight:bold; } #container { max-width:900px; margin:0 auto; margin-top:15px; height:100%; } h1, h3, h5 { color:var(--dk-color); } h2, h4, h6 { color:var(--accent); } #header { max-width:850px; height:105px; margin-left:5px; margin-right:5px; margin:0 auto; background-color:var(--lt-color); border:1px solid var(--dkest-color); } .title { font-size:35px; text-align:center; font-style:italic; } #wrapper { margin:0 auto; max-width:860px; } .content { padding:10px; } #two-boxes { display:flex; flex-wrap:wrap; max-width:900px; } .box-one, .box-two, .box-three, .box-four, .box-five, .box-six { border:1px solid var(--dkest-color); background-color:var(--lt-color); overflow:auto; } .box-one, .box-two { height:200px; width:418px; margin-left:5px; } .box-one { margin-top:5px; margin-right:5px; } .box-two { margin-top:5px; margin-right:5px; } .box-three { margin-left:5px; margin-top:5px; width:260px; height:326px; } .box-four { margin-top:5px; margin-left:5px; width:581px; height:326px; } .section-title { text-align:center; font-weight:bold; padding-top:5px; padding-bottom:5px; background-color:var(--mid-color); color:var(--dkest-color); font-size:12px; } .nav-wrapper { display:flex; flex-wrap:wrap; width:400px; height:50px; margin:0 auto; justify-content:space-evenly; margin-top:5px; } button { width:190px; height:35px; background-color:var(--mid-color); color:var(--dkest-color); font-weight:bold; border:none; margin-top:5px; margin-right:5px; } button a { color:var(--accent); font-weight:bold; } p { padding:5px; } p a { color:var(--dkest-color); font-weight:bold; } .scroll::-webkit-scrollbar-track { background-color: var(--lt-color); } .scroll::-webkit-scrollbar { width: 10px; background-color: #f2b1a4; } .scroll::-webkit-scrollbar-thumb { background-color: var(--dk-color); } #footer { text-align:center; padding-top:5px; margin-bottom:5px; } #footer p { background-color:white; display:block; width:160px; margin:0 auto; margin-top:5px; margin-bottom:5px; padding:5px; } textarea { background-color:var(--dkest-color); color:var(--lt-color); font-size:10px; } @media only screen and (max-width: 860px) { html, body { overflow:visible; } #header { width:97.6%; } #container { width:100%; } .box-one, .box-two, .box-three, .box-four, .box-five, .box-six { width:100%; } .box-two { order:1; } .box-one { order:2; } .box-three { width:98%; } .three-boxes { width:98%; } .two-boxes { width:100%; } .wrapper { width:100%; } }