Skip to content

Instantly share code, notes, and snippets.

View miminari's full-sized avatar
🏠
Working from home

mimi miminari

🏠
Working from home
View GitHub Profile
@miminari
miminari / wp-contact-form7.html
Last active July 28, 2018 03:16
郵便番号検索 ajaxzip3を導入
<div class="m-form__item">
<div class="m-form__ttl">ご住所 <em class="m-form__must">※</em><div class="m-attn">マンション名・部屋番号も忘れずにご記入ください。</div></div>
<div class="m-form__body"><label class="m-form__line"><span class="m-form__ttl--sub">郵便番号</span> [number* zip11 id:zip11 placeholder "6500000"]</label><label class="m-form__line"><span class="m-form__ttl--sub">住所1</span> [text* addr11 id:addr11]</label><label class="m-form__line"><span class="m-form__ttl--sub">住所2</span> [text addr-more]</label></div>
</div>
@miminari
miminari / eslintrc.js
Last active October 27, 2018 13:04
npm-scripts template for wordpress theme
module.exports = {
"env": {
"browser": true,
"commonjs": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 5
},
"rules": {
@miminari
miminari / getColorbyRGBaster.js
Last active October 16, 2018 06:25
get colors from wp rest api
const getColor = (posts) => {
for (const key in posts) {
if (posts[key]._embedded['wp:featuredmedia']) { // キャッチ画像が設定されている場合
var imgUrl = posts[key]._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_url;
RGBaster.colors(imgUrl, { // eslint-disable-line
paletteSize: 3,
success: function (colors) {
Vue.set(vm.posts[key], 'color', colors.secondary);// eslint-disable-line
Vue.set(vm.posts[key], 'isLoaded', true);// eslint-disable-line
}
<template>
<div class="a-container" :class="{ 'is-loaded' : isLoaded }">
<input type="radio" v-for="(project, k) in projects" :key="project.id" class="a-slide__label" :id="'slide'+(k+1)" :name="'slide'+k" :value="project.id" v-model="current" />
<main class="l-main">
<article v-for="project in projects" :key="project.id" class="m-article" :id="'project'+project.id">
<figure class="m-media"><img :src="project.src" /></figure>
<h2 class="m-ttl">{{ project.title }}</h2>
<dl class="m-list--dl">
<div class="m-list__item">
module.exports = {
mode: 'spa',
css: [
'@/assets/css/main.scss'
],
head: {
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }
]
.wp-block-button {
.wp-block-button__link {
border-radius: 0.375rem;
font-weight: 700;
font-size: inherit;
line-height: auto;
padding: .7em 1.2em;
&:hover {
text-decoration: none;
box-shadow: none;
// you need rewrite rem()
hr,.wp-block-separator {
border-top: rem(2) dashed lighten($text-color,50%);
margin: rem(30) auto;
width: 50%;
&.is-style-wide {
width: auto;
margin: rem(30) 1em;
}
&.is-style-dots {
// ===== config =====
$theme-colors: (
red: #CE2121,
gold: #988768,
base: $base-color,
texts: $text-color
);
//mixin
@mixin eachBtnColor($colors) {
@each $key, $color in $colors {
<template>
<section class="container">
<div>
<h1 class="title">test app</h1>
<div v-if="projects.length != 0">
<ul>
<li v-for="project in projects" :key="project.id">
<nuxt-link :to="'/projects/'+project.projectID">{{ project.name }}</nuxt-link>
</li>
</ul>