diff --git a/style.css b/style.css index 864c326..ed7e87a 100644 --- a/style.css +++ b/style.css @@ -201,9 +201,9 @@ body{ min-height: 40px; margin: var(--margin) 0; padding: var(--padding); - background: var(--theme2); + background: transparent; color: #fff; - border: 2px solid transparent; + border: 2px solid #fff; border-radius: var(--buttonRadius); font-size: 1rem; transition: all 200ms linear; @@ -211,7 +211,7 @@ body{ #home button:hover{ background: var(--theme2); - border: 2px solid #fff; + border: 2px solid var(--theme2); } /* About Section */ @@ -364,17 +364,41 @@ body{ } #insta2Container div:nth-child(1){ - margin: auto auto auto 10%; + padding: 0 10%; } #insta2Container img{ - width: 70%; - margin: auto 20%; + width: 100%; border-radius: var(--borderRadius); transition: all 300ms linear; user-select: none; } + .insta2FirstImg{ + position: relative; + } + + .insta2FirstImg::after{ + content: ""; + position: absolute; + display: flex; + flex-direction: row; + justify-content: center; + align-content: center; + align-items: center; + top: 0; + left: calc(10% - 9px); + width: calc(70% - 18px); + height: calc(100% - 4px); + border-radius: var(--borderRadius); + color: #fff; + background: rgba(0, 0, 0, 0); + transition: all 300ms linear; + font-family: var(--font); + font-size: 1.2rem; + font-weight: 700; + } + #insta2ImgContainer{ width: 100%; height: auto; @@ -388,19 +412,58 @@ body{ align-items: baseline; } - #insta2ImgContainer img{ - width: 30%; + .insta2ImgDiv img{ + width: 100%; + max-width: 100%; height: auto; - margin: var(--margin) auto; border-radius: var(--borderRadius); transition: all 300ms linear; user-select: none; + margin: 0; } - #insta2ImgContainer img:hover, #socialInstagram2 img:hover{ + .insta2ImgDiv{ + position: relative; + width: 30%; + height: auto; + margin: var(--margin) auto; + padding: 0; + } + + .insta2ImgDiv::after{ + content: ""; /* Location Icon: \f1da */ + position: absolute; + display: flex; + flex-direction: row; + justify-content: center; + align-content: center; + align-items: center; + top: 0; + left: 0; + width: 100%; + height: calc(100% - 5px); + border-radius: var(--borderRadius); + color: #fff; + background: rgba(0, 0, 0, 0); + transition: all 300ms linear; + /*font-family: akar-icons;*/ + font-family: var(--font); + font-size: 1.2rem; + font-weight: 700; + } + + .insta2ImgDiv:hover > .insta2Img{ border-radius: 50%; } + .insta2ImgDiv:hover::after, .insta2FirstImg:hover::after{ + border-radius: 50%; + background: rgba(0, 0, 0, 0.5); + content: attr(data-location); + display: flex; + transition: all 300ms linear; + } + #githubContainer{ width: 100%; height: auto; @@ -938,12 +1001,12 @@ body{ flex-wrap: wrap; } - #insta2Container img{ + #insta2Container img, .insta2ImgDiv{ width: 100%; margin: var(--margin) 10%; } - #insta1Container div, #insta2ImgContainer img, #githubContainer div{ + #insta1Container div, .insta2ImgDiv, #githubContainer div{ width: 100%; }