mirror of
https://github.com/dilllxd/gitfolio.git
synced 2024-08-14 22:28:09 +00:00
added commits by @DonIsaac & @Chargnn
* Created site files are now placed in an output directory `dist` * Added a ton of comments in build.js * Made functions in build.js use bluebird promises * Themes are now in the assets/templates folder instead as magic strings in the source code * Any number of custom themes (not just light and dark) can be used by creating a [theme].css file and putting it in assets/themes * CSS themes are rendered with Handlebars * CSS themes now rely on Handlebars for specifying the background * Restored config.json to template file * Changes to the blogging * Moved blog templates and config files to assets/blog * Created blog pages now go to dist/blog/ * Updated blogTemplate * Updated the README to reflect the changes made by this pull request * Added link to demo site in README * Added sorting and ordering
This commit is contained in:
imfunny
GitHub
parent
e3efba34c1
commit
14fdafebe4
14 changed files with 1402 additions and 319 deletions
118
assets/index.css
118
assets/index.css
|
|
@ -56,7 +56,30 @@ body{
|
|||
background-size: cover !important;
|
||||
background-repeat:no-repeat;
|
||||
position:fixed;
|
||||
color:#fff !important;
|
||||
color:#fff !important;
|
||||
}
|
||||
|
||||
#profile #navbar nav {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e7e7e7;
|
||||
background-color: rgba(32, 32, 32, 0.2);
|
||||
}
|
||||
|
||||
#profile #navbar a {
|
||||
float: left;
|
||||
text-align: left;
|
||||
display: block;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#profile #navbar a:hover:not(.active) {
|
||||
background-color: rgba(32, 32, 32, 0.3);
|
||||
}
|
||||
|
||||
#display {
|
||||
|
|
@ -67,13 +90,54 @@ body{
|
|||
padding-left:33vw;
|
||||
}
|
||||
|
||||
#display h1 {
|
||||
#display h1 span {
|
||||
font-size:50px;
|
||||
color:var(--text-color);
|
||||
font-weight:bold;
|
||||
font-family: 'Questrial', sans-serif;
|
||||
}
|
||||
|
||||
#display select {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
font-family: sans-serif;
|
||||
font-weight: 700;
|
||||
color: #444;
|
||||
line-height: 1.3;
|
||||
padding: .6em 1.4em .5em .8em;
|
||||
max-width: 80%;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
border: 1px solid #aaa;
|
||||
box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
|
||||
border-radius: .5em;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-color: #fff;
|
||||
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
|
||||
linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
|
||||
background-repeat: no-repeat, repeat;
|
||||
background-position: right .7em top 50%, 0 0;
|
||||
background-size: .65em auto, 100%;
|
||||
}
|
||||
#display select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
#display select:hover {
|
||||
border-color: #888;
|
||||
}
|
||||
#display select:focus {
|
||||
border-color: #aaa;
|
||||
box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
|
||||
box-shadow: 0 0 0 3px -moz-mac-focusring;
|
||||
color: #222;
|
||||
outline: none;
|
||||
}
|
||||
#display select option {
|
||||
font-weight:normal;
|
||||
}
|
||||
|
||||
.emoji {
|
||||
width:18px;
|
||||
height:18px;
|
||||
|
|
@ -249,6 +313,11 @@ body{
|
|||
font-size:16px;
|
||||
}
|
||||
|
||||
#about span a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#work {
|
||||
margin:2vh 0px;
|
||||
padding:4vh 0px !important;
|
||||
|
|
@ -278,6 +347,30 @@ body{
|
|||
transform:scale(1.03);
|
||||
}
|
||||
|
||||
#forks {
|
||||
columns:2;
|
||||
}
|
||||
|
||||
#forks section {
|
||||
width:85%;
|
||||
padding:2.5vh 5%;
|
||||
display:inline-block;
|
||||
border-radius:5px;
|
||||
color:var(--text-color);
|
||||
border:1px solid rgb(0, 0, 0, 0.08);
|
||||
box-shadow:0px 0px 0px rgb(0, 0, 0, 0);
|
||||
transition:0.4s ease-in-out;
|
||||
margin:2vh 0px;
|
||||
transform:scale(1);
|
||||
}
|
||||
|
||||
#forks section:hover {
|
||||
cursor: pointer;
|
||||
border:1px solid rgb(0, 0, 0, 0);
|
||||
box-shadow:0px 15px 35px rgb(0, 0, 0, 0.06);
|
||||
transform:scale(1.03);
|
||||
}
|
||||
|
||||
.section_title {
|
||||
font-size:24px;
|
||||
font-weight:bold;
|
||||
|
|
@ -364,6 +457,27 @@ body{
|
|||
text-align:center;
|
||||
position: relative;
|
||||
}
|
||||
#profile #navbar nav {
|
||||
padding:4vh 5vw;
|
||||
text-align:center;
|
||||
list-style-type: none;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e7e7e7;
|
||||
background-color: rgba(32, 32, 32, 0.5);
|
||||
position: relative;
|
||||
}
|
||||
#profile #navbar a {
|
||||
float: none !important;
|
||||
display: block;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
margin:0px auto !important;
|
||||
}
|
||||
#profile #navbar a:hover:not(.active) {
|
||||
background-color: rgba(32, 32, 32, 0.3);
|
||||
}
|
||||
#display {
|
||||
width:90vw;
|
||||
padding:4vh 5vw;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
<title></title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
|
||||
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="index.css">
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -15,6 +14,7 @@
|
|||
<div id="spinner"></div>
|
||||
</div>
|
||||
<div id="profile">
|
||||
<nav id="navbar"></nav>
|
||||
<div id="profile_img"></div>
|
||||
<div id="username">
|
||||
<div id="fullname"></div>
|
||||
|
|
@ -24,10 +24,9 @@
|
|||
</div>
|
||||
<div id="display">
|
||||
<div id="work">
|
||||
<h1>Work.</h1>
|
||||
<div id="projects"></div>
|
||||
<h1>Work</h1>
|
||||
</div>
|
||||
<div id="blog_section" style="display:none;">
|
||||
<div id="blog_section">
|
||||
<h1>Blog.</h1>
|
||||
<div id="blogs"></div>
|
||||
</div>
|
||||
|
|
@ -35,6 +34,7 @@
|
|||
<a href="https://github.com/imfunniee" target="_blank">made on earth by a human</a>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
setTimeout(function(){
|
||||
document.getElementById("loading").classList.add("animated");
|
||||
|
|
@ -45,10 +45,13 @@
|
|||
document.getElementById("loading").style.display = "none";
|
||||
},800);
|
||||
},1500);
|
||||
$.getJSON("./blog/blog.json", function(blog){
|
||||
$.getJSON("blog.json", function(blog){
|
||||
if(blog.length == 0){
|
||||
return document.getElementById("blog_section").style.display = "none";
|
||||
}
|
||||
for(var i = 0; i < blog.length; i++){
|
||||
$("#blogs").append(`
|
||||
<a href="/blog/${blog[i].url_title}/" target="_blank">
|
||||
<a href="./blog/${blog[i].url_title}/" target="_blank">
|
||||
<section>
|
||||
<img src="${blog[i].top_image}">
|
||||
<div class="blog_container">
|
||||
|
|
@ -59,7 +62,7 @@
|
|||
</div>
|
||||
</section>
|
||||
</a>
|
||||
`)
|
||||
`);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,31 +1,31 @@
|
|||
:root {
|
||||
--bg-color: rgb(10, 10, 10);
|
||||
--text-color: #fff;
|
||||
--blog-gray-color: rgb(180, 180, 180);
|
||||
--background-image: linear-gradient(90deg, rgba(10, 10, 10, 0.6), rgb(10, 10, 10, 1)), url("{{background}}");
|
||||
--background-background: linear-gradient(0deg, rgba(10, 10, 10, 1), rgba(10, 10, 10, 0.6)),
|
||||
url("{{background-image}}") center center fixed;
|
||||
--height: 50vh;
|
||||
}
|
||||
#display h1 {
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: #fff;
|
||||
}
|
||||
#blog-display h1 {
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: #fff;
|
||||
}
|
||||
#projects section {
|
||||
background: rgb(20, 20, 20);
|
||||
}
|
||||
#blog_section section {
|
||||
background: rgb(20, 20, 20);
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
:root {
|
||||
--background-image: linear-gradient(0deg, rgba(10, 10, 10, 1), rgb(10, 10, 10, 0)),
|
||||
url("{{background-image}}") !important;
|
||||
}
|
||||
}
|
||||
:root {
|
||||
--bg-color: rgb(10, 10, 10);
|
||||
--text-color: #fff;
|
||||
--blog-gray-color: rgb(180, 180, 180);
|
||||
--background-image: linear-gradient(90deg, rgba(10, 10, 10, 0.6), rgb(10, 10, 10, 1)), url("{{background}}");
|
||||
--background-background: linear-gradient(0deg, rgba(10, 10, 10, 1), rgba(10, 10, 10, 0.6)),
|
||||
url("{{background-image}}") center center fixed;
|
||||
--height: 50vh;
|
||||
}
|
||||
#display h1 {
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: #fff;
|
||||
}
|
||||
#blog-display h1 {
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: #fff;
|
||||
}
|
||||
#projects section {
|
||||
background: rgb(20, 20, 20);
|
||||
}
|
||||
#blog_section section {
|
||||
background: rgb(20, 20, 20);
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
:root {
|
||||
--background-image: linear-gradient(0deg, rgba(10, 10, 10, 1), rgb(10, 10, 10, 0)),
|
||||
url("{{background-image}}") !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
:root {
|
||||
--bg-color: #fff;
|
||||
--text-color: rgb(10, 10, 10);
|
||||
--blog-gray-color: rgb(80, 80, 80);
|
||||
--background-image: linear-gradient(90deg, rgba(10, 10, 10, 0.4), rgb(10, 10, 10, 0.4)), url("{{background}}");
|
||||
--background-background: #fff;
|
||||
}
|
||||
:root {
|
||||
--bg-color: #fff;
|
||||
--text-color: rgb(10, 10, 10);
|
||||
--blog-gray-color: rgb(80, 80, 80);
|
||||
--background-image: linear-gradient(90deg, rgba(10, 10, 10, 0.4), rgb(10, 10, 10, 0.4)), url("{{background}}");
|
||||
--background-background: #fff;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue