موضوع و عنوان پایان نامه رشته حفاظت و مرمت میراث معماری + جدید و بروز: راهنمای جامع برای دانشجویان

/*
This CSS section is provided as a guide for rendering in a web environment or a block editor
that supports custom CSS. For direct copy-paste into a block editor that only accepts inline styles,
the inline styles provided within the HTML tags should be prioritized.
However, for responsiveness and better design control, external CSS or embedded tags are ideal.
*/
@import url(‘https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&display=swap’);

body {
font-family: ‘Vazirmatn’, sans-serif;
direction: rtl;
text-align: right;
color: #333333;
background-color: #f5f5f5; /* Light background for the whole page */
margin: 0;
padding: 20px;
box-sizing: border-box;
}

/* Base styles for responsiveness */
h1, h2, h3, p, ul, ol, table, details, summary {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}

/* Adjustments for smaller screens (mobile) */
@media (max-width: 768px) {
h1 {
font-size: 1.8em !important;
line-height: 1.4 !important;
}
h2 {
font-size: 1.4em !important;
line-height: 1.5 !important;
}
h3 {
font-size: 1.2em !important;
line-height: 1.6 !important;
}
p, li, table, th, td, summary {
font-size: 1em !important;
line-height: 1.6 !important;
}
div {
padding: 20px !important;
margin: 20px 0 !important;
}
ul li, ol li {
margin-bottom: 8px !important;
}
table, thead, tbody, th, td, tr {
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
border: 1px solid #ccc;
margin-bottom: 15px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50% !important; /* Adjust based on label width */
text-align: right !important;
flex-basis: 100%;
box-sizing: border-box;
}
td:before {
position: absolute;
top: 0;
right: 0;
width: 45%;
padding-right: 10px;
white-space: nowrap;
font-weight: bold;
text-align: left;
box-sizing: border-box;
}
td:nth-of-type(1):before { content: “حوزه پژوهش:”; }
td:nth-of-type(2):before { content: “عنوان پیشنهادی:”; }
/* Specific table row styling for mobile */
table tbody tr td {
background-color: #F8FCFE !important; /* Ensures consistent background on mobile */
}
table tbody tr:nth-child(even) td {
background-color: #FFFFFF !important;
}
}

/* General styling for headings (can be overridden by inline styles) */
h1 {
font-size: 2.5em;
font-weight: bold;
color: #333333;
text-align: center;
line-height: 1.3;
}

h2 {
font-size: 1.8em;
font-weight: bold;
color: #2C3E50;
border-bottom: 3px solid #A7D9E6;
padding-bottom: 10px;
margin-bottom: 25px;
text-align: right;
}

h2.center {
text-align: center;
}

h3 {
font-size: 1.4em;
font-weight: bold;
color: #333333;
margin-top: 25px;
margin-bottom: 15px;
text-align: right;
}

/* General paragraph and list styling */
p {
font-size: 1.1em;
line-height: 1.8;
color: #444444;
margin-bottom: 1em;
}

ul, ol {
padding-right: 25px;
font-size: 1.1em;
line-height: 1.8;
color: #555555;
margin-bottom: 1em;
}

li {
margin-bottom: 8px;
}

a {
color: #007bff;
text-decoration: none;
transition: color 0.3s ease;
}

a:hover {
color: #0056b3;
}

/* Styling for content blocks */
div {
padding: 30px;
border-radius: 15px;
margin: 30px auto;
max-width: 900px; /* Optional: Constrain width for larger screens */
box-sizing: border-box;
}

/* Specific styling for the table of contents */
#section1 ul li a {
padding: 10px 15px;
background-color: #EBF5F8;
border-radius: 8px;
display: block;
transition: background-color 0.3s ease;
}

#section1 ul li a:hover {
background-color: #D6EBF1;
}

/* Styling for the info-graphic replacement */
#section3 div {
border: 1px solid #B2EBF2;
background-color: #FFFFFF;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

#section3 ul li {
background-color: #F8FCFE;
padding: 12px 18px;
border-left: 5px solid; /* Defined in inline styles for specific colors */
border-radius: 8px;
margin-bottom: 15px;
}

/* Table styling */
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
font-size: 1em;
line-height: 1.6;
text-align: right;
direction: rtl;
border-radius: 10px;
overflow: hidden; /* Ensures rounded corners apply to table content */
}

table thead {
background-color: #B2EBF2;
}

table th, table td {
padding: 12px 15px;
border: 1px solid #ddd;
color: #333333;
}

