Şablon:İlgili Kart/styles.css: Revizyonlar arasındaki fark
Kizilbashica sitesinden
More actions
C. Karakuş (mesaj | katkılar) "→@title İlgili Kart Tasarımı: →Kartları yan yana dizen risksiz ana kapsayıcı: .read-more-container { display: block; width: 100%; margin: 20px 0; clear: both; } →Kart Genel Tasarımı - Float ile yan yana dizilim: .tg-related-card { display: block; float: left; width: 48%; →İkişerli yan yana dizilmesi için: margin-right: 2%; margin-bottom: 16px; background-color: #1a1a24; border: 1px..." içeriğiyle yeni sayfa oluşturdu |
C. Karakuş (mesaj | katkılar) Değişiklik özeti yok |
||
| 1. satır: | 1. satır: | ||
/* @title İlgili Kart Tasarımı */ | /* @title İlgili Kart Tasarımı */ | ||
.read-more-container { | .read-more-container { | ||
display: | display: flex; | ||
flex-wrap: wrap; | |||
gap: 16px; | |||
margin: 20px 0; | |||
width: 100%; | width: 100%; | ||
} | } | ||
.tg-related-card { | .tg-related-card { | ||
display: | display: flex; | ||
flex: 1 1 300px; /* Minimum 300px genişlik, sığmazsa alt satıra geçer */ | |||
max-width: 49%; | |||
background-color: #1a1a24; | background-color: #1a1a24; | ||
border: 1px solid #2d2d3d; | border: 1px solid #2d2d3d; | ||
| 24. satır: | 21. satır: | ||
} | } | ||
.tg-related-image { | .tg-related-image { | ||
display: block; | |||
width: 90px; | width: 90px; | ||
height: | height: 90px; | ||
background-color: #111116; | background-color: #111116; | ||
overflow: hidden; | overflow: hidden; | ||
flex-shrink: 0; | |||
} | } | ||
.tg-related-image img { | .tg-related-image img { | ||
width: 90px; | width: 90px; | ||
height: | height: 90px; | ||
object-fit: cover; | |||
} | } | ||
.tg-related-content { | .tg-related-content { | ||
padding: 12px; | |||
overflow: hidden; | |||
display: block; | |||
flex-grow: 1; | |||
} | } | ||
| 56. satır: | 47. satır: | ||
font-size: 14px; | font-size: 14px; | ||
margin-bottom: 4px; | margin-bottom: 4px; | ||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
white-space: nowrap; | white-space: nowrap; | ||
} | } | ||
| 65. satır: | 57. satır: | ||
} | } | ||
.tg-related-desc { | .tg-related-desc { | ||
font-size: 12px; | font-size: 12px; | ||
| 72. satır: | 63. satır: | ||
line-height: 18px; | line-height: 18px; | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
22.21, 7 Temmuz 2026 tarihindeki hâli
/* @title İlgili Kart Tasarımı */
.read-more-container {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin: 20px 0;
width: 100%;
}
.tg-related-card {
display: flex;
flex: 1 1 300px; /* Minimum 300px genişlik, sığmazsa alt satıra geçer */
max-width: 49%;
background-color: #1a1a24;
border: 1px solid #2d2d3d;
border-radius: 8px;
height: 90px;
box-sizing: border-box;
overflow: hidden;
}
.tg-related-image {
display: block;
width: 90px;
height: 90px;
background-color: #111116;
overflow: hidden;
flex-shrink: 0;
}
.tg-related-image img {
width: 90px;
height: 90px;
object-fit: cover;
}
.tg-related-content {
padding: 12px;
overflow: hidden;
display: block;
flex-grow: 1;
}
.tg-related-title {
font-weight: bold;
font-size: 14px;
margin-bottom: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tg-related-title a {
color: #ffffff !important;
text-decoration: none;
}
.tg-related-desc {
font-size: 12px;
color: #a0a0b0;
height: 36px;
line-height: 18px;
overflow: hidden;
}