Some further style optimization

out/css/pc.css

@@ -540,7 +540,7 @@ th.address {
 }
 
 .pc .addressbus {
-    margin-bottom: 1em;
+    margin-bottom: 2em;
 
     background-color: var(--color-addressbus);
     color: var(--color-addressbus-text);
@@ -554,46 +554,101 @@ th.address {
 }
 
 /* ARROWS */
-.pc .arrow {
+.pc .arrow-line {
-    position: absolute;
+    display: flex;
-    bottom: 0;
+    justify-content: space-around;
-    left: 50%;
 
+    height: 0;
+    width: 100%;
+}
+
+.pc .arrow {
+    width: 3rem;
+    height: 5rem;
+
+    --transformation: translate(0, -2rem);
+    transform: var(--transformation);
+    -moz-transform: var(--transformation);
+    -webkit-transform: var(--transformation);
+    -o-transform: var(--transformation);
+
+    color: var(--color-arrow-text);
+    background-color: var(--color-arrow);
+
+    /* Arrow Label */
     display: flex;
     justify-content: center;
     align-items: center;
 
-    width: 3rem;
-    height: 5rem;
-
-    /* transform: rotate(90deg) translate(1.5rem, 2.5rem) ; */
-    --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;
-    color: var(--color-arrow-text);
-    background-color: var(--color-arrow);
 }
 
-.pc .arrow.down {
+.pc .arrow > :nth-child(1) {
-    left: 25%;
+    /* Arrow Label Field */
+    color: var(--color-arrow-text) !important;
+    background-color: var(--color-arrow) !important;
+    border-color: var(--color-arrow-text) !important;
+
+    
+    padding: 2px 10px;
+    margin: 0;
 }
 
-.pc .arrow.up {
+.pc .arrow * {
-    left: 75%;
+    z-index: 1000;
-    --transformation: rotate(180deg) translate(0, -4.5rem);
+
-    transform: var(--transformation);
+    /* Arrow Label Text */
-    -moz-transform: var(--transformation);
+    color: var(--color-arrow-text) !important;
-    -webkit-transform: var(--transformation);
+    font-size: 1rem !important;
-    -o-transform: var(--transformation);
+    line-height: 1.1em !important;
+    font-weight: 600 !important;
+    text-transform: none !important;
+    white-space: normal !important;
+    height: min-content !important;
 }
-.pc .arrow.up > :nth-child(1){
+
-    /* transform: rotate(90deg) translate(0rem, 2rem); */
+.pc .arrow :nth-child(2) {
+    /* Arrow Head */
+    height: 0;
+    width: 0;
+
+    border-left:    2.5rem solid transparent;
+    border-right:   2.5rem solid transparent;
+    border-top:     2rem solid transparent;
+    border-bottom:  2rem solid var(--color-arrow);
+
+    position: absolute;
+    left: -1rem;
+    bottom: 5rem;
+}
+
+
+.pc .arrow-line.top {
+    position: absolute;
+    top: 0;
+}
+
+.pc .arrow-line.bottom {
+    position: absolute;
+    bottom: 0;
+}
+
+
+.pc .arrow-line.top .arrow.up {
+    --transformation: translate(0, -2.5rem);
+}
+.pc .arrow-line.bottom .arrow.up {
+    --transformation: translate(0, -0.5rem);
+}
+
+
+.pc .arrow-line.top .arrow.down {
+    --transformation: translate(0, -4.5rem) rotate(180deg);
+}
+.pc .arrow-line.bottom .arrow.down {
+    --transformation: translate(0, -2.5rem) rotate(180deg);
+}
+.pc .arrow-line.top .arrow.down :nth-child(1) {
     --transformation: rotate(180deg);
 
     transform: var(--transformation);
@@ -602,61 +657,13 @@ th.address {
     -o-transform: var(--transformation);
 }
 
-.pc .arrow.up ~ .arrow.up {
+.pc .arrow-line.bottom .arrow.down :nth-child(1) {
-    left: 50%;
+    --transformation: rotate(180deg);
-}
-
-.pc .arrow.up ~ .arrow.up ~ .arrow.up {
-    left: 25%;
-}
-
-.pc .arrow.top {
-    bottom: auto;
-    top: -6rem;
-}
-
-
-.pc .arrow > :nth-child(1) {
-    font-size: 1.2em;
-    line-height: 1.1em;
-    font-weight: 600;
-    color: var(--color-arrow-text) !important;
-    background-color: var(--color-arrow) !important;
-    border-color: var(--color-arrow-text) !important;
-    text-transform: none;
-    padding: 2px 10px;
-    margin: 0;
-    /* transform: rotate(-90deg) translate(0rem, -2rem); */
-
-    white-space: normal;
-    height: min-content;
-
-    z-index: 10;
-}
-
-.pc .arrow > :nth-child(1) *{
-    color: var(--color-arrow-text);
-    display: block;
-    white-space: break-spaces;
-}
-
-.pc .arrow > :nth-child(1):hover, .pc .arrow > :nth-child(1) *:hover {
-    color: var(--color-arrow-text-hover);
-}
-
-.pc .arrow > :nth-child(2) {
-    width: 0;
-    height: 0;
-
-    border-left:    2.5rem solid transparent;
-    border-right:   2.5rem solid transparent;
-    border-top:     2rem solid var(--color-arrow);
-    border-bottom:  0rem solid transparent;
-
-    position: absolute;
-    left: -1rem;
-    bottom: -2rem;
     
+    transform: var(--transformation);
+    -moz-transform: var(--transformation);
+    -webkit-transform: var(--transformation);
+    -o-transform: var(--transformation);
 }
 
 
@@ -751,7 +758,7 @@ th.address {
     .pc .grid-fullwidth.grid-databus {
         --width: 5rem;
         --text-height: 32rem;
-        --margin-side: 2rem;
+        --margin-side: 3rem;
 
         width: var(--width);
         box-sizing: border-box;
@@ -828,53 +835,35 @@ th.address {
         width: 100%;
     }
 
+    .pc .arrow-line {
+        width: 0;
+        height: 100%;
 
-    .pc .arrow.down{
+        flex-direction: column;
-        left: inherit;
+    }
+
+    .pc .arrow-line.top {
+        left: 0;
+    }
+
+    .pc .arrow-line.bottom {
         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{
+    .pc .arrow-line.top .arrow.up {
-        left: auto !important;
+        --transformation: rotate(-90deg) translate(0, -2.5rem);
-        right: 0;
-        top: 25%;
-        --transformation: rotate(90deg) translate(0, -2.5rem);
     }
-    .pc .arrow.up > :nth-child(1) {
+    .pc .arrow-line.bottom .arrow.up {
-        --transformation: rotate(-90deg);
+        --transformation: rotate(-90deg) translate(0, 0.75rem);
-    }
-
-    .pc .arrow.top {
-        right: auto !important;
-        left: -4.5rem !important;
-        top: 25%;
-    }
-
-    /*.pc .arrow.up ~ .arrow.up {
-        
-
-    }
-
-    .pc .arrow.up ~ .arrow.up ~ .arrow.up {
-
-    }*/
-
-    .pc .arrow.arrow2{
-        top: 75%;
     }
 
 
-
+    .pc .arrow-line.top .arrow.down {
+        --transformation: rotate(90deg) translate(0, 4.5rem);
+    }
+    .pc .arrow-line.bottom .arrow.down {
+        --transformation: rotate(90deg) translate(0, 0.1rem);
+    }
 
     .pc .alu {
         text-align: center;

src/PC/View.elm

@@ -37,7 +37,9 @@ viewRam : PC_Model -> Html PC_Msg
 viewRam model =
     div [ class "section", class "ram" ]
         [ h1  [ class "header" ] [ text "RAM" ]
-        , div [ class "arrow", class "down", class "top"] [ div [] [] , div [] [] ]
+        , div [ class "arrow-line", class "top" ]
+            [ div [ class "arrow", class "down"] [ div [] [] , div [] [] ]
+            ]
         , div [ class "scroller" ]
             [ Html.table [ class "" ]
                 [ Html.thead [ class "head" ]
@@ -50,8 +52,10 @@ viewRam model =
                 , lazy viewRamContent model
                 ]
             ]
-        , drawArrow Bottom Down UA_Ram2DataBus "Ram -> DataBus"
+        , div [ class "arrow-line", class "bottom" ]
-        , drawArrow Bottom Up   UA_DataBus2Ram "DataBus -> Ram"
+            [ drawArrow Down UA_Ram2DataBus "Ram -> DataBus"
+            , drawArrow Up   UA_DataBus2Ram "DataBus -> Ram"
+            ]
         ]
 
 
@@ -129,8 +133,10 @@ viewCu model =
         ( instrRegInst, instrRegAddr ) = seperateInstructionsEntry model.pc.instructionReg
     in
     div [ class "section", class "cu" ]
-        [ drawArrow Top Up UA_CU_InstructionReg2AddressBus  "InstR -> AddrB"
+        [ div [ class "arrow-line", class "top" ]
-        , drawArrow Top Up UA_CU_ProgrammCounter2AddressBus "ProgCounter -> AddrB"
+            [ drawArrow Up UA_CU_InstructionReg2AddressBus  "InstR -> AddrB"
+            , drawArrow Up UA_CU_ProgrammCounter2AddressBus "ProgCounter -> AddrB"
+            ]
         , h1 [ class "header" ] [ text "Control Unit" ]
         , div [ class "action-area" ]
             [ -- Programm Counter
@@ -175,7 +181,10 @@ viewCu model =
         , div [ class "scroller" ]
             [ viewCuUCode model
             ]
-        , drawArrow Bottom Up UA_DataBus2InstructionReg "DB -> InstR"
+        , div [ class "arrow-line", class "bottom" ]
+            [ drawArrow Up UA_DataBus2InstructionReg "DB -> InstR"
+            , drawArrow Down UA_CU_InstructionReg2DataBus "InstR -> DB"
+            ]
         ]
 
 
@@ -284,8 +293,10 @@ viewAlu model =
                 , button [ onClick <| PM_ManualStep UA_ALU_AccumulatorDivideByDataBus ]     [ text "/" ]
                 ]
             ]
-        , drawArrow Bottom Up UA_DataBus2Accumulator        "DB -> ALU"
+        , div [ class "arrow-line", class "bottom" ]
-        , drawArrow Bottom Down UA_ALU_Accumulator2DataBus  "ALU -> DB"
+            [ drawArrow Up UA_DataBus2Accumulator        "DB -> ALU"
+            , drawArrow Down UA_ALU_Accumulator2DataBus  "ALU -> DB"
+            ]
         ]
 
 -- #####################################################################
@@ -329,17 +340,16 @@ viewAddressBus model =
 -- Helpers
 -- #####################################################################
 
-type Arrow_Pos = Top | Bottom
 type Arrow_Dir = Up  | Down
 
-drawArrow : Arrow_Pos -> Arrow_Dir -> UAction -> String -> Html PC_Msg
+drawArrow : Arrow_Dir -> UAction -> String -> Html PC_Msg
-drawArrow pos dir act str =
+drawArrow dir act str =
     div 
         [ HAttr.classList
             [ ("arrow", True)
-            , ("top",   pos == Top)
             , ("up",   dir == Up)
-            , ("down",  dir == Down)]
+            , ("down", dir == Down)
+            ]
         ]
         [ div [ class "button" ] 
             [ Html.a