يُعد “Pyx’s Modern Theme” الخليفة لقالب قديم لي، وهو “darkpixlz’s Modern Theme”، الذي كان مشتقًا (fork) من قالب Air. كان يتكون من حوالي 2500 سطر وكان يعاني من العديد من المشكلات، لذا فقد قمت بإعادة كتابته بالكامل!
نرحب بجميع المساهمات في المستودع وسيتم (على الأرجح) مراجعتها في نفس اليوم. لديك تعليقات أو أفكار؟ اترك ردًا هنا. واجهت مشكلة؟ يرجى إنشاء “Issue” على GitHub، فهي أسهل في التتبع.
يرجى ملاحظة أنني أختبر جميع أنماطي الخاصة بمتصفح Firefox فقط؛ إذا كان متصفح Chromium يواجه مشكلات، فلا تتردد في تقديم تقرير. يتم التحقق من توافق النسخة المحمولة كل بضع تحديثات ويجب أن تكون مدعومة بشكل عام.
أتساءل عما إذا كان من الممكن إضافة مقياس تكيفي؟ أود الحصول على مكوّن شريط جانبي على الجانب الأيمن.
CSS
/* احصل على عرض صورة المستخدم الرمزية (أفاتار) و اضبط العرض الأقصى لحاوية الإعلانات */
/* أنماط حاوية الإعلان */
#list-area {
display: flex; /* رتّب الإعلانات باستخدام flexbox */
flex-direction: column; /* اعرض الإعلانات عمودياً */
gap: 0; /* أزل المسافات بين صور الإعلانات */
padding: 0; /* أزل حشو الحاوية */
margin: 0; /* تأكد من عدم وجود هوامش إضافية حول حاوية الإعلان */
max-width: 812px; /* حدّ من عرض حاوية الإعلان إلى 812 بكسل كحد أقصى (عرض الأفاتار: 48 بكسل) */
}
/* أنماط رابط الإعلان */
.banner-ad {
display: block; /* اجعل حاوية الإعلان عنصراً من نوع block */
width: 100%; /* تأكد من أن حاوية الإعلان تشغل عرضاً بنسبة 100% */
max-width: 100%; /* منع تجاوز العرض الأقصى */
margin: 0; /* أزل المسافات بين حاويات الإعلانات */
}
/* أنماط صورة الإعلان المتجاوبة */
.ad-image {
width: 100%; /* تأكد من أن الصورة تشغل العرض الكامل لعنصرها الأب */
height: auto; /* حافظ على النسبة الأصلية لصورة الإعلان */
max-width: 100%; /* منع الصورة من تجاوز العرض الأقصى لحاويتها */
display: block; /* إصلاح مشكلة الفراغ أسفل الصور */
margin: 0; /* أزل أي مساحة إضافية حول الصورة */
}
/* التصميم المتجاوب: اضبط عرض الإعلانات للشاشات الكبيرة والصغيرة */
/* اضبط عرض الإعلانات على الأجهزة ذات العرض أقل من 768 بكسل */
@media (max-width: 768px) {
#list-area {
padding: 0; /* تأكد من عدم وجود حشو إضافي على الأجهزة المحمولة */
}
.banner-ad {
width: 100%; /* تأكد من أن الإعلان يشغل العرض الكامل على الشاشات الصغيرة */
}
.ad-image {
width: 100%; /* تأكد من أن الصورة تتكيف مع عرض الحاوية */
height: auto; /* حافظ على نسبة أبعاد الصورة */
}
}
/* اضبط صور الإعلانات بشكل أكبر على الأجهزة الصغيرة جداً (مثلاً، الهواتف في الوضع العمودي) */
@media (max-width: 480px) {
.ad-image {
width: 100%; /* تأكد من أن الصور تتكيف مع عرض شاشة الهاتف */
max-width: 100%; /* اضبط العرض الأقصى إلى 100% لتجنب الحجم الزائد */
height: auto; /* حافظ على نسبة أبعاد الصورة */
}
}
عذرًا، لقد كنت مريضًا كثيرًا هذا الأسبوع، وكان لدي أيضًا أشياء أخرى لأقوم بها. لقد قمت للتو بتلميع تدفق النشر، وأصلحت العديد من الأخطاء، وجعلت المنشئ يطفو!
وأيضًا، لاحظت أن صفحة السمة عادت إلى الإصدار القديم مما تسبب في الكثير من المشاكل. لن أبذل جهدًا لإصلاح أي شيء هناك لأنني أشعر أنه سيتم إضافته مرة أخرى وسيبدو كما هو مقصود.
للأسف، هذا خارج نطاق هذا القالب لأنه مصمم بشكل موحد عن قصد، لذلك لن أعتمد تخطيطًا حيث تكون الشريط الجانبي منفصلاً. إذا كنت تبحث عن تصميم كهذا، فأنا أوصي بهذين القالبين الرائعين:
ومع ذلك، إذا كان شريط الرأس هو شيء ترغب في رؤيته مدعومًا، فلا تتردد في تزويدي بعنوان موقع إلكتروني وسأتحقق من إمكانية دعمه.
باختصار: السمة خرجت الآن من مرحلة “المعاينة”! أنا واثق بما فيه الكفاية من أنها ستعمل لمعظم مواقع الجميع وستكون مصممة بشكل جيد. مع هذه المرحلة الجديدة، لم أعد أبحث عن تقارير الأخطاء هنا، يرجى تقديم مشاكل GitHub للمضي قدمًا.
يرجى الاستمرار في تقديم الملاحظات - أي شيء وكل شيء مرحب به. شكراً لدعمكم المستمر حتى لو كنت بطيئًا :3
أخبار سارة أخرى! لقد انتهيت للتو من إعادة كتابة السمة مرة أخرى بحيث لم تعد ملف common.scss ضخمًا واحدًا. لا ينبغي أن تبدو مختلفة بخلاف بعض الإصلاحات الطفيفة التي أجريتها. استمتع :3
لقد أعجبتني السمة حقًا، ولكن هناك بعض “العيوب” التي تمنعني من استخدامها للأسف
تحتوي صفحة “الملف الشخصي” على زر صغير خلف الرأس يقول “تخطي إلى المحتوى”
عندما أحاول تحديد لوحة ألوان مختلفة (كمستخدم، في ملفي الشخصي) يظهر مربع الاختيار المنسدل بالقرب من زر “تخطي إلى المحتوى” الذي ذكرته أعلاه (هذه هي الطريقة التي أدركت بها وجوده)
أنا واثق بما فيه الكفاية من أنها ستعمل لمعظم مواقع الجميع وستكون مصممة بشكل جيد. مع هذه المرحلة الجديدة، لم أعد أبحث عن تقارير الأخطاء هنا، يرجى 
، لقد تم إصلاحه الآن. يجب أن يعود كل شيء إلى طبيعته.
