www/src/static/css/typography.css

283 lines
3.9 KiB
CSS
Raw Normal View History

2022-09-21 21:15:03 +03:00
/* General Typography */
@font-face {
font-family: "pp-neue-machina";
src: url("/fonts/PPNeueMachina-InktrapLight.woff");
}
@font-face {
font-family: "sono";
src: url("/fonts/Sono-Light.woff2");
}
2022-09-21 01:38:48 +03:00
h1,h2,h3,h4,h5,h6,p,.lead{
2022-10-18 06:31:11 +03:00
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
2022-10-13 00:00:49 +03:00
hyphens: auto !important;
2022-09-21 01:38:48 +03:00
}
h1{
font-family: "pp-neue-machina", sans-serif;
color:#00ffd0;
text-transform:uppercase;
text-shadow: 0px 0px 4px #1a1a1a !important;
}
h2{
font-family: "pp-neue-machina", sans-serif;
color:#00ffd0;
}
h3{
font-family: "pp-neue-machina", sans-serif;
color:#00ffd0;
}
h4{
font-family: "pp-neue-machina", sans-serif;
color:#00ffd0;
}
2022-09-21 21:15:03 +03:00
h5{
font-family: "pp-neue-machina", sans-serif;
color:#00ffd0;
text-transform: uppercase;
}
.lead{
background-color: #1a1a1a !important;
}
p{
font-family: "sono", sans-serif;
color: #ffffff;
}
li{
font-family: "sono", sans-serif;
color: #ffffff;
}
2022-10-26 22:16:09 +03:00
a{
color: #00ffd0;
text-decoration: none;
}
a:hover{
2022-10-31 21:18:01 +03:00
color: #00ffd0;
text-decoration: underline;
2022-10-26 22:16:09 +03:00
}
/* Breakpoint-Specific Typography */
/* Extra-Large Screens*/
2022-10-19 22:04:51 +03:00
@media only screen and (min-width: 1200px) {
h1{
font-size: 11.5vw;
line-height: 12.4vw;
margin-top: -1.116vw;
margin-left: -0.837vw;
}
h2{
2022-09-21 21:15:03 +03:00
font-size: 5.5vw;
line-height: 8.4vw;
}
h3{
font-size: 3.8rem;
line-height: 4.8vw;
}
h4{
font-size: 2.121vw;
2022-10-18 02:29:21 +03:00
line-height: 2.5vw;
}
2022-09-21 21:15:03 +03:00
h5{
font-size: 1.5vw;
line-height: 4.116vw;
margin-top: -0.3vw;
margin-bottom: 1.2vw;
}
.lead{
font-size: 1.5vw !important;
line-height: 2.3vw !important;
margin-bottom: 2.232vw;
}
2022-10-13 22:40:48 +03:00
p{
2022-10-26 06:31:08 +03:00
font-size: 1.116vw;
}
2022-10-19 22:04:51 +03:00
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
h1{
2022-09-21 01:38:48 +03:00
font-size: 14vw;
line-height: 15vw;
margin-top: -0.3vw;
margin-left: -0.837vw;
}
h2{
2022-09-21 21:42:10 +03:00
font-size: 6.5vw;
line-height: 10vw;
}
h3{
2022-09-21 21:42:10 +03:00
font-size: 3.4rem;
line-height: 10vw;
}
h4{
2022-09-21 21:42:10 +03:00
font-size: 3vw;
line-height: 5.116vw;
}
h5{
font-size: 1.5vw;
line-height: 5vw;
margin-top: -0.3vw;
margin-bottom: 1.2vw;
}
.lead{
2022-09-21 21:42:10 +03:00
font-size: 2vw !important;
line-height: 2.8vw !important;
margin-bottom: 2.232vw;
}
2022-10-13 22:40:48 +03:00
p{
2022-09-21 21:42:10 +03:00
font-size: 1.667vw;
}
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
h1{
font-size: 14vw;
line-height: 15vw;
margin-top: -0.3vw;
margin-left: -0.837vw;
}
h2{
2022-09-21 22:02:00 +03:00
font-size: 7vw;
line-height: 10vw;
}
h3{
2022-09-21 22:02:00 +03:00
font-size: 4.5vw;
line-height: 10vw;
}
h4{
2022-09-21 22:02:00 +03:00
font-size: 3.5vw;
line-height: 5vw;
}
h5{
font-size: 2vw;
line-height: 5vw;
}
.lead{
font-size: 2.419vw !important;
line-height: 3.5vw !important;
}
2022-10-13 22:40:48 +03:00
p{
2022-09-21 22:02:00 +03:00
font-size: 2.016vw;
}
}
@media only screen and (min-width: 576px) and (max-width: 768px){
h1{
2022-10-31 00:12:58 +03:00
font-size: 14vw;
line-height: 20vw;
2022-10-31 00:12:58 +03:00
margin-top: 2vw;
margin-left: -0.7vw;
}
h2{
font-size: 6rem;
line-height: 7rem;
}
h3{
font-size: 3.8rem;
line-height: 80px;
}
h4{
font-size: 38px;
line-height: 45px;
}
.lead{
font-size: 3.125vw !important;
line-height: 3.776vw !important;
margin-bottom: 40px;
}
2022-10-13 22:40:48 +03:00
p{
font-size: 20px;
}
}
@media only screen and (max-width: 576px) {
2022-10-20 21:58:29 +03:00
.impact{
2022-10-24 23:54:47 +03:00
font-size: 22vw !important;
line-height: 22vw !important;
2022-10-20 21:58:29 +03:00
}
h1{
2022-10-18 07:08:28 +03:00
font-size: 16vw;
2022-10-18 06:31:11 +03:00
line-height: 20.4vw;
}
h2{
font-size: 14vw;
2022-09-23 01:07:50 +03:00
line-height: 5rem;
}
h3{
2022-09-29 00:45:51 +03:00
font-size: 12vw;
2022-10-18 04:46:55 +03:00
line-height: 16vw;
}
h4{
2022-10-18 04:46:55 +03:00
font-size: 7.6vw;
line-height: 9vw;
}
.lead{
font-size: 4.800vw !important;
line-height: 6vw !important;
}
2022-10-13 22:40:48 +03:00
p{
font-size: 4vw;
}
2022-10-13 22:40:48 +03:00
a.nav-link.footer-link.small{
font-size: 3vw;
padding-left: 0px !important;
padding-right: 2.232vw !important;
}
ul.nav.justify-content-end{
justify-content: flex-start !important;
}
}