Improved font metrics

This commit is contained in:
Dan Leech 2015-11-19 12:37:13 +00:00
parent f0c6aeb837
commit fbdacb3724
3 changed files with 33 additions and 66 deletions

View File

@ -55,18 +55,15 @@
}
.title {
font-size: 1rem;
font-weight: 400;
letter-spacing: 0.05rem;
font-weight: 600;
margin: 0;
padding: 1.5rem 1.5rem 0;
text-transform: uppercase;
}
.navbar__text {
font-size: 0.75rem;
letter-spacing: 0.05rem;
font-size: 0.8125rem;
margin: 0;
padding: 0;
text-transform: uppercase;
}
.donate-form {
margin: 0;
@ -81,13 +78,11 @@
cursor: pointer;
display: inline-block;
font-family: inherit;
font-size: 0.75rem;
font-size: 0.8125rem;
font-weight: 400;
letter-spacing: 0.05rem;
margin: 0;
padding: 0;
text-decoration: underline;
text-transform: uppercase;
}
.donate-button:focus, .donate-button:hover {
color: #999;
@ -111,13 +106,10 @@
}
}
.hero {
font-size: 0.75rem;
letter-spacing: 0.05rem;
margin: 0 auto;
max-width: 18rem;
padding: 3rem 3rem 0;
text-align: center;
text-transform: uppercase;
}
.search-field {
-webkit-appearance: none;
@ -130,13 +122,11 @@
color: #999;
display: block;
font-family: inherit;
font-size: 0.75rem;
letter-spacing: 0.05rem;
line-height: 0.75rem;
font-size: 1rem;
line-height: 1rem;
margin: 1.5rem auto;
outline: 0;
padding: 0.375rem 0.375rem 0.375rem 1.375rem;
text-transform: uppercase;
width: 12rem;
}
.tiles {
@ -151,8 +141,7 @@
background: #333;
border: 0.25rem solid #FFF;
color: #FFF;
font-size: 0.75rem;
letter-spacing: 0.05rem;
font-size: 0.8125rem;
line-height: 1rem;
padding: 1.25rem 0.75rem 1.25rem;
text-transform: uppercase;
@ -186,25 +175,25 @@
width: 2rem;
}
.hex {
font-size: 0.75rem;
opacity: 0.5;
text-transform: uppercase;
}
@media (min-width: 500px) { .tiles li { width: 50%; } }
@media (min-width: 700px) { .tiles li { width: 33.333%; } }
@media (min-width: 900px) { .tiles li { width: 25% } }
@media (min-width: 1100px) { .tiles li { width: 20% } }
@media (min-width: 1250px) { .tiles li { width: 16.666% } }
@media (min-width: 1400px) { .tiles li { width: 16.666% } }
@media (min-width: 1700px) { .tiles li { width: 12.5% } }
@media (min-width: 2100px) { .tiles li { width: 10% } }
.footer {
margin: 3rem;
}
.footer p {
font-size: 0.75rem;
letter-spacing: 0.05rem;
font-size: 0.8125rem;
margin: 1.5rem auto 0;
max-width: 31.5rem;
max-width: 25.5rem;
text-align: center;
text-transform: uppercase;
}
</style>
</head>

View File

