مدیاویکی:Mobile.css

* Vazir Font */
 @font-face {
     font-family: 'vazir';
     src: url('/fonts/Vazir.woff2') format('woff2'), url('/fonts/Vazir.woff') format('woff'), url('/fonts/Vazir.ttf') format('truetype');
}
/* Amiri Font */
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 400;
  src: local('Amiri Regular'), local('Amiri-Regular'), url(https://fonts.gstatic.com/s/amiri/v13/J7aRnpd8CGxBHpUrtLMA7w.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}
/* Sahel Font */
@font-face {
     font-family: 'sahel';
     src: url('/fonts/Sahel-Bold-WOL.woff2') format('woff2'), url('/fonts/Sahel-Bold-WOL.ttf') format('truetype');
}
body {
  /* generally a sans-serif font should be here */
  font-family:  vazir, Tahoma, 'Iranian Sans', 'DejaVu Sans', 'Noto Sans Arabic', 'Noto Kufi Arabic', 'Droid Arabic Kufi', sans-serif  !important;
}
h1, h2, h3, h4 {
  /* generally a sans-serif font should be here */
  font-family:  sahel, Tahoma, 'Iranian Sans', 'DejaVu Sans', 'Noto Sans Arabic', 'Noto Kufi Arabic', 'Droid Arabic Kufi', sans-serif  !important;
}
/* طراحی صفحه اول */
 .mainpage-top {
    background-image: url(/mainpage-top-2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
	background-position-y: 60%;
	background-position-x: center;
}
/* حذف فاصله خالی اول مقالات */
p br {
	display: none;
}
/* portals */
.mainpage-portals {
	float: right; 
	width: 12.5%;
	margin: 12px auto;
}
.portal-container-2 {
	display: grid; 
	grid-gap: 15px; 
	grid-template-columns: repeat(2, auto);
	grid-template-rows: auto;  
	width: 100%
}
.portal-container-3 {
	display: grid; 
	grid-gap: 15px; 
	grid-template-columns: repeat(3, auto); 
	grid-template-rows: auto;  
	width: 100%
}
.portal-container-4 {
	display: grid; 
	grid-gap: 15px; 
	grid-template-columns: repeat(4, auto); 
	grid-template-rows: auto;  
	width: 100%
}
.portal-container-5 {
	display: grid; 
	grid-gap: 15px; 
	grid-template-columns: repeat(5, auto); 
	grid-template-rows: auto;  
	width: 100%
}
.portal-container-6 {
	display: grid; 
	grid-gap: 15px; 
	grid-template-columns: repeat(6, auto); 
	grid-template-rows: auto;  
	width: 100%
}
.portal-container-7 {
	display: grid; 
	grid-gap: 15px; 
	grid-template-columns: repeat(7, auto); 
	grid-template-rows: auto;  
	width: 100%
}
.portal-column-2-3 {
	grid-column-end: span 2; 
}
.portal-column-3-4 {
	grid-column-end: span 3; 
}
.portal-column-1-2,
.portal-column-1-3,
.portal-column-1-4,
.portal-column-1-5,
.portal-column-1-6,
.portal-column-1-7 {
	grid-column-end: span 1; 
}
.portal-column-2-2 {
	grid-column-end: span 2;
}
.portal-column-3-3 {
	grid-column-end: span 3;
}
.portal-column-4-4 {
	grid-column-end: span 4;
}
.portal-column-5-5 {
	grid-column-end: span 5;
}
.portal-column-6-6 {
	grid-column-end: span 6;
}
.portal-column-7-7 {
	grid-column-end: span 7;
}
@media only screen and (max-width: 700px) {
	.mainpage-portals {
		width: 25%; 
	}
    /* Decouple the columns on narrow screens */
    .portal-container-2,
    .portal-container-3, 
    .portal-container-4, 
    .portal-container-5, 
    .portal-container-6, 
    .portal-container-7 {
		display: block;
	}
    .portal-column-1-2,
    .portal-column-3-4,
    .portal-column-1-3,
    .portal-column-2-3,
    .portal-column-2-2,
    .portal-column-3-3,
	.portal-column-4-4,
	.portal-column-5-5,
	.portal-column-6-6,
	.portal-column-7-7 {
        flo at: inherit;
        width: 100%;
        margin-top: 16px;
        display: block !important;
        text-align: center;
    }
    .portal-column-1-4 {
		wid th: calc(50% - 16px);
    }
    .portal-column-1-6 {
		wid th: calc(33.3% - 16px);
    }
    .portal-column-1-7 {
	flo at: right;
	wid th: calc(25% - 16px);
    }
}
@media only screen and (max-width: 600px) {
    .portal-column-1-4, 
    .portal-column-1-6, 
    .portal-column-1-5 {
        float: inherit;
        width: 100%;
        margin: 0;
        display: block !important;
        text-align: center;
    }
}
/* ثابت کردن منوی بالا */
.header-container.header-chrome {
    position: fixed;
    width: calc(100% - 32px);
    z-index: 1;
}
.page-heading {
    margin-top: 54px;
}
.overlay {
    z-index: 10
}
.header-container.header-chrome.overlay-header-container {
    width: 100%;
}
img {
	max-width: 100%; 
	height: auto !important;
    clip: rect(auto, auto, auto, auto) !important;
}