diff --git a/samples/calc-02/index.css b/samples/calc-02/index.css index 295651d..721d107 100644 --- a/samples/calc-02/index.css +++ b/samples/calc-02/index.css @@ -113,9 +113,6 @@ body { padding: 0; } -.display-buttons-panel { - margin-top: 0; -} .display-grid { height: 100%; @@ -151,8 +148,15 @@ body { } .display-buttons-panel { - width: 100%; - padding: 8px; + grid-area: display-buttons; + padding: 10px; + align-self: start; + min-height: 0; + padding-top: 10px; + padding-bottom: 8px; +} + +.display-buttons-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); @@ -161,9 +165,6 @@ body { align-items: stretch; grid-auto-flow: row; grid-auto-rows: auto; - background: linear-gradient(180deg, #242a33, #1a1f27); - border-color: rgba(255, 255, 255, 0.04); - margin-top: 0; } .display-button { @@ -178,10 +179,6 @@ body { grid-column-start: 2; } -.display-buttons-panel > button { - width: 100%; -} - .mode-menu { position: fixed; z-index: 20; @@ -420,25 +417,16 @@ button:active { height: auto; min-height: 100%; grid-template-columns: 1fr; - grid-template-rows: minmax(160px, auto) auto auto auto; + grid-template-rows: minmax(0px, auto) auto auto auto; row-gap: 6px; grid-template-areas: "display" + "display-buttons" "keypad" "functions" "trigo"; } - .display-buttons-panel { - grid-template-columns: repeat(4, minmax(0, 1fr)); - grid-template-rows: repeat(2, auto); - margin-top: 0; - margin-bottom: 0; - padding-top: 4px; - padding-bottom: 4px; - align-content: start; - } - .keypad-grid { grid-template-rows: repeat(5, minmax(42px, 1fr)); } @@ -485,8 +473,4 @@ button:active { line-height: 1; } - .display-buttons-panel { - gap: 8px; - } - } diff --git a/samples/calc-02/index.html b/samples/calc-02/index.html index ea3234f..2786cab 100644 --- a/samples/calc-02/index.html +++ b/samples/calc-02/index.html @@ -21,18 +21,18 @@ - -
+ +