Morfynnon Home

These are the various things I did to format my blog today!!

How I made the background a grid

I formatted the body on my style.css to include the code for a background I designed on magic pattern CSS background tool and picked my colors on color hex

the code magic pattern gave me:

    
 body {
    background-color: #83adb5;
    opacity: 0.8;
    background-image: linear-gradient(
    #899396 1px, transparent 1px), 
    linear-gradient(to right, 
    #899396 1px, #83adb5 1px);
    background-size: 20px 20px;
  }

the code I use on my style.css:

    
 body {
    color: black; 
  /* the color of my font */
    font-family: begale, sans-serif; 
    background-color: #83adb5;
  /* got rid of opacity bc it was making
  my text also 0.8 opacity */
    background-image: linear-gradient(
    #899396 .5px, transparent .5px), 
    linear-gradient(to right, #899396 .5px, 
    #83adb5 .5px); 
  /* changed to 0.5 to make gridlines 
  lighter */
    background-size: 60px 60px; 
  /* made the squares bigger */
   }

How I made my text not the full width of the webpage

I asked my programming wizard husband how he made his website centered and not the full width of the page and he gave me this code

lorn's wizardous width code:

    
body {
    color: black;
    font-family: begale, sans-serif;
    max-width: 400px;
    margin: auto;
    max-width: 400px; 
  /* this decides the body width */
    margin: auto; 
  /* i think this centers it */
    background-color: #83adb5;
    background-image: linear-gradient(
    #899396 .5px, transparent .5px), 
    linear-gradient(to right, #899396 .5px, 
    #83adb5 .5px); 
    background-size: 60px 60px; 
  }

How I made the example code boxes

I wanted to know how to make the good code boxes like on W3 and it was so laborious bc what do they call those things???????? anyway I asked the programmer wizard and he said use <code> so here's what I figured out from his advice and this

code on my style.css:

    
code {
  font-family: Consolas,"courier new";
  color: black;
  background-color: #83adb5;
  padding: 2px;
  font-size: 105%;
}
pre code {
  background-color: #83adb5;
  border: 1px solid #6c797c;
  display: block;
  padding: 0px;
}

how I insert a code box into a page:

    
       <div>
       <pre>
       <code>
        Blah blah blah
        this is my sample code
       </code>
       </pre>
       </div>

to do the sample HTML code you have to use HTML character entities for your < and > or else it will run the code in the sample box