Skip to content

Commit

Permalink
018 - New project index
Browse files Browse the repository at this point in the history
  • Loading branch information
CodeBrauer committed Jan 18, 2017
1 parent c215565 commit 47545d7
Show file tree
Hide file tree
Showing 8 changed files with 770 additions and 78 deletions.
13 changes: 13 additions & 0 deletions 018_2017-01-18_CSS_NewIndex/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# #018 2017-01-18: New repo index (CSS)

**Demo:**

https://codebrauer.github.io/100daysofcode/

--

Thanks to:

- [Material.io colors](https://material.io/guidelines/style/color.html#color-color-palette)
- [iziModal.js](http://izimodal.marcelodolce.com/)
- [simple-line-icons](http://simplelineicons.com/)
209 changes: 209 additions & 0 deletions 018_2017-01-18_CSS_NewIndex/app.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,209 @@
::-moz-selection { color: #fff; background: #AB47BC; }
::selection { color: #fff; background: #AB47BC; }

* {box-sizing: border-box;}
body {
font-family: 'Montserrat Alternates', sans-serif;
background-color: #fafafa;
padding: 0;
margin: 0;
}
iframe { border: none; }
h1 { text-align: center; font-size: 50px; }
/* day */
.day {
width: 100%;
height: 100px;
background: #000;
color: #fff;
display: flex;
align-items: center;
position: relative;
}
.day::after {
content: '';
position: absolute;
width: 100%;
height: 6px;
background: rgba(255,255,255,0.3);
bottom: 0;
left: 0;
}
/* inner day */
.day span {
display: flex;
width: 25%;
height: 100%;
align-items: center;
justify-content: center;
font-family: 'Montserrat Alternates', sans-serif;
}
span.lang { font-size: 32px; }
span.num { font-size: 32px; }
span.num::before {content: '#';}
span.date {
padding-top: 5px;
background-color: #333;
text-align: center;
font-size: 16px;
line-height: 1.4;
}
span.title {
width: 90%;
font-size: 26px;
justify-content: flex-start;
padding-left: 30px;
}
/* button */
.day button {
font-family: 'Montserrat Alternates', sans-serif;
width: 290px;
display: inline-block;
height: 50%;
margin-right: 15px;
border: 3px solid white;
background: none;
color: #fff;
font-size: 16px;
cursor: pointer;
outline: none;
}
.day button i { font-size: 18px; }
.day button a {
display: block;
width: 100%;
color: #fff;
text-decoration: none;
padding: 10px;
}
.day button:hover {
background-color: #fff;
color: #000;
}
.day button:hover a {
color: #000;
}

@media screen and (max-width: 930px) {
.day span {
font-size: 20px;
}
.day span.date {
font-size: 14px;
}
i {
display: none;
}
}

span.lang-JS { background-color: #F0DB4F; color: #323330; }
span.lang-PHP { background-color: #8892BF; color: #222530; }
span.lang-CSS { background-color: #29ABE2; color: #FEFEFE; }
span.lang-Shell { background-color: #222; color: #21D725; }
span.lang-TXT { background-color: #999; color: #555; }

.day:nth-child(1) .num {background-color: #e05452;}
.day:nth-child(2) .num {background-color: #e05652;}
.day:nth-child(3) .num {background-color: #e05952;}
.day:nth-child(4) .num {background-color: #e05b52;}
.day:nth-child(5) .num {background-color: #e05e52;}
.day:nth-child(6) .num {background-color: #e06052;}
.day:nth-child(7) .num {background-color: #e06252;}
.day:nth-child(8) .num {background-color: #e06552;}
.day:nth-child(9) .num {background-color: #e06752;}
.day:nth-child(10) .num {background-color: #e06952;}
.day:nth-child(11) .num {background-color: #e06c52;}
.day:nth-child(12) .num {background-color: #e06e52;}
.day:nth-child(13) .num {background-color: #e07152;}
.day:nth-child(14) .num {background-color: #e07352;}
.day:nth-child(15) .num {background-color: #e07552;}
.day:nth-child(16) .num {background-color: #e07852;}
.day:nth-child(17) .num {background-color: #e07a52;}
.day:nth-child(18) .num {background-color: #e07c52;}
.day:nth-child(19) .num {background-color: #e07f52;}
.day:nth-child(20) .num {background-color: #e08152;}
.day:nth-child(21) .num {background-color: #e08452;}
.day:nth-child(22) .num {background-color: #e08652;}
.day:nth-child(23) .num {background-color: #e08852;}
.day:nth-child(24) .num {background-color: #e08b52;}
.day:nth-child(25) .num {background-color: #e08d52;}
.day:nth-child(26) .num {background-color: #e08f52;}
.day:nth-child(27) .num {background-color: #e09252;}
.day:nth-child(28) .num {background-color: #e09452;}
.day:nth-child(29) .num {background-color: #e09752;}
.day:nth-child(30) .num {background-color: #e09952;}
.day:nth-child(31) .num {background-color: #e09b52;}
.day:nth-child(32) .num {background-color: #e09e52;}
.day:nth-child(33) .num {background-color: #e0a052;}
.day:nth-child(34) .num {background-color: #e0a352;}
.day:nth-child(35) .num {background-color: #e0a552;}
.day:nth-child(36) .num {background-color: #e0a752;}
.day:nth-child(37) .num {background-color: #e0aa52;}
.day:nth-child(38) .num {background-color: #e0ac52;}
.day:nth-child(39) .num {background-color: #e0ae52;}
.day:nth-child(40) .num {background-color: #e0b152;}
.day:nth-child(41) .num {background-color: #e0b352;}
.day:nth-child(42) .num {background-color: #e0b652;}
.day:nth-child(43) .num {background-color: #e0b852;}
.day:nth-child(44) .num {background-color: #e0ba52;}
.day:nth-child(45) .num {background-color: #e0bd52;}
.day:nth-child(46) .num {background-color: #e0bf52;}
.day:nth-child(47) .num {background-color: #e0c152;}
.day:nth-child(48) .num {background-color: #e0c452;}
.day:nth-child(49) .num {background-color: #e0c652;}
.day:nth-child(50) .num {background-color: #e0c952;}
.day:nth-child(51) .num {background-color: #e0cb52;}
.day:nth-child(52) .num {background-color: #e0cd52;}
.day:nth-child(53) .num {background-color: #e0d052;}
.day:nth-child(54) .num {background-color: #e0d252;}
.day:nth-child(55) .num {background-color: #e0d552;}
.day:nth-child(56) .num {background-color: #e0d752;}
.day:nth-child(57) .num {background-color: #e0d952;}
.day:nth-child(58) .num {background-color: #e0dc52;}
.day:nth-child(59) .num {background-color: #e0de52;}
.day:nth-child(60) .num {background-color: #e0e052;}
.day:nth-child(61) .num {background-color: #dee052;}
.day:nth-child(62) .num {background-color: #dce052;}
.day:nth-child(63) .num {background-color: #d9e052;}
.day:nth-child(64) .num {background-color: #d7e052;}
.day:nth-child(65) .num {background-color: #d5e052;}
.day:nth-child(66) .num {background-color: #d2e052;}
.day:nth-child(67) .num {background-color: #d0e052;}
.day:nth-child(68) .num {background-color: #cde052;}
.day:nth-child(69) .num {background-color: #cbe052;}
.day:nth-child(70) .num {background-color: #c9e052;}
.day:nth-child(71) .num {background-color: #c6e052;}
.day:nth-child(72) .num {background-color: #c4e052;}
.day:nth-child(73) .num {background-color: #c1e052;}
.day:nth-child(74) .num {background-color: #bfe052;}
.day:nth-child(75) .num {background-color: #bde052;}
.day:nth-child(76) .num {background-color: #bae052;}
.day:nth-child(77) .num {background-color: #b8e052;}
.day:nth-child(78) .num {background-color: #b6e052;}
.day:nth-child(79) .num {background-color: #b3e052;}
.day:nth-child(80) .num {background-color: #b1e052;}
.day:nth-child(81) .num {background-color: #aee052;}
.day:nth-child(82) .num {background-color: #ace052;}
.day:nth-child(83) .num {background-color: #aae052;}
.day:nth-child(84) .num {background-color: #a7e052;}
.day:nth-child(85) .num {background-color: #a5e052;}
.day:nth-child(86) .num {background-color: #a3e052;}
.day:nth-child(87) .num {background-color: #a0e052;}
.day:nth-child(88) .num {background-color: #9ee052;}
.day:nth-child(89) .num {background-color: #9be052;}
.day:nth-child(90) .num {background-color: #99e052;}
.day:nth-child(91) .num {background-color: #97e052;}
.day:nth-child(92) .num {background-color: #94e052;}
.day:nth-child(93) .num {background-color: #92e052;}
.day:nth-child(94) .num {background-color: #8fe052;}
.day:nth-child(95) .num {background-color: #8de052;}
.day:nth-child(96) .num {background-color: #8be052;}
.day:nth-child(97) .num {background-color: #88e052;}
.day:nth-child(98) .num {background-color: #86e052;}
.day:nth-child(99) .num {background-color: #84e052;}
.day:nth-child(100) .num {background-color: #81e052;}

.github-corner:hover .octo-arm {animation:octocat-wave 560ms ease-in-out}
@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}
@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}
.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
38 changes: 38 additions & 0 deletions 018_2017-01-18_CSS_NewIndex/app.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
jQuery(document).ready(function($) {
$.getJSON('cache.json', function loadProjects(data) {
data.forEach(function(element) {
if (element.type === 'dir') {
var parts = element.path.split('_');
console.log(parts);
var html = '<div class="day day-'+parts[0]+'">\
<span class="lang lang-'+parts[2]+'">'+parts[2]+'</span>\
<span class="num">'+parts[0]+'</span>\
<span class="date">'+parts[1]+'</span>\
<span class="title">'+parts[3].replace(/-/g, ' ')+'</span>\
<button class="demo"><i class="icon-magnifier"></i> Demo</button>\
<button><a href="https://github.com/CodeBrauer/100daysofcode/tree/master/'+element.path+'/"><i class="icon-social-github"></i> Sources</a></button>\
<div id="day-'+parts[0]+'"></div>\
</div>';
$('.days').append(html);
$('#day-'+parts[0]).iziModal({
title: 'Day '+parts[0],
subtitle: parts[1],
headerColor: '#000000',
theme: 'dark',
width: '80%',
iframe: true,
iframeHeight: 600,
iframeURL: 'https://codebrauer.github.io/100daysofcode/'+element.path+'/',
navigateCaption: true,
navigateArrows: true,
history: true,
fullscreen: true,
group: 'projects',
});
$('.day-'+parts[0]+' button.demo').bind('click', function() {
$('#day-'+parts[0]).iziModal('open');
});
}
});
});
});
Loading

0 comments on commit 47545d7

Please sign in to comment.