refactor css to something a bit more useful

DAVIAC-1-pics.php

@@ -13,7 +13,7 @@
         <?php include("header.php"); ?>
 	<?php include("sidebar.php"); ?>
 
-        <div id="main-text" class="item3">
+        <div id="main-text" class="main">
 	<p>Overview</p>
 	<p><a href="/images/DAVIAC-1.jpg"><img src="/images/DAVIAC-1.jpg" alt="All the PCBs for the DAVIAC-1 populated with relays, LEDs and other miscellaneous parts mounted neatly on some particle hinged board mounted to the wall. Miscellaneous vintage test equipment and a laptop with a lot of stickers on it in the foreground" width=100% /></a></p>
 	<p>CPU</p>

footer.php

@@ -1,4 +1,4 @@
-  <div id="footer" class="item5">
+  <div id="footer" class="footer">
     <p>site last updated:
     <?php
       $shell_out = null;

header.php

@@ -1,4 +1,4 @@
- <div id="header" class="item1">
+ <div id="header" class="header">
  <h1><a href="/">DAVIAC: A Relay Computer</a></h1>
  <p>Designed and built by Dr David Warren</p>
  </div>

index.php

@@ -12,7 +12,7 @@
       <div class="grid-container">
         <?php include("header.php"); ?>
 	<?php include("sidebar.php"); ?>
-        <div id="main-text" class="item3">
+        <div id="main-text" class="main">
           <h2>Architectural Overview (click image for PDF)</h2>
 	  <p><a href="pdf/Arch.pdf"><img src="images/Arch-1.png" alt="A block diagram of the architecture of the DAVIAC-1 along with the instruction set and machine code" width=100%; /></a></p>
 	  <h2>Physical Build Overview</h2>

sidebar.php

@@ -1,4 +1,4 @@
-<div id="sidebar" class="item2">
+<div id="sidebar" class="sidebar">
 
 <h2>DAVIAC-1</h2>
 <h3>Youtube Links</h3>

style.css

@@ -1,8 +1,7 @@
-.item1 { grid-area: header; }
-.item2 { grid-area: menu; }
-.item3 { grid-area: main; }
-.item4 { grid-area: right; }
-.item5 { grid-area: footer; }
+.header { grid-area: header; }
+.sidebar { grid-area: sidebar; }
+.main { grid-area: main; }
+.footer { grid-area: footer; }
 
 .grid-container {
   display: grid;
@@ -20,16 +19,16 @@
 	  display: grid;
 	  grid-template-areas:
 	    'header'
-	    'menu'
+	    'sidebar'
 	    'main'
 	    'footer';
           gap: 1px;
 	  padding:1px;
   }
-  .item1, .item3, .item5 {
+  .header, main, .footer {
 	  width: 100%;
   }
-  .item2 {
+  .sidebar {
 	  width: 94%;
   }
 }

template.php

@@ -13,7 +13,7 @@
         <?php include("header.php"); ?>
 	<?php include("sidebar.php"); ?>
 
-        <div id="main-text" class="item3">
+        <div id="main-text" class="main">
 	<h2> Add a heading here </h2>
 	<p> Add text/images/etc here </p>