shame.less

//ip5: 86.9;
//ip6: 88.75;
//ip6p: 90.2;
.calc(@diff) {
    .vhCalc(@input) {
        @vh: (@input * @diff) / 100vh;
    }
    .calcHeader(@inpot) {
        .vhCalc(@inpot);
        @headerHeight: @vh;
    }
    .vhCalc(10);
    .ip5 {
        .header,
        .sub-header {
            .calcHeader(10);
            height: @headerHeight;
        }
        .header {
            &>img {
                .vhCalc(5.8);
                width: @vh;
                height: @vh;
                .calcHeader(10);
                margin-top: (@headerHeight - @vh) / 2;
            }
            button.text {
                .vhCalc(5);
                height: @vh;
                font-size: @vh - 2vh;
            }
        }
        .sub-header {
            .title {
                .vhCalc(3.5);
                font-size: @vh;
            }
            .text {
                .vhCalc(2);
                font-size: @vh;
            }
            .gallery {
                .vhCalc(2.2);
                font-size: @vh;
            }
        }
    }
    .home {
        .nav {
            .vhCalc(5);
            padding-bottom: @vh;
            .nav-pills {
                .vhCalc(20);
                height: @vh;
            }
        }
    }
    .footer {
        .vhCalc(5);
        height: @vh;
    }
    .wrapper {
        .vhCalc(100);
        height: @vh;
    }
    .login-header {
        h2 {
            .vhCalc(3.2);
            font-size: @vh;
            .vhCalc(1);
            padding-bottom: @vh;
        }
        h4 {
            .vhCalc(1.8);
            font-size: @vh;
            .vhCalc(2);
            padding-bottom: @vh;
        }
    }
    .form {
        img {
            .vhCalc(7.3);
            padding-bottom: @vh;
        }
        .input,
        input:focus,
        input:active,
        input:-webkit-autofill {
            .vhCalc(2.1);
            margin-bottom: 2.1vh;
        }
        input[type="text"],
        input[type="button"],
        [type="password"] {
            .vhCalc(2.4);
            font-size: @vh;
        }
        input {
            .vhCalc(1.3);
            padding: @vh 1.5vw;
        }
        button {
            .vhCalc(2.5);
            padding: @vh 0;
        }
        a {
            .vhCalc(5.5);
            padding-top: @vh;
            &.resend-code {
                .vhCalc(2);
                padding-top: @vh;
            }
        }
        div.group {
            label {
                .vhCalc(-.5);
                top: @vh;
            }
        }
    }
    .asset {
        .pswp-wrapper {
            .vhCalc(65);
            height: @vh;
        }
        .pswp-wrapper.modal-photo {
            .vhCalc(100);
            height: @vh;
        }
        .custom-menu {
            .vhCalc(2.5);
            bottom: @vh;
            button,
            button span span {
                .vhCalc(2);
                font-size: @vh;
            }
            button {
                .vhCalc(10);
                height: @vh;
            }
        }
    }
    .modal-dialog {
        .comment {
            p:not(.meta) {
                .vhCalc(3.9);
                padding-top: @vh;
                .vhCalc(2.6);
                padding-top: @vh;
            }
            p.meta {
                .vhCalc(2);
                padding-top: @vh;
                .vhCalc(2.2);
                font-size: @vh;
                .vhCalc(2.8);
                padding-bottom: @vh;
            }
        }
        .comments {
            .modal-footer {
                .vhCalc(22);
                height: @vh;
            }
            .modal-body {
                .vhCalc(68);
                height: @vh;
            }
        }
    }
    .alert:not(.inline-alert) {
        .vhCalc(-12);
        top: -12vh;
        height: -1 * @vh;
        .vhCalc(3);
        font-size: @vh;
        .shown {
            .vhCalc(12);
            transform: translate(0, @vh);
        }
    }
    .modal {
        .modal-dialog {
            .modal-header {
                .vhCalc(4);
                padding: @vh 11vw;
                .vhCalc(10);
                height: @vh;
                .modal-tab {
                    h1 {
                        .vhCalc(2.7);
                        font-size: @vh;
                    }
                }
                .close {
                    .vhCalc(3.7);
                    top: @vh;
                }
            }
            .modal-footer {
                input[type="submit"] {
                    .vhCalc(1.4);
                    padding-top: @vh;
                    padding-bottom: @vh;
                    .vhCalc(2.7);
                    margin-top: @vh;
                }
            }
            .modal-content {
                >div.ge-modal {
                    .modal-body {
                        button {
                            .vhCalc(3);
                            padding: @vh @vh*2
                        }
                        h2 {
                            .vhCalc(2.5);
                            padding-bottom: @vh;
                            .vhCalc(4);
                            font-size: @vh;
                        }
                    }
                }
            }
        }
    }
}

.ip5 {
    .calc(86.9);
}

.ip6 {
    .calc(88.75);
}

.ip6p {
    .calc(90.2);
}