Added Mobile Layout and comments

out/css/pc.css

@@ -1,14 +1,4 @@
 /* COLORS  */
-.pc .addressbus {
-  background-color: var(--color-addressbus);
-  color: var(--color-addressbus-text);
-}
-
-.pc .databus {
-  background-color: var(--color-databus);
-  color: var(--color-databus-text);
-}
-
 .pc .ram {
   background-color: var(--color-ram);
   color: var(--color-ram-text);
@@ -201,6 +191,7 @@
 
 .pc .scroller table .num {
   text-align: right;
+  white-space: nowrap;
 }
 
 .pc .scroller table td:first-child,
@@ -240,11 +231,11 @@ th.address {
 }
 
 .pc input[type=number].instruction {
-  width: 5em !important;
+  width: 4em !important;
 }
 
 .pc input[type=number].address {
-  width: 7em !important;
+  width: 5em !important;
 }
 
 
@@ -313,7 +304,7 @@ th.address {
   width: 100%;
 }
 
-.pc .ram input[type=number] {
+.pc .ram input {
   background-color: var(--color-table-ram-select);
   color: var(--color-table-ram-select-text);
   border-color: var(--color-table-ram-select-border);
@@ -329,6 +320,21 @@ th.address {
   border-color: var(--color-table-ram-select-border);
 }
 
+.pc .ram .ram-entry:last-child {
+  margin-right: 0 !important;
+}
+
+.pc .ram .comment {
+  padding: 12px 5px;
+}
+
+.pc .ram .comment input{
+  border: none;
+  margin: 0;
+  font-size: .8em;
+  width: 10em;
+}
+
 
 /* CONTROL UNIT */
 
@@ -416,7 +422,6 @@ th.address {
   margin: 0;
   padding: .75em .5em;
 }
-
 .pc .databus .label,
 .pc .addressbus .label {
   /* position: absolute; */
@@ -438,10 +443,16 @@ th.address {
 
 .pc .addressbus {
   margin-bottom: 1em;
+
+  background-color: var(--color-addressbus);
+  color: var(--color-addressbus-text);
 }
 
 .pc .databus {
   margin-top: 2em;
+
+  background-color: var(--color-databus);
+  color: var(--color-databus-text);
 }
 
 /* ARROWS */
@@ -458,7 +469,12 @@ th.address {
   height: 5rem;
 
   /* transform: rotate(90deg) translate(1.5rem, 2.5rem) ; */
-  transform: translate(0, 3rem);
+  --transformation: translate(0, 3rem);
+  transform: var(--transformation);
+  -moz-transform: var(--transformation);
+  -webkit-transform: var(--transformation);
+  -o-transform: var(--transformation);
+
   z-index: 100;
 
   font-size: 0.5em;
@@ -472,11 +488,20 @@ th.address {
 
 .pc .arrow.up {
   left: 75%;
-  transform: rotate(180deg) translate(0, -4.5rem);
+  --transformation: rotate(180deg) translate(0, -4.5rem);
+  transform: var(--transformation);
+  -moz-transform: var(--transformation);
+  -webkit-transform: var(--transformation);
+  -o-transform: var(--transformation);
 }
 .pc .arrow.up > :nth-child(1){
   /* transform: rotate(90deg) translate(0rem, 2rem); */
-  transform: rotate(180deg);
+  --transformation: rotate(180deg);
+
+  transform: var(--transformation);
+  -moz-transform: var(--transformation);
+  -webkit-transform: var(--transformation);
+  -o-transform: var(--transformation);
 }
 
 .pc .arrow.up.arrow2 {
@@ -503,6 +528,8 @@ th.address {
 
   white-space: normal;
   height: min-content;
+
+  z-index: 10;
 }
 
 .pc .arrow > :nth-child(1) *{
@@ -587,3 +614,122 @@ th.address {
   cursor: pointer;
 }
 
+
+
+@media(max-width: 1000px){
+  .pc{
+    grid-template-rows: auto max-content auto;
+    justify-items: center; 
+  }
+
+  .pc .section {
+    grid-column: 2;
+    width: 100%;
+
+    min-height: 25rem;
+    max-height: 50rem;
+  }
+
+  .pc .grid-fullwidth.grid-addressbus,
+  .pc .grid-fullwidth.grid-databus {
+    --width: 5rem;
+    --text-height: 35rem;
+    --margin-side: 2rem;
+
+    width: var(--width);
+    box-sizing: border-box;
+    grid-row: 2 / span 3;
+
+    position: relative;
+    padding-bottom: var(--text-height);
+  }
+
+  .pc .grid-fullwidth.grid-addressbus {
+    grid-column: 1;
+
+    background-color: var(--color-addressbus);
+    color: var(--color-addressbus-text);
+
+    justify-self: flex-end;
+    margin-right: var(--margin-side);
+  }
+  .pc .grid-fullwidth.grid-databus {
+    grid-column: 3;
+
+    background-color: var(--color-databus);
+    color: var(--color-databus-text);
+
+    justify-self: flex-start;
+    margin-left: var(--margin-side);
+  }
+
+
+
+  .pc .grid-fullwidth.grid-addressbus > *,
+  .pc .grid-fullwidth.grid-databus > * {
+    position: sticky;
+    top: 0;
+    left: 0;
+    margin: 0;
+    box-sizing: border-box;
+
+    height: var(--width);
+    width: var(--text-height);
+
+    --transformation: rotate(-90deg) translate( calc(var(--width) / 2 - 50%), calc( 50% - var(--text-height) / 2));
+    transform: var(--transformation);
+    -moz-transform: var(--transformation);
+    -webkit-transform: var(--transformation);
+    -o-transform: var(--transformation);
+
+    background-color: transparent;
+  }
+
+  .pc .controls.grid-fullwidth {
+    grid-column: 1 / span 3;
+  }
+
+
+  .pc .arrow.down{
+    left: inherit;
+    right: 0;
+    bottom: 25%;
+    --transformation: rotate(-90deg) translate(0, 1rem);
+  }
+  .pc .arrow.down > :nth-child(1) {
+    --transformation: rotate(90deg);
+
+    transform: var(--transformation);
+    -moz-transform: var(--transformation);
+    -webkit-transform: var(--transformation);
+    -o-transform: var(--transformation);
+  }
+
+  .pc .arrow.up{
+    left: inherit;
+    right: 0;
+    top: 25%;
+    --transformation: rotate(90deg) translate(0, -2.5rem);
+  }
+  .pc .arrow.up > :nth-child(1) {
+    --transformation: rotate(-90deg);
+  }
+
+  .pc .arrow.top {
+    right: inherit;
+    left: -4.5rem !important;
+    top: 25%;
+  }
+
+  .pc .arrow.arrow2{
+    top: 75%;
+  }
+
+
+
+
+  .pc .alu {
+    text-align: center;
+  }
+
+}