From Clomosy Docs
No edit summary |
No edit summary |
||
| Line 83: | Line 83: | ||
border-color: #ffeeba; | border-color: #ffeeba; | ||
} | } | ||
.logo-container { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 20px; | |||
justify-content: center; | |||
} | |||
.logo-card { | |||
background-color: #ffffff; | |||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); | |||
border-radius: 12px; | |||
text-align: center; | |||
padding: 20px; | |||
transition: transform 0.2s ease, background-color 0.3s ease; | |||
flex: 1 1 calc(20% - 20px); | |||
max-width: calc(20% - 20px); | |||
box-sizing: border-box; | |||
} | |||
.logo-card:hover { | |||
transform: translateY(-4px); | |||
} | |||
.logo-card img { | |||
max-width: 100%; | |||
height: auto; | |||
display: block; | |||
margin: 0 auto 10px auto; | |||
border: none; | |||
} | |||
.logo-card .logo-title { | |||
font-weight: bold; | |||
font-size: 1rem; | |||
} | |||
/* Karanlık mod */ | |||
@media (prefers-color-scheme: dark) { | |||
.logo-card { | |||
background-color: #1e1e1f; | |||
box-shadow: 0 4px 10px rgba(255, 255, 255, 0.05); | |||
} | |||
.logo-card .logo-title { | |||
color: #ffffff; | |||
} | |||
} | |||
/* Responsive */ | |||
@media (max-width: 1024px) { | |||
.logo-card { | |||
flex: 1 1 calc(33.33% - 20px); | |||
max-width: calc(33.33% - 20px); | |||
} | |||
} | |||
@media (max-width: 768px) { | |||
.logo-card { | |||
flex: 1 1 calc(50% - 20px); | |||
max-width: calc(50% - 20px); | |||
} | |||
} | |||
@media (max-width: 480px) { | |||
.logo-card { | |||
flex: 1 1 100%; | |||
max-width: 100%; | |||
} | |||
} | |||
/* Açılır menüyü gizle | /* Açılır menüyü gizle | ||
Revision as of 15:10, 16 April 2025
/* CSS placed here will be applied to all skins */
/*#toc {float:right;margin:0 0 1em 1em;position:fixed;top:100px;right:10px;};*/
/* tartışma sekmesi kaldırma kodu*/
#ca-talk { display: none !important; }
/* Geçmişi görüntüle/Geçmiş sekmesi kaldırma kodu*/
#ca-history { display: none !important;}
/* Kaynak sekmesini görüntüle; bu sekme, sayfaları düzenleme izni olmayan kullanıcı gruplarına ait olan kullanıcılar tarafından kullanılabilir. Bununla kullanıcı, sayfanın kaynak metnini değiştiremeden görüntüleyebilir.*/
#ca-viewsource { display: none !important; }
/* Grid yapısı oluşturma*/
.tutorialsWrapper {
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* responsive sütunlu grid */
align-items: stretch;
}
.card {
position: relative;
padding: 20px;
background-color: #f2f2f4;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
border-radius: 4px;
border: 1px solid #ddd;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card-title {
font-size: 1.5em;
font-weight: bold;
color: #00b282;
}
.card-subtitle {
font-size: 1.2em;
color: #757575;
}
.card-description {
color: #004d40;
margin-top: 10px;
}
.card-link a {
color: #1e88e5;
text-decoration: none;
font-weight: bold;
}
.card-link a:hover {
text-decoration: underline;
}
.large-number {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 5em;
color: #dddddd;
font-weight: bold;
}
.alert {
position: relative;
padding: 0.75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
border-radius: 0.25rem;
}
.alert-warning {
color: #856404;
background-color: #fff3cd;
border-color: #ffeeba;
}
.logo-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.logo-card {
background-color: #ffffff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
border-radius: 12px;
text-align: center;
padding: 20px;
transition: transform 0.2s ease, background-color 0.3s ease;
flex: 1 1 calc(20% - 20px);
max-width: calc(20% - 20px);
box-sizing: border-box;
}
.logo-card:hover {
transform: translateY(-4px);
}
.logo-card img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto 10px auto;
border: none;
}
.logo-card .logo-title {
font-weight: bold;
font-size: 1rem;
}
/* Karanlık mod */
@media (prefers-color-scheme: dark) {
.logo-card {
background-color: #1e1e1f;
box-shadow: 0 4px 10px rgba(255, 255, 255, 0.05);
}
.logo-card .logo-title {
color: #ffffff;
}
}
/* Responsive */
@media (max-width: 1024px) {
.logo-card {
flex: 1 1 calc(33.33% - 20px);
max-width: calc(33.33% - 20px);
}
}
@media (max-width: 768px) {
.logo-card {
flex: 1 1 calc(50% - 20px);
max-width: calc(50% - 20px);
}
}
@media (max-width: 480px) {
.logo-card {
flex: 1 1 100%;
max-width: 100%;
}
}
/* Açılır menüyü gizle
.dropdown-content {
display: none;
}*/
/* Yan çubuk ve içerik bölgesini düzenleme */
/*.sidebar {
float: left;
width: 45%; /* Yan çubuk genişliği
}
#content {
float: left;
}*/