@ -55,18 +55,15 @@
}
.title {
font-size: 1rem;
font-weight: 400;
letter-spacing: 0.05rem;
font-weight: 600;
margin: 0;
padding: 1.5rem 1.5rem 0;
text-transform: uppercase;
}
.navbar__text {
font-size: 0.75rem;
letter-spacing: 0.05rem;
font-size: 0.8125rem;
margin: 0;
padding: 0;
text-transform: uppercase;
}
.donate-form {
margin: 0;
@ -81,13 +78,11 @@
cursor: pointer;
display: inline-block;
font-family: inherit;
font-size: 0.75rem;
font-size: 0.8125rem;
font-weight: 400;
letter-spacing: 0.05rem;
margin: 0;
padding: 0;
text-decoration: underline;
text-transform: uppercase;
}
.donate-button:focus, .donate-button:hover {
color: #999;
@ -111,13 +106,10 @@
}
}
.hero {
font-size: 0.75rem;
letter-spacing: 0.05rem;
margin: 0 auto;
max-width: 18rem;
padding: 3rem 3rem 0;
text-align: center;
text-transform: uppercase;
}
.search-field {
-webkit-appearance: none;
@ -130,13 +122,11 @@
color: #999;
display: block;
font-family: inherit;
font-size: 0.75rem;
letter-spacing: 0.05rem;
line-height: 0.75rem;
font-size: 1rem;
line-height: 1rem;
margin: 1.5rem auto;
outline: 0;
padding: 0.375rem 0.375rem 0.375rem 1.375rem;
text-transform: uppercase;
width: 12rem;
}
.tiles {
@ -151,8 +141,7 @@
background: #333;
border: 0.25rem solid #FFF;
color: #FFF;
font-size: 0.75rem;
letter-spacing: 0.05rem;
font-size: 0.8125rem;
line-height: 1rem;
padding: 1.25rem 0.75rem 1.25rem;
text-transform: uppercase;
@ -186,25 +175,25 @@
width: 2rem;
}
.hex {
font-size: 0.75rem;
opacity: 0.5;
text-transform: uppercase;
}
@media (min-width: 500px) { .tiles li { width: 50%; } }
@media (min-width: 700px) { .tiles li { width: 33.333%; } }
@media (min-width: 900px) { .tiles li { width: 25% } }
@media (min-width: 1100px) { .tiles li { width: 20% } }
@media (min-width: 1250px) { .tiles li { width: 16.666% } }
@media (min-width: 1400px) { .tiles li { width: 16.666% } }
@media (min-width: 1700px) { .tiles li { width: 12.5% } }
@media (min-width: 2100px) { .tiles li { width: 10% } }
.footer {
margin: 3rem;
}
.footer p {
font-size: 0.75rem;
letter-spacing: 0.05rem;
font-size: 0.8125rem;
margin: 1.5rem auto 0;
max-width: 31.5rem;
max-width: 25.5rem;
text-align: center;
text-transform: uppercase;
}
</style>
</head>

View File

@ -55,18 +55,15 @@
}
.title {
font-size: 1rem;
font-weight: 400;
letter-spacing: 0.05rem;
font-weight: 600;
margin: 0;
padding: 1.5rem 1.5rem 0;
text-transform: uppercase;
}
.navbar__text {
font-size: 0.75rem;
letter-spacing: 0.05rem;
font-size: 0.8125rem;
margin: 0;
padding: 0;
text-transform: uppercase;
}
.donate-form {
margin: 0;
@ -81,13 +78,11 @@
cursor: pointer;
display: inline-block;
font-family: inherit;
font-size: 0.75rem;
font-size: 0.8125rem;
font-weight: 400;
letter-spacing: 0.05rem;
margin: 0;
padding: 0;
text-decoration: underline;
text-transform: uppercase;
}
.donate-button:focus, .donate-button:hover {
color: #999;
@ -111,13 +106,10 @@
}
}
.hero {
font-size: 0.75rem;
letter-spacing: 0.05rem;
margin: 0 auto;
max-width: 18rem;
padding: 3rem 3rem 0;
text-align: center;
text-transform: uppercase;
}
.search-field {
-webkit-appearance: none;
@ -130,13 +122,11 @@
color: #999;
display: block;
font-family: inherit;
font-size: 0.75rem;
letter-spacing: 0.05rem;
line-height: 0.75rem;
font-size: 1rem;
line-height: 1rem;
margin: 1.5rem auto;
outline: 0;
padding: 0.375rem 0.375rem 0.375rem 1.375rem;
text-transform: uppercase;
width: 12rem;
}
.tiles {
@ -151,8 +141,7 @@
background: #333;
border: 0.25rem solid #FFF;
color: #FFF;
font-size: 0.75rem;
letter-spacing: 0.05rem;
font-size: 0.8125rem;
line-height: 1rem;
padding: 1.25rem 0.75rem 1.25rem;
text-transform: uppercase;
@ -186,25 +175,25 @@
width: 2rem;
}
.hex {
font-size: 0.75rem;
opacity: 0.5;
text-transform: uppercase;
}
@media (min-width: 500px) { .tiles li { width: 50%; } }
@media (min-width: 700px) { .tiles li { width: 33.333%; } }
@media (min-width: 900px) { .tiles li { width: 25% } }
@media (min-width: 1100px) { .tiles li { width: 20% } }
@media (min-width: 1250px) { .tiles li { width: 16.666% } }
@media (min-width: 1400px) { .tiles li { width: 16.666% } }
@media (min-width: 1700px) { .tiles li { width: 12.5% } }
@media (min-width: 2100px) { .tiles li { width: 10% } }
.footer {
margin: 3rem;
}
.footer p {
font-size: 0.75rem;
letter-spacing: 0.05rem;
font-size: 0.8125rem;
margin: 1.5rem auto 0;
max-width: 31.5rem;
max-width: 25.5rem;
text-align: center;
text-transform: uppercase;
}
</style>
</head>