Skip to content

45 Custom Member's Card #52

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: 45-custom
Choose a base branch
from
Open

45 Custom Member's Card #52

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7bf61a5
wip: Kohji's cerd
rie-oki-agn Jul 3, 2022
f0f1a2e
wip: Kohji's card
rie-oki-agn Jul 3, 2022
a3e12c1
Merge branch '45-custom' of github.com:rie-oki-agn/commit-mate.net in…
rie-oki-agn Jul 3, 2022
9bea049
chore: Kohji's card
rie-oki-agn Jul 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 57 additions & 12 deletions components/Card/Monsat.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,45 @@ const props = defineProps<Props>()

<a
:href="`https://github.com/${props.member.id}`" target="_blank" rel="noopener noreferrer"
class="wrapper block bg-slate-50 rounded-md px-6 py-5 drop-shadow">
class="wrapper block bg-slate-50 rounded-md drop-shadow">

<div class="w-full flex items-center space-x-4">
<div>
<img class="w-16 h-16 object-cover rounded-full" :src="`https://github.com/${props.member.id}.png`" alt="">
<div class="glasses hidden absolute w-12 top-[48%] left-[0.5rem]">
<div class="absolute top-0 left-0 w-full h-full py-2">
<div v-for="(num, index) of 4" :key="index" class="kohji-wrapper w-full mb-2">
<div v-for="(num, index) of 3" class="kohji inline-block w-1/3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 345.228 65.413">
<g opacity="0.39">
<g>
<path d="M18.361,63.245H3.725V60.587H6.21V55.619H20.847v4.967H18.362v2.657h0Zm0-7.625H3.725V36.99H1.242V35.748H15.879V36.99h2.484V55.618h0Zm0-19.871H3.725V34.506H18.362v1.241h0ZM6.21,34.506V29.538H3.725V18.36H18.362V29.537h2.485v4.968ZM0,18.36V17.118H3.725V12.151H18.362v4.966H14.637V18.36Zm7.452-6.209V7.183H3.725V0H18.362V7.182h3.727v4.968Z" transform="translate(310.719)" fill="#f5007b"/>
<path d="M11.35,62.916A24.252,24.252,0,0,1,3.629,58.8H37.3c-3.8,3.667-9.417,5.526-16.7,5.526A29.849,29.849,0,0,1,11.35,62.916Zm.974-4.113q-.738-.59-1.421-1.242H2.209A21.677,21.677,0,0,1,0,55.113l8.132-9.757A19.327,19.327,0,0,0,13.6,50.563a11.9,11.9,0,0,0,6.28,1.75A8.66,8.66,0,0,0,26.056,50.2a9.764,9.764,0,0,0,2.665-6.3H43.273c-.39,5.74-2.009,10.336-4.81,13.661h8.694A16.7,16.7,0,0,1,46,58.8ZM22.51,43.9a20.229,20.229,0,0,0,.1-2.068v-2.9h6.21V19.06H43.368V38.93h-6.21v2.088q0,1.489-.1,2.88ZM32.547,19.06V17.818H28.821V11.745H6.595V9.125H43.368v8.692h3.725V19.06ZM2.869,9.125V4.157H6.595V2.915h4.968V1.673H48.335V2.915H43.368V4.156H39.641V9.125Zm40.5-7.452H6.595V0H43.368V1.672h0Z" transform="translate(245.641 0.542)" fill="#f5007b"/>
<path d="M64.213,63.245H49.578V53.451H53.3V52.209H67.94v1.242H64.215v9.793h0Zm-43.368,0H6.21V53.451H9.936V52.209H24.573v1.242H20.847v9.793h0ZM64.213,52.209H49.578V47.242H64.215v4.966h0Zm-43.368,0H6.21V47.242H20.847v4.966h0Zm22.523-4.967V39.79h6.21V37.315H20.847V39.79h-6.21v7.451H0V39.79H6.21V28.612h58V39.789H58v7.452ZM13.661,28.612V27.37H6.21V17.435H20.847v7.5H49.578v-7.5H64.215v9.935h7.451v1.242ZM44.609,17.435V9.983h4.968V7.5H64.215V9.982H59.246v7.452Zm-43.368,0V9.983H6.21V7.5H20.847V9.982H15.879v7.452ZM54.545,7.5V6.257H49.578V0H64.215V6.256h4.967V7.5Zm-43.368,0V6.257H6.21V0H20.847V6.256h4.967V7.5Z" transform="translate(160.273 2.168)" fill="#f5007b"/>
<path d="M17.029,63.246H2.484V59.5H17.03v3.741h0Zm28.732,0L42.714,59.5H59.878l2.959,3.739-17.075,0ZM40.229,59.5l-5.058-6.21h2.484L30.573,44.6h2.8l-1.012-1.242H49.9L50.88,44.6h-2.8l6.878,8.692,0,0H52.48l4.915,6.21ZM0,59.5v-6.21H2.484V44.6h2.8V43.358h-2.8v-23.6H0V16.035H2.484V8.583h6.21V7.341H2.484V0H17.03V7.34h6.21V8.583H17.03v7.451H14.546v3.725H17.03v9.784l9.275-9.784H23.822l3.532-3.725h2.484L36.9,8.583h6.21l1.177-1.242h-6.21L45.039,0H61.3L54.478,7.341h6.209L59.533,8.583H53.323L46.4,16.035H43.913L40.45,19.761h2.485L35.1,28.19l12,15.166-17.54,0L25.523,38.4l-4.756,4.958h2.8L22.371,44.6h-2.8L17.03,47.253v6.039H14.546V59.5Z" transform="translate(0 1.084)" fill="#f5007b"/>
<path d="M25.3,62.945a33.09,33.09,0,0,1-10.134-6.084H6.474q-.419-.371-.826-.754-.255-.241-.5-.487H55.734c-.178.175-.359.35-.541.522q-.389.367-.789.72H63.1a33.191,33.191,0,0,1-10.174,6.1,38.608,38.608,0,0,1-13.793,2.455A38.576,38.576,0,0,1,25.3,62.945Zm39.126-7.326H13.839a30.878,30.878,0,0,1-6.712-9.874,31.716,31.716,0,0,1-1.339-3.788h5.437c-.234-.822-.435-1.658-.6-2.484H5.187a34.482,34.482,0,0,1-.659-6.767A33.557,33.557,0,0,1,6.21,22.087H0a31.245,31.245,0,0,1,2.848-6.21h6.21a31.091,31.091,0,0,1,6.255-7.452h8.694c.491-.428,1-.846,1.517-1.242H16.83a33.877,33.877,0,0,1,10.1-5.294,40.322,40.322,0,0,1,24.387,0A33.837,33.837,0,0,1,61.43,7.18l8.7,0c.506.388,1.017.806,1.519,1.242H62.952a31.02,31.02,0,0,1,6.255,7.45l-18.6,0H63a31.279,31.279,0,0,1,2.847,6.21h6.21a33.593,33.593,0,0,1,1.68,10.62,34.513,34.513,0,0,1-.658,6.766H57.93a22.859,22.859,0,0,0,.988-6.767,22.316,22.316,0,0,0-1.5-8.231,19.5,19.5,0,0,0-1.135-2.389H50.071a18.587,18.587,0,0,0-3.021-4A18.1,18.1,0,0,0,44.4,15.877h6.209a20.211,20.211,0,0,0-11.476-3.408,20.208,20.208,0,0,0-11.476,3.408h-6.21a18.262,18.262,0,0,0-2.652,2.205,18.556,18.556,0,0,0-3.02,4h6.21a19.435,19.435,0,0,0-1.135,2.389,22.332,22.332,0,0,0-1.5,8.231,22.828,22.828,0,0,0,.988,6.767H25.77c.155.5.329.994.515,1.465.134.341.281.683.435,1.018H21.284A18.707,18.707,0,0,0,25,47.332a19.674,19.674,0,0,0,14.128,5.613A19.674,19.674,0,0,0,53.26,47.332a18.666,18.666,0,0,0,3.719-5.375h5.437c.151-.325.3-.668.436-1.018.19-.482.363-.975.515-1.465H78.514c-.169.842-.37,1.677-.6,2.484H72.478a31.936,31.936,0,0,1-1.355,3.826,30.851,30.851,0,0,1-6.7,9.836Z" transform="translate(68.056)" fill="#f5007b"/>
</g>
<g transform="translate(12.419)">
<path d="M18.361,63.245H3.725V60.587H6.21V55.619H20.847v4.967H18.362v2.657h0Zm0-7.625H3.725V36.99H1.242V35.748H15.879V36.99h2.484V55.618h0Zm0-19.871H3.725V34.506H18.362v1.241h0ZM6.21,34.506V29.538H3.725V18.36H18.362V29.537h2.485v4.968ZM0,18.36V17.118H3.725V12.151H18.362v4.966H14.637V18.36Zm7.452-6.209V7.183H3.725V0H18.362V7.182h3.727v4.968Z" transform="translate(310.719)" fill="#0071f5"/>
<path d="M11.35,62.916A24.252,24.252,0,0,1,3.629,58.8H37.3c-3.8,3.667-9.417,5.526-16.7,5.526A29.849,29.849,0,0,1,11.35,62.916Zm.974-4.113q-.738-.59-1.421-1.242H2.209A21.677,21.677,0,0,1,0,55.113l8.132-9.757A19.327,19.327,0,0,0,13.6,50.563a11.9,11.9,0,0,0,6.28,1.75A8.66,8.66,0,0,0,26.056,50.2a9.764,9.764,0,0,0,2.665-6.3H43.273c-.39,5.74-2.009,10.336-4.81,13.661h8.694A16.7,16.7,0,0,1,46,58.8ZM22.51,43.9a20.229,20.229,0,0,0,.1-2.068v-2.9h6.21V19.06H43.368V38.93h-6.21v2.088q0,1.489-.1,2.88ZM32.547,19.06V17.818H28.821V11.745H6.595V9.125H43.368v8.692h3.725V19.06ZM2.869,9.125V4.157H6.595V2.915h4.968V1.673H48.335V2.915H43.368V4.156H39.641V9.125Zm40.5-7.452H6.595V0H43.368V1.672h0Z" transform="translate(245.641 0.542)" fill="#0071f5"/>
<path d="M64.213,63.245H49.578V53.451H53.3V52.209H67.94v1.242H64.215v9.793h0Zm-43.368,0H6.21V53.451H9.936V52.209H24.573v1.242H20.847v9.793h0ZM64.213,52.209H49.578V47.242H64.215v4.966h0Zm-43.368,0H6.21V47.242H20.847v4.966h0Zm22.523-4.967V39.79h6.21V37.315H20.847V39.79h-6.21v7.451H0V39.79H6.21V28.612h58V39.789H58v7.452ZM13.661,28.612V27.37H6.21V17.435H20.847v7.5H49.578v-7.5H64.215v9.935h7.451v1.242ZM44.609,17.435V9.983h4.968V7.5H64.215V9.982H59.246v7.452Zm-43.368,0V9.983H6.21V7.5H20.847V9.982H15.879v7.452ZM54.545,7.5V6.257H49.578V0H64.215V6.256h4.967V7.5Zm-43.368,0V6.257H6.21V0H20.847V6.256h4.967V7.5Z" transform="translate(160.273 2.168)" fill="#0071f5"/>
<path d="M17.029,63.246H2.484V59.5H17.03v3.741h0Zm28.732,0L42.714,59.5H59.878l2.959,3.739-17.075,0ZM40.229,59.5l-5.058-6.21h2.484L30.573,44.6h2.8l-1.012-1.242H49.9L50.88,44.6h-2.8l6.878,8.692,0,0H52.48l4.915,6.21ZM0,59.5v-6.21H2.484V44.6h2.8V43.358h-2.8v-23.6H0V16.035H2.484V8.583h6.21V7.341H2.484V0H17.03V7.34h6.21V8.583H17.03v7.451H14.546v3.725H17.03v9.784l9.275-9.784H23.822l3.532-3.725h2.484L36.9,8.583h6.21l1.177-1.242h-6.21L45.039,0H61.3L54.478,7.341h6.209L59.533,8.583H53.323L46.4,16.035H43.913L40.45,19.761h2.485L35.1,28.19l12,15.166-17.54,0L25.523,38.4l-4.756,4.958h2.8L22.371,44.6h-2.8L17.03,47.253v6.039H14.546V59.5Z" transform="translate(0 1.084)" fill="#0071f5"/>
<path d="M25.3,62.945a33.09,33.09,0,0,1-10.134-6.084H6.474q-.419-.371-.826-.754-.255-.241-.5-.487H55.734c-.178.175-.359.35-.541.522q-.389.367-.789.72H63.1a33.191,33.191,0,0,1-10.174,6.1,38.608,38.608,0,0,1-13.793,2.455A38.576,38.576,0,0,1,25.3,62.945Zm39.126-7.326H13.839a30.878,30.878,0,0,1-6.712-9.874,31.716,31.716,0,0,1-1.339-3.788h5.437c-.234-.822-.435-1.658-.6-2.484H5.187a34.482,34.482,0,0,1-.659-6.767A33.557,33.557,0,0,1,6.21,22.087H0a31.245,31.245,0,0,1,2.848-6.21h6.21a31.091,31.091,0,0,1,6.255-7.452h8.694c.491-.428,1-.846,1.517-1.242H16.83a33.877,33.877,0,0,1,10.1-5.294,40.322,40.322,0,0,1,24.387,0A33.837,33.837,0,0,1,61.43,7.18l8.7,0c.506.388,1.017.806,1.519,1.242H62.952a31.02,31.02,0,0,1,6.255,7.45l-18.6,0H63a31.279,31.279,0,0,1,2.847,6.21h6.21a33.593,33.593,0,0,1,1.68,10.62,34.513,34.513,0,0,1-.658,6.766H57.93a22.859,22.859,0,0,0,.988-6.767,22.316,22.316,0,0,0-1.5-8.231,19.5,19.5,0,0,0-1.135-2.389H50.071a18.587,18.587,0,0,0-3.021-4A18.1,18.1,0,0,0,44.4,15.877h6.209a20.211,20.211,0,0,0-11.476-3.408,20.208,20.208,0,0,0-11.476,3.408h-6.21a18.262,18.262,0,0,0-2.652,2.205,18.556,18.556,0,0,0-3.02,4h6.21a19.435,19.435,0,0,0-1.135,2.389,22.332,22.332,0,0,0-1.5,8.231,22.828,22.828,0,0,0,.988,6.767H25.77c.155.5.329.994.515,1.465.134.341.281.683.435,1.018H21.284A18.707,18.707,0,0,0,25,47.332a19.674,19.674,0,0,0,14.128,5.613A19.674,19.674,0,0,0,53.26,47.332a18.666,18.666,0,0,0,3.719-5.375h5.437c.151-.325.3-.668.436-1.018.19-.482.363-.975.515-1.465H78.514c-.169.842-.37,1.677-.6,2.484H72.478a31.936,31.936,0,0,1-1.355,3.826,30.851,30.851,0,0,1-6.7,9.836Z" transform="translate(68.056)" fill="#0071f5"/>
</g>
<g transform="translate(6.21)">
<path d="M18.361,63.245H3.725V60.587H6.21V55.619H20.847v4.967H18.362v2.657h0Zm0-7.625H3.725V36.99H1.242V35.748H15.879V36.99h2.484V55.618h0Zm0-19.871H3.725V34.506H18.362v1.241h0ZM6.21,34.506V29.538H3.725V18.36H18.362V29.537h2.485v4.968ZM0,18.36V17.118H3.725V12.151H18.362v4.966H14.637V18.36Zm7.452-6.209V7.183H3.725V0H18.362V7.182h3.727v4.968Z" transform="translate(310.719)" fill="#fff"/>
<path d="M11.35,62.916A24.252,24.252,0,0,1,3.629,58.8H37.3c-3.8,3.667-9.417,5.526-16.7,5.526A29.849,29.849,0,0,1,11.35,62.916Zm.974-4.113q-.738-.59-1.421-1.242H2.209A21.677,21.677,0,0,1,0,55.113l8.132-9.757A19.327,19.327,0,0,0,13.6,50.563a11.9,11.9,0,0,0,6.28,1.75A8.66,8.66,0,0,0,26.056,50.2a9.764,9.764,0,0,0,2.665-6.3H43.273c-.39,5.74-2.009,10.336-4.81,13.661h8.694A16.7,16.7,0,0,1,46,58.8ZM22.51,43.9a20.229,20.229,0,0,0,.1-2.068v-2.9h6.21V19.06H43.368V38.93h-6.21v2.088q0,1.489-.1,2.88ZM32.547,19.06V17.818H28.821V11.745H6.595V9.125H43.368v8.692h3.725V19.06ZM2.869,9.125V4.157H6.595V2.915h4.968V1.673H48.335V2.915H43.368V4.156H39.641V9.125Zm40.5-7.452H6.595V0H43.368V1.672h0Z" transform="translate(245.641 0.542)" fill="#fff"/>
<path d="M64.213,63.245H49.578V53.451H53.3V52.209H67.94v1.242H64.215v9.793h0Zm-43.368,0H6.21V53.451H9.936V52.209H24.573v1.242H20.847v9.793h0ZM64.213,52.209H49.578V47.242H64.215v4.966h0Zm-43.368,0H6.21V47.242H20.847v4.966h0Zm22.523-4.967V39.79h6.21V37.315H20.847V39.79h-6.21v7.451H0V39.79H6.21V28.612h58V39.789H58v7.452ZM13.661,28.612V27.37H6.21V17.435H20.847v7.5H49.578v-7.5H64.215v9.935h7.451v1.242ZM44.609,17.435V9.983h4.968V7.5H64.215V9.982H59.246v7.452Zm-43.368,0V9.983H6.21V7.5H20.847V9.982H15.879v7.452ZM54.545,7.5V6.257H49.578V0H64.215V6.256h4.967V7.5Zm-43.368,0V6.257H6.21V0H20.847V6.256h4.967V7.5Z" transform="translate(160.273 2.168)" fill="#fff"/>
<path d="M17.029,63.246H2.484V59.5H17.03v3.741h0Zm28.732,0L42.714,59.5H59.878l2.959,3.739-17.075,0ZM40.229,59.5l-5.058-6.21h2.484L30.573,44.6h2.8l-1.012-1.242H49.9L50.88,44.6h-2.8l6.878,8.692,0,0H52.48l4.915,6.21ZM0,59.5v-6.21H2.484V44.6h2.8V43.358h-2.8v-23.6H0V16.035H2.484V8.583h6.21V7.341H2.484V0H17.03V7.34h6.21V8.583H17.03v7.451H14.546v3.725H17.03v9.784l9.275-9.784H23.822l3.532-3.725h2.484L36.9,8.583h6.21l1.177-1.242h-6.21L45.039,0H61.3L54.478,7.341h6.209L59.533,8.583H53.323L46.4,16.035H43.913L40.45,19.761h2.485L35.1,28.19l12,15.166-17.54,0L25.523,38.4l-4.756,4.958h2.8L22.371,44.6h-2.8L17.03,47.253v6.039H14.546V59.5Z" transform="translate(0 1.084)" fill="#fff"/>
<path d="M25.3,62.945a33.09,33.09,0,0,1-10.134-6.084H6.474q-.419-.371-.826-.754-.255-.241-.5-.487H55.734c-.178.175-.359.35-.541.522q-.389.367-.789.72H63.1a33.191,33.191,0,0,1-10.174,6.1,38.608,38.608,0,0,1-13.793,2.455A38.576,38.576,0,0,1,25.3,62.945Zm39.126-7.326H13.839a30.878,30.878,0,0,1-6.712-9.874,31.716,31.716,0,0,1-1.339-3.788h5.437c-.234-.822-.435-1.658-.6-2.484H5.187a34.482,34.482,0,0,1-.659-6.767A33.557,33.557,0,0,1,6.21,22.087H0a31.245,31.245,0,0,1,2.848-6.21h6.21a31.091,31.091,0,0,1,6.255-7.452h8.694c.491-.428,1-.846,1.517-1.242H16.83a33.877,33.877,0,0,1,10.1-5.294,40.322,40.322,0,0,1,24.387,0A33.837,33.837,0,0,1,61.43,7.18l8.7,0c.506.388,1.017.806,1.519,1.242H62.952a31.02,31.02,0,0,1,6.255,7.45l-18.6,0H63a31.279,31.279,0,0,1,2.847,6.21h6.21a33.593,33.593,0,0,1,1.68,10.62,34.513,34.513,0,0,1-.658,6.766H57.93a22.859,22.859,0,0,0,.988-6.767,22.316,22.316,0,0,0-1.5-8.231,19.5,19.5,0,0,0-1.135-2.389H50.071a18.587,18.587,0,0,0-3.021-4A18.1,18.1,0,0,0,44.4,15.877h6.209a20.211,20.211,0,0,0-11.476-3.408,20.208,20.208,0,0,0-11.476,3.408h-6.21a18.262,18.262,0,0,0-2.652,2.205,18.556,18.556,0,0,0-3.02,4h6.21a19.435,19.435,0,0,0-1.135,2.389,22.332,22.332,0,0,0-1.5,8.231,22.828,22.828,0,0,0,.988,6.767H25.77c.155.5.329.994.515,1.465.134.341.281.683.435,1.018H21.284A18.707,18.707,0,0,0,25,47.332a19.674,19.674,0,0,0,14.128,5.613A19.674,19.674,0,0,0,53.26,47.332a18.666,18.666,0,0,0,3.719-5.375h5.437c.151-.325.3-.668.436-1.018.19-.482.363-.975.515-1.465H78.514c-.169.842-.37,1.677-.6,2.484H72.478a31.936,31.936,0,0,1-1.355,3.826,30.851,30.851,0,0,1-6.7,9.836Z" transform="translate(68.056)" fill="#fff"/>
</g>
</g>
</svg>
</div>
</div>
</div>

