Skip to content

Commit

Permalink
fixing tag namecard
Browse files Browse the repository at this point in the history
  • Loading branch information
Januar Siregar committed Mar 7, 2017
1 parent ec65354 commit 8b2c7d0
Show file tree
Hide file tree
Showing 4 changed files with 208 additions and 208 deletions.
170 changes: 85 additions & 85 deletions sketch/namecard/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,98 +16,98 @@
<link rel="stylesheet" href="namecard.css">
</head>
<body>
<s-namecardbook>
<s-bookmark>A</s-bookmark>
<s-namecard href="#">
<s-photo>AH</s-photo>
<s-name>Adolf Hitler</s-name>
<s-email>[email protected]</s-email>
</s-namecard>
<s-namecard>
<s-photo>AL</s-photo>
<s-name>Abraham Lincoln</s-name>
<s-email>[email protected]</s-email>
</s-namecard>
<s-namecard>
<s-photo>AS</s-photo>
<s-name>Asep Sunaryo</s-name>
<s-email>[email protected]</s-email>
</s-namecard>
<s-namecard>
<s-photo>AS</s-photo>
<s-name>Alex Komar</s-name>
<s-email>[email protected]</s-email>
</s-namecard>
<namecardbook>
<bookmark>A</bookmark>
<namecard href="#">
<photo>AH</photo>
<name>Adolf Hitler</name>
<email>[email protected]</email>
</namecard>
<namecard>
<photo>AL</photo>
<name>Abraham Lincoln</name>
<email>[email protected]</email>
</namecard>
<namecard>
<photo>AS</photo>
<name>Asep Sunaryo</name>
<email>[email protected]</email>
</namecard>
<namecard>
<photo>AS</photo>
<name>Alex Komar</name>
<email>[email protected]</email>
</namecard>

<s-bookmark>B</s-bookmark>
<s-namecard>
<s-photo>BS</s-photo>
<s-name>Bethari Surya</s-name>
<s-email>[email protected]</s-email>
</s-namecard>
<bookmark>B</bookmark>
<namecard>
<photo>BS</photo>
<name>Bethari Surya</name>
<email>[email protected]</email>
</namecard>

<s-bookmark>I</s-bookmark>
<s-namecard href="#">
<s-photo>IC</s-photo>
<s-name>Iman Cahya</s-name>
<s-email>[email protected]</s-email>
</s-namecard>
<bookmark>I</bookmark>
<namecard href="#">
<photo>IC</photo>
<name>Iman Cahya</name>
<email>[email protected]</email>
</namecard>

<s-bookmark>H</s-bookmark>
<s-namecard href="#">
<s-photo>HS</s-photo>
<s-name>Harta Sukarno</s-name>
<s-email>[email protected]</s-email>
</s-namecard>
<s-namecard href="#">
<s-photo>HM</s-photo>
<s-name>Harta Mega</s-name>
<s-email>[email protected]</s-email>
</s-namecard>
<s-namecard href="#">
<s-photo>HE</s-photo>
<s-name>Hasih Eka</s-name>
<s-email>[email protected]</s-email>
</s-namecard>
<bookmark>H</bookmark>
<namecard href="#">
<photo>HS</photo>
<name>Harta Sukarno</name>
<email>[email protected]</email>
</namecard>
<namecard href="#">
<photo>HM</photo>
<name>Harta Mega</name>
<email>[email protected]</email>
</namecard>
<namecard href="#">
<photo>HE</photo>
<name>Hasih Eka</name>
<email>[email protected]</email>
</namecard>

<s-bookmark>M</s-bookmark>
<s-namecard href="#">
<s-photo>MA</s-photo>
<s-name>Melati Adi</s-name>
<s-email>[email protected]</s-email>
</s-namecard>
<s-namecard href="#">
<s-photo>MW</s-photo>
<s-name>Mawar Wahyu</s-name>
<s-email>[email protected]</s-email>
</s-namecard>
<bookmark>M</bookmark>
<namecard href="#">
<photo>MA</photo>
<name>Melati Adi</name>
<email>[email protected]</email>
</namecard>
<namecard href="#">
<photo>MW</photo>
<name>Mawar Wahyu</name>
<email>[email protected]</email>
</namecard>

<s-bookmark>N</s-bookmark>
<s-namecard href="#">
<s-photo>NE</s-photo>
<s-name>Nirmala Eko</s-name>
<s-email>[email protected]</s-email>
</s-namecard>
<bookmark>N</bookmark>
<namecard href="#">
<photo>NE</photo>
<name>Nirmala Eko</name>
<email>[email protected]</email>
</namecard>

<s-bookmark>P</s-bookmark>
<s-namecard href="#">
<s-photo>PR</s-photo>
<s-name>Putri Raharjo</s-name>
<s-email>[email protected]</s-email>
</s-namecard>
<bookmark>P</bookmark>
<namecard href="#">
<photo>PR</photo>
<name>Putri Raharjo</name>
<email>[email protected]</email>
</namecard>

<s-bookmark>S</s-bookmark>
<s-namecard href="#">
<s-photo>SB</s-photo>
<s-name>Sukarno Buana</s-name>
<s-email>[email protected]</s-email>
</s-namecard>
<s-namecard href="#">
<s-photo>SC</s-photo>
<s-name>Surya Cinta</s-name>
<s-email>[email protected]</s-email>
</s-namecard>
</s-namecardgroup>
<bookmark>S</bookmark>
<namecard href="#">
<photo>SB</photo>
<name>Sukarno Buana</name>
<email>[email protected]</email>
</namecard>
<namecard href="#">
<photo>SC</photo>
<name>Surya Cinta</name>
<email>[email protected]</email>
</namecard>
</namecardgroup>

