Difference between revisions of "Template:Vilnius-Lithuania/CSS/Graphic Design"

Line 1: Line 1:
−
        .list-wrapper {
+
.list-wrapper {
−
            display: grid;
+
    display: grid;
−
            grid-template-columns: 1fr 1fr;
+
    grid-template-columns: 1fr 1fr;
−
            width: 80%;
+
    width: 80%;
−
            align-self: center;
+
    align-self: center;
−
            padding: 20px;
+
    padding: 20px;
−
            margin: 20px;
+
    margin: 20px;
−
            box-shadow: 0px 0px 10px #00000029;
+
    box-shadow: 0px 0px 10px #00000029;
−
        }
+
}
−
       
+
 
−
        .list-wrapper h5 {
+
.list-wrapper h5 {
−
            margin-block-start: 0;
+
    margin-block-start: 0;
−
            font-size: 1.5vw;
+
    font-size: 1.5vw;
−
        }
+
}
−
       
+
 
−
        @media screen and (max-width: 767px) {
+
@media screen and (max-width: 767px) {
−
            .list-wrapper h5 {
+
    .list-wrapper h5 {
−
                margin-block-start: 0;
+
        margin-block-start: 0;
−
                font-size: 2.5vw;
+
        font-size: 2.5vw;
−
            }
+
    }
−
        }
+
}
−
       
+
 
−
        .list-wrapper ul {
+
.list-wrapper ul {
−
            padding-inline-start: 0px;
+
    padding-inline-start: 0px;
−
        }
+
}
−
       
+
 
−
        .list-wrapper ul li {
+
.list-wrapper ul li {
−
            margin: 10px 0;
+
    margin: 10px 0;
−
            display: flex;
+
    display: flex;
−
        }
+
}
−
       
+
 
−
        .list-wrapper ul li p {
+
.list-wrapper ul li p {
−
            margin-block-start: 0;
+
    margin-block-start: 0;
−
            margin-block-end: 0;
+
    margin-block-end: 0;
−
        }
+
}
−
       
+
 
−
        .list-wrapper ul:last-of-type {
+
.list-wrapper ul:last-of-type {
−
            list-style: none;
+
    list-style: none;
−
            text-align: end;
+
    text-align: end;
−
        }
+
}
−
       
+
 
−
        .list-wrapper ul:last-of-type li {
+
.list-wrapper ul:last-of-type li {
−
            justify-content: flex-end;
+
    justify-content: flex-end;
−
        }
+
}
−
       
+
 
−
        .list-wrapper ul:last-of-type li::before {
+
.list-wrapper ul:last-of-type li::before {
−
            content: none;
+
    content: none;
−
        }
+
}
−
       
+
 
−
        .list-wrapper ul:last-of-type li::after {
+
.list-wrapper ul:last-of-type li::after {
−
            content: "•";
+
    content: "•";
−
            color: #6281ef;
+
    color: #6281ef;
−
        }
+
}
−
       
+
 
−
        .list-wrapper h5:last-of-type {
+
.list-wrapper h5:last-of-type {
−
            text-align: end;
+
    text-align: end;
−
        }
+
}
−
       
+
 
−
        .content object {
+
.content object {
−
            width: 80%;
+
    width: 80%;
−
            align-self: center;
+
    align-self: center;
−
            padding: 30px 0;
+
    padding: 30px 0;
−
        }
+
}
−
       
+
 
−
        .content .h4 {
+
.content .h4 {
−
            text-transform: uppercase;
+
    text-transform: uppercase;
−
            font-size: 1.3em;
+
    font-size: 1.3em;
−
        }
+
}
−
       
+
 
−
        #animations svg {
+
#animations svg {
−
            height: fit-content !important;
+
    height: fit-content !important;
−
            min-height: 300px;
+
    min-height: 300px;
−
        }
+
}
−
       
+
 
−
        #nav-svg {
+
#nav-svg {
−
            max-height: 40vh;
+
    max-height: 40vh;
−
        }
+
}
−
       
+
 
−
        .photos-wrapper.full-width .three-part svg {
+
.photos-wrapper.full-width .three-part svg {
−
            height: 20vh;
+
    height: 20vh;
−
        }
+
}
−
       
+
 
−
        .content #team {
+
.content #team {
−
            height: 30vh;
+
    height: 30vh;
−
        }
+
}
−
       
+
 
−
        .content #team img {
+
.content #team img {
−
            width: initial;
+
    width: initial;
−
            height: 70%;
+
    height: 70%;
−
        }
+
}
−
       
+
 
−
        @media screen and (max-width:767px) {
+
@media screen and (max-width:800px) {
−
            .content #team img {
+
    .content #team {
−
                height: 60%;
+
        grid-template-columns: 1fr;
−
            }
+
        height: fit-content;
−
         }
+
    }
 +
    .content #team img {
 +
        width: 100%;
 +
        height: auto;
 +
        margin: 20px;
 +
    }
 +
    .content #team img:last-child {
 +
         width: 80%;
 +
    }
 +
}

Revision as of 14:08, 26 October 2020

.list-wrapper { 

   display: grid;
   grid-template-columns: 1fr 1fr;
   width: 80%;
   align-self: center;
   padding: 20px;
   margin: 20px;
   box-shadow: 0px 0px 10px #00000029;

}

.list-wrapper h5 { 

   margin-block-start: 0;
   font-size: 1.5vw;

}

@media screen and (max-width: 767px) { 

   .list-wrapper h5 {
       margin-block-start: 0;
       font-size: 2.5vw;
   }

}

.list-wrapper ul { 

   padding-inline-start: 0px;

}

.list-wrapper ul li { 

   margin: 10px 0;
   display: flex;

}

.list-wrapper ul li p { 

   margin-block-start: 0;
   margin-block-end: 0;

}

.list-wrapper ul:last-of-type { 

   list-style: none;
   text-align: end;

}

.list-wrapper ul:last-of-type li { 

   justify-content: flex-end;

}

.list-wrapper ul:last-of-type li::before { 

   content: none;

}

.list-wrapper ul:last-of-type li::after { 

   content: "•";
   color: #6281ef;

}

.list-wrapper h5:last-of-type { 

   text-align: end;

}

.content object { 

   width: 80%;
   align-self: center;
   padding: 30px 0;

}

.content .h4 { 

   text-transform: uppercase;
   font-size: 1.3em;

}

  1. animations svg {
   height: fit-content !important;
   min-height: 300px;

}

  1. nav-svg {
   max-height: 40vh;

}

.photos-wrapper.full-width .three-part svg { 

   height: 20vh;

}

.content #team { 

   height: 30vh;

}

.content #team img { 

   width: initial;
   height: 70%;

}

@media screen and (max-width:800px) { 

   .content #team {
       grid-template-columns: 1fr;
       height: fit-content;
   }
   .content #team img {
       width: 100%;
       height: auto;
       margin: 20px;
   }
   .content #team img:last-child {
       width: 80%;
   }

}