table th {
font-weight: bold;
color: #2C3E50;
text-align: center;
}

table tbody tr:nth-child(odd) {
background-color: #F8FCFE;
}

table tbody tr:nth-child(even) {
background-color: #FFFFFF;
}

/* FAQ styling */
details {
margin-bottom: 15px;
background-color: #FFFFFF;
border: 1px solid #B2EBF2;
border-radius: 10px;
}

summary {
font-size: 1.2em;
font-weight: bold;
color: #333333;
padding: 15px 20px;
cursor: pointer;
display: block;
background-color: #F8FCFE;
border-radius: 10px;
transition: background-color 0.3s ease;
}

summary:hover {
background-color: #EBF5F8;
}

details[open] summary {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}

details p {
padding: 15px 20px;
border-top: 1px solid #eee;
margin: 0;
font-size: 1.05em;
line-height: 1.7;
color: #555555;
}

<!–
توضیحات مهم برای ویرایشگر بلوک:

1. **هدینگ‌ها (H1, H2, H3):** برای اطمینان از شناسایی صحیح به عنوان هدینگ، متن اصلی هدینگ‌ها را در داخل تگ‌های

،

و

قرار داده‌ام. برای اعمال سایز و ضخامت، از `inline style` و `` استفاده شده است. در ویرایشگر بلوک، معمولاً با انتخاب متن و استفاده از ابزارهای ویرایشگر (مانند Dropdown “Heading 1”, “Heading 2”, “Heading 3”) می‌توانید این استایل‌ها را اعمال کنید. اگر ویرایشگر از `inline style` پشتیبانی کند، استایل‌های پیشنهادی اعمال خواهند شد.

2. **طراحی و رنگ‌بندی:** از تگ `

` با `inline style` برای هر بخش (Section) استفاده شده است تا پس‌زمینه، پدینگ، گردی گوشه‌ها و سایه منحصر به فردی داشته باشند. این کدها باید مستقیماً در ویرایشگر بلوک (در حالت HTML یا Code Editor) قرار گیرند.

3. **اینفوگرافیک متنی:** جایگزینی برای اینفوگرافیک تصویری است. این بخش از یک `div` با استایل خاص و لیست‌های `

` با `border-left` رنگی و آیکون‌های متنی (مانند 🛠️) بهره می‌برد تا اطلاعات به صورت بصری و سازمان‌یافته نمایش داده شوند.

4. **جدول آموزشی:** با تگ‌های استاندارد `

`, `

`, `

`, `

`, `

` و استایل‌های `inline` برای رنگ‌بندی و حاشیه‌ها طراحی شده است. 5. **FAQ (سوالات متداول):** از تگ `details` و `summary` HTML استفاده شده که به صورت پیش‌فرض قابل باز و بسته شدن هستند و برای تجربه کاربری موبایل و دسترسی‌پذیری عالی هستند. استایل‌های `inline` برای زیبایی ظاهری آن به کار رفته است. 6. **رسپانسیو بودن:** ساختار با استفاده از `div` ها و پدینگ‌های مناسب، و همچنین استایل‌های CSS که در انتهای مقاله قرار داده شده (برای ویرایشگرهایی که قابلیت اضافه کردن CSS سفارشی دارند)، به گونه‌ای است که محتوا روی دستگاه‌های مختلف به خوبی نمایش داده شود. در صورت عدم پشتیبانی ویرایشگر از تگ `style`، ویژگی‌های `responsive` عمدتاً از طریق ساختار ساده و استفاده از `inline-block` ها به جای `float`ها و `width`های ثابت، خود را حفظ می‌کند. برای نمایش بهتر جدول در موبایل، پیشنهاد می‌شود از حالت اسکرول افقی `overflow-x: auto` استفاده شود یا CSS ارائه شده در پایین را در صورت امکان به سایت اضافه کنید. **نحوه کپی در ویرایشگر بلوک:** محتوای این مقاله را به صورت کامل (شامل تمام تگ‌های HTML و `inline style` ها) کپی کرده و در یک بلوک “Custom HTML” یا “Code” در ویرایشگر بلوک خود قرار دهید. سپس می‌توانید آن را به صورت بصری مشاهده کنید. اگر ویرایشگر امکان استایل‌دهی بیشتری به بلوک‌ها می‌دهد، می‌توانید استایل‌های موجود را با استایل‌های بومی ویرایشگر تطبیق دهید تا کنترل بیشتری روی ظاهر نهایی داشته باشید. –>