[{"data":1,"prerenderedAt":1151},["ShallowReactive",2],{"article-recent-card-css":3},{"id":4,"title":5,"body":6,"category":1138,"createdAt":1140,"description":5,"extension":1141,"index":1142,"meta":1143,"navigation":190,"path":1144,"publish":190,"seo":1145,"series":1142,"seriesTitle":1142,"stem":1146,"tag":1147,"thumbnail":1149,"updatedAt":1142,"__hash__":1150},"articles\u002Farticles\u002Frecent-card-css.md","イマドキな丸角・正方形・画像カードデザインのレイアウトをCSSで実現させる。",{"type":7,"value":8,"toc":1135},"minimark",[9,21,25,28,53,62,67,70,1132],[10,11,12,13,20],"p",{},"こんにちは jun です。カードデザイン（参考：",[14,15,19],"a",{"href":16,"rel":17},"http:\u002F\u002Fpinterest.jp\u002F",[18],"nofollow","pinterest","）に近いコンポーネントを作った時に意外と詰まって時間かけてしまったので忘備録として残します。実際に↓に作りました。（レスポンシブでない）",[22,23,24],"h2",{"id":24},"コンポーネント要件",[10,26,27],{},"コンポーネントの要件としては以下の通りです。",[29,30,31,35,38,41,44,47,50],"ul",{},[32,33,34],"li",{},"正方形",[32,36,37],{},"丸角",[32,39,40],{},"画像が表示される。",[32,42,43],{},"PCでは３列、タブレットは２列、スマホは１列を維持する",[32,45,46],{},"端（コンテナー の境界）はくっつける。",[32,48,49],{},"1remほど隙間は開ける",[32,51,52],{},"ホバー時に背景画像がぐわっ！と迫ってくる",[10,54,55,56,61],{},"完成したものは",[14,57,60],{"href":58,"rel":59},"http:\u002F\u002Fapp.jun-app.com\u002Fcard-css\u002F",[18],"こちら","のページに置いてあります。画像は以下の通りです。",[63,64],"image-render",{":src":65,":width":66},"'_mix\u002Fsch-2021-04-25 22.19.26.png'","'100%'",[10,68,69],{},"コードはこちら",[71,72,77],"pre",{"className":73,"code":74,"language":75,"meta":76,"style":76},"language-html shiki shiki-themes material-theme-ocean","\u003Cstyle>\n    *{\n        box-sizing: border-box;\n    }\n    html{\n        font-size: 10px;\n    }\n    .p-the-container{\n        width: 100%;\n    }\n\n    .p-the-wrapper{\n        display: flex;\n        flex-wrap: wrap;\n        margin: 0 -1rem;         \u002F* p-img-card の paddingと同じ *\u002F\n    }\n\n    .p-img-card{\n        width: 33.3%;\n        width: 33.3%;\n\n        padding: 1rem;          \u002F* 隙間の太さになる *\u002F\n        margin-bottom: 2rem;    \u002F* 下側の隙間の太さ *\u002F\n\n        position: relative;\n        overflow: hidden;\n        cursor: pointer;\n    }\n\n    .p-img-card::before{\n        content: '';\n        display: block;\n        padding-top: 100%;      \u002F*正方形にするおまじない*\u002F\n    }\n\n    .p-img-card-wrapper{\n        display: block;\n        width: calc(100% - 2rem);  \u002F* カードのラッパーは隙間paddingの分だけ小さくする *\u002F\n        height: calc(100% - 2rem); \u002F* カードのラッパーは隙間paddingの分だけ小さくする *\u002F\n        position: absolute;\n        top: 1rem;　　　　　　　　　　\u002F* 位置もカードのpaddingの分だけ下げる *\u002F\n        overflow: hidden;\n        border-radius: 35px;\n        box-shadow: 0px 0px 8px -3px rgba(0, 0, 0, 0.6);\n    }\n\n    .p-img-card .c-img{\n        width: 100%;\n        height: 100%;\n        background-position: center;\n        background-repeat: no-repeat;\n        background-size: cover;\n        transform: scale(1);\n        transition: transform 0.5s;\n    }\n\n    .p-img-card:hover .c-img{\n        transform: scale(1.2);\n        transition: transform 0.5s;\n        animation: min-and-big 3s;\n    }\n\n    .img-a .c-img{background-image: url(画像のパス);}\n    .img-b .c-img{background-image: url(画像のパス);}\n\n\u003C\u002Fstyle>\n\n\u003Cdiv class=\"p-the-container\">\n    \u003Cdiv class=\"p-the-wrapper\">\n        \u003Cdiv class=\"p-img-card img-a\">\n            \u003Cdiv class=\"p-img-card-wrapper\">\n                \u003Cdiv class=\"c-img\">\u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"p-img-card img-b\">\n            \u003Cdiv class=\"p-img-card-wrapper\">\n                \u003Cdiv class=\"c-img\">\u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n　　　　　...\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n","html","",[78,79,80,96,106,123,129,137,151,156,167,180,185,192,202,215,228,249,254,259,269,281,292,297,313,329,334,347,360,373,378,383,399,412,424,439,444,449,459,470,498,521,533,548,559,572,616,621,626,641,652,663,676,689,702,720,736,741,746,764,780,793,809,814,819,851,877,882,892,897,921,941,962,982,1007,1017,1027,1047,1066,1089,1098,1107,1113,1123],"code",{"__ignoreMap":76},[81,82,85,89,93],"span",{"class":83,"line":84},"line",1,[81,86,88],{"class":87},"sAklC","\u003C",[81,90,92],{"class":91},"s-wAU","style",[81,94,95],{"class":87},">\n",[81,97,99,103],{"class":83,"line":98},2,[81,100,102],{"class":101},"s5Dmg","    *",[81,104,105],{"class":87},"{\n",[81,107,109,113,116,120],{"class":83,"line":108},3,[81,110,112],{"class":111},"s6YsC","        box-sizing",[81,114,115],{"class":87},":",[81,117,119],{"class":118},"s0W1g"," border-box",[81,121,122],{"class":87},";\n",[81,124,126],{"class":83,"line":125},4,[81,127,128],{"class":87},"    }\n",[81,130,132,135],{"class":83,"line":131},5,[81,133,134],{"class":101},"    html",[81,136,105],{"class":87},[81,138,140,143,145,149],{"class":83,"line":139},6,[81,141,142],{"class":111},"        font-size",[81,144,115],{"class":87},[81,146,148],{"class":147},"sx098"," 10px",[81,150,122],{"class":87},[81,152,154],{"class":83,"line":153},7,[81,155,128],{"class":87},[81,157,159,162,165],{"class":83,"line":158},8,[81,160,161],{"class":87},"    .",[81,163,164],{"class":101},"p-the-container",[81,166,105],{"class":87},[81,168,170,173,175,178],{"class":83,"line":169},9,[81,171,172],{"class":111},"        width",[81,174,115],{"class":87},[81,176,177],{"class":147}," 100%",[81,179,122],{"class":87},[81,181,183],{"class":83,"line":182},10,[81,184,128],{"class":87},[81,186,188],{"class":83,"line":187},11,[81,189,191],{"emptyLinePlaceholder":190},true,"\n",[81,193,195,197,200],{"class":83,"line":194},12,[81,196,161],{"class":87},[81,198,199],{"class":101},"p-the-wrapper",[81,201,105],{"class":87},[81,203,205,208,210,213],{"class":83,"line":204},13,[81,206,207],{"class":111},"        display",[81,209,115],{"class":87},[81,211,212],{"class":118}," flex",[81,214,122],{"class":87},[81,216,218,221,223,226],{"class":83,"line":217},14,[81,219,220],{"class":111},"        flex-wrap",[81,222,115],{"class":87},[81,224,225],{"class":118}," wrap",[81,227,122],{"class":87},[81,229,231,234,236,239,242,245],{"class":83,"line":230},15,[81,232,233],{"class":111},"        margin",[81,235,115],{"class":87},[81,237,238],{"class":147}," 0",[81,240,241],{"class":147}," -1rem",[81,243,244],{"class":87},";",[81,246,248],{"class":247},"sC9rS","         \u002F* p-img-card の paddingと同じ *\u002F\n",[81,250,252],{"class":83,"line":251},16,[81,253,128],{"class":87},[81,255,257],{"class":83,"line":256},17,[81,258,191],{"emptyLinePlaceholder":190},[81,260,262,264,267],{"class":83,"line":261},18,[81,263,161],{"class":87},[81,265,266],{"class":101},"p-img-card",[81,268,105],{"class":87},[81,270,272,274,276,279],{"class":83,"line":271},19,[81,273,172],{"class":111},[81,275,115],{"class":87},[81,277,278],{"class":147}," 33.3%",[81,280,122],{"class":87},[81,282,284,286,288,290],{"class":83,"line":283},20,[81,285,172],{"class":111},[81,287,115],{"class":87},[81,289,278],{"class":147},[81,291,122],{"class":87},[81,293,295],{"class":83,"line":294},21,[81,296,191],{"emptyLinePlaceholder":190},[81,298,300,303,305,308,310],{"class":83,"line":299},22,[81,301,302],{"class":111},"        padding",[81,304,115],{"class":87},[81,306,307],{"class":147}," 1rem",[81,309,244],{"class":87},[81,311,312],{"class":247},"          \u002F* 隙間の太さになる *\u002F\n",[81,314,316,319,321,324,326],{"class":83,"line":315},23,[81,317,318],{"class":111},"        margin-bottom",[81,320,115],{"class":87},[81,322,323],{"class":147}," 2rem",[81,325,244],{"class":87},[81,327,328],{"class":247},"    \u002F* 下側の隙間の太さ *\u002F\n",[81,330,332],{"class":83,"line":331},24,[81,333,191],{"emptyLinePlaceholder":190},[81,335,337,340,342,345],{"class":83,"line":336},25,[81,338,339],{"class":111},"        position",[81,341,115],{"class":87},[81,343,344],{"class":118}," relative",[81,346,122],{"class":87},[81,348,350,353,355,358],{"class":83,"line":349},26,[81,351,352],{"class":111},"        overflow",[81,354,115],{"class":87},[81,356,357],{"class":118}," hidden",[81,359,122],{"class":87},[81,361,363,366,368,371],{"class":83,"line":362},27,[81,364,365],{"class":111},"        cursor",[81,367,115],{"class":87},[81,369,370],{"class":118}," pointer",[81,372,122],{"class":87},[81,374,376],{"class":83,"line":375},28,[81,377,128],{"class":87},[81,379,381],{"class":83,"line":380},29,[81,382,191],{"emptyLinePlaceholder":190},[81,384,386,388,390,393,397],{"class":83,"line":385},30,[81,387,161],{"class":87},[81,389,266],{"class":101},[81,391,392],{"class":87},"::",[81,394,396],{"class":395},"sJ14y","before",[81,398,105],{"class":87},[81,400,402,405,407,410],{"class":83,"line":401},31,[81,403,404],{"class":111},"        content",[81,406,115],{"class":87},[81,408,409],{"class":87}," ''",[81,411,122],{"class":87},[81,413,415,417,419,422],{"class":83,"line":414},32,[81,416,207],{"class":111},[81,418,115],{"class":87},[81,420,421],{"class":118}," block",[81,423,122],{"class":87},[81,425,427,430,432,434,436],{"class":83,"line":426},33,[81,428,429],{"class":111},"        padding-top",[81,431,115],{"class":87},[81,433,177],{"class":147},[81,435,244],{"class":87},[81,437,438],{"class":247},"      \u002F*正方形にするおまじない*\u002F\n",[81,440,442],{"class":83,"line":441},34,[81,443,128],{"class":87},[81,445,447],{"class":83,"line":446},35,[81,448,191],{"emptyLinePlaceholder":190},[81,450,452,454,457],{"class":83,"line":451},36,[81,453,161],{"class":87},[81,455,456],{"class":101},"p-img-card-wrapper",[81,458,105],{"class":87},[81,460,462,464,466,468],{"class":83,"line":461},37,[81,463,207],{"class":111},[81,465,115],{"class":87},[81,467,421],{"class":118},[81,469,122],{"class":87},[81,471,473,475,477,481,484,487,490,492,495],{"class":83,"line":472},38,[81,474,172],{"class":111},[81,476,115],{"class":87},[81,478,480],{"class":479},"sdLwU"," calc",[81,482,483],{"class":87},"(",[81,485,486],{"class":147},"100%",[81,488,489],{"class":87}," -",[81,491,323],{"class":147},[81,493,494],{"class":87},");",[81,496,497],{"class":247},"  \u002F* カードのラッパーは隙間paddingの分だけ小さくする *\u002F\n",[81,499,501,504,506,508,510,512,514,516,518],{"class":83,"line":500},39,[81,502,503],{"class":111},"        height",[81,505,115],{"class":87},[81,507,480],{"class":479},[81,509,483],{"class":87},[81,511,486],{"class":147},[81,513,489],{"class":87},[81,515,323],{"class":147},[81,517,494],{"class":87},[81,519,520],{"class":247}," \u002F* カードのラッパーは隙間paddingの分だけ小さくする *\u002F\n",[81,522,524,526,528,531],{"class":83,"line":523},40,[81,525,339],{"class":111},[81,527,115],{"class":87},[81,529,530],{"class":118}," absolute",[81,532,122],{"class":87},[81,534,536,539,541,543,545],{"class":83,"line":535},41,[81,537,538],{"class":111},"        top",[81,540,115],{"class":87},[81,542,307],{"class":147},[81,544,244],{"class":87},[81,546,547],{"class":247},"　　　　　　　　　　\u002F* 位置もカードのpaddingの分だけ下げる *\u002F\n",[81,549,551,553,555,557],{"class":83,"line":550},42,[81,552,352],{"class":111},[81,554,115],{"class":87},[81,556,357],{"class":118},[81,558,122],{"class":87},[81,560,562,565,567,570],{"class":83,"line":561},43,[81,563,564],{"class":111},"        border-radius",[81,566,115],{"class":87},[81,568,569],{"class":147}," 35px",[81,571,122],{"class":87},[81,573,575,578,580,583,585,588,591,594,596,599,602,604,606,608,610,613],{"class":83,"line":574},44,[81,576,577],{"class":111},"        box-shadow",[81,579,115],{"class":87},[81,581,582],{"class":147}," 0px",[81,584,582],{"class":147},[81,586,587],{"class":147}," 8px",[81,589,590],{"class":147}," -3px",[81,592,593],{"class":479}," rgba",[81,595,483],{"class":87},[81,597,598],{"class":147},"0",[81,600,601],{"class":87},",",[81,603,238],{"class":147},[81,605,601],{"class":87},[81,607,238],{"class":147},[81,609,601],{"class":87},[81,611,612],{"class":147}," 0.6",[81,614,615],{"class":87},");\n",[81,617,619],{"class":83,"line":618},45,[81,620,128],{"class":87},[81,622,624],{"class":83,"line":623},46,[81,625,191],{"emptyLinePlaceholder":190},[81,627,629,631,633,636,639],{"class":83,"line":628},47,[81,630,161],{"class":87},[81,632,266],{"class":101},[81,634,635],{"class":87}," .",[81,637,638],{"class":101},"c-img",[81,640,105],{"class":87},[81,642,644,646,648,650],{"class":83,"line":643},48,[81,645,172],{"class":111},[81,647,115],{"class":87},[81,649,177],{"class":147},[81,651,122],{"class":87},[81,653,655,657,659,661],{"class":83,"line":654},49,[81,656,503],{"class":111},[81,658,115],{"class":87},[81,660,177],{"class":147},[81,662,122],{"class":87},[81,664,666,669,671,674],{"class":83,"line":665},50,[81,667,668],{"class":111},"        background-position",[81,670,115],{"class":87},[81,672,673],{"class":118}," center",[81,675,122],{"class":87},[81,677,679,682,684,687],{"class":83,"line":678},51,[81,680,681],{"class":111},"        background-repeat",[81,683,115],{"class":87},[81,685,686],{"class":118}," no-repeat",[81,688,122],{"class":87},[81,690,692,695,697,700],{"class":83,"line":691},52,[81,693,694],{"class":111},"        background-size",[81,696,115],{"class":87},[81,698,699],{"class":118}," cover",[81,701,122],{"class":87},[81,703,705,708,710,713,715,718],{"class":83,"line":704},53,[81,706,707],{"class":111},"        transform",[81,709,115],{"class":87},[81,711,712],{"class":479}," scale",[81,714,483],{"class":87},[81,716,717],{"class":147},"1",[81,719,615],{"class":87},[81,721,723,726,728,731,734],{"class":83,"line":722},54,[81,724,725],{"class":111},"        transition",[81,727,115],{"class":87},[81,729,730],{"class":118}," transform ",[81,732,733],{"class":147},"0.5s",[81,735,122],{"class":87},[81,737,739],{"class":83,"line":738},55,[81,740,128],{"class":87},[81,742,744],{"class":83,"line":743},56,[81,745,191],{"emptyLinePlaceholder":190},[81,747,749,751,753,755,758,760,762],{"class":83,"line":748},57,[81,750,161],{"class":87},[81,752,266],{"class":101},[81,754,115],{"class":87},[81,756,757],{"class":395},"hover",[81,759,635],{"class":87},[81,761,638],{"class":101},[81,763,105],{"class":87},[81,765,767,769,771,773,775,778],{"class":83,"line":766},58,[81,768,707],{"class":111},[81,770,115],{"class":87},[81,772,712],{"class":479},[81,774,483],{"class":87},[81,776,777],{"class":147},"1.2",[81,779,615],{"class":87},[81,781,783,785,787,789,791],{"class":83,"line":782},59,[81,784,725],{"class":111},[81,786,115],{"class":87},[81,788,730],{"class":118},[81,790,733],{"class":147},[81,792,122],{"class":87},[81,794,796,799,801,804,807],{"class":83,"line":795},60,[81,797,798],{"class":111},"        animation",[81,800,115],{"class":87},[81,802,803],{"class":118}," min-and-big ",[81,805,806],{"class":147},"3s",[81,808,122],{"class":87},[81,810,812],{"class":83,"line":811},61,[81,813,128],{"class":87},[81,815,817],{"class":83,"line":816},62,[81,818,191],{"emptyLinePlaceholder":190},[81,820,822,824,827,829,831,834,837,839,842,844,848],{"class":83,"line":821},63,[81,823,161],{"class":87},[81,825,826],{"class":101},"img-a",[81,828,635],{"class":87},[81,830,638],{"class":101},[81,832,833],{"class":87},"{",[81,835,836],{"class":111},"background-image",[81,838,115],{"class":87},[81,840,841],{"class":479}," url",[81,843,483],{"class":87},[81,845,847],{"class":846},"s7ZW3","画像のパス",[81,849,850],{"class":87},");}\n",[81,852,854,856,859,861,863,865,867,869,871,873,875],{"class":83,"line":853},64,[81,855,161],{"class":87},[81,857,858],{"class":101},"img-b",[81,860,635],{"class":87},[81,862,638],{"class":101},[81,864,833],{"class":87},[81,866,836],{"class":111},[81,868,115],{"class":87},[81,870,841],{"class":479},[81,872,483],{"class":87},[81,874,847],{"class":846},[81,876,850],{"class":87},[81,878,880],{"class":83,"line":879},65,[81,881,191],{"emptyLinePlaceholder":190},[81,883,885,888,890],{"class":83,"line":884},66,[81,886,887],{"class":87},"\u003C\u002F",[81,889,92],{"class":91},[81,891,95],{"class":87},[81,893,895],{"class":83,"line":894},67,[81,896,191],{"emptyLinePlaceholder":190},[81,898,900,902,905,908,911,914,917,919],{"class":83,"line":899},68,[81,901,88],{"class":87},[81,903,904],{"class":91},"div",[81,906,907],{"class":395}," class",[81,909,910],{"class":87},"=",[81,912,913],{"class":87},"\"",[81,915,164],{"class":916},"sfyAc",[81,918,913],{"class":87},[81,920,95],{"class":87},[81,922,924,927,929,931,933,935,937,939],{"class":83,"line":923},69,[81,925,926],{"class":87},"    \u003C",[81,928,904],{"class":91},[81,930,907],{"class":395},[81,932,910],{"class":87},[81,934,913],{"class":87},[81,936,199],{"class":916},[81,938,913],{"class":87},[81,940,95],{"class":87},[81,942,944,947,949,951,953,955,958,960],{"class":83,"line":943},70,[81,945,946],{"class":87},"        \u003C",[81,948,904],{"class":91},[81,950,907],{"class":395},[81,952,910],{"class":87},[81,954,913],{"class":87},[81,956,957],{"class":916},"p-img-card img-a",[81,959,913],{"class":87},[81,961,95],{"class":87},[81,963,965,968,970,972,974,976,978,980],{"class":83,"line":964},71,[81,966,967],{"class":87},"            \u003C",[81,969,904],{"class":91},[81,971,907],{"class":395},[81,973,910],{"class":87},[81,975,913],{"class":87},[81,977,456],{"class":916},[81,979,913],{"class":87},[81,981,95],{"class":87},[81,983,985,988,990,992,994,996,998,1000,1003,1005],{"class":83,"line":984},72,[81,986,987],{"class":87},"                \u003C",[81,989,904],{"class":91},[81,991,907],{"class":395},[81,993,910],{"class":87},[81,995,913],{"class":87},[81,997,638],{"class":916},[81,999,913],{"class":87},[81,1001,1002],{"class":87},">\u003C\u002F",[81,1004,904],{"class":91},[81,1006,95],{"class":87},[81,1008,1010,1013,1015],{"class":83,"line":1009},73,[81,1011,1012],{"class":87},"            \u003C\u002F",[81,1014,904],{"class":91},[81,1016,95],{"class":87},[81,1018,1020,1023,1025],{"class":83,"line":1019},74,[81,1021,1022],{"class":87},"        \u003C\u002F",[81,1024,904],{"class":91},[81,1026,95],{"class":87},[81,1028,1030,1032,1034,1036,1038,1040,1043,1045],{"class":83,"line":1029},75,[81,1031,946],{"class":87},[81,1033,904],{"class":91},[81,1035,907],{"class":395},[81,1037,910],{"class":87},[81,1039,913],{"class":87},[81,1041,1042],{"class":916},"p-img-card img-b",[81,1044,913],{"class":87},[81,1046,95],{"class":87},[81,1048,1050,1052,1054,1056,1058,1060,1062,1064],{"class":83,"line":1049},76,[81,1051,967],{"class":87},[81,1053,904],{"class":91},[81,1055,907],{"class":395},[81,1057,910],{"class":87},[81,1059,913],{"class":87},[81,1061,456],{"class":916},[81,1063,913],{"class":87},[81,1065,95],{"class":87},[81,1067,1069,1071,1073,1075,1077,1079,1081,1083,1085,1087],{"class":83,"line":1068},77,[81,1070,987],{"class":87},[81,1072,904],{"class":91},[81,1074,907],{"class":395},[81,1076,910],{"class":87},[81,1078,913],{"class":87},[81,1080,638],{"class":916},[81,1082,913],{"class":87},[81,1084,1002],{"class":87},[81,1086,904],{"class":91},[81,1088,95],{"class":87},[81,1090,1092,1094,1096],{"class":83,"line":1091},78,[81,1093,1012],{"class":87},[81,1095,904],{"class":91},[81,1097,95],{"class":87},[81,1099,1101,1103,1105],{"class":83,"line":1100},79,[81,1102,1022],{"class":87},[81,1104,904],{"class":91},[81,1106,95],{"class":87},[81,1108,1110],{"class":83,"line":1109},80,[81,1111,1112],{"class":118},"　　　　　...\n",[81,1114,1116,1119,1121],{"class":83,"line":1115},81,[81,1117,1118],{"class":87},"    \u003C\u002F",[81,1120,904],{"class":91},[81,1122,95],{"class":87},[81,1124,1126,1128,1130],{"class":83,"line":1125},82,[81,1127,887],{"class":87},[81,1129,904],{"class":91},[81,1131,95],{"class":87},[92,1133,1134],{},"html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .s6YsC, html code.shiki .s6YsC{--shiki-default:#B2CCD6}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .s7ZW3, html code.shiki .s7ZW3{--shiki-default:#BABED8;--shiki-default-font-style:italic}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":76,"searchDepth":108,"depth":108,"links":1136},[1137],{"id":24,"depth":98,"text":24},[1139],"ministack","2020-12-17","md",null,{},"\u002Farticles\u002Frecent-card-css",{"title":5,"description":5},"articles\u002Frecent-card-css",[75,1148],"css","_mix\u002Fsch-2021-04-25 22.19.26.png","a9LRbH7otDCRxRFyUY0oec3ojY88jg3a-FXDcIlgR9k",1780987145408]