1
0
Fork 0
mirror of https://github.com/dilllxd/gitfolio.git synced 2024-08-14 22:28:09 +00:00
gitfolio/index.css
2019-05-24 13:01:33 +05:30

456 lines
8.3 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;
}
#display {
width:64vw;
padding:4vh 3vw;
height:92vh;
display:inline-block;
padding-left:33vw;
}
#display h1 {
font-size:50px;
color:var(--text-color);
font-weight:bold;
font-family: 'Questrial', sans-serif;
}
.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;
min-width:180px;
min-height:180px;
max-width:180px;
max-height:180px;
border-radius:5px;
background-size:cover !important;
background-repeat:no-repeat !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 a {
color:#fff !important;
text-decoration:none;
font-weight:bold;
}
#about a:hover {
text-decoration:underline;
}
#about span {
margin:1vh 0px;
display:block;
}
#about span i {
font-size:16px;
}
#work {
margin:2vh 0px;
padding:4vh 0px !important;
}
#forks {
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);
}
.section_title {
font-size:24px;
font-weight:bold;
margin:1vh 0px;
padding:0px 1px;
word-wrap: break-word;
}
.about_section {
font-size:18px;
font-family: 'Questrial', sans-serif;
margin:2vh 0px;
font-weight:bold;
word-wrap: break-word;
}
.bottom_section {
margin:1vh 0px;
font-size:14px;
word-wrap: break-word;
}
.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;
}
#display {
width:90vw;
padding:4vh 5vw;
height:auto;
display:inline-block;
padding-left:5vw;
}
#profile_img {
width:120px;
height:120px;
min-width:120px;
min-height:120px;
max-width:120px;
max-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);}