<div class="w-full h-full flex justify-center items-center">

<div class="img-wrapper">
<img class="w-[5rem] h-[5rem] object-cover rounded-full" :src="`https://github.com/${props.member.id}.png`" alt="">
<div class="glasses hidden absolute w-[3.5rem] top-[47%] left-[0.75rem]">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 88.672 33.155">
<defs>
<filter id="ifn0653" x="0" y="0" width="88.672" height="33.155" filterUnits="userSpaceOnUse">
Expand All @@ -38,22 +71,34 @@ const props = defineProps<Props>()
</svg>
</div>
</div>
<div>
<div class="text-lg text-slate-800 font-bold" v-html="props.member.displayname"></div>
<div class="text-sm text-slate-500" v-html="props.member.id"></div>
</div>
</div>

<div class="mt-6">
<p class="text-sm text-slate-700 leading-6" v-html="props.member.bio"></p>
</div>

</a>

</template>

<style scoped>
a.wrapper {
transition: all .3s ease;
}
a.wrapper:hover {
background: rgb(180, 180, 180);
}

a.wrapper:hover .img-wrapper {
animation: bang .5s cubic-bezier(0.83, 0, 0.17, 1) infinite;
}

a.wrapper:hover .glasses {
display: block;
transition: all .3s ease;
}

@keyframes bang {
0% {transform: scale(0.9)}
50% {transform: scale(1.1)}
100% {transform: scale(0.9)}
}

</style>