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

body#top { display: flex; flex-direction: column; } #post, #meta { padding: 0 2em; width: calc(100% - 4em); } .snapic-post, .snapic-meta { margin: 5em 0; } .snapic-post-title, .snapic-post-content, .snapic-post-video, .snapic-post-meta { margin: 0 auto; padding: 0; max-width: 960px; } .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-post-title { display: flex; align-items: center; justify-content: center; margin-bottom: 2em; font-size: var(--font-size-xxxxl); color: var(--color-post-text); line-height: 1.4; text-align: center; word-break: break-all; word-wrap: break-word; white-space: nowrap; } .snapic-post-title a { -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } .snapic-post-title a:hover { color: var(--color-author-text-hover) !important; } .snapic-post-title h1 { margin: 0; max-width: 100%; font-size: 87.5%; white-space: normal; text-align: left; } .snapic-post-content { position: relative; font-size: var(--font-size-xxl); color: var(--color-post-text); line-height: 1.4; } .snapic-post-content p { margin: 1em 0; } .snapic-post-content p:first-child, .snapic-post-content p:first-child [id^="grid-"] { margin-top: 0; } .snapic-post-content p:last-child, .snapic-post-content p:last-child [id^="grid-"] { margin-bottom: 0; } .snapic-post-content .grid__item { display: flex; margin: 0; overflow: hidden; } .snapic-post-content .grid__link { margin: 1em auto; width: 100%; height: 100%; max-width: 960px; min-width: 320px; } a.photo-swipe:hover { border-bottom: 0 !important; } .snapic-post-content a { color: var(--color-post-text-a); } .snapic-post-content a:hover { color: var(--color-post-text); border-bottom: 0.1em dashed var(--color-post-text-a-decoration); } .snapic-post-content img { display: block; margin: 0 auto; width: 100%; height: 100%; max-width: 100%; max-height: 100%; border-radius: 0.5em; object-fit: cover; } .grid__img:hover { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .snapic-post-content .snapic-exif-more, .snapic-post-content .snapic-exif-gear, .snapic-post-content .snapic-exif-info { font-size: var(--font-size-s); } .snapic-post-content .snapic-exif-info { padding: 1em; width: calc(100% - 2em + 2px); } .snapic-post-content .snapic-exif-info span { margin: 0.25em 0; } .snapic-post-content .author-cc { width: calc(100% - 3em + 2px); height: calc(100% - 3em + 2px); border-radius: 0.5em; } .snapic-post-video { padding-top: 540px; position: relative; width: auto; height: 0; background-color: var(--color-video-background); } .snapic-post-meta { display: flex; flex-direction: column; font-size: var(--font-size-xl); color: var(--color-post-meta-text); } .snapic-post-meta a { color: var(--color-post-meta-text-a); } .snapic-post-meta a:hover { color: var(--color-post-meta-text-a-hover); } .snapic-post-meta span { margin: 0.25em 0; } .snapic-post-tool { bottom: calc(7em + 4.5em); } .snapic-post-gotop { position: absolute !important; bottom: -4.5em; } .snapic-post-content .panels, .snapic-post-content .tabs, .snapic-post-content .layouts, .snapic-post-content .columns { display: flex; flex-wrap: wrap; margin: 1em auto; padding: 0; } .snapic-post-content .panels { width: 100%; } .snapic-post-content .tabs { display: flex; flex-direction: column; width: 100%; } .snapic-post-content .layouts { margin-left: -0.25em; width: calc(100% + 0.5em); } .snapic-post-content .columns { margin-left: -0.25em; width: calc(100% + 0.5em); } .snapic-post-content .panel, .snapic-post-content .tab, .snapic-post-content .layout, .snapic-post-content .column { display: flex; flex-wrap: wrap; flex-direction: column; border-radius: 0.5em; background-color: var(--color-grid-background); box-sizing: border-box; } .snapic-post-content .tab:hover .tab-title, .snapic-post-content .layout:hover .layout-title, .snapic-post-content .column:hover .column-title { -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; background-color: var(--color-grid-background-hover); } .snapic-post-content .panel { flex: 1 0 100%; margin: 0.25em 0; } .snapic-post-content .tab { flex: 1 0 100%; margin: 0.25em 0; } .snapic-post-content .layout { display: flex; flex-direction: row; align-items: center; flex: 1 0 calc(50% - 1em); margin: 0.25em; background-color: transparent; } .snapic-post-content .column { flex: 1 0 calc(33.33333% - 1em); margin: 0.25em; } .snapic-post-content .panel-title, .snapic-post-content .tab-title, .snapic-post-content .layout-title, .snapic-post-content .column-title { display: block; padding: 1em 0.875em; width: calc(100% - 0.875em * 2); font-size: 100%; border-radius: 0.5em 0.5em 0 0; border-bottom: 0.01em solid var(--color-markdowon-hr-top); background-color: var(--color-grid-background); } .snapic-post-content .panel-title { display: flex; align-items: center; justify-content: space-between; padding: 0.5em 0.875em; border-radius: 0.5em; -webkit-transition: background-color .6s ease-in-out; -moz-transition: background-color .6s ease-in-out; -ms-transition: background-color .6s ease-in-out; -o-transition: background-color .6s ease-in-out; transition: background-color .6s ease-in-out; cursor: pointer; } .snapic-post-content .panel-title:hover { color: var(--color-post-text-a); background-color: var(--color-grid-background-hover); } .snapic-post-content .panel-title.fold-open { border-radius: 0.5em 0.5em 0 0; background-color: var(--color-grid-background-hover); } .snapic-post-content .panel-title .fold-icon { display: block; flex-shrink: 0; margin-left: auto; width: 2em; height: 2em; background-size: 1.5em; background-position: center; background-repeat: no-repeat; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; filter: var(--color-svg-filter); opacity: .3; } .snapic-post-content .panel-title:hover .fold-icon { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); opacity: 1; } .snapic-post-content .panel-title .fold-icon { background-image: url(../img/icon/plus.svg); } .snapic-post-content .panel-title.fold-open .fold-icon { background-image: url(../img/icon/minus.svg); } .snapic-post-content .tabs-title { display: flex; max-width: 100%; white-space: nowrap; overflow-x: auto; overflow-y: hidden; } .snapic-post-content .tab-title { display: inline-block; margin: 0; width: auto; text-align: justify; white-space: nowrap; border-radius: 1em 1em 0 0; border: 0.01em solid var(--color-markdowon-hr-top); -webkit-transition: background-color .6s ease-in-out; -moz-transition: background-color .6s ease-in-out; -ms-transition: background-color .6s ease-in-out; -o-transition: background-color .6s ease-in-out; transition: background-color .6s ease-in-out; cursor: pointer; } .snapic-post-content .tab-title:hover { color: var(--color-post-text-a); background-color: var(--color-grid-background-hover); } .snapic-post-content .tab-title.tab-open { color: inherit; background-color: var(--color-grid-background-hover); cursor: no-drop; } .snapic-post-content .tabs-title span:first-child { border-left: 0; } .snapic-post-content .tabs-title span:last-child { border-right: 0; } .snapic-post-content .layout-title { border-bottom: 0; background-color: transparent; } .snapic-post-content .layout:hover .layout-title { background-color: transparent; } .snapic-post-content .panel-content, .snapic-post-content .tab-content, .snapic-post-content .layout-content, .snapic-post-content .column-content { display: block; padding-left: 1em; padding-right: 0.5em; font-size: 87.5%; } .snapic-post-content .panel-content .panel--content, .snapic-post-content .tab-content .tab--content, .snapic-post-content .layout-content .layout--content, .snapic-post-content .column-content .column--content { display: block; margin: 1em 0; padding: 0.5em; padding-left: 0; max-height: 50em; overflow-x: hidden; overflow-y: auto; } .snapic-post-content .panel-content { width: calc(100% - 1.5em); } .snapic-post-content .panel-content.fold-open { display: block; } .snapic-post-content .tabs-content { margin-top: 1px; width: 100%; border-radius: 0 0 0.5em 0.5em; background-color: var(--color-grid-background); } .snapic-post-content .layout-content { width: calc(100% - 1.5em); max-height: 50em; overflow-x: hidden; overflow-y: auto; } .snapic-post-content .layout-content .layout--content { max-height: none; overflow: initial; } .snapic-post-content .column-content { width: calc(100% - 1.5em); } .snapic-post-content .panel-content .grid__link, .snapic-post-content .tab-content .grid__link, .snapic-post-content .layout-content .grid__link, .snapic-post-content .column-content .grid__link { margin-bottom: 1em !important; min-width: auto !important; font-size: 87.5%; } .snapic-post-album { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin: 1em auto; padding: 0; padding-top: 2em; list-style: none; } .snapic-post-album li { display: flex; flex-direction: column; position: relative; flex-shrink: 0; margin: 0.25em; width: calc(33.33333% - 0.5em); } .snapic-post-album .grid__link { flex-shrink: 0; margin: 0; width: 100% !important; height: calc((960px / 3 - 0.5em) * (1/1)) !important; min-width: auto !important; border-radius: 0.5em; background-color: var(--color-grid-background); } .snapic-post-album .grid__link:hvoer { background-color: var(--color-grid-background-hover); } .snapic-post-album .snapic-exif-more, .snapic-post-album .snapic-exif-gear, .snapic-post-album .snapic-exif-info { font-size: 62.5%; } .snapic-post-album .snapic-exif-more { bottom: 0.5em; right: 0.5em; } .snapic-post-album .snapic-exif-gear { bottom: 0.5em; margin-left: 0.5em; max-width: calc(100% - 1.5em - 50px); } .snapic-post-album .snapic-exif-info { padding: 0.5em; padding-bottom: 0.5em !important; width: calc(100% - 1em + 2px); } .snapic-post-album .author-cc { padding: 0.5em; width: calc(100% - 2em + 2px); height: calc(100% - 2em + 2px); font-size: var(--font-size-s); } .snapic-post-album .error { font-size: 62.5%; width: calc(100% - 2em); height: calc(100% - 2em); border-radius: 0.5em 0 0 0.5em; } .snapic-post-grid { display: flex; flex-direction: column; margin: 1em auto; padding: 0; list-style: none; } .snapic-post-grid li { display: flex; flex-shrink: 0; margin: 0.5em 0; border-radius: 0.5em; background-color: var(--color-grid-background); } .snapic-post-grid li:first-child { margin-top: 0; } .snapic-post-grid .grid__link { flex-shrink: 0; margin: 0; width: 41.66667% !important; height: calc(((960px - 2em * 2) * 0.417) * (2/3)) !important; min-width: auto !important; } .snapic-post-grid img { border-radius: 0.5em 0 0 0.5em; } .snapic-post-grid-description { flex-shrink: 0; margin: 0.5em 0; padding: 0 0.5em 0 1em; width: calc(58.33333% - 1.5em); height: calc(((960px - 2em * 2) * 0.417) * (2/3) - 1em); overflow-x: hidden; overflow-y: auto; } .snapic-post-grid-title { margin: 0.5em 0 2em 0; font-size: 120%; font-weight: normal; } .snapic-post-grid-title::after { display: block; content: ''; margin-top: 0.5em; width: 2em; height: 1px; background-color: var(--color-grid-line); } .snapic-post-grid-excerpt { font-size: 87.5%; } .snapic-post-grid .snapic-exif-more, .snapic-post-grid .snapic-exif-gear, .snapic-post-grid .snapic-exif-info { font-size: 62.5%; } .snapic-post-grid li:hover .snapic-exif-more, .snapic-post-grid li:hover .snapic-exif-gear { -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; opacity: 1; } .snapic-post-grid .error { font-size: 62.5%; width: calc(100% - 2em); height: calc(100% - 2em); border-radius: 0.5em 0 0 0.5em; } .snapic-post-fold { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0 !important; padding: 0.5em 1em; -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -ms-transition: all .6s ease-in-out; -o-transition: all .6s ease-in-out; transition: all .6s ease-in-out; cursor: pointer; } .snapic-post-fold.fold-open { margin-bottom: 0.075em !important; border-radius: 0.5em 0.5em 0 0; } .snapic-post-fold.fold-open, .snapic-post-fold:hover { background-color: var(--color-grid-background-hover) !important; } .snapic-post-fold .fold-title { font-size: 120%; } .snapic-post-fold:hover .fold-title { color: var(--color-post-text-a); } .snapic-post-case .snapic-post-fold:hover .fold-title { color: var(--color-post-text); } .snapic-post-fold:hover .snapic-post-case .fold-title { color: var(--color-post-text); } .snapic-post-fold .fold-icon { display: block; flex-shrink: 0; width: 2em; height: 2em; background-size: 1.5em; background-position: center; background-repeat: no-repeat; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; filter: var(--color-svg-filter); opacity: .3; } .snapic-post-fold:hover .fold-icon { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); opacity: 1; } .snapic-post-fold.fold-open .fold-icon { background-image: url(../img/icon/minus.svg); } .snapic-post-fold .fold-icon { background-image: url(../img/icon/plus.svg); } .snapic-post-grid-fold { margin: 0 !important; padding: 1em; width: calc(100% - 2em); border-radius: 0 0 0.5em 0.5em !important } .snapic-post-grid-fold img { border-radius: 0.5em; } .snapic-post-grid-fold .snapic-post-grid-description { margin: 0; height: calc(((960px - 2em * 2) * 0.417) * (2/3)); } .snapic-post-solarterm, .solar-term, .current-year, .past-year { margin: 1em auto; padding: 0; } .snapic-post-solarterm .solar-term { display: flex; padding-top: 2em; color: var(--color-solarterm-text); } .solar-term .introduce, .solar-term .subtotal, .solar-term .total { display: flex; flex-direction: column; position: relative; margin: 0 0.25em; padding: 1em; width: calc(33.33333% - 0.5em); border-radius: 0.5em; background-color: var(--color-grid-background); } .solar-term .subtotal ul li, .solar-term .total ul li { display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin: 0; width: 100%; } .solar-term .subtotal ul li span:nth-child(2), .solar-term .total ul li span:nth-child(2) { margin: 0 0.25em; width: 100%; height: 3px; border-radius: 0.25em; background-color: var(--color-solarterm-shape-background); } .solar-term .solar-term-shape { display: block; margin-right: auto; width: auto; height: 3px; border-radius: 0.25em; background-color: var(--color-solarterm-shape); } .subtotal-title, .total-title { min-width: 80px; } .subtotal-data, .total-data { min-width: 40px; text-align: right; } .current-year-title, .past-year-title { margin: 0 0 0.5em 0.25em; padding-top: 1.5em; font-size: var(--font-size-l); } .snapic-post-solarterm .author-cc { padding: 0.5em; width: calc(100% - 2em + 2px); height: calc(100% - 2em + 2px); font-size: var(--font-size-s); } .snapic-post-solarterm ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; } .snapic-post-solarterm ul li { display: flex; flex-direction: column; position: relative; flex-shrink: 0; margin: 0.25em; width: calc(16.66667% - 0.5em); } .snapic-post-solarterm .grid__link { flex-shrink: 0; margin: 0; width: 100% !important; height: calc(((960px - 2em * 2) * 0.167 - 0.5em) * (3/2)) !important; min-width: auto !important; border-radius: 0.5em; background-color: var(--color-grid-background); } .snapic-post-solarterm-meta { display: flex; justify-content: space-between; align-items: flex-start; position: absolute; top: 0; left: 0; margin: 0; padding: 0; width: 100%; } .snapic-post-solarterm-name { margin: 0; padding: 0.25em 0.15em; padding-top: 0.5em; font-size: 87.5%; color: var(--color-solarterm-name-text); writing-mode: vertical-rl; letter-spacing: 0.1em; border-radius: 0.5em 0 0.5em 0; background-color: var(--color-solarterm-name-background); -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; cursor: default; z-index: 1; } .snapic-post-solarterm-name:hover { background-color: var(--color-solarterm-name-background-hover); -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .snapic-post-solarterm-date { margin: 0.5em; padding: 0.25em 0.75em; font-size: 62.5%; color: var(--color-solarterm-text-light); word-break: break-all; word-wrap: break-word; border-radius: 1em; background-color: var(--color-solarterm-date-background); -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; -webkit-line-clamp: 1; line-clamp: 1; } .snapic-post-solarterm-date:hover { background-color: var(--color-solarterm-date-background-hover); -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; opacity: 1; } .snapic-post-solarterm .snapic-exif-more, .snapic-post-solarterm .snapic-exif-gear, .snapic-post-solarterm .snapic-exif-info { font-size: 62.5%; } .snapic-post-solarterm .snapic-exif-more { bottom: 0.5em; right: 0.5em; } .snapic-post-solarterm .snapic-exif-gear { bottom: 0.5em; margin-left: 0.5em; max-width: calc(100% - 1.5em - 50px); } .snapic-post-solarterm .snapic-exif-info { padding: 0.5em; padding-bottom: 0.5em !important; width: calc(100% - 1em + 2px); } .snapic-post-solarterm li:hover .snapic-exif-more, .snapic-post-solarterm li:hover .snapic-exif-gear { -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; opacity: 1; } .snapic-post-solarterm-day { font-size: 300%; font-weight: bold; } .snapic-post-solarterm-today { margin-bottom: 0.75em; color: var(--color-solarterm-mark); font-size: 150%; font-weight: bold; line-height: 1.2; } .snapic-post-solarterm-sub { font-size: 62.5%; } .snapic-post-solarterm .error { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: calc(100% - 2em); height: calc(100% - 2em); min-height: auto; color: var(--color-solarterm-text-dark); text-align: center; border-radius: 0.5em; background-color: var(--color-grid-background); overflow: hidden; } .snapic-post-solarterm li:hover .error { color: var(--color-solarterm-text-dark-hover); background-color: var(--color-grid-background-hover); } .snapic-post-solarterm-error { font-size: 62.5%; color: var(--color-solarterm-text-dark); } .snapic-post-solarterm li:hover .snapic-post-solarterm-error { color: var(--color-solarterm-text-dark-hover); } .snapic-post-solarterm .error.layer { position: absolute; top: 50%; left: 50%; pointer-events: none; width: calc(100% - 2em + 2px); height: calc(100% - 2em + 2px); border-radius: 0.45em; background-color: var(--color-solarterm-errorr-background); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1; } .snapic-post-solarterm li:hover .error.layer { background-color: var(--color-solarterm-errorr-background-hover); } .snapic-post-solarterm-error::before { position: absolute; top: 50%; left: 50%; content: ''; width: 50%; height: 0.075em; background-color: var(--color-solarterm-text-dark); -webkit-transform: translate(-50%, -50%) rotate(45deg); -moz-transform: translate(-50%, -50%) rotate(45deg); -ms-transform: translate(-50%, -50%) rotate(45deg); -o-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } .snapic-post-case { margin: 1em auto; padding: 0; } .snapic-post-case-title { margin: 0 0 0.5em 0.25em; padding-top: 1.5em; font-size: var(--font-size-l); text-align: right; } .snapic-post-case .snapic-post-grid-title { margin-bottom: 0.5em; } .snapic-post-case .snapic-post-grid-meta { display: flex; flex-direction: column; align-items: flex-start !important; } .snapic-post-case .snapic-post-grid-description div { display: flex; align-items: center; justify-content: flex-start; } .snapic-post-content .snapic-post-case a:hover { border-bottom: 0; } .snapic-post-grid-author, .snapic-post-grid-date { flex-shrink: 0; margin-right: 0.5em; width: 1.5em; height: 1.5em; background-size: 1.2em; background-position: center; background-repeat: no-repeat; filter: var(--color-svg-filter); opacity: .5; } .snapic-post-grid-author { background-image: url('../img/icon/author.svg'); background-size: contain; } .snapic-post-grid-date { background-image: url('../img/icon/clock.svg'); } .snapic-post-grid-excerpt.case { display: block !important; margin-top: 2em; } .snapic-post-grid-ref { position: absolute; top: 0.5em; left: 0.5em; padding: 0.25em 0.75em; font-size: 67.5%; color: var(--color-exif-gear); line-height: 1.4; border-radius: 1em; background-color: var(--color-exif-gear-background); opacity: 0; } .snapic-post-grid-ref:hover { background-color: var(--color-exif-gear-background-hover); cursor: default; } .snapic-post-grid li:hover .snapic-post-grid-ref, .snapic-post-grid li:hover .snapic-post-grid-ref { -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; opacity: 1; } .snapic-post-case-overlay { position: fixed; top: 50%; left: 50%; padding: 2em 1.75em; font-size: 1.6em; color: var(--color-error-text); white-space: nowrap; border-radius: 0.5em; border: 0.25em solid var(--color-error-text); background-color: var(--color-error-background); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -ms-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; z-index: 999; } .about-bio-title, .about-skill-title, .about-contact-title, .about-sns-title, .about-cv-title { display: block; margin-bottom: 0.25em; padding-top: 2em; font-size: var(--font-size-l); text-align: right; opacity: .3; } .about-bio-wrap, .about-contact-wrap, .about-sns-wrap { margin: 0.5em 0; padding: 1em; border-radius: 0.5em; background-color: var(--color-grid-background); } .about-bio-wrap { display: flex; align-items: center; justify-content: space-between; } .about-contact-wrap { display: flex; justify-content: space-between; align-items: center; } .about-sns-wrap { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; } .about-bio-wrap .about-bio-item-image { display: flex; justify-content: center; flex-shrink: 0; margin-right: 1em; width: calc(33.33333% - 1em); height: calc(15em + 1em); overflow: hidden; } .about-bio-wrap .grid__link { margin: 0; width: 100% !important; height: calc(15em + 1em) !important; min-width: auto; } .about-bio-wrap .snapic-exif-more, .about-bio-wrap .snapic-exif-gear, .about-bio-wrap .snapic-exif-info { font-size: 62.5%; } .about-bio-wrap .about-bio-item-desc { flex-shrink: 0; margin: 0.5em 0; padding: 0 0.5em; width: calc(66.66667% - 1em); max-height: 15em; text-align: justify; overflow-x: hidden; overflow-y: auto; } .about-skill-wrap { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; max-width: calc(960px + 0.5em); margin-left: -0.25em; margin-right: -0.25em; } .about-skill-item { display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin: 0.25em; padding: 1em; max-width: 33.33333%; border-radius: 0.5em; background-color: var(--color-grid-background); } .about-skill-item span { -webkit-line-clamp: 1; line-clamp: 1; } .about-contact-item { display: flex; align-items: center; margin: 0.25em 0; padding: 0.25em; width: calc(100% - 0.5em); height: 2em; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .about-contact-item:hover { background-color: var(--color-grid-background-hover) } .about-contact-item span:first-child { flex-shrink: 0; margin-right: 1em; width: 33.33333%; text-align: right; opacity: .5; } .about-contact-item span:last-child { flex-shrink: 0; width: calc(66.66667% - 1em); } .about-contact-item:hover span { opacity: 1; } .about-contact-icon { display: block; margin-left: auto; margin-right: 1.15em !important; width: 1.5em !important; height: 1.5em; background-size: 1.5em; background-position: center; background-repeat: no-repeat; filter: var(--color-svg-filter); opacity: .15 !important; } .about-contact-item:hover .about-contact-icon { opacity: .3 !important; } .about-contact-how { margin: 0.5em 0; padding: 0 0.5em; width: calc(100% - 1em); max-height: 15em; text-align: justify; overflow-x: hidden; overflow-y: auto; } .about-contact-where { display: block; flex-shrink: 0; margin-left: 1em; width: 41.66667%; height: calc(15em + 1em); border-radius: 0.5em; } .about-contact-where img { width: auto !important; height: auto !important; max-width: none; max-height: none; border-radius: 0; object-fit: none; filter: none; } .about-contact-where .anchorBL img { width: 100% !important; height: 100% !important; max-width: 77px; max-height: 32px; object-fit: contain; } .about-location-info { display: flex; flex-direction: column; justify-content: center; width: auto; height: 100%; max-width: 220px; max-height: 100px; min-height: 100px; font-size: 14px; color: #333; line-height: 1.2; word-wrap: break-word; word-break: break-all; overflow-x: hidden; overflow-y: auto; } .about-location-info p { margin: 5px 0 !important; } .about-sns-wrap a { display: flex; align-items: center; justify-content: center; margin: 0.5em; width: calc(20% - 1em); height: 3em; } .about-sns-wrap a:hover { border-bottom: 0; } .about-sns-wrap a span { -webkit-line-clamp: 1; line-clamp: 1; } .about-sns-wrap a span:not(.clamp) { display: block; width: 2em; height: 2em; border-radius: 50%; background-size: 1.5em; background-position: center; background-repeat: no-repeat; filter: var(--color-svg-filter); opacity: .3; } .about-sns-wrap a:hover span:not(.clamp) { opacity: .7; } .about-cv-wrap { display: flex; flex-direction: column; } .about-cv-item, .about-cv-item-fold { margin: 0.5em 0; border-radius: 0.5em; background-color: var(--color-grid-background); } .about-cv-wrap span:first-child { margin-top: 0; } .about-cv-item { display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; margin-bottom: 0 !important; padding: 0.5em 1em; -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -ms-transition: all .6s ease-in-out; -o-transition: all .6s ease-in-out; transition: all .6s ease-in-out; cursor: pointer; } .about-cv-item.fold-open { margin-bottom: 0.075em !important; border-radius: 0.5em 0.5em 0 0; } .about-cv-item.fold-open, .about-cv-item:hover { background-color: var(--color-grid-background-hover) !important; } .about-cv-item-fold { margin: 0 !important; padding: 1em; padding-right: 0.5em; width: calc(100% - 1.5em); border-radius: 0 0 0.5em 0.5em !important; } .about-cv-item-fold .fold-content { display: block; max-height: 30em; padding: 0.5em; padding-left: 0; text-align: justify; overflow-x: hidden; overflow-y: auto; } .about-cv-item .fold-title { font-size: 120%; } .about-cv-item:hover .fold-title { color: var(--color-post-text-a); } .about-cv-item .fold-icon { display: block; width: 2em; height: 2em; background-size: 1.5em; background-position: center; background-repeat: no-repeat; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; filter: var(--color-svg-filter); opacity: .3; } .about-cv-item.fold-open .fold-icon { background-image: url(../img/icon/minus.svg); } .about-cv-item .fold-icon { background-image: url(../img/icon/plus.svg); } .about-cv-item:hover .fold-icon { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); opacity: 1; } .snapic-post-content .panels a::before, .snapic-post-content .panels a::after, .snapic-post-content .tabs a::before, .snapic-post-content .tabs a::after, .snapic-post-content .layouts a::before, .snapic-post-content .layouts a::after, .snapic-post-content .columns a::before, .snapic-post-content .columns a::after { display: none; } .snapic-post-grid-description a::before, .snapic-post-grid-description a::after { display: none; } .about-bio-item-desc a::before, .about-bio-item-desc a::after, .about-contact-how a::before, .about-contact-how a::after, .about-cv-item-fold .fold-content a::before, .about-cv-item-fold .fold-content a::after { display: none; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 960px) { #post, #meta { padding: 0 1.75em; width: calc(100% - 3.5em); } .snapic-post-content .column-content .snapic-exif-more, .snapic-post-content .column-content .snapic-exif-gear, .snapic-post-content .column-content .snapic-exif-info { font-size: 62.5%; line-height: 1.2; } .column-content .snapic-exif-more, .column-content .snapic-exif-gear { bottom: 0.5em; } .snapic-post-content .column-content .snapic-exif-info span { margin: 0.15em 0; } .snapic-post-album .grid__link { height: calc(((100vw - 1.75em * 2) / 3) * (1/1)) !important; } .snapic-post-grid .grid__link { height: calc(((100vw - 1.75em * 2) * 0.417) * (3/4)) !important; } .snapic-post-grid-description { height: calc(((100vw - 1.75em * 2) * 0.417) * (3/4) - 1em); } .snapic-post-grid-fold .snapic-post-grid-description { height: calc(((100vw - 1.75em * 2) * 0.417) * (3/4)); } .snapic-post-solarterm .grid__link { height: calc(((100vw - 1.75em * 2) * 0.167 - 0.5em) * (3/2)) !important; } } @media screen and (max-width: 768px) { #post, #meta { padding: 0 1.5em; width: calc(100% - 3em); } .snapic-post-album .grid__link { height: calc(((100vw - 1.5em * 2) / 3) * (1/1)) !important; } .snapic-post-grid .grid__link { height: calc(((100vw - 1.5em * 2) * 0.417) * (3/4)) !important; } .snapic-post-grid-description { height: calc(((100vw - 1.5em * 2) * 0.417) * (3/4) - 1em); } .snapic-post-solarterm ul li { width: calc(25% - 0.5em); } .snapic-post-solarterm .grid__link { height: calc(((100vw - 1.5em * 2) * 0.25 - 0.5em) * (3/2)) !important; } .snapic-post, .snapic-meta { margin: 3em 0; } .snapic-post-title { font-size: var(--font-size-xxxl); } .snapic-post-content { font-size: var(--font-size-xl); } .snapic-post-meta { font-size: var(--font-size-l); } } @media screen and (max-width: 640px) { #post, #meta { padding: 0 1.25em; width: calc(100% - 2.5em); } .snapic-post-content .column { flex: 1 0 calc(50% - 1em); } .snapic-post-content .layouts { flex-direction: column; } .snapic-post-album .grid__link { height: calc(((100vw - 1.25em * 2) / 3) * (1/1)) !important; } .snapic-post-grid .grid__link { height: calc(((100vw - 1.25em * 2) * 0.417) * (1/1)) !important; } .snapic-post-grid-description { height: calc(((100vw - 1.25em * 2) * 0.417) * (1/1) - 1em); } .snapic-post-grid-fold .snapic-post-grid-description { height: calc(((100vw - 1.25em * 2) * 0.417) * (1/1)); } .snapic-post-solarterm .solar-term { display: flex; flex-direction: column; } .solar-term .introduce, .solar-term .subtotal, .solar-term .total { margin: 0.25em 0; width: calc(100% - 2em); } .snapic-post-solarterm .grid__link { height: calc(((100vw - 1.25em * 2) * 0.25 - 0.5em) * (3/2)) !important; } .about-bio-wrap { flex-direction: column; } .about-bio-wrap .about-bio-item-image { margin: 0; width: 100%; } .about-bio-wrap .about-bio-item-desc { margin: 1em 0 0 0; width: calc(100% - 1em); } .about-skill-item { max-width: 50%; } .about-contact-wrap { flex-direction: column; } .about-contact-how { margin: 0; padding: 0; } .about-contact-where { margin: 1em 0 0.25em 0; width: calc(100% - 1em); } } @media screen and (max-width: 480px) { #post, #meta { padding: 0 1em; width: calc(100% - 2em); } .snapic-post-album .grid__link { height: calc(((100vw - 1em * 2) / 3) * (1/1)) !important; } .snapic-post-grid .error { border-radius: 0.5em; } .snapic-post, .snapic-meta { margin: 2em 0; } .snapic-post-title { font-size: var(--font-size-xxl); } .snapic-post-content { font-size: var(--font-size-l); } .snapic-post-meta { font-size: var(--font-size-m); } .snapic-post-grid li { flex-direction: column; } .snapic-post-grid .grid__link { width: 100% !important; height: auto !important; max-height: calc((100vw - 1em * 2) * (2/3)) !important; max-height: 75vh; overflow: hidden; } .snapic-post-grid img { border-radius: 0.5em 0.5em 0 0; } .snapic-post-grid-description { margin: 1em 0; padding: 0 1em; width: calc(100% - 2em) !important; height: auto; max-height: calc((100vw - 1em * 2) * (1/2.35) - 1em) !important; } .snapic-post-grid .error { border-radius: 0.5em; } .snapic-post-fold { flex-direction: row !important; } .snapic-post-grid-fold img { border-radius: 0.5em !important; } .snapic-post-grid-fold .snapic-post-grid-description { margin: 1em 0 0 0; padding: 0 0.5em; width: calc(100% - 1em) !important; height: auto !important; max-height: calc((100vw - 0.5em * 2) * (1/2.35) - 1em) !important; } .snapic-post-solarterm ul li { width: calc(33.33333% - 0.5em); } .snapic-post-solarterm .grid__link { height: calc(((100vw - 1em * 2) * 0.333 - 0.5em) * (3/2)) !important; } .about-sns-wrap a { width: calc(33.33333% - 1em); } } @media screen and (max-width: 400px) { #post, #meta { padding: 0 0.75em; width: calc(100% - 1.5em); } .snapic-post-album .grid__link { height: calc(((100vw - 0.75em * 2) / 3) * (1/1)) !important; } .snapic-post-grid .grid__link { max-height: calc((100vw - 0.75em * 2) * (2/3)) !important; } .snapic-post-grid-description { height: calc((100vw - 0.75em * 2) * (1/2.35) - 1em) !important; } .snapic-post-solarterm .grid__link { height: calc(((100vw - 0.75em * 2) * 0.333 - 0.5em) * (3/2)) !important; } }