mirror of
https://github.com/dilllxd/gitfolio.git
synced 2024-08-14 22:28:09 +00:00
14fdafebe4
* 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
549 lines
11 KiB
CSS
549 lines
11 KiB
CSS
@import url('https://fonts.googleapis.com/css?family=Poppins');
|
|
@import url('https://fonts.googleapis.com/css?family=Questrial');
|
|
|
|
body{
|
|
margin:0%;
|
|
padding:0%;
|
|
width:100vw;
|
|
background:var(--bg-color);
|
|
color:var(--text-color);
|
|
max-width:100vw;
|
|
overflow-x:hidden;
|
|
align-items:center;
|
|
font-family: 'Poppins', sans-serif;
|
|
}
|
|
|
|
|
|
#loading {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
position: fixed;
|
|
background: var(--bg-color);
|
|
z-index: 999;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
top:0;
|
|
bottom:0;
|
|
left:0;
|
|
right:0;
|
|
}
|
|
|
|
#spinner {
|
|
animation: rotate 0.5s infinite linear;
|
|
width:50px;
|
|
height:50px;
|
|
border:2px solid var(--bg-color);
|
|
border-bottom:2px solid var(--text-color);
|
|
border-radius:50%;
|
|
margin:0;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
0% {transform: rotate(0deg);}
|
|
100% {transform: rotate(360deg);}
|
|
}
|
|
|
|
#profile {
|
|
width:24vw;
|
|
padding:4vh 3vw;
|
|
height:92vh;
|
|
display:flex;
|
|
flex-direction:column;
|
|
justify-content:center;
|
|
text-align:left;
|
|
background:var(--background-image) center center;
|
|
background-size: cover !important;
|
|
background-repeat:no-repeat;
|
|
position:fixed;
|
|
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 {
|
|
width:64vw;
|
|
padding:4vh 3vw;
|
|
height:92vh;
|
|
display:inline-block;
|
|
padding-left:33vw;
|
|
}
|
|
|
|
#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;
|
|
}
|
|
|
|
#profile_img_blog {
|
|
border-radius:50%;
|
|
width:90px;
|
|
height:90px;
|
|
background-size:cover !important;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
#username_blog {
|
|
font-size:18px;
|
|
color:var(--text-color);
|
|
font-family: 'Poppins', sans-serif;
|
|
font-weight:bold;
|
|
}
|
|
|
|
#username_blog span {
|
|
font-size:24px;
|
|
font-family: 'Questrial', sans-serif !important;
|
|
}
|
|
|
|
#username_blog b {
|
|
font-size:12px;
|
|
font-family:'Poppins', sans-serif;
|
|
font-weight:bold;
|
|
}
|
|
|
|
#blog-display {
|
|
width:60vw;
|
|
margin:0px 20vw;
|
|
text-align:left;
|
|
margin-top:3vh;
|
|
z-index:1;
|
|
}
|
|
|
|
#profile_blog {
|
|
width:60vw;
|
|
margin:0px 20vw;
|
|
margin-top:10vh;
|
|
text-align:left;
|
|
z-index:1;
|
|
}
|
|
|
|
#background {
|
|
width:100vw;
|
|
height:55vh;
|
|
background:var(--background-background);
|
|
background-size:cover !important;
|
|
background-repeat:no-repeat;
|
|
position: absolute;
|
|
z-index:-1;
|
|
margin-top:-10vh;
|
|
}
|
|
|
|
#blog-display h1 {
|
|
font-size:50px;
|
|
color:var(--text-color);
|
|
font-weight:bold;
|
|
font-family: 'Questrial', sans-serif;
|
|
}
|
|
|
|
#blog-display h2 {
|
|
color:var(--blog-gray-color);
|
|
}
|
|
|
|
#blog-display {
|
|
padding:1vh 0px;
|
|
font-family: 'Questrial', sans-serif;
|
|
}
|
|
|
|
#blog p {
|
|
font-size:17px;
|
|
line-height:25px;
|
|
word-spacing:1.2px;
|
|
margin:5vh 0px;
|
|
}
|
|
|
|
#blog p span {
|
|
padding:2px 4px;
|
|
background:var(--text-color);
|
|
color:var(--bg-color) !important;
|
|
}
|
|
|
|
#blog img {
|
|
width:100%;
|
|
margin:2vh 0px;
|
|
border-radius:5px;
|
|
border:1px solid rgb(0, 0, 0, 0.08);
|
|
}
|
|
|
|
#header {
|
|
width:63vw;
|
|
text-align:right;
|
|
padding:3vh 0px;
|
|
position:absolute;
|
|
}
|
|
|
|
#header a {
|
|
color:var(--text-color);
|
|
text-decoration:none;
|
|
margin-left:4vw;
|
|
font-weight:bold;
|
|
}
|
|
|
|
#footer_blog {
|
|
width:90vw;
|
|
padding:8vh 5vw;
|
|
text-align:center;
|
|
}
|
|
|
|
#footer_blog a {
|
|
color:var(--text-color) !important;
|
|
text-decoration:none;
|
|
font-family: 'Questrial', sans-serif;
|
|
font-weight:bold;
|
|
}
|
|
|
|
#footer {
|
|
width:100%;
|
|
padding:8vh 0px;
|
|
text-align:center;
|
|
}
|
|
|
|
#footer a {
|
|
color:var(--text-color) !important;
|
|
text-decoration:none;
|
|
font-family: 'Questrial', sans-serif;
|
|
font-weight:bold;
|
|
}
|
|
|
|
#profile_img {
|
|
width:180px;
|
|
height:180px;
|
|
border-radius:5px;
|
|
background-size:cover !important;
|
|
}
|
|
|
|
#profile div {
|
|
font-weight:bold;
|
|
margin:1.5vh 0px;
|
|
}
|
|
|
|
#username {
|
|
font-size:18px;
|
|
font-weight:bold;
|
|
}
|
|
|
|
#username span {
|
|
font-size:24px;
|
|
}
|
|
|
|
#userbio {
|
|
font-size:26px;
|
|
font-family: 'Questrial', sans-serif;
|
|
width:100%;
|
|
}
|
|
|
|
#about {
|
|
font-size:18px;
|
|
font-family: 'Questrial', sans-serif;
|
|
}
|
|
|
|
#about span {
|
|
margin:1vh 0px;
|
|
display:block;
|
|
}
|
|
|
|
#about span i {
|
|
font-size:16px;
|
|
}
|
|
|
|
#about span a {
|
|
color: #fff;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#work {
|
|
margin:2vh 0px;
|
|
padding:4vh 0px !important;
|
|
}
|
|
|
|
#projects {
|
|
columns:2;
|
|
}
|
|
|
|
#projects 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);
|
|
}
|
|
|
|
#projects 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);
|
|
}
|
|
|
|
#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;
|
|
margin:1vh 0px;
|
|
}
|
|
|
|
.about_section {
|
|
font-size:18px;
|
|
font-family: 'Questrial', sans-serif;
|
|
margin:2vh 0px;
|
|
font-weight:bold;
|
|
}
|
|
|
|
.bottom_section {
|
|
margin:1vh 0px;
|
|
font-size:14px;
|
|
}
|
|
|
|
.bottom_section span {
|
|
margin-right:20px;
|
|
font-weight:bold;
|
|
}
|
|
|
|
.bottom_section span i {
|
|
font-size:15px;
|
|
}
|
|
|
|
#blog_section {
|
|
margin:2vh 0px;
|
|
padding:2vh 0px !important;
|
|
}
|
|
|
|
#blogs {
|
|
columns:2;
|
|
}
|
|
|
|
#blogs section {
|
|
width:85%;
|
|
display:inline-block;
|
|
border-radius:5px;
|
|
color:var(--text-color);
|
|
border:1px solid rgb(0, 0, 0, 0.04);
|
|
box-shadow:0px 0px 0px rgb(0, 0, 0, 0);
|
|
transition:0.4s ease-in-out;
|
|
transform:scale(1);
|
|
padding:0px;
|
|
margin:2vh 0px;
|
|
}
|
|
|
|
#blogs section img {
|
|
width:100%;
|
|
border-radius:5px 5px 0px 0px;
|
|
}
|
|
|
|
.blog_container {
|
|
padding:2.5vh 5%;
|
|
}
|
|
|
|
#blogs 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);
|
|
}
|
|
|
|
.go_back {
|
|
position: absolute;
|
|
color:var(--text-color);
|
|
font-size:26px;
|
|
margin-left:5vw;
|
|
margin-top:4vh;
|
|
}
|
|
|
|
::selection {
|
|
color:var(--bg-color);
|
|
background:var(--text-color);
|
|
}
|
|
|
|
@media (max-width: 800px){
|
|
#profile {
|
|
width:90vw;
|
|
padding:4vh 5vw;
|
|
height:60vh;
|
|
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;
|
|
height:auto;
|
|
display:inline-block;
|
|
padding-left:5vw;
|
|
}
|
|
#profile_img {
|
|
width:120px;
|
|
height:120px;
|
|
margin:0px auto !important;
|
|
}
|
|
#work {
|
|
margin:0px;
|
|
}
|
|
#projects {
|
|
columns:1;
|
|
}
|
|
#projects section {
|
|
width:88%;
|
|
}
|
|
#blogs {
|
|
columns:1;
|
|
}
|
|
#blogs section {
|
|
width:98%;
|
|
}
|
|
#blog_section {
|
|
margin:0px;
|
|
}
|
|
#blog-display {
|
|
width:90vw;
|
|
margin:0px 5vw;
|
|
text-align:left;
|
|
margin-top:0vh;
|
|
z-index:1;
|
|
}
|
|
#profile_blog {
|
|
width:90vw;
|
|
margin:0px 5vw;
|
|
margin-top:10vh;
|
|
text-align:left;
|
|
z-index:1;
|
|
}
|
|
.go_back {
|
|
position: relative;
|
|
color:var(--text-color);
|
|
font-size:26px;
|
|
margin-left:5vw;
|
|
top:5vh;
|
|
}
|
|
#blog img {
|
|
margin:1vh 0px !important;
|
|
}
|
|
#blog p {
|
|
margin:2vh 0px;
|
|
}
|
|
}
|
|
|
|
::-webkit-scrollbar {width:5px;height:5px;}
|
|
::-webkit-scrollbar-track {background:var(--bg-color);}
|
|
::-webkit-scrollbar-thumb {background:var(--text-color);}: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("https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450");
|
|
--background-background: #fff;
|
|
}
|