המוטיב (תבנית) של האתר

המוטיב (תבנית) החדש של האתר "עונות" (Seasons) באוויר כבר זמן מה, ועדיין לא יצא לי לכתוב עליו כמו שצריך. אז קדימה, זה הרגע.
וגם, אולי, לשנות את העונה לסתיו? כבר היה פעמיים גשם 🌧️

המוטיב שיצרתי, ועדיין יוצר, לאתר הוא מוטיב מתחלף לפי העונות ולכן עונה לשם עונות. אני מאוד אוהב את החיבור בין טכנולוגיה וטבע והרעיון של מוטיב לאתר שישקף את הטבע צץ וקרץ לי, אז עשיתי. המוטיב מכיל 4 וריאציות לפי עונות השנה, וכל עונה מקבלת את הסגנון שלה. אני גם אוהב להתחיל בפשטות ולהתרחב ולהתמרכב (מורכבות) באיטיות, לכן התחלתי שהסגנון של כל עונה מורכב מצבע הדגשה ובהמשך אוכל להרחיב את זה לפונטים, צורות, קישוטים ומה שבא ליד.

הצבעים

פלטת הצבעים מורכבת מ-3 צבעים: צבע, צבע רקע, צבע הדגשה. הצבע הוא לבן, צבע הרקע הוא שחור וכשהמשתמש מעדיף מראה כהה הצבע והרקע מתחלפים כך שהרקע בצבע שחור, והצבע הוא לבן.
המוטיב "עונות" משתדל להיות מותאם למצב המראה של המשתמש כהה / בהיר וכשצבע הרקע משתנה, גם צבע ההדגשה משתנה כדי שיהיה מונגש לפי התקן לכל המשתמשים.

אני משתמש במרחב הצבע החדש (2024) של CSS שנקרא OKLCH. להלן הצבעים שבחרתי כרגע לעונות עם הוריאציה של מצב בהיר / כהה:

• קיץ – ירוק טבע. בהיר: oklch(0.5 0.1 142.49). כהה: oklch(0.65 0.3 142.49).
• סתיו – חום-כתום שלכת. בהיר: oklch(0.5 0.1 49.29). כהה: oklch(0.65 0.3 49.29).
• חורף – כחול קרח. בהיר: oklch(0.5 0.1 236.54). כהה: oklch(0.65 0.3 236.54).
• אביב – ורוד פריחה. בהיר: oklch(0.5 0.1 350.31). כהה: oklch(0.65 0.3 350.31).

אפשר לשים לב שב-OKLCH הפרטר היחיד שמשתנה הוא האחרון – HUE. כך שהצבעים שומרים על פרספקטיבה דומה בהקשר של רוויה (CHROMA) וכמות אור (LIGHT). אגב אם אתם תוהים כמה קריטי המספרים אחרי הנקודה ב-גוון, אז די משמעותי, ברמה של שינויים קטנים משפיעים על הנגישות של הצבעים, לכן דייקתי 2 מספרים אחרי הנקודה.

הסגנון

אז בתור התחלה פשוטה, איטית, רגועה, סגננתי את הכותרות שיהיו מודגשות בצבע. והוספתי פרמטר קטן וחמוד ל-body שמגדיר את הצבע הדגשה בתור הצבע הדגשה של המוטיב.

body {
    accent-color: var(--season-color);
}

בנוסף, ריווחתי אלמנטים, הגבלתי רוחבים והגדלתי גודל גופן בשביל קריאות נוחה יותר. ועוד כל מיני חד-שורתיים שהוספתי.

התבנית

התבנית עצמה, שאליה נשפך התוכן מאוד מאוד פשוטה, כמו שאני אוהב. וכל הקוד נמצא בקובץ אחד, כן זה עד כדי כך קל ליצור מוטיה (תבנית) לאתר וורדפרס, שנקרא index.php והוא מכיל בתוכו כל מה שה-HTML צריך את ה-CSS ואת ה-PHP ששופך את התוכן לתוך תגי ה-HTML.
הנה דוגמה לחלק העיקרי של הדף, הכותרת והתוכן של הפוסט:

<main>

	<?php if ( ! $content_has_h1_tag ): ?>

        <h1><?php the_title() ?></h1>

	<?php endif; ?>

	<?php the_content(); ?>

</main>

בגדול זהו

זה הכל, קובץ style.css עם פרטי המוטיב, קובץ index.php עם התוכן והעיצוב.
אפילו את העונה עצמה אני קובע בקוד. כל הקוד של המוטיב נמצא בגיטהאב שלי, מוזמנים להסתכל, לשכפל, להגיב, ומה שבא לכם.

נוסף בזאת (נ.ב)
החלטתי עדיין לא להחליף את העונה לסתיו כי היה ממש חם היום.

עריכה קטנה:
פרסמתי את הפוסט הרגע, הלכתי לראות אותו פברונט וראיתי שהקוד שכתבתי פה מוצג מימין לשמאל, וזה מחזה לא נעים בכלל, אז קפצתי רגע לקוד של המוטיב והוספתי חוק שכל תגית <code> ו-<pre> יקבלו כיוון שמאל-לימין. קל.