Reset รูปแบบตัวอักษร ขนาด สี ตัวหนา ตัวเอียง พาดหัวต่างๆ

/* กำหนดสีที่ต้องการใช้ในส่วนต่างๆ */
:root {
--text-color: #333;
--text-selection: #ccc;
--text-caption: #c93e3e;
--header-color: #4287f5;
--bg-color: #efefef;
}

/* import ฟอนท์ที่ต้องการใช้ จาก google fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100..900&family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

body { font-family: "Sarabun", sans-serif; font-weight: 400; font-size: 1em; color: var(--text-color); background: var(--bg-color); }
strong, b { font-weight: 700; color: var(--text-color); }
em, i { font-style: italic; color: var(--text-color); }
h1,h2,h3,h4,h5,h6 { font-family: "Noto Sans Thai", sans-serif; font-weight: 700; color: var(--header-color); }

::selection { color: var(--text-color); background: var(--text-selection); }
::-moz-selection { color: var(--text-color); background: var(--text-selection); }

โฆษณา - Advertising

Responsive breakpoints

โดยค่าเริ่มต้นจะแสดงในหน้าจอมือถือ แล้วค่อยกำหนดขนาดตามความกว้างหน้าจอ

/* เริ่มต้นด้วยความกว้างหน้าจอมือถือ 480px */
@media screen and (min-width:480px) {
}

/* หน้าจอมือถือแนวนอน 768px */
@media screen and (min-width:768px) {
}

/* แท็ปเล็ต 834px */
@media screen and (min-width:834px) {
}

/* แท็ปเล็ตแนวนอน 1024px */
@media screen and (min-width:1024px) {
}

/* หน้าจอคอมพิวเตอร์ มาตรฐาน 1280 x 832 พิกเซล เช่น Macbook Air 13 นิ้ว */
@media screen and (min-width:1200px) {
}

/* หน้าจอคอมพิวเตอร์ความละเอียด FULL HD 1920 x 1080 พิกเซล */
@media screen and (min-width:1440px) {
}

Grid column

จัดเรียงเนื้อหาแบบคอลัมน์

.view-content {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 100px 50px;
}

Picture and caption

.picture-caption {
  text-align: center;
  font-size: 0.8em;
  line-height: 1.4em;
}
.picture-caption, .picture-caption strong, .picture-caption b, .picture-caption em, .picture-caption i {
  color: var(--text-caption);
}
.picture-caption img {
  margin: 0 0 5px 0;
  width: 100%;
  height: auto;
}

RSS / Feed icon

.feed-icon {
    display: block;
    width: 24px;
    height: 24px;
    text-indent:-5000px;
    background: url(icon-feed.jpg) no-repeat;
    background-size: 100%;
}