Safari fix: change title to rely on widths rather than heights to
control the image (title, clouds) sizes.
This commit is contained in:
Dan Mills
Родитель
a8d0a0be49
Коммит
30562fca26
|
|
@ -13,13 +13,12 @@
|
|||
&.small { .title-inner { .logo { margin: 20px auto; } } }
|
||||
.title-inner {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 2fr;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
padding: 10px 0 0;
|
||||
width: $content-width-phone;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
height: 56px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
.logo {
|
||||
|
|
@ -27,8 +26,9 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
.clouds { height: 25px; }
|
||||
.clouds { width: 100%; }
|
||||
.cloud-left { float: right; }
|
||||
.cloud-right { float: left; }
|
||||
|
||||
|
|
@ -44,27 +44,18 @@
|
|||
|
||||
@media #{$mq-phone-wide} {
|
||||
width: $content-width-phone-wide;
|
||||
.clouds { height: 45px; }
|
||||
.cloud-left { margin-right: 10px; }
|
||||
.cloud-right { margin-left: 10px; }
|
||||
}
|
||||
@media #{$mq-tablet} {
|
||||
width: $content-width-tablet;
|
||||
.logo { height: 65px; }
|
||||
.clouds { height: 55px; }
|
||||
.cloud-left { margin-right: 10px; }
|
||||
.cloud-right { margin-left: 10px; }
|
||||
width: $content-width-tablet - 100px;
|
||||
h2 {
|
||||
font-size: 14pt;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
@media #{$mq-desktop} {
|
||||
width: $content-width-desktop;
|
||||
.logo { height: 80px; }
|
||||
.clouds { height: 80px; }
|
||||
.cloud-left { margin-right: 10px; }
|
||||
.cloud-right { margin-left: 10px; }
|
||||
width: $content-width-desktop - 400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1539,20 +1539,20 @@ header {
|
|||
margin: 20px auto; }
|
||||
.title .title-inner {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 2fr;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
padding: 10px 0 0;
|
||||
width: 250px; }
|
||||
.title .title-inner img {
|
||||
display: block;
|
||||
height: 56px;
|
||||
margin: 10px auto; }
|
||||
.title .title-inner .logo {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center; }
|
||||
justify-content: center;
|
||||
width: 100%; }
|
||||
.title .title-inner .clouds {
|
||||
height: 25px; }
|
||||
width: 100%; }
|
||||
.title .title-inner .cloud-left {
|
||||
float: right; }
|
||||
.title .title-inner .cloud-right {
|
||||
|
|
@ -1568,37 +1568,19 @@ header {
|
|||
@media screen and (min-width: 480px) {
|
||||
.title .title-inner {
|
||||
width: 460px; }
|
||||
.title .title-inner .clouds {
|
||||
height: 45px; }
|
||||
.title .title-inner .cloud-left {
|
||||
margin-right: 10px; }
|
||||
.title .title-inner .cloud-right {
|
||||
margin-left: 10px; } }
|
||||
@media screen and (min-width: 760px) {
|
||||
.title .title-inner {
|
||||
width: 730px; }
|
||||
.title .title-inner .logo {
|
||||
height: 65px; }
|
||||
.title .title-inner .clouds {
|
||||
height: 55px; }
|
||||
.title .title-inner .cloud-left {
|
||||
margin-right: 10px; }
|
||||
.title .title-inner .cloud-right {
|
||||
margin-left: 10px; }
|
||||
width: 630px; }
|
||||
.title .title-inner h2 {
|
||||
font-size: 14pt;
|
||||
font-weight: 400; } }
|
||||
@media screen and (min-width: 1000px) {
|
||||
.title .title-inner {
|
||||
width: 1000px; }
|
||||
.title .title-inner .logo {
|
||||
height: 80px; }
|
||||
.title .title-inner .clouds {
|
||||
height: 80px; }
|
||||
.title .title-inner .cloud-left {
|
||||
margin-right: 10px; }
|
||||
.title .title-inner .cloud-right {
|
||||
margin-left: 10px; } }
|
||||
width: 600px; } }
|
||||
|
||||
.submit-an-ad h3 {
|
||||
margin-top: 20px; }
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1539,20 +1539,20 @@ header {
|
|||
margin: 20px auto; }
|
||||
.title .title-inner {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 2fr;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
padding: 10px 0 0;
|
||||
width: 250px; }
|
||||
.title .title-inner img {
|
||||
display: block;
|
||||
height: 56px;
|
||||
margin: 10px auto; }
|
||||
.title .title-inner .logo {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center; }
|
||||
justify-content: center;
|
||||
width: 100%; }
|
||||
.title .title-inner .clouds {
|
||||
height: 25px; }
|
||||
width: 100%; }
|
||||
.title .title-inner .cloud-left {
|
||||
float: right; }
|
||||
.title .title-inner .cloud-right {
|
||||
|
|
@ -1568,37 +1568,19 @@ header {
|
|||
@media screen and (min-width: 480px) {
|
||||
.title .title-inner {
|
||||
width: 460px; }
|
||||
.title .title-inner .clouds {
|
||||
height: 45px; }
|
||||
.title .title-inner .cloud-left {
|
||||
margin-right: 10px; }
|
||||
.title .title-inner .cloud-right {
|
||||
margin-left: 10px; } }
|
||||
@media screen and (min-width: 760px) {
|
||||
.title .title-inner {
|
||||
width: 730px; }
|
||||
.title .title-inner .logo {
|
||||
height: 65px; }
|
||||
.title .title-inner .clouds {
|
||||
height: 55px; }
|
||||
.title .title-inner .cloud-left {
|
||||
margin-right: 10px; }
|
||||
.title .title-inner .cloud-right {
|
||||
margin-left: 10px; }
|
||||
width: 630px; }
|
||||
.title .title-inner h2 {
|
||||
font-size: 14pt;
|
||||
font-weight: 400; } }
|
||||
@media screen and (min-width: 1000px) {
|
||||
.title .title-inner {
|
||||
width: 1000px; }
|
||||
.title .title-inner .logo {
|
||||
height: 80px; }
|
||||
.title .title-inner .clouds {
|
||||
height: 80px; }
|
||||
.title .title-inner .cloud-left {
|
||||
margin-right: 10px; }
|
||||
.title .title-inner .cloud-right {
|
||||
margin-left: 10px; } }
|
||||
width: 600px; } }
|
||||
|
||||
.submit-an-ad h3 {
|
||||
margin-top: 20px; }
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1539,20 +1539,20 @@ header {
|
|||
margin: 20px auto; }
|
||||
.title .title-inner {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 2fr;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
padding: 10px 0 0;
|
||||
width: 250px; }
|
||||
.title .title-inner img {
|
||||
display: block;
|
||||
height: 56px;
|
||||
margin: 10px auto; }
|
||||
.title .title-inner .logo {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center; }
|
||||
justify-content: center;
|
||||
width: 100%; }
|
||||
.title .title-inner .clouds {
|
||||
height: 25px; }
|
||||
width: 100%; }
|
||||
.title .title-inner .cloud-left {
|
||||
float: right; }
|
||||
.title .title-inner .cloud-right {
|
||||
|
|
@ -1568,37 +1568,19 @@ header {
|
|||
@media screen and (min-width: 480px) {
|
||||
.title .title-inner {
|
||||
width: 460px; }
|
||||
.title .title-inner .clouds {
|
||||
height: 45px; }
|
||||
.title .title-inner .cloud-left {
|
||||
margin-right: 10px; }
|
||||
.title .title-inner .cloud-right {
|
||||
margin-left: 10px; } }
|
||||
@media screen and (min-width: 760px) {
|
||||
.title .title-inner {
|
||||
width: 730px; }
|
||||
.title .title-inner .logo {
|
||||
height: 65px; }
|
||||
.title .title-inner .clouds {
|
||||
height: 55px; }
|
||||
.title .title-inner .cloud-left {
|
||||
margin-right: 10px; }
|
||||
.title .title-inner .cloud-right {
|
||||
margin-left: 10px; }
|
||||
width: 630px; }
|
||||
.title .title-inner h2 {
|
||||
font-size: 14pt;
|
||||
font-weight: 400; } }
|
||||
@media screen and (min-width: 1000px) {
|
||||
.title .title-inner {
|
||||
width: 1000px; }
|
||||
.title .title-inner .logo {
|
||||
height: 80px; }
|
||||
.title .title-inner .clouds {
|
||||
height: 80px; }
|
||||
.title .title-inner .cloud-left {
|
||||
margin-right: 10px; }
|
||||
.title .title-inner .cloud-right {
|
||||
margin-left: 10px; } }
|
||||
width: 600px; } }
|
||||
|
||||
footer {
|
||||
width: 100%;
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1539,20 +1539,20 @@ header {
|
|||
margin: 20px auto; }
|
||||
.title .title-inner {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 2fr;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
padding: 10px 0 0;
|
||||
width: 250px; }
|
||||
.title .title-inner img {
|
||||
display: block;
|
||||
height: 56px;
|
||||
margin: 10px auto; }
|
||||
.title .title-inner .logo {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center; }
|
||||
justify-content: center;
|
||||
width: 100%; }
|
||||
.title .title-inner .clouds {
|
||||
height: 25px; }
|
||||
width: 100%; }
|
||||
.title .title-inner .cloud-left {
|
||||
float: right; }
|
||||
.title .title-inner .cloud-right {
|
||||
|
|
@ -1568,37 +1568,19 @@ header {
|
|||
@media screen and (min-width: 480px) {
|
||||
.title .title-inner {
|
||||
width: 460px; }
|
||||
.title .title-inner .clouds {
|
||||
height: 45px; }
|
||||
.title .title-inner .cloud-left {
|
||||
margin-right: 10px; }
|
||||
.title .title-inner .cloud-right {
|
||||
margin-left: 10px; } }
|
||||
@media screen and (min-width: 760px) {
|
||||
.title .title-inner {
|
||||
width: 730px; }
|
||||
.title .title-inner .logo {
|
||||
height: 65px; }
|
||||
.title .title-inner .clouds {
|
||||
height: 55px; }
|
||||
.title .title-inner .cloud-left {
|
||||
margin-right: 10px; }
|
||||
.title .title-inner .cloud-right {
|
||||
margin-left: 10px; }
|
||||
width: 630px; }
|
||||
.title .title-inner h2 {
|
||||
font-size: 14pt;
|
||||
font-weight: 400; } }
|
||||
@media screen and (min-width: 1000px) {
|
||||
.title .title-inner {
|
||||
width: 1000px; }
|
||||
.title .title-inner .logo {
|
||||
height: 80px; }
|
||||
.title .title-inner .clouds {
|
||||
height: 80px; }
|
||||
.title .title-inner .cloud-left {
|
||||
margin-right: 10px; }
|
||||
.title .title-inner .cloud-right {
|
||||
margin-left: 10px; } }
|
||||
width: 600px; } }
|
||||
|
||||
.submit-an-ad h3 {
|
||||
margin-top: 20px; }
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1539,20 +1539,20 @@ header {
|
|||
margin: 20px auto; }
|
||||
.title .title-inner {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 2fr;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
padding: 10px 0 0;
|
||||
width: 250px; }
|
||||
.title .title-inner img {
|
||||
display: block;
|
||||
height: 56px;
|
||||
margin: 10px auto; }
|
||||
.title .title-inner .logo {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center; }
|
||||
justify-content: center;
|
||||
width: 100%; }
|
||||
.title .title-inner .clouds {
|
||||
height: 25px; }
|
||||
width: 100%; }
|
||||
.title .title-inner .cloud-left {
|
||||
float: right; }
|
||||
.title .title-inner .cloud-right {
|
||||
|
|
@ -1568,37 +1568,19 @@ header {
|
|||
@media screen and (min-width: 480px) {
|
||||
.title .title-inner {
|
||||
width: 460px; }
|
||||
.title .title-inner .clouds {
|
||||
height: 45px; }
|
||||
.title .title-inner .cloud-left {
|
||||
margin-right: 10px; }
|
||||
.title .title-inner .cloud-right {
|
||||
margin-left: 10px; } }
|
||||
@media screen and (min-width: 760px) {
|
||||
.title .title-inner {
|
||||
width: 730px; }
|
||||
.title .title-inner .logo {
|
||||
height: 65px; }
|
||||
.title .title-inner .clouds {
|
||||
height: 55px; }
|
||||
.title .title-inner .cloud-left {
|
||||
margin-right: 10px; }
|
||||
.title .title-inner .cloud-right {
|
||||
margin-left: 10px; }
|
||||
width: 630px; }
|
||||
.title .title-inner h2 {
|
||||
font-size: 14pt;
|
||||
font-weight: 400; } }
|
||||
@media screen and (min-width: 1000px) {
|
||||
.title .title-inner {
|
||||
width: 1000px; }
|
||||
.title .title-inner .logo {
|
||||
height: 80px; }
|
||||
.title .title-inner .clouds {
|
||||
height: 80px; }
|
||||
.title .title-inner .cloud-left {
|
||||
margin-right: 10px; }
|
||||
.title .title-inner .cloud-right {
|
||||
margin-left: 10px; } }
|
||||
width: 600px; } }
|
||||
|
||||
.submit-an-ad h3 {
|
||||
margin-top: 20px; }
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1539,20 +1539,20 @@ header {
|
|||
margin: 20px auto; }
|
||||
.title .title-inner {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 2fr;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
padding: 10px 0 0;
|
||||
width: 250px; }
|
||||
.title .title-inner img {
|
||||
display: block;
|
||||
height: 56px;
|
||||
margin: 10px auto; }
|
||||
.title .title-inner .logo {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center; }
|
||||
justify-content: center;
|
||||
width: 100%; }
|
||||
.title .title-inner .clouds {
|
||||
height: 25px; }
|
||||
width: 100%; }
|
||||
.title .title-inner .cloud-left {
|
||||
float: right; }
|
||||
.title .title-inner .cloud-right {
|
||||
|
|
@ -1568,37 +1568,19 @@ header {
|
|||
@media screen and (min-width: 480px) {
|
||||
.title .title-inner {
|
||||
width: 460px; }
|
||||
.title .title-inner .clouds {
|
||||
height: 45px; }
|
||||
.title .title-inner .cloud-left {
|
||||
margin-right: 10px; }
|
||||
.title .title-inner .cloud-right {
|
||||
margin-left: 10px; } }
|
||||
@media screen and (min-width: 760px) {
|
||||
.title .title-inner {
|
||||
width: 730px; }
|
||||
.title .title-inner .logo {
|
||||
height: 65px; }
|
||||
.title .title-inner .clouds {
|
||||
height: 55px; }
|
||||
.title .title-inner .cloud-left {
|
||||
margin-right: 10px; }
|
||||
.title .title-inner .cloud-right {
|
||||
margin-left: 10px; }
|
||||
width: 630px; }
|
||||
.title .title-inner h2 {
|
||||
font-size: 14pt;
|
||||
font-weight: 400; } }
|
||||
@media screen and (min-width: 1000px) {
|
||||
.title .title-inner {
|
||||
width: 1000px; }
|
||||
.title .title-inner .logo {
|
||||
height: 80px; }
|
||||
.title .title-inner .clouds {
|
||||
height: 80px; }
|
||||
.title .title-inner .cloud-left {
|
||||
margin-right: 10px; }
|
||||
.title .title-inner .cloud-right {
|
||||
margin-left: 10px; } }
|
||||
width: 600px; } }
|
||||
|
||||
.submit-an-ad h3 {
|
||||
margin-top: 20px; }
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1539,20 +1539,20 @@ header {
|
|||
margin: 20px auto; }
|
||||
.title .title-inner {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 2fr;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
padding: 10px 0 0;
|
||||
width: 250px; }
|
||||
.title .title-inner img {
|
||||
display: block;
|
||||
height: 56px;
|
||||
margin: 10px auto; }
|
||||
.title .title-inner .logo {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center; }
|
||||
justify-content: center;
|
||||
width: 100%; }
|
||||
.title .title-inner .clouds {
|
||||
height: 25px; }
|
||||
width: 100%; }
|
||||
.title .title-inner .cloud-left {
|
||||
float: right; }
|
||||
.title .title-inner .cloud-right {
|
||||
|
|
@ -1568,37 +1568,19 @@ header {
|
|||
@media screen and (min-width: 480px) {
|
||||
.title .title-inner {
|
||||
width: 460px; }
|
||||
.title .title-inner .clouds {
|
||||
height: 45px; }
|
||||
.title .title-inner .cloud-left {
|
||||
margin-right: 10px; }
|
||||
.title .title-inner .cloud-right {
|
||||
margin-left: 10px; } }
|
||||
@media screen and (min-width: 760px) {
|
||||
.title .title-inner {
|
||||
width: 730px; }
|
||||
.title .title-inner .logo {
|
||||
height: 65px; }
|
||||
.title .title-inner .clouds {
|
||||
height: 55px; }
|
||||
.title .title-inner .cloud-left {
|
||||
margin-right: 10px; }
|
||||
.title .title-inner .cloud-right {
|
||||
margin-left: 10px; }
|
||||
width: 630px; }
|
||||
.title .title-inner h2 {
|
||||
font-size: 14pt;
|
||||
font-weight: 400; } }
|
||||
@media screen and (min-width: 1000px) {
|
||||
.title .title-inner {
|
||||
width: 1000px; }
|
||||
.title .title-inner .logo {
|
||||
height: 80px; }
|
||||
.title .title-inner .clouds {
|
||||
height: 80px; }
|
||||
.title .title-inner .cloud-left {
|
||||
margin-right: 10px; }
|
||||
.title .title-inner .cloud-right {
|
||||
margin-left: 10px; } }
|
||||
width: 600px; } }
|
||||
|
||||
.submit-an-ad h3 {
|
||||
margin-top: 20px; }
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1539,20 +1539,20 @@ header {
|
|||
margin: 20px auto; }
|
||||
.title .title-inner {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 2fr;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
padding: 10px 0 0;
|
||||
width: 250px; }
|
||||
.title .title-inner img {
|
||||
display: block;
|
||||
height: 56px;
|
||||
margin: 10px auto; }
|
||||
.title .title-inner .logo {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center; }
|
||||
justify-content: center;
|
||||
width: 100%; }
|
||||
.title .title-inner .clouds {
|
||||
height: 25px; }
|
||||
width: 100%; }
|
||||
.title .title-inner .cloud-left {
|
||||
float: right; }
|
||||
.title .title-inner .cloud-right {
|
||||
|
|
@ -1568,37 +1568,19 @@ header {
|
|||
@media screen and (min-width: 480px) {
|
||||
.title .title-inner {
|
||||
width: 460px; }
|
||||
.title .title-inner .clouds {
|
||||
height: 45px; }
|
||||
.title .title-inner .cloud-left {
|
||||
margin-right: 10px; }
|
||||
.title .title-inner .cloud-right {
|
||||
margin-left: 10px; } }
|
||||
@media screen and (min-width: 760px) {
|
||||
.title .title-inner {
|
||||
width: 730px; }
|
||||
.title .title-inner .logo {
|
||||
height: 65px; }
|
||||
.title .title-inner .clouds {
|
||||
height: 55px; }
|
||||
.title .title-inner .cloud-left {
|
||||
margin-right: 10px; }
|
||||
.title .title-inner .cloud-right {
|
||||
margin-left: 10px; }
|
||||
width: 630px; }
|
||||
.title .title-inner h2 {
|
||||
font-size: 14pt;
|
||||
font-weight: 400; } }
|
||||
@media screen and (min-width: 1000px) {
|
||||
.title .title-inner {
|
||||
width: 1000px; }
|
||||
.title .title-inner .logo {
|
||||
height: 80px; }
|
||||
.title .title-inner .clouds {
|
||||
height: 80px; }
|
||||
.title .title-inner .cloud-left {
|
||||
margin-right: 10px; }
|
||||
.title .title-inner .cloud-right {
|
||||
margin-left: 10px; } }
|
||||
width: 600px; } }
|
||||
|
||||
.submit-an-ad h3 {
|
||||
margin-top: 20px; }
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Загрузка…
Ссылка в новой задаче