<script src="../../vendor/modernizr/modernizr.js"></script>
<script src="../../js/plugins.js"></script>
Expand Down
72 changes: 36 additions & 36 deletions sketch/namecard/namecard.css
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,40 @@
/*!
* Sketch - s-Namecard
* Sketch - Namecard
* sketch.xinix.co.id
*
* Available under the Apache license
*/

/*
* s-Namecard is modern tag to describe a s-namecard like data
* Namecard is modern tag to describe a namecard like data
*
* Authors Dwan
* Contributors Dwan
*/

/* Make default display as block */
s-namecardbook,
s-bookmark,
s-namecard,
s-photo,
s-name,
s-email,
s-info {
namecardbook,
bookmark,
namecard,
photo,
name,
email,
info {
display:block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
s-namecardbook {
namecardbook {
display:table; width:100%;
}

/* Stylize each tags */

/* Bookmark section */
s-namecardbook s-bookmark {
namecardbook bookmark {
/* Font Properties */
font-size:0.8em; text-transform:capitalize;
/* Colorize */
Expand All @@ -44,21 +44,21 @@ s-namecardbook s-bookmark {
}

/* Default namecard */
s-namecardbook s-namecard {
namecardbook namecard {
/* Properties */
padding:8px 0; margin:-1px 0 0 80px; height:64px; border-top:1px solid transparent; border-bottom:1px solid #eee;
/* Positioning */
position:relative;
}
s-namecardbook s-namecard.hover {
namecardbook namecard.hover {
/* Colorize */
background:#E8F4F8; border-top:1px solid #CEDCF2; border-bottom:1px solid #CEDCF2;
/* Properties */
cursor:pointer; padding:8px 0 8px 80px; margin-left:0;
}

/* Photo section */
s-namecard s-photo {
namecard photo {
/* Colorize */
background:#ddd; color:#bbb;
/* Properties */
Expand All @@ -71,40 +71,40 @@ s-namecard s-photo {
/* Positioning */
position:absolute; top:8px; left:-64px;
}
s-namecard.hover s-photo {
namecard.hover photo {
/* Positioning */
left:16px;
}

/* Photo Name and email */
s-namecard s-name,
s-namecard s-email,
s-namecard s-info {
namecard name,
namecard email,
namecard info {
/* Font Properties */
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
/* Properties */
padding:0 16px 0 0;
}
s-namecard s-name {
namecard name {
/* Colorize */
color:#333;
/* Font Properties */
font-size:1.1em; font-weight:500; text-transform:capitalize;
/* Properties */
padding-top:4px; padding-bottom:2px;
}
s-namecard s-email {
namecard email {
/* Colorize */
color:#3FA1E4;
/* Font Properties */
font-size:0.9em; font-weight:300; text-transform:lowercase;
}
s-namecard s-email:before,
s-namecard s-email::before {
namecard email:before,
namecard email::before {
/* Properties */
content: "e-mail: ";
}
s-namecard s-info {
namecard info {
/* Colorize */
color:#999;
/* Font Properties */
Expand All @@ -115,66 +115,66 @@ s-namecard s-info {
/* Responsive Namecard Book */

/* Default namecard */
s-namecardbook[responsive] s-namecard {
namecardbook[responsive] namecard {
/* Colorize */
border:0;
}
s-namecardbook[responsive] s-namecard.hover {
namecardbook[responsive] namecard.hover {
/* Properties */
padding:8px 0;
}

/* Bookmark section */
s-namecardbook[responsive] s-bookmark {
namecardbook[responsive] bookmark {
/* Properties */
clear:both;
}

/* Default s-namecard */
s-namecardbook[responsive] s-namecard {
/* Default namecard */
namecardbook[responsive] namecard {
/* Properties */
margin:0; width:100%;
/* Positioning */
float:left;
}
@media all and (min-width:640px) {
s-namecardbook[responsive] s-namecard {
namecardbook[responsive] namecard {
/* Properties */
width:50%;
}
}
@media all and (min-width:800px) {
s-namecardbook[responsive] s-namecard {
namecardbook[responsive] namecard {
/* Properties */
width:33.33%;
}
}
@media all and (min-width:1200px) {
s-namecardbook[responsive] s-namecard {
namecardbook[responsive] namecard {
/* Properties */
width:25%;
}
}
@media all and (min-width:1600px) {
s-namecardbook[responsive] s-namecard {
namecardbook[responsive] namecard {
/* Properties */
width:20%;
}
}

/* Photo section */
s-namecardbook[responsive] s-namecard s-photo {
namecardbook[responsive] namecard photo {
/* Positioning */
left:16px;
}

/* Photo Name and email */
s-namecardbook[responsive] s-namecard s-name,
s-namecardbook[responsive] s-namecard s-email {
namecardbook[responsive] namecard name,
namecardbook[responsive] namecard email {
/* Properties */
padding:0 16px 0 80px;
}
s-namecardbook[responsive] s-namecard s-name {
namecardbook[responsive] namecard name {
/* Properties */
padding-top:4px;
}
Loading

0 comments on commit 8b2c7d0

Please sign in to comment.