diff --git a/style.css b/style.css index 3835de9..d4efeb9 100644 --- a/style.css +++ b/style.css @@ -8,6 +8,7 @@ body{ text-align: left; font-family: "open sans", sans-serif; scroll-behavior: smooth; + overflow-x: hidden; --theme1: #3498db; --theme2: #2980b9; --background: #181818; @@ -28,6 +29,56 @@ body{ margin: auto; } + /* Loading screen & effects*/ + #loadingScreen{ + display: flex; + background: var(--theme1); + width: 100%; + height: 100vh; + position: fixed; + z-index: 1001; + justify-content: center; + align-items: center; + text-align: center; + } + + #loader{ + width: 60px; + height: 60px; + background: none; + border: 8px solid #fff; + border-radius: 50%; + border-top-color: transparent; + border-style: dotted; + animation: loading 1000ms infinite; + } + + @keyframes loading{ + from{ + transform: rotate(0deg); + } + to{ + transform: rotate(360deg); + } + } + + .loadEffect{ + background: #eee; + background-image: linear-gradient(90deg, rgba(238,238,238,1) 0%, rgba(221,221,221,1) 33%, rgba(238,238,238,1) 62%, rgba(221,221,221,1) 100%);; + background-size: 400%; + animation: loadEffect 1500ms infinite; + color: transparent; + } + + @keyframes loadEffect{ + from{ + background-position: 100%; + } + to{ + background-position: 0; + } + } + /* Navbar */ #navbar{ width: 100%; @@ -181,30 +232,76 @@ body{ max-width: 80%; } + .socialTab button{ + width: 80%; + height: auto; + min-height: 40px; + margin: var(--margin); + background: var(--theme2); + color: #fff; + border: 2px solid #fff; + border-radius: var(--borderRadius); + font-size: 1rem; + } + + .socialTab button:hover{ + background: var(--theme1); + } + + #insta1Container{ + width: 100%; + height: auto; + margin: auto; + display: flex; + flex-direction: row; + flex-wrap: wrap; + flex-grow: 1; + justify-content: space-around; + align-content: center; + align-items: center; + } + + #insta1Container div{ + width: 50%; + } + #insta2Container{ width: 100%; height: auto; display: flex; flex-direction: row; flex-wrap: nowrap; + flex-grow: 1; justify-content: space-around; align-content: stretch; align-items: stretch; } + #insta2Container div{ + width: 100%; + align-self: center; + } + + #insta2Container div:nth-child(1){ + margin: auto auto auto 10%; + } + #insta2Container img{ - width: 50%; + width: 70%; + margin: auto 20%; border-radius: var(--borderRadius); transition: all 300ms linear; + user-select: none; } #insta2ImgContainer{ - width: 80%; + width: 100%; height: auto; - margin: 10px 10%; + margin: 0; display: flex; flex-direction: row; - flex-wrap: nowrap; + flex-wrap: wrap; + flex-grow: 1; justify-content: space-around; align-content: center; align-items: baseline; @@ -213,15 +310,45 @@ body{ #insta2ImgContainer img{ width: 30%; height: auto; - flex-shrink: 1; + margin: var(--margin) auto; border-radius: var(--borderRadius); transition: all 300ms linear; + user-select: none; } #insta2ImgContainer img:hover, #socialInstagram2 img:hover{ border-radius: 50%; } + #githubContainer{ + width: 100%; + height: auto; + margin: auto; + display: flex; + flex-direction: row; + flex-wrap: wrap; + flex-grow: 1; + justify-content: space-around; + align-content: center; + align-items: center; + } + + #githubContainer div{ + width: 50%; + align-self: center; + align-content: center; + } + + #githubContainer div:nth-child(2){ + text-align: center; + } + + #githubContainer img{ + width: 100%; + height: auto; + user-select: none; + } + /* Project Section */ #projects{ margin: auto; @@ -559,6 +686,19 @@ body{ margin: 5%; } + #insta2Container{ + flex-wrap: wrap; + } + + #insta2Container img{ + width: 100%; + margin: var(--margin) 10%; + } + + #insta1Container div, #insta2ImgContainer img, #githubContainer div{ + width: 100%; + } + /* Projects Section */ #projectRow2{ padding-top: 0;