From Clomosy Docs
No edit summary |
No edit summary |
||
| Line 98: | Line 98: | ||
padding: 20px; | padding: 20px; | ||
transition: transform 0.2s ease, background-color 0.3s ease; | transition: transform 0.2s ease, background-color 0.3s ease; | ||
flex: 1 | flex: 0 1 200px; | ||
max-width: | max-width: 200px; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
} | } | ||
| Line 118: | Line 118: | ||
font-weight: bold; | font-weight: bold; | ||
font-size: 1rem; | font-size: 1rem; | ||
color: #000000; | |||
} | } | ||
| Line 135: | Line 136: | ||
@media (max-width: 1024px) { | @media (max-width: 1024px) { | ||
.logo-card { | .logo-card { | ||
flex: 1 | flex: 0 1 180px; | ||
max-width: | max-width: 180px; | ||
} | } | ||
} | } | ||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
.logo-card { | .logo-card { | ||
flex: 1 | flex: 0 1 45%; | ||
max-width: | max-width: 45%; | ||
} | } | ||
} | } | ||
@media (max-width: 480px) { | @media (max-width: 480px) { | ||
.logo-card { | .logo-card { | ||
flex: | flex: 0 1 100%; | ||
max-width: 100%; | max-width: 100%; | ||
} | } | ||
} | } | ||
Revision as of 06:27, 17 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: 0 1 200px;
max-width: 200px;
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;
color: #000000;
}
/* 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: 0 1 180px;
max-width: 180px;
}
}
@media (max-width: 768px) {
.logo-card {
flex: 0 1 45%;
max-width: 45%;
}
}
@media (max-width: 480px) {
.logo-card {
flex: 0 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;
}*/