ویرایش پایان نامه در موضوع ژنتیک

/* این بخش برای اطمینان از نمایش صحیح در ویرایشگرهای بلوک و کلاسیک است */
/* توضیحات زیر برای راهنمایی کاربر در اعمال استایل‌های پیشنهادی در ویرایشگر است */
/* فونت Vazirmatn برای فارسی یک انتخاب عالی است، در صورت عدم وجود، Sans-serif پیش‌فرض می‌شود */
body {
font-family: ‘Vazirmatn’, sans-serif;
direction: rtl; /* برای پشتیبانی بهتر از زبان فارسی */
text-align: right;
}
h1 {
font-size: 3em; /* مثلاً 48px */
font-weight: 800;
color: #2C3E50; /* یک رنگ سرمه‌ای تیره */
text-align: center;
margin-bottom: 40px;
line-height: 1.2;
}
h2 {
font-size: 2.2em; /* مثلاً 35px */
font-weight: 700;
color: #3498DB; /* آبی روشن */
margin-top: 50px;
margin-bottom: 25px;
border-bottom: 2px solid #3498DB; /* خط آبی زیر عنوان */
padding-bottom: 10px;
text-align: right;
line-height: 1.3;
}
h3 {
font-size: 1.6em; /* مثلاً 26px */
font-weight: 600;
color: #5DADE2; /* آبی کمی روشن‌تر */
margin-top: 40px;
margin-bottom: 20px;
text-align: right;
line-height: 1.4;
}
p {
font-size: 1.05em; /* مثلاً 17px */
line-height: 1.8;
color: #34495E; /* خاکستری تیره */
text-align: justify;
margin-bottom: 20px;
}
ul {
margin-right: 25px;
margin-bottom: 20px;
line-height: 1.8;
color: #34495E;
}
li {
margin-bottom: 8px;
}
a {
color: #3498DB;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* استایل‌های جدول */
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 1em;
text-align: right;
}
th, td {
padding: 12px 15px;
border: 1px solid #ddd;
text-align: right;
}
thead th {
background-color: #3498DB;
color: white;
font-weight: bold;
}
tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
tbody tr:hover {
background-color: #f5f5f5;
}
/* استایل برای بلوک “نقشه راه” (اینفوگرافیک متنی) */
.infographic-container {
background-color: #EBF5FB;
border-left: 5px solid #3498DB;
padding: 25px;
margin: 30px 0;
border-radius: 8px;
}
.infographic-step {
background-color: #FFFFFF;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
padding: 20px;
margin-bottom: 20px; /* فاصله بین آیتم‌ها در موبایل */
}
.infographic-step p {
font-weight: 700;
color: #2C3E50;
font-size: 1.2em;
margin-bottom: 15px;
text-align: right;
}
.infographic-step ul {
list-style-type: none;
padding-right: 0;
margin-right: 0;
line-height: 1.6;
}
.infographic-step ul li {
margin-bottom: 8px;
position: relative;
padding-right: 20px;
}
.infographic-step ul li::before {
content: ‘✔️’; /* آیکون زیبا */
position: absolute;
right: 0;
color: #28B463;
font-size: 1.1em;
line-height: 1.6;
}
/* رسپانسیو برای موبایل و تبلت */
@media (max-width: 768px) {
h1 {
font-size: 2em; /* کوچکتر برای موبایل */
margin-bottom: 20px;
}
h2 {
font-size: 1.6em;
margin-top: 30px;
margin-bottom: 15px;
padding-bottom: 5px;
}
h3 {
font-size: 1.3em;
margin-top: 25px;
margin-bottom: 10px;
}
p {
font-size: 0.95em;
margin-bottom: 15px;
}
.infographic-step {
flex: 1 1 100%; /* در موبایل هر مرحله کامل عرض را بگیرد */
margin-bottom: 15px;
}
.infographic-container > div {
flex-direction: column; /* برای اینکه ایتم‌های اینفوگرافیک زیر هم قرار بگیرند */
}
table, thead, tbody, th, td, tr {
display: block; /* برای جداول رسپانسیو */
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; margin-bottom: 10px; }
td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
text-align: left;
}
td::before {
position: absolute;
top: 6px;
right: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
font-weight: bold;
}
/* لیبل برای هر سلول */
td:nth-of-type(1)::before { content: “اشتباه رایج:”; }
td:nth-of-type(2)::before { content: “راه حل پیشنهادی:”; }
}
/* استایل‌های برای تبلت */
@media (min-width: 769px) and (max-width: 1024px) {
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.9em;
}
h3 {
font-size: 1.4em;
}
.infographic-step {
flex: 1 1 48%; /* دو ستون برای تبلت */
}
}