styles/responsive.css - master - MineDev/test-portfolio

styles/responsive.css
283 строки4 KB
Mine Dev
some commit for my old test portfolio project
10 сен 2024, 17:39
10 сен 2024, 17:396c2f24e
@media (max-width: 1470px) {
    .container {
        max-width: 1200px;
    }

    .description__text-title {
        font-size: 42px;
    }

    .description__image {
        width: 60%;
    }

    .about__image {
        width: 43%;
    }

    .about__block {
        max-width: 650px;
    }

    .testimonial__card {
        max-width:300px;
    }

    .feedback__form {
        min-width: 400px;
    }


}

@media (max-width: 1300px) {
    .testimonial__card {
        max-width:250px;
    }

    .feedback__title {
        font-size: 32px;
    }

    .feedback__description {
        width: 650px;
    }
}


@media (max-width: 1200px) {
    
    .container {
        max-width: 992px;
    }

    .taskbar__item {
        font-size: 18px;
    }

    .description__text-title {
        font-size: 36px;
    }

    .testimonial__card {
        max-width: 275px;
        padding: 10px;
    }

    .testimonial__description {
        font-size: 18px;
    }

    .description__image {
        width: 50%;
    }

    .about__image {
        width: 37%;
    }

    .about__block {
        max-width: 500px;
    }

    .projects__box-comment {
        font-size: 14px;
    }

    .feedback__form {
        min-width: 100%;
    }

    .feedback__description {
        width: 100%;
        margin-top: 60px;
        justify-content: left;
    }

    .feedback > .container {
        flex-direction: column;
    }

    .resume {
        padding: 13px;
        font-size: 18px;
    }

    .skills__table-box {
        height: 140px;
    }

    .description__icons-box {
        width: 45px;
        height: 45px;
    }


}

@media (max-width: 992px) {
    .container {
        max-width: 768px;
        padding: 30px;
    }

    .description__icons-box {
        width: 30px;
        height: 30px;
    }

    .description__icons-box > img {
        width: 70%;
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
    }

    .resume {
        font-size: 16px;
        padding: 10px;
    }

    .resume > img {
        width: 15%;
    }

    .description__text-title {
        font-size: 28px;
    }

    .description__text > p {
        font-size: 14px;
    }

    .skills__title {
        font-size: 32px;
    }

    .skills__table-box {
        height: 100px;
    }

    .skills__table-box > img {
        width: 30%;
    }
    
    .experience__title {
        font-size: 32px;
        text-align: center;
        color: white;
    }

    .experience__header {
        align-items: center;
    }

    .experience__header-date {
        font-size: 14px;
    }

    .experience__description {
        font-size: 14px;
    }

    .about__title {
        font-size: 32px;
    }

    .about__block {
        max-width: 350px;
    }

    .about__block-description {
        font-size: 14px;
    }

    .projects__title {
        font-size: 32px;
    }

    .projects__box-item {
        margin-top: 10px;
    }

    .projects__box-title {
        font-size: 32px;
    }

    .projects__box-name {
        font-size: 24px;
    }

    .testimonial__title {
        font-size: 32px;
    }

    .testimonial__box {
        flex-direction: column;
        align-items: center;
    }

    .testimonial__card {
        max-width: 205px;
        padding: 40px;
        max-width: 400px;
        margin-top: 30px;
    }

    .testimonial__description {
        font-size: 16px;
    }

    .taskbar__item {
        font-size: 16px;
    }

    .feedback__form > button {
        font-size: 18px;
    }


}

@media (min-width: 769px) {
    .menu {
        display: none;
    }
}

@media (max-width: 768px) {
    .container {
        width: 580px;
        padding: 15px;
    }

    .header {
        display: none;
    }

    .header__adaptive {
        display: flex;
    }

    .header__list {
        width: 100%;
    }

    .description__icons {
        bottom: -20px;
    }
}

@media (max-width: 480px) {
    
}

/* TODO: 
    - Make burger button;
    - Make adaptive for 768px and width <= 500px;
    - Fix description icons in description block;

*/