From 9c5655eab86083b878e508fe30375c86cd0223d3 Mon Sep 17 00:00:00 2001 From: imfunny <36105478+imfunniee@users.noreply.github.com> Date: Fri, 24 May 2019 13:01:33 +0530 Subject: [PATCH] fixed #49 --- index.css | 456 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 456 insertions(+) create mode 100644 index.css diff --git a/index.css b/index.css new file mode 100644 index 0000000..a0b3b29 --- /dev/null +++ b/index.css @@ -0,0 +1,456 @@ +@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);}