@charset "UTF-8"; /* ==================================================
 * Snapic Plus for grid.narrow Main Stylesheet by Lopwon.
 * www.Lopwon.com
 * 2023-10-18
 * ------------------------------------------------------------------- */

.grid .grid__item, .grid .grid__sizer { width: calc((100% / 5) - 10px); margin: 5px; } .grid__item.solarterm .snapic-grid-solarterm-title { font-size: 300%; } .snapic-grid-description, .snapic-grid-poster { padding: 0 1em; } .snapic-grid-category, .snapic-grid-top-left, .snapic-exif-gear, .snapic-exif-more { font-size: 87.5%; } .snapic-grid-top-left { top: 1em; } .snapic-exif-info { padding: 0.5em 1em; width: calc(100% - 2em + 2px); height: calc(100% - 1em + 2px); font-size: var(--font-size-s); } .snapic-exif-info span { margin: 0.1em 0; } .snapic-grid-meta { font-size: var(--font-size-s); } .snapic-grid-by { margin-right: 1em; width: 3em; height: 3em; } .snapic-grid-avatar { width: 2.5em; height: 2.5em; } .snapic-grid-avatar img { width: 2.5em; height: 2.5em; } .snapic-grid-title { font-size: var(--font-size-l); line-height: 1.4; } .snapic-grid-excerpt, .snapic-grid-about, .snapic-grid-keyword, .snapic-grid-poster { font-size: var(--font-size-m); line-height: 1.4; } .snapic-grid-about, .snapic-grid-keyword { padding: 0 1em; width: calc(100% - 2em); } .grid__item:hover .snapic-grid-about-avatar img { top: -1em; right: 1em; width: 48px; height: 48px; } .grid__item:hover .snapic-grid-keyword-avatar a, .grid__item:hover .snapic-grid-keyword-icon { left: 0.25em; width: 36px; height: 36px; background-size: 36px; } .grid__item:hover .snapic-grid-keyword-meta { left: calc(36px + 2.5em); } .page-navigator li { margin: 0 0.15em; } .page-navigator a { padding: 0.15em; min-width: 1.5em; height: 1.5em; } @media screen and (max-width: 960px) { .grid .grid__item, .grid .grid__sizer { width: calc((100% / 4) - 10px); margin: 5px; } .grid__item.solarterm .snapic-grid-solarterm-title { font-size: 280%; } .snapic-exif-info { padding: 0.75em 1em; height: calc(100% - 1.5em + 2px); } } @media screen and (max-width: 768px) { .grid__item.solarterm .snapic-grid-solarterm-title { font-size: 260%; } .snapic-grid-by { margin-right: 0.75em; width: 2.5em; height: 2.5em; } .snapic-grid-avatar { width: 2em; height: 2em; } .snapic-grid-avatar img { width: 2em; height: 2em; } } @media screen and (max-width: 640px) { .grid .grid__item, .grid .grid__sizer { width: calc((100% / 3) - 10px); margin: 5px; } .grid__item.solarterm .snapic-grid-solarterm-title { font-size: 240%; } .snapic-grid-about-meta div::before, .snapic-grid-about-meta div::after, .snapic-grid-keyword-meta div::after, .snapic-grid-keyword-meta div::after { display: none; } } @media screen and (max-width: 480px) { :root { --font-size-s: 0.6em; --font-size-m: 0.8em; --font-size-l: 1.0em; --font-size-xl: 1.2em; --font-size-xxl: 1.3em; --font-size-xxxl: 1.4em; } .grid .grid__item, .grid .grid__sizer { width: calc((100% / 3) - 6px); margin: 3px; } .grid__item.solarterm .snapic-grid-solarterm-title { font-size: 220%; } .snapic-explore-open a { margin: 0.95em 0; padding: 0.45em 1em; } .snapic-grid-by { margin-right: 0.5em; width: 2.25em; height: 2.25em; } .snapic-grid-avatar { width: 1.75em; height: 1.75em; } .snapic-grid-avatar img { width: 1.75em; height: 1.75em; } .snapic-grid-description, .snapic-grid-poster { padding: 0 0.75em; } .snapic-grid-category { top: calc(0.5em - 0.15em); right: 0.5em; } .snapic-grid-top-left { top: 0.5em; left: 0.5em; } .snapic-exif-info { padding: 0.25em 1em; height: calc(100% - 0.5em + 2px); } .snapic-exif-info span { font-size: 38.5%; } .snapic-exif-more, .snapic-exif-gear { bottom: 0.5em; } .snapic-exif-more { right: 0.5em; } .snapic-exif-gear { margin-left: 0.5em; max-width: calc(100% - 3em - 35px); } .snapic-grid-keyword-avatar a { left: calc(-72px - 0.5em); } .snapic-grid-keyword-meta { left: calc(24px + 0.75em); } .grid__item:hover .snapic-grid-keyword-meta { left: calc(24px + 2.5em); } } @media screen and (max-width: 400px) { .grid__item.solarterm .snapic-grid-solarterm-title { font-size: 200%; } }