@charset "UTF-8"; /*! Theme Name: Amethyst Theme URI: http://amethyst.asknode.net/ Author: featherplain Author URI: https://asknode.net/ Description: Amethyst is a simple blog theme that cared to typography and readability for all devices. The design is kept simple, fully responsive and flexible tow-columns. Features are, two widgets, customizer, Foundation, Genericons, Font Awesome, Sass, Gulp use. Version: 2.0.1 License: GNU General Public License v2 or later License URI: license.txt Text Domain: amethyst Tags: white, responsive-layout, one-column, two-columns, right-sidebar, editor-style, sticky-post, microformats, featured-images, custom-colors, custom-menu, custom-background */ .gnav__list:after, .siteinfo__inner:after, .nav-links:after, .snav__list:after { display: block; visibility: hidden; clear: both; height: 0; content: "."; font-size: 0; } /** * Foundation for Sites by ZURB * Version 6.1.1 * foundation.zurb.com * Licensed under MIT Open Source */ /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS and IE text size adjust after device orientation change, * without disabling user zoom. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove default margin. */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 * and Firefox. * Correct `block` display not defined for `main` in IE 11. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } /** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. */ [hidden], template { display: none; } /* Links ========================================================================== */ /** * Remove the gray background color from active links in IE 10. */ a { background-color: transparent; } /** * Improve readability of focused elements when they are also in an * active/hover state. */ a:active, a:hover { outline: 0; } /* Text-level semantics ========================================================================== */ /** * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari and Chrome. */ dfn { font-style: italic; } /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari, and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9/10. */ img { border: 0; } /** * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari. */ figure { margin: 1em 40px; } /** * Address differences between Firefox and other browsers. */ hr { box-sizing: content-box; height: 0; } /** * Contain overflow in all browsers. */ pre { overflow: auto; } /** * Address odd `em`-unit font size rendering in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** * Known limitation: by default, Chrome and Safari on OS X allow very limited * styling of `select`, unless a `border` property is set. */ /** * 1. Correct color not being inherited. * Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ } /** * Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { overflow: visible; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ input { line-height: normal; } /** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ box-sizing: content-box; /* 2 */ } /** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * Remove default vertical scrollbar in IE 8/9/10/11. */ textarea { overflow: auto; } /** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup { font-weight: bold; } /* Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } .foundation-mq { font-family: "small=0em&medium=48em&large=64em&xlarge=90em&xxlarge=120em"; } html { font-size: 100%; box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { padding: 0; margin: 0; font-family: "Helvetica Neue", "Helvetica", "Roboto", "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", Arial, Sans-Serif; font-weight: 300; line-height: 1.5; color: #454545; background: #fefefe; } img { max-width: 100%; height: auto; -ms-interpolation-mode: bicubic; display: inline-block; vertical-align: middle; } textarea { height: auto; min-height: 50px; border-radius: 0; } select { width: 100%; border-radius: 0; } #map_canvas img, #map_canvas embed, #map_canvas object, .map_canvas img, .map_canvas embed, .map_canvas object, .mqa-display img, .mqa-display embed, .mqa-display object { max-width: none !important; } button { -webkit-appearance: none; -moz-appearance: none; background: transparent; padding: 0; border: 0; border-radius: 0; line-height: 1; } /* -------------------------------------------------------------- */ /* Amethyst default styles /* -------------------------------------------------------------- */ /** * root element */ @media screen and (min-width: 0em) and (max-width: 47.9375em) { body { position: static; } } /** * text-level semantics */ h1, h2, h3, h4, h5, h6 { font-family: "Helvetica Neue", "Helvetica", "Roboto", "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", Arial, Sans-Serif; } h1, h1 > a, h2, h2 > a, h3, h3 > a, h4, h4 > a, h5, h5 > a, h6, h6 > a { color: #222222; } h1:hover, h1 > a:hover, h2:hover, h2 > a:hover, h3:hover, h3 > a:hover, h4:hover, h4 > a:hover, h5:hover, h5 > a:hover, h6:hover, h6 > a:hover { text-decoration: none; } a { color: #e80c7a; text-decoration: none; transition: 0.3s; } a:focus { outline: thin dotted; } a:link, a:visited { color: #e80c7a; } a:hover, a:active, a:focus { outline: 0; color: #91074c; text-decoration: none; } p { color: #222222; font-family: "Helvetica Neue", "Helvetica", "Roboto", "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", Arial, Sans-Serif; } ::-moz-selection { background: transparent; background-color: #0c7ae8; color: #fff; } ::selection { background: transparent; background-color: #0c7ae8; color: #fff; } /** * list items */ ul, ol { margin: 0; padding: 0; font-family: "Helvetica Neue", "Helvetica", "Roboto", "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", Arial, Sans-Serif; list-style: none; } dl { margin-bottom: 2em; } dl:last-child { margin-bottom: 0; } dl dt { margin-bottom: 1em; font-weight: bold; } dl dd { margin-bottom: 1em; } dl dd:last-child { margin-bottom: 0; } /** * grouping content */ iframe { vertical-align: middle; } /** * embeded content */ figure { margin: 0; } img, embed, iframe, object { max-width: 100%; line-height: 1.0; border: 0; } svg:not(:root) { overflow: hidden; } /** * table */ table { width: 100%; background-color: #ffffff; border-spacing: 0; border-collapse: collapse; font-size: inherit; } table caption { margin: 5px 0; } table thead, table tfoot { background-color: #fafafa; } table thead th, table tfoot th { padding: 8px; font-weight: 600; } table tbody th { padding: 8px; font-weight: 500; } table tbody tr:nth-child(odd) { background-color: #ffffff; } table tbody tr:nth-child(even) { background-color: #fafafa; } table td { padding: 6px; } /** * screen reader text */ .screen-reader-text { display: none; } /* -------------------------------------------------------------- */ /* forms /* -------------------------------------------------------------- */ [type='text'], [type='password'], [type='date'], [type='datetime'], [type='datetime-local'], [type='month'], [type='week'], [type='email'], [type='number'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='color'], textarea { display: block; box-sizing: border-box; width: 100%; height: 2.5rem; padding: 0.5625rem; border: 1px solid #cacaca; margin: 0 0 1.125rem; font-family: inherit; font-size: 0.875rem; color: #222222; background-color: #fefefe; box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1); border-radius: 0; transition: box-shadow 0.5s, border-color 0.25s ease-in-out; -webkit-appearance: none; -moz-appearance: none; } [type='text']:focus, [type='password']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='week']:focus, [type='email']:focus, [type='number']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='url']:focus, [type='color']:focus, textarea:focus { border: 1px solid #8a8a8a; background-color: #fefefe; outline: none; box-shadow: 0 0 5px #cacaca; transition: box-shadow 0.5s, border-color 0.25s ease-in-out; } textarea { max-width: 100%; } textarea[rows] { height: auto; } input:disabled, input[readonly], textarea:disabled, textarea[readonly] { background-color: #e6e6e6; cursor: default; } [type='submit'], [type='button'] { border-radius: 0; -webkit-appearance: none; -moz-appearance: none; } input[type='search'] { box-sizing: border-box; } [type='file'], [type='checkbox'], [type='radio'] { margin: 0 0 1.125rem; } [type='checkbox'] + label, [type='radio'] + label { display: inline-block; margin-left: 0.5625rem; margin-right: 1.125rem; margin-bottom: 0; vertical-align: baseline; } label > [type='checkbox'], label > [type='label'] { margin-right: 0.5625rem; } [type='file'] { width: 100%; } label { display: block; margin: 0; font-size: 0.875rem; font-weight: 300; line-height: 1.8; color: #222222; } label.middle { margin: 0 0 1.125rem; padding: 0.625rem 0; } .help-text { margin-top: -0.5625rem; font-size: 0.8125rem; font-style: italic; color: #333; } .input-group { display: table; width: 100%; margin-bottom: 1.125rem; } .input-group > :first-child { border-radius: 0 0 0 0; } .input-group > :last-child > * { border-radius: 0 0 0 0; } .input-group-label, .input-group-field, .input-group-button { display: table-cell; margin: 0; vertical-align: middle; } .input-group-label { text-align: center; width: 1%; height: 100%; padding: 0 1rem; background: #e6e6e6; color: #0a0a0a; border: 1px solid #cacaca; } .input-group-label:first-child { border-right: 0; } .input-group-label:last-child { border-left: 0; } .input-group-field { border-radius: 0; height: 2.5625rem; } .input-group-button { height: 100%; padding-top: 0; padding-bottom: 0; text-align: center; width: 1%; } .input-group-button a, .input-group-button input, .input-group-button button { margin: 0; } fieldset { border: 0; padding: 0; margin: 0; } legend { margin-bottom: 0.5625rem; } .fieldset { border: 1px solid #cacaca; padding: 1.5rem; margin: 1.125rem 0; } .fieldset legend { background: #fefefe; padding: 0 0.1875rem; margin: 0; margin-left: -0.1875rem; } select { height: 2.5rem; padding: 0.5625rem; border: 1px solid #cacaca; margin: 0 0 1.125rem; font-size: 0.875rem; font-family: inherit; line-height: normal; color: #222222; background-color: #fefefe; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; background-image: url('data:image/svg+xml;utf8,'); background-size: 9px 6px; background-position: right 0.5625rem center; background-repeat: no-repeat; } @media screen and (min-width: 0\0) { select { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg=="); } } select:disabled { background-color: #e6e6e6; cursor: default; } select::-ms-expand { display: none; } select[multiple] { height: auto; } .is-invalid-input:not(:focus) { background-color: rgba(240, 189, 36, 0.1); border-color: #f0bd24; } .is-invalid-label { color: #f0bd24; } .form-error { display: none; margin-top: -0.5625rem; margin-bottom: 1.125rem; font-size: 0.75rem; font-weight: bold; color: #f0bd24; } .form-error.is-visible { display: block; } /** * buttons */ button, input[type="button"], input[type="submit"], input[type="reset"] { display: inline-block; margin: 1rem 0; padding: 0.875rem 1.75rem 0.9375rem 1.75rem; text-align: center; background-color: #e80c7a; border: none; box-shadow: 0 2px 0 #cb0a6b; color: #ffffff; cursor: pointer; font-size: 1rem; transition: background-color 300ms ease-out; font-family: "Helvetica Neue", "Helvetica", "Roboto", "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", Arial, Sans-Serif; } button:focus, input[type="button"]:focus, input[type="submit"]:focus, input[type="reset"]:focus { outline: 0; } button:link, button:visited, input[type="button"]:link, input[type="button"]:visited, input[type="submit"]:link, input[type="submit"]:visited, input[type="reset"]:link, input[type="reset"]:visited { color: #ffffff; } button:hover, button:active, button:focus, input[type="button"]:hover, input[type="button"]:active, input[type="button"]:focus, input[type="submit"]:hover, input[type="submit"]:active, input[type="submit"]:focus, input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus { background-color: #c10a66; color: #ffffff; outline: 0; text-decoration: none; } /** * required */ .required { color: #f04124; } /* -------------------------------------------------------------- */ /* buttons /* -------------------------------------------------------------- */ .btn { display: inline-block; margin: 1rem 0; padding: 0.875rem 1.75rem 0.9375rem 1.75rem; text-align: center; background-color: #e80c7a; border: none; box-shadow: 0 2px 0 #cb0a6b; color: #ffffff; cursor: pointer; font-size: 1rem; transition: background-color 300ms ease-out; } .btn:focus { outline: 0; } .btn:link, .btn:visited { color: #ffffff; } .btn:hover, .btn:active, .btn:focus { background-color: #c10a66; color: #ffffff; outline: 0; text-decoration: none; } .btn-full { display: inline-block; margin: 1rem 0; padding: 0.875rem 1.75rem 0.9375rem 1.75rem; text-align: center; background-color: #e80c7a; border: none; box-shadow: 0 2px 0 #cb0a6b; color: #ffffff; cursor: pointer; font-size: 1rem; transition: background-color 300ms ease-out; width: 100%; } .btn-full:focus { outline: 0; } .btn-full:link, .btn-full:visited { color: #ffffff; } .btn-full:hover, .btn-full:active, .btn-full:focus { background-color: #c10a66; color: #ffffff; outline: 0; text-decoration: none; } /* -------------------------------------------------------------- */ /* header /* -------------------------------------------------------------- */ /** * l-header */ .l-header { width: auto; height: auto; } .l-header__inner { max-width: 1080px; margin-left: auto; margin-right: auto; position: relative; } .l-header__inner::before, .l-header__inner::after { content: ' '; display: table; } .l-header__inner::after { clear: both; } /** * site brand */ .sitebrand__title { float: left; max-width: 80%; margin: 0; padding: 14px 36px 14px 14px; font-weight: bold; font-size: 1rem; } .sitebrand__title a { display: block; color: #222222; line-height: 1.2; } .sitebrand__title a:hover { color: #e80c7a; } .sitebrand__description { display: none; } /** * navigation */ .gnav__search { position: absolute; top: 0; right: 50px; margin-bottom: 0; } .gnav__trigger { display: inline-block; float: right; width: 50px; height: 50px; padding: 0; margin: 0; text-align: center; background-color: #222222; border-radius: 0; box-shadow: none; outline: 0; } .gnav__trigger:before { position: static; display: inline-block; content: ""; vertical-align: text-bottom; font-size: 16px; font-family: Genericons; line-height: 1; margin: 16px auto; color: #ffffff; } .gnav__trigger:hover, .gnav__trigger:focus { outline: 0; background-color: #363636; } .gnav__arrowdown { position: absolute; top: 0; right: 0; display: block; width: 50px; height: 50px; margin: 0; padding: 0; background-color: transparent; border-radius: 0; box-shadow: none; } .gnav__arrowdown:before { position: static; display: inline-block; content: ""; vertical-align: text-bottom; font-size: 28px; font-family: Genericons; line-height: 1; text-align: center; margin: 11px auto; color: #ffffff; } .gnav__arrowdown:hover, .gnav__arrowdown:focus { outline: 0; background-color: #363636; } .gnav__list { position: absolute; top: 50px; right: 0; display: none; width: 100%; margin: 0; background-color: #222222; z-index: 9999; } .gnav__list--active { display: block; } .gnav__list > li:first-child { border-top: none; } .gnav__list li { position: relative; border-top: 1px dotted #dedede; } .gnav__list li a { display: block; padding: 13px 50px 13px 13px; color: #ffffff; font-weight: normal; text-transform: uppercase; letter-spacing: 1.2px; } .sub-menu { display: none; background-color: #4b4b4b; } /** * search form on header */ .gnav .searchbar__form { margin-bottom: 0; } .gnav .searchbar__field { width: 50px; height: 50px; margin-bottom: 0; padding-left: 42px; border: none; box-shadow: none; cursor: pointer; background-color: #ededed; background-image: url("./assets/images/icon_search.png"); background-position: center; background-repeat: no-repeat; background-size: 20px 20px; transition: width .3s ease-out, background .3s ease-out; } .gnav .searchbar__field:focus { width: 240px; padding-left: 30px; background-position: 6px center; cursor: text; } @media screen and (-webkit-min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .gnav .searchbar__field { background-image: url("./assets/images/icon_search_2x.png"); } .gnav .searchbar__field:focus { background-image: url("./assets/images/icon_search_2x.png"); } } .gnav .searchbar__submit { display: none !important; } /** * media queries */ @media screen and (min-width: 48em) { .sitebrand__title { padding: 10px 20px 10px 14px; font-size: 1.5rem; } .sitebrand__description { display: block; float: left; margin: 14px 0 12px 0; font-size: 0.875rem; } .gnav__list { width: 40%; } } /* -------------------------------------------------------------- */ /* footer /* -------------------------------------------------------------- */ /** * footer widgets */ .footer-widgets { padding: 40px 0; background-color: #fafafa; } /** * siteinfo */ .siteinfo { background-color: #181818; } .siteinfo__inner { max-width: 1080px; margin-left: auto; margin-right: auto; padding: 20px 0; font-size: 0.75rem; letter-spacing: 1.6px; } .siteinfo__inner::before, .siteinfo__inner::after { content: ' '; display: table; } .siteinfo__inner::after { clear: both; } .siteinfo__credit { text-align: right; } .siteinfo__credit a { color: #ffffff; } .siteinfo__credit a:hover { color: #e80c7a; } .siteinfo__social { padding-left: 0.625rem; padding-right: 0.625rem; width: 50%; float: left; } @media screen and (min-width: 48em) { .siteinfo__social { padding-left: 1.125rem; padding-right: 1.125rem; } } .siteinfo__social:last-child:not(:first-child) { float: right; } .siteinfo__copy { padding-left: 0.625rem; padding-right: 0.625rem; width: 50%; float: left; color: #ffffff; margin: 10px 0; text-align: right; } @media screen and (min-width: 48em) { .siteinfo__copy { padding-left: 1.125rem; padding-right: 1.125rem; } } .siteinfo__copy:last-child:not(:first-child) { float: right; } .siteinfo__sep { color: #ffffff; } /** * media queries */ @media screen and (min-width: 0em) and (max-width: 47.9375em) { .siteinfo__credit, .siteinfo__copy, .siteinfo__social { padding-left: 0.625rem; padding-right: 0.625rem; width: 100%; float: left; margin: 10px 0; text-align: left; } } @media screen and (min-width: 0em) and (max-width: 47.9375em) and (min-width: 48em) { .siteinfo__credit, .siteinfo__copy, .siteinfo__social { padding-left: 1.125rem; padding-right: 1.125rem; } } @media screen and (min-width: 0em) and (max-width: 47.9375em) { .siteinfo__credit:last-child:not(:first-child), .siteinfo__copy:last-child:not(:first-child), .siteinfo__social:last-child:not(:first-child) { float: right; } } @media screen and (min-width: 48em) { .siteinfo__credit { padding: 0 18px; } } @media screen and (min-width: 0em) and (max-width: 47.9375em) { .footer-widgets__inner { padding: 0 16px; } } @media screen and (min-width: 48em) { .footer-widgets__inner { max-width: 1080px; margin-left: auto; margin-right: auto; } .footer-widgets__inner::before, .footer-widgets__inner::after { content: ' '; display: table; } .footer-widgets__inner::after { clear: both; } } /* -------------------------------------------------------------- */ /* layout /* -------------------------------------------------------------- */ /** * l-main */ .l-main { margin: 0 auto; padding-top: 40px; padding-bottom: 40px; min-height: 100vh; width: 100%; max-width: 780px; } @media screen and (min-width: 0em) and (max-width: 47.9375em) { .l-main { padding: 20px 16px; } } /** * body classes */ body.custom-background .l-container { max-width: 1080px; margin-left: auto; margin-right: auto; background-color: #ffffff; } body.custom-background .l-container::before, body.custom-background .l-container::after { content: ' '; display: table; } body.custom-background .l-container::after { clear: both; } body.sidebar .l-main { max-width: 1080px; margin-left: auto; margin-right: auto; } body.sidebar .l-main::before, body.sidebar .l-main::after { content: ' '; display: table; } body.sidebar .l-main::after { clear: both; } @media screen and (min-width: 48em) { body.sidebar .l-primary { padding-left: 0.625rem; padding-right: 0.625rem; width: 75%; float: left; } } @media screen and (min-width: 48em) and (min-width: 48em) { body.sidebar .l-primary { padding-left: 1.125rem; padding-right: 1.125rem; } } @media screen and (min-width: 48em) { body.sidebar .l-primary:last-child:not(:first-child) { float: right; } } @media screen and (min-width: 48em) { body.sidebar .l-sidebar { padding-left: 0.625rem; padding-right: 0.625rem; width: 25%; float: left; } } @media screen and (min-width: 48em) and (min-width: 48em) { body.sidebar .l-sidebar { padding-left: 1.125rem; padding-right: 1.125rem; } } @media screen and (min-width: 48em) { body.sidebar .l-sidebar:last-child:not(:first-child) { float: right; } } /** * page title */ .page-title { margin-bottom: 40px; font-size: 0.875rem; font-weight: normal; line-height: 1; letter-spacing: 0.6px; text-transform: uppercase; } @media screen and (min-width: 48em) { .page-title { padding: 0 14px; } } /** * error 404 */ .not-found__title { margin-top: 0; } /* -------------------------------------------------------------- */ /* post /* -------------------------------------------------------------- */ .post__header { margin: 0 0 20px 0; } .post__link { display: block; margin-bottom: 30px; color: #222222; } .post__link:hover .post__title--archive { color: #e80c7a; } .post__title { margin: 0; padding: 0 0 5px 0; font-size: 1.25rem; font-weight: bold; border-bottom: 1px solid #dedede; } .post__title--archive { font-size: 1rem; line-height: 1.4; transition: 0.3s; } .post__title--page { border-bottom: none; } .post__meta { margin-bottom: 14px; } .post__meta--footer { margin: 0; padding-bottom: 10px; border-bottom: 1px solid #dedede; text-align: right; } .post__excerpt { font-size: 0.75rem; } .post__image { width: 100%; height: auto; margin-bottom: 10px; background-color: #3c3c3c; border: 2px solid #ededed; } .post__image img { display: block; margin: 0 auto; } .post__pager { padding: 10px 0; text-align: center; border: 1px dotted #dedede; } .post__pager a { text-decoration: underline; } /** * meta informations */ .metadata { position: relative; display: inline-block; color: #222222; font-size: 0.75rem; font-weight: 400; transition: 0.3s; } .metadata:before { display: block; content: ""; position: absolute; } .metadata:first-child { margin-left: 0; } .metadata a { margin-left: 2px; color: #222222; line-height: 1; } .metadata a:hover { color: #e80c7a; } .metadata--date:before { position: static; display: inline-block; content: ""; vertical-align: top; font-size: 1.1rem; font-family: Genericons; line-height: 1; } .metadata--category:before { position: static; display: inline-block; content: ""; vertical-align: top; font-size: 1.1rem; font-family: Genericons; line-height: 1; } .metadata--author:before { position: static; display: inline-block; content: ""; vertical-align: top; font-size: 1.1rem; font-family: Genericons; line-height: 1; } .metadata--tag:before { position: static; display: inline-block; content: ""; vertical-align: top; font-size: 1.1rem; font-family: Genericons; line-height: 1; } .metadata--comment:before { position: static; display: inline-block; content: ""; vertical-align: top; font-size: 1.1rem; font-family: Genericons; line-height: 1; } .metadata--featured:before { position: static; display: inline-block; content: ""; vertical-align: top; font-size: 1.1rem; font-family: Genericons; line-height: 1; } /** * for sticky post */ .sticky { display: inherit; } /** * media queries */ @media screen and (min-width: 48em) { .post__link { margin-bottom: 50px; } .post__title { margin-bottom: 8px; font-size: 1.5rem; font-weight: bold; } .post__title--archive { font-size: 1.75rem; line-height: 1.4; } .post__image { margin-bottom: 20px; border: 4px solid #ededed; } } @media screen and (min-width: 64em) { .post__header { margin: 0 0 40px 0; } .post__title { font-size: 2rem; } .post__image { max-width: 100%; height: auto; border: 8px solid #ededed; } .post__excerpt { font-size: 0.875rem; } } /* -------------------------------------------------------------- */ /* post navigation /* -------------------------------------------------------------- */ .nav-links { padding: 20px 0; } .nav-links a { color: #222222; font-weight: 400; } .nav-links a:hover { color: #e80c7a; } .nav-previous { padding: 10px 0; text-align: left; } .nav-previous:before { position: static; display: inline-block; content: ""; vertical-align: text-bottom; font-size: 1.25rem; font-family: Genericons; line-height: 1; margin-right: 6px; vertical-align: middle; background-color: #dedede; color: #ffffff; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .nav-next { padding: 10px 0; text-align: right; } .nav-next:after { position: static; display: inline-block; content: ""; vertical-align: text-bottom; font-size: 1.25rem; font-family: Genericons; line-height: 1; margin-left: 6px; vertical-align: middle; background-color: #dedede; color: #ffffff; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } /** * media queries */ @media screen and (min-width: 64em) { .nav-previous { float: left; padding: 0 10px 0 0; } .nav-next { float: right; padding: 0 0 0 10px; } } /* -------------------------------------------------------------- */ /* comments /* -------------------------------------------------------------- */ /** * comments */ .comments { margin: 40px 0; } .comments__title, .comment-reply-title { margin: 20px 0; font-size: 1.375rem; font-weight: bold; } /** * WordPress comment classes */ .comment { list-style-type: none; } .comment > .children { margin-left: 20px; } .comment-awaiting-moderation { margin-left: 58px; padding: 4px; background-color: #fcf1d0; border: 1px dotted #f0bd24; color: #222222; font-size: 0.75rem; } .comment-body { padding: 20px 0; border-bottom: 1px dotted #dedede; } .comment-author .avatar { border-radius: 50%; } .comment-author .fn { display: inline-block; margin-left: 7px; vertical-align: top; font-family: "Helvetica Neue", "Helvetica", "Roboto", "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", Arial, Sans-Serif; font-size: 1.125rem; } .comment-author .says { display: none; } .comment-metadata { margin-top: -28px; margin-left: 58px; } .comment-metadata time { font-size: 0.75rem; } .comment-content { margin-left: 58px; } .comment-notes { font-size: 0.875rem; } .comment-respond { margin: 40px 0; } .comment .reply { margin: 0 0 0 58px; } .comment .reply a { padding: 4px 6px; border: 1px solid #dedede; font-family: "Helvetica Neue", "Helvetica", "Roboto", "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", Arial, Sans-Serif; font-size: 0.625rem; } .bypostauthor { background-color: #fef5fa; } .edit-link { font-size: 0.75rem; border-bottom: 1px dotted #e80c7a; } #cancel-comment-reply-link { border: 1px solid #dedede; font-size: 0.875rem; font-weight: normal; } /* -------------------------------------------------------------- */ /* widgets /* -------------------------------------------------------------- */ .widget { margin-bottom: 20px; } .widget__title { margin: 0; padding: 8px 0; border-top: 2px solid #222222; font-family: "Helvetica Neue", "Helvetica", "Roboto", "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", Arial, Sans-Serif; font-size: 1rem; letter-spacing: 2px; text-transform: uppercase; text-align: center; } .widget a { color: #222222; font-size: 0.875rem; line-height: 1.4; } .widget ul li { padding: 8px 0; border-top: 1px solid #ededed; font-size: 0.8125rem; } .widget ul li ul { margin-top: 8px; margin-left: 12px; border-bottom: none; } .widget ul li ul li:last-child { padding-bottom: 0; } .widget ul li a { font-size: 0.8125rem; } .widget ul li a:hover { color: #e80c7a; } /** * WordPress widget classes */ .widget_recent_entries span, .widget_rss span { display: block; color: #c5c5c5; font-size: 0.75rem; } .widget_recent_entries time, .widget_rss time { display: block; margin: 4px 0; text-align: right; color: #c5c5c5; font-size: 0.75rem; } .widget_search input[type="submit"] { display: none; } .widget_text .textwidget { font-size: 0.875rem; } .widget_tag_cloud .tagcloud a { padding: 2px; } .widget_tag_cloud .tagcloud a:hover { background-color: #fde1ef; } #calendar_wrap { border: 1px solid #dedede; } #wp-calendar td { text-align: center; } /** * media queries */ @media screen and (min-width: 48em) { .widget--footer { padding-left: 0.625rem; padding-right: 0.625rem; width: 33.33333%; float: left; } } @media screen and (min-width: 48em) and (min-width: 48em) { .widget--footer { padding-left: 1.125rem; padding-right: 1.125rem; } } @media screen and (min-width: 48em) { .widget--footer:last-child:not(:first-child) { float: right; } } /* -------------------------------------------------------------- */ /* social-links /* -------------------------------------------------------------- */ .snav__list { padding-left: 0; margin-left: 0; } .snav__list li { float: left; margin: 2px; } .snav__list li:first-child { margin-left: 0; } .snav a { display: inline-block; border: 1px solid #dedede; border-radius: 50%; color: #fff; padding: 6px; line-height: 1; letter-spacing: 0; vertical-align: middle; } .snav a:hover { background-color: #fff; color: #222222; } .snav a[href*="facebook.com"]:before { position: static; display: inline-block; content: ""; vertical-align: text-bottom; font-size: 18px; font-family: Genericons; line-height: 1; } .snav a[href*="twitter.com"]:before { position: static; display: inline-block; content: ""; vertical-align: text-bottom; font-size: 18px; font-family: Genericons; line-height: 1; } .snav a[href*="github.com"]:before { position: static; display: inline-block; content: ""; vertical-align: text-bottom; font-size: 18px; font-family: Genericons; line-height: 1; } .snav a[href*="wordpress.org"]:before { position: static; display: inline-block; content: ""; vertical-align: text-bottom; font-size: 18px; font-family: Genericons; line-height: 1; } .snav a[href*="flickr.com"]:before { position: static; display: inline-block; content: ""; vertical-align: text-bottom; font-size: 18px; font-family: Genericons; line-height: 1; } .snav a[href*="instagram.com"]:before { position: static; display: inline-block; content: ""; vertical-align: text-bottom; font-size: 18px; font-family: Genericons; line-height: 1; } .snav a[href*="codepen.io"]:before { position: static; display: inline-block; content: ""; vertical-align: text-bottom; font-size: 18px; font-family: Genericons; line-height: 1; } .snav a[href*="linkedin.com"]:before { position: static; display: inline-block; content: ""; vertical-align: text-bottom; font-size: 18px; font-family: Genericons; line-height: 1; } .snav a[href*="dribbble.com"]:before { position: static; display: inline-block; content: ""; vertical-align: text-bottom; font-size: 18px; font-family: Genericons; line-height: 1; } .snav a[href*="foursquare.com"]:before { position: static; display: inline-block; content: ""; vertical-align: text-bottom; font-size: 18px; font-family: Genericons; line-height: 1; } .snav a[href*="pinterest.com"]:before { position: static; display: inline-block; content: ""; vertical-align: text-bottom; font-size: 18px; font-family: Genericons; line-height: 1; } .snav a[href*="tumblr.com"]:before { position: static; display: inline-block; content: ""; vertical-align: text-bottom; font-size: 18px; font-family: Genericons; line-height: 1; } .snav a[href*="vimeo.com"]:before { position: static; display: inline-block; content: ""; vertical-align: text-bottom; font-size: 18px; font-family: Genericons; line-height: 1; } .snav a[href*="youtube.com"]:before { position: static; display: inline-block; content: ""; vertical-align: text-bottom; font-size: 18px; font-family: Genericons; line-height: 1; } .snav a[href*="plus.google.com"]:before { position: static; display: inline-block; content: ""; vertical-align: text-bottom; font-size: 18px; font-family: Genericons; line-height: 1; } /* -------------------------------------------------------------- */ /* WordPress editor styles /* -------------------------------------------------------------- */ .post__content p, .comment-content p, .post__content dl, .comment-content dl, .post__content ul, .post__content ol, .comment-content ul, .comment-content ol, .post__content blockquote, .comment-content blockquote, .post__content pre, .comment-content pre { margin: 14px 0 24px 0; } @media screen and (min-width: 48em) { .post__content p, .comment-content p, .post__content dl, .comment-content dl, .post__content ul, .post__content ol, .comment-content ul, .comment-content ol, .post__content blockquote, .comment-content blockquote, .post__content pre, .comment-content pre { margin: 24px 0 34px 0; } } .post__content h1, .comment-content h1 { font-size: 21px; } @media screen and (min-width: 48em) { .post__content h1, .comment-content h1 { font-size: 26px; } } .post__content h2, .comment-content h2 { font-size: 20px; } @media screen and (min-width: 48em) { .post__content h2, .comment-content h2 { font-size: 24px; } } .post__content h3, .comment-content h3 { font-size: 19px; } @media screen and (min-width: 48em) { .post__content h3, .comment-content h3 { font-size: 22px; } } .post__content h4, .comment-content h4 { font-size: 18px; } @media screen and (min-width: 48em) { .post__content h4, .comment-content h4 { font-size: 20px; } } .post__content h5, .comment-content h5 { font-size: 17px; } @media screen and (min-width: 48em) { .post__content h5, .comment-content h5 { font-size: 18px; } } .post__content h6, .comment-content h6 { font-size: 16px; } @media screen and (min-width: 48em) { .post__content h6, .comment-content h6 { font-size: 16px; } } .post__content h1, .post__content h2, .post__content h3, .post__content h4, .post__content h5, .post__content h6, .comment-content h1, .comment-content h2, .comment-content h3, .comment-content h4, .comment-content h5, .comment-content h6 { margin: 20px 0 14px 0; line-height: 1.5; } @media screen and (min-width: 48em) { .post__content h1, .post__content h2, .post__content h3, .post__content h4, .post__content h5, .post__content h6, .comment-content h1, .comment-content h2, .comment-content h3, .comment-content h4, .comment-content h5, .comment-content h6 { margin: 30px 0 24px 0; } } .post__content h2, .comment-content h2 { border-bottom: 1px dotted #dedede; } .post__content h5, .post__content h6, .comment-content h5, .comment-content h6 { font-weight: normal; } .post__content p, .comment-content p { font-size: 0.875rem; line-height: 1.6; } .post__content dl dt, .post__content dl dd, .comment-content dl dt, .comment-content dl dd { font-size: 0.875rem; } .post__content dl dt, .comment-content dl dt { margin-left: 0; font-family: "Helvetica Neue", "Helvetica", "Roboto", "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", Arial, Sans-Serif; } .post__content dl dd, .comment-content dl dd { margin-left: 14px; } .post__content ul, .post__content ol, .comment-content ul, .comment-content ol { margin-left: 16px; } .post__content ul li, .post__content ol li, .comment-content ul li, .comment-content ol li { margin: 8px; font-size: 0.875rem; line-height: 1.4; } .post__content ul, .comment-content ul { list-style-type: square; } .post__content ol, .comment-content ol { list-style-type: decimal; } .post__content blockquote, .comment-content blockquote { padding: 10px; color: #454545; border: 1px dotted #dedede; font-size: 90%; } .post__content blockquote > *, .comment-content blockquote > * { margin: 0; font-size: 90%; } .post__content blockquote > ul, .post__content blockquote ol, .comment-content blockquote > ul, .comment-content blockquote ol { margin-left: 16px; } .post__content pre, .post__content code, .post__content var, .comment-content pre, .comment-content code, .comment-content var { background-color: #f2f2f2; border-radius: 3px; font-family: Menlo, Consolas, Courier, sans-serif; font-size: 80%; } .post__content pre, .comment-content pre { padding: 10px; background-color: #f2f2f2; word-wrap: normal; overflow-x: auto; } .post__content pre > code, .comment-content pre > code { background-color: transparent; padding: 0; } .post__content code, .post__content var, .comment-content code, .comment-content var { border: none; padding: 2px 4px; } .post__content kbd, .comment-content kbd { padding: 2px 4px; background-color: #313131; border: 1px solid #747474; border-radius: 3px; color: #ffffff; font-family: Menlo, Consolas, Courier, sans-serif; font-size: 80%; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } .post__content cite, .comment-content cite { font-size: 86%; font-style: normal; } .post__content address, .comment-content address { color: #454545; font-size: 0.875rem; font-style: normal; } .post__content ins, .comment-content ins { padding: 0 4px; background-color: #fbb1d6; text-decoration: none; } .post__content table, .comment-content table { border: 1px solid #dedede; background-color: #fff; text-align: left; font-size: 0.875rem; } /* -------------------------------------------------------------- */ /* WordPress specific classes /* -------------------------------------------------------------- */ /** * caption */ .wp-caption { margin-bottom: 1.125rem; max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto; } .wp-caption-text { margin: 0.8075em 0; text-align: center; font-size: 0.75rem; } .wp-caption-text a { font-size: 0.75rem; } /** * gallaries */ .gallery { margin-bottom: 1.125rem; } .gallery-item { display: inline-block; text-align: center; vertical-align: top; width: 100%; } .gallery-columns-2 .gallery-item { max-width: 50%; } .gallery-columns-3 .gallery-item { max-width: 33.33333%; } .gallery-columns-4 .gallery-item { max-width: 25%; } .gallery-columns-5 .gallery-item { max-width: 20%; } .gallery-columns-6 .gallery-item { max-width: 16.66667%; } .gallery-columns-7 .gallery-item { max-width: 14.28571%; } .gallery-columns-8 .gallery-item { max-width: 12.5%; } .gallery-columns-9 .gallery-item { max-width: 11.11111%; } .gallery-icon { padding: 0; background: none; margin-bottom: 10px; } .gallery-caption { display: block; } /** * alignment */ .alignleft { display: inline; float: left; margin-right: 1.125rem; margin-bottom: 1.125rem; } .aligncenter { clear: both; display: block; margin: 0 auto; } .alignright { display: inline; float: right; margin-left: 1.125rem; margin-bottom: 1.125rem; } .post__content .wp-smiley, .comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } /*# sourceMappingURL=maps/style.css.map */