style: speed up, right-side data further inward
This commit is contained in:
@@ -17,19 +17,19 @@ html,body{width:100%;height:100%;overflow:hidden;background:#0a0a0f;color:#fff;
|
|||||||
#content{position:relative;width:100%;height:100%;background:#0a0a0f}
|
#content{position:relative;width:100%;height:100%;background:#0a0a0f}
|
||||||
#rpm-area{position:absolute;left:2%;top:4%;width:62%;height:82%}
|
#rpm-area{position:absolute;left:2%;top:4%;width:62%;height:82%}
|
||||||
#rpm-canvas{width:100%;height:100%}
|
#rpm-canvas{width:100%;height:100%}
|
||||||
#speed-area{position:absolute;left:4%;bottom:6%;width:60%;text-align:center}
|
#speed-area{position:absolute;left:4%;bottom:10%;width:60%;text-align:center}
|
||||||
#speed-val{font-size:min(12vw,120px);font-weight:200;line-height:1;letter-spacing:-.02em}
|
#speed-val{font-size:min(12vw,120px);font-weight:200;line-height:1;letter-spacing:-.02em}
|
||||||
#speed-unit{font-size:min(3vw,22px);color:rgba(255,255,255,.2);letter-spacing:.25em;margin-top:4px}
|
#speed-unit{font-size:min(3vw,22px);color:rgba(255,255,255,.2);letter-spacing:.25em;margin-top:4px}
|
||||||
#gear-area{position:absolute;right:12%;top:50%;transform:translateY(-55%)}
|
#gear-area{position:absolute;right:12%;top:50%;transform:translateY(-55%)}
|
||||||
#gear-box{width:min(24vw,200px);height:min(24vw,200px);border-radius:50%;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center}
|
#gear-box{width:min(24vw,200px);height:min(24vw,200px);border-radius:50%;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center}
|
||||||
#gear-box span{font-size:min(24vw,200px);font-weight:200;transition:.1s}
|
#gear-box span{font-size:min(24vw,200px);font-weight:200;transition:.1s}
|
||||||
#pedals{position:absolute;right:2%;top:5%;width:15%}
|
#pedals{position:absolute;right:4%;top:7%;width:14%}
|
||||||
.pedal{margin-bottom:16px}
|
.pedal{margin-bottom:16px}
|
||||||
.pedal .pl{font-size:min(1.8vw,13px);color:rgba(255,255,255,.2);margin-bottom:5px;letter-spacing:.15em}
|
.pedal .pl{font-size:min(1.8vw,13px);color:rgba(255,255,255,.2);margin-bottom:5px;letter-spacing:.15em}
|
||||||
.pedal .pb{height:8px;background:rgba(255,255,255,.06);overflow:hidden}
|
.pedal .pb{height:8px;background:rgba(255,255,255,.06);overflow:hidden}
|
||||||
.pedal .pf{height:100%;transition:width .06s linear}
|
.pedal .pf{height:100%;transition:width .06s linear}
|
||||||
#tf{background:#fff}#bf{background:rgba(255,255,255,.4)}
|
#tf{background:#fff}#bf{background:rgba(255,255,255,.4)}
|
||||||
#status{position:absolute;right:2%;bottom:6%;width:15%}
|
#status{position:absolute;right:4%;bottom:8%;width:14%}
|
||||||
.st{margin-bottom:14px}
|
.st{margin-bottom:14px}
|
||||||
.st .sl{font-size:min(1.6vw,12px);color:rgba(255,255,255,.2);margin-bottom:4px;display:flex;justify-content:space-between}
|
.st .sl{font-size:min(1.6vw,12px);color:rgba(255,255,255,.2);margin-bottom:4px;display:flex;justify-content:space-between}
|
||||||
.st .sb{height:4px;background:rgba(255,255,255,.06);overflow:hidden}
|
.st .sb{height:4px;background:rgba(255,255,255,.06);overflow:hidden}
|
||||||
|
|||||||
Reference in New Issue
Block a user