From 78ebcebc0bf4f8044ce46c7aa8a7187428479c96 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 7 Feb 2026 12:49:25 +0000 Subject: [PATCH 1/8] Initial plan From d5bb5fe7c59f27898441a4089021bc4326399cee Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 7 Feb 2026 12:51:28 +0000 Subject: [PATCH 2/8] Initial analysis of theming issues Co-authored-by: BharathASL <33708810+BharathASL@users.noreply.github.com> --- css/theme.css | 215 ++++++++++++++++- css/theme.css.map | 2 +- css/ui.css | 578 +++++++++++++++++++++++++++++++++++++++++++++- css/ui.css.map | 2 +- 4 files changed, 793 insertions(+), 4 deletions(-) diff --git a/css/theme.css b/css/theme.css index 860f088..cd40578 100644 --- a/css/theme.css +++ b/css/theme.css @@ -1 +1,214 @@ -@import"https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap";html{--theme-light-background: #979898;--theme-dark-background: #272829;--theme-light-secondary-background: #adaeae;--theme-dark-secondary-background: #515253;--theme-light-background-3: #a2a3a3;--theme-dark-background-3: #3b3c3d;--theme-light-text: black;--theme-dark-text: white;--theme-light-secondary-text: #d0d0d0;--theme-dark-secondary-text: #979898;--theme-light-brand: #f0bf6c;--theme-dark-brand: #f0bf6c;--theme-light-brand-text: #f0bf6c;--theme-dark-brand-text: #f0bf6c;height:100%}body{font-family:"Josefin Sans",sans-serif}.light body{background:#adaeae;background:var(--theme-light-secondary-background, #adaeae)}.dark body{background:#515253;background:var(--theme-dark-secondary-background, #515253)}.light body{color:black;color:var(--theme-light-text, black)}.dark body{color:white;color:var(--theme-dark-text, white)}.light a{color:black;color:var(--theme-light-text, black)}.dark a{color:white;color:var(--theme-dark-text, white)}.light .container{background-color:#979898;background-color:var(--theme-light-background, #979898)}.dark .container{background-color:#272829;background-color:var(--theme-dark-background, #272829)}input[type=text]{border:none;box-shadow:none;border-radius:7px;width:200px;height:40px;padding:10px 20px}.light input[type=text]{background:#a2a3a3;background:var(--theme-light-background-3, #a2a3a3)}.dark input[type=text]{background:#3b3c3d;background:var(--theme-dark-background-3, #3b3c3d)}.light input[type=text]{color:black;color:var(--theme-light-text, black)}.dark input[type=text]{color:white;color:var(--theme-dark-text, white)}input[type=text]:hover,input[type=text]:focus{outline:none}.light .highlight{color:#f0bf6c;color:var(--theme-light-brand-text, #f0bf6c)}.dark .highlight{color:#f0bf6c;color:var(--theme-dark-brand-text, #f0bf6c)}.light .highlight.btn{border:1px solid #f0bf6c !important;border:1px solid var(--theme-light-brand-text, #f0bf6c) !important}.dark .highlight.btn{border:1px solid #f0bf6c !important;border:1px solid var(--theme-dark-brand-text, #f0bf6c) !important}.highlight.btn:hover{transform:scale(0.95)}.light .highlight.btn:hover{background:#f0bf6c !important;background:var(--theme-light-brand-text, #f0bf6c) !important}.dark .highlight.btn:hover{background:#f0bf6c !important;background:var(--theme-dark-brand-text, #f0bf6c) !important}.light .highlight.btn:hover{color:black;color:var(--theme-light-text, black)}.dark .highlight.btn:hover{color:white;color:var(--theme-dark-text, white)}.highlight.btn:active{opacity:.8;transform:scale(0.9)}/*# sourceMappingURL=theme.css.map */ \ No newline at end of file +/* + @mixin theme($property, $key, $inlineExtra:null, $postExtra:null) + Assigns a property a theme value for each defined theme. + + Example usage: + .mySelector { + padding: 6px; + @include theme(background-color, backgroundLight); + @include theme(border, borderDark, 1px solid); + } + + sass generated equivalent: + .mySelector { + padding: 6px; + + :global(.light) & { + border: 1px solid color(woodsmoke); + border: 1px solid var(--theme-light-borderDark, color(woodsmoke)); + } + :global(.light) & { + background-color: color(alabaster); + background-color: var(--theme-light-backgroundLight, color(alabaster)); + } + + :global(.dark) & { + border: 1px solid color(alabaster); + border: 1px solid var(--theme-dark-borderDark, color(alabaster)); + } + :global(.dark) & { + background-color: color(woodsmoke); + background-color: var(--theme-dark-backgroundLight, color(woodsmoke)); + } + } + + browser output: + .mySelector { + padding: 6px; + } + .light .mySelector { + border: 1px solid #141519; + border: 1px solid var(--theme-light-borderDark, #141519); + } + .light .mySelector { + background-color: #FCFCFC; + background-color: var(--theme-light-backgroundLight, #FCFCFC); + } + + .dark .mySelector { + border: 1px solid #FCFCFC; + border: 1px solid var(--theme-dark-borderDark, #FCFCFC); + } + .dark .mySelector { + background-color: #141519; + background-color: var(--theme-dark-backgroundLight, #141519); + } +*/ +/* + @mixin generateThemeMappings(themeName: string, themeMap: map) + helper function for generating list of theme variables and adding to existing map. + This will add a new theme to the themes array and the theme color list. +*/ +/* + @mixin generateThemeVariables + Auto-generates the entire list of theme variables for use in var() statements. + Really should only be called in the html selector at the app root. +*/ +/** this section generates a theme map for each theme **/ +/** end theme generation **/ +@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap"); +html { + --theme-light-background: #979898; + --theme-dark-background: #272829; + --theme-light-secondary-background: #adaeae; + --theme-dark-secondary-background: #515253; + --theme-light-background-3: #a2a3a3; + --theme-dark-background-3: #3b3c3d; + --theme-light-text: black; + --theme-dark-text: white; + --theme-light-secondary-text: #d0d0d0; + --theme-dark-secondary-text: #979898; + --theme-light-brand: #f0bf6c; + --theme-dark-brand: #f0bf6c; + --theme-light-brand-text: #f0bf6c; + --theme-dark-brand-text: #f0bf6c; + height: 100%; +} + +.light body { + background: #adaeae; + background: var(--theme-light-secondary-background, #adaeae); +} + +.dark body { + background: #515253; + background: var(--theme-dark-secondary-background, #515253); +} + +.light body { + color: black; + color: var(--theme-light-text, black); +} + +.dark body { + color: white; + color: var(--theme-dark-text, white); +} + +body { + font-family: "Josefin Sans", sans-serif; +} + +.light a { + color: black; + color: var(--theme-light-text, black); +} + +.dark a { + color: white; + color: var(--theme-dark-text, white); +} + +.light .container { + background-color: #979898; + background-color: var(--theme-light-background, #979898); +} + +.dark .container { + background-color: #272829; + background-color: var(--theme-dark-background, #272829); +} + +.light input[type=text] { + background: #a2a3a3; + background: var(--theme-light-background-3, #a2a3a3); +} + +.dark input[type=text] { + background: #3b3c3d; + background: var(--theme-dark-background-3, #3b3c3d); +} + +.light input[type=text] { + color: black; + color: var(--theme-light-text, black); +} + +.dark input[type=text] { + color: white; + color: var(--theme-dark-text, white); +} + +input[type=text] { + border: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + border-radius: 7px; + width: 200px; + height: 40px; + padding: 10px 20px; +} +input[type=text]:hover, input[type=text]:focus { + outline: none; +} + +.light .highlight { + color: #f0bf6c; + color: var(--theme-light-brand-text, #f0bf6c); +} + +.dark .highlight { + color: #f0bf6c; + color: var(--theme-dark-brand-text, #f0bf6c); +} + +.light .highlight.btn { + border: 1px solid #f0bf6c !important; + border: 1px solid var(--theme-light-brand-text, #f0bf6c) !important; +} + +.dark .highlight.btn { + border: 1px solid #f0bf6c !important; + border: 1px solid var(--theme-dark-brand-text, #f0bf6c) !important; +} + +.light .highlight.btn:hover { + background: #f0bf6c !important; + background: var(--theme-light-brand-text, #f0bf6c) !important; +} + +.dark .highlight.btn:hover { + background: #f0bf6c !important; + background: var(--theme-dark-brand-text, #f0bf6c) !important; +} + +.light .highlight.btn:hover { + color: black; + color: var(--theme-light-text, black); +} + +.dark .highlight.btn:hover { + color: white; + color: var(--theme-dark-text, white); +} + +.highlight.btn:hover { + transform: scale(0.95); +} +.highlight.btn:active { + opacity: 0.8; + transform: scale(0.9); +} + +/*# sourceMappingURL=theme.css.map */ diff --git a/css/theme.css.map b/css/theme.css.map index 78f3523..2437859 100644 --- a/css/theme.css.map +++ b/css/theme.css.map @@ -1 +1 @@ -{"version":3,"sources":["../scss/theme.scss","../scss/theming/mixins.scss"],"names":[],"mappings":"AACQ,2GAAA,CAER,KCkIQ,iCAAA,CAAA,gCAAA,CAAA,2CAAA,CAAA,0CAAA,CAAA,mCAAA,CAAA,kCAAA,CAAA,yBAAA,CAAA,wBAAA,CAAA,qCAAA,CAAA,oCAAA,CAAA,4BAAA,CAAA,2BAAA,CAAA,iCAAA,CAAA,gCAAA,CDhIJ,WAAA,CAGJ,KAGI,qCAAA,CC0Da,YACP,kBAAA,CACA,2DAAA,CAFO,WACP,kBAAA,CACA,0DAAA,CAFO,YACP,WAAA,CACA,oCAAA,CAFO,WACP,WAAA,CACA,mCAAA,CAFO,SACP,WAAA,CACA,oCAAA,CAFO,QACP,WAAA,CACA,mCAAA,CAFO,kBACP,wBAAA,CACA,uDAAA,CAFO,iBACP,wBAAA,CACA,sDAAA,CDjDV,iBAGI,WAAA,CAGA,eAAA,CACA,iBAAA,CACA,WAAA,CACA,WAAA,CACA,iBAAA,CCqCa,wBACP,kBAAA,CACA,mDAAA,CAFO,uBACP,kBAAA,CACA,kDAAA,CAFO,wBACP,WAAA,CACA,oCAAA,CAFO,uBACP,WAAA,CACA,mCAAA,CDtCN,8CAEI,YAAA,CCkCS,kBACP,aAAA,CACA,4CAAA,CAFO,iBACP,aAAA,CACA,2CAAA,CAFO,sBACP,mCAAA,CACA,kEAAA,CAFO,qBACP,mCAAA,CACA,iEAAA,CDzBN,qBAGI,qBAAA,CCoBS,4BACP,6BAAA,CACA,4DAAA,CAFO,2BACP,6BAAA,CACA,2DAAA,CAFO,4BACP,WAAA,CACA,oCAAA,CAFO,2BACP,WAAA,CACA,mCAAA,CDnBN,sBACI,UAAA,CACA,oBAAA","file":"theme.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/theming/mixins.scss","../scss/colors.scss","../scss/theme.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+EA;AAAA;AAAA;AAAA;AAAA;AA2CA;AAAA;AAAA;AAAA;AAAA;AC1HA;AASA;ACVQ;AAER;EFkIQ;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EEhIJ;;;AFgEa;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AE/DV;EAGI;;;AF0Da;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AEjDV;EAGI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAEI;;;AFkCS;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AEzBN;EAGI;;AAGJ;EACI;EACA","file":"theme.css"} \ No newline at end of file diff --git a/css/ui.css b/css/ui.css index 3421c22..8960fa9 100644 --- a/css/ui.css +++ b/css/ui.css @@ -1 +1,577 @@ -a{text-decoration:none}*{transition:all .5s}body{min-height:100%}body>.container{padding:0}.light body>.container{box-shadow:0 0 20px -10px rgba(240, 191, 108, 0.5)}.dark body>.container{box-shadow:0 0 20px -10px rgba(240, 191, 108, 0.5)}body>.container>header{margin:0 80px !important}body>.container>footer{padding-left:80px !important;padding-right:80px !important}body>.container>.main>*{padding:0 80px}header{display:grid;align-items:center;padding:30px 0;height:110px}header>.nav{justify-self:center}header>.nav *{padding:0 10px;text-decoration:none;line-height:1.5}.light header>.nav *{color:#d0d0d0 !important;color:var(--theme-light-secondary-text, #d0d0d0) !important}.dark header>.nav *{color:#979898 !important;color:var(--theme-dark-secondary-text, #979898) !important}header>.nav *:hover,header>.nav *.active{cursor:pointer}.light header>.nav *:hover,header>.nav *.active{color:#f0bf6c !important;color:var(--theme-light-brand-text, #f0bf6c) !important}.dark header>.nav *:hover,header>.nav *.active{color:#f0bf6c !important;color:var(--theme-dark-brand-text, #f0bf6c) !important}header>.search{justify-self:end;position:relative}header>.search input{padding:10px 40px 10px 20px}header>.search input:focus{width:300px}header>.search svg{position:absolute;height:15px;width:15px;padding:12.5px;right:0;opacity:.5;border-radius:7px}header>.search:focus-within>svg{opacity:1;cursor:pointer}.light header>.search:focus-within>svg{background:#f0bf6c;background:var(--theme-light-brand, #f0bf6c)}.dark header>.search:focus-within>svg{background:#f0bf6c;background:var(--theme-dark-brand, #f0bf6c)}div.main .banner{margin-right:80px;height:calc(100vh - 110px);display:grid;grid-template-columns:minmax(auto, 50%) 1fr;align-items:center;position:relative}div.main .banner img{height:inherit;width:auto;filter:grayscale(100%);opacity:.7;margin:-80px}div.main .banner .social{position:absolute;right:0;bottom:50px;display:flex;flex-flow:column;align-items:center}div.main .banner .social *{margin:10px}.light div.main .banner .social *{color:#f0bf6c;color:var(--theme-light-brand-text, #f0bf6c)}.dark div.main .banner .social *{color:#f0bf6c;color:var(--theme-dark-brand-text, #f0bf6c)}div.main .banner .social .line{display:block;height:100px;width:3px}.light div.main .banner .social .line{background:#f0bf6c;background:var(--theme-light-brand, #f0bf6c)}.dark div.main .banner .social .line{background:#f0bf6c;background:var(--theme-dark-brand, #f0bf6c)}div.main .banner .social svg{width:20px;height:auto}div.main .banner .social svg:hover{cursor:pointer;transform:scale(1.2)}.hr-line{display:block;width:50px;height:3px}.light .hr-line{background:#f0bf6c;background:var(--theme-light-brand, #f0bf6c)}.dark .hr-line{background:#f0bf6c;background:var(--theme-dark-brand, #f0bf6c)}.light .topic h1{text-shadow:0 0 20px rgba(240, 191, 108, 0.3)}.dark .topic h1{text-shadow:0 0 20px rgba(240, 191, 108, 0.3)}.topic.about>div{display:grid;grid-auto-flow:column;grid-template-columns:1fr auto;-moz-column-gap:1em;column-gap:1em;font-size:20px;font-weight:200}.topic.skills{display:flex;flex-direction:column}.topic.skills div.filter{text-align:right}.topic.skills div.items{display:flex;flex-wrap:wrap;justify-content:center}.topic.skills div.items>div{margin:40px;cursor:pointer;display:grid;grid-auto-flow:row;align-content:space-evenly;justify-content:center;justify-items:center;text-align:center;align-self:center;width:200px;height:200px;border-radius:10px;box-sizing:border-box;transition:all .2s}.light .topic.skills div.items>div{background:#adaeae;background:var(--theme-light-secondary-background, #adaeae)}.dark .topic.skills div.items>div{background:#515253;background:var(--theme-dark-secondary-background, #515253)}.light .topic.skills div.items>div:hover{background:#f0bf6c;background:var(--theme-light-brand, #f0bf6c)}.dark .topic.skills div.items>div:hover{background:#f0bf6c;background:var(--theme-dark-brand, #f0bf6c)}.light .topic.skills div.items>div:hover{box-shadow:0 0 10px 1px #f0bf6c;box-shadow:0 0 10px 1px var(--theme-light-brand, #f0bf6c)}.dark .topic.skills div.items>div:hover{box-shadow:0 0 10px 1px #f0bf6c;box-shadow:0 0 10px 1px var(--theme-dark-brand, #f0bf6c)}.topic.skills div.items>div.hide{scale:0;opacity:0;visibility:hidden;height:0;width:0;padding:0;margin:0}.topic.experience{margin:0 !important;padding:0 80px !important}.light .topic.experience{background:#adaeae;background:var(--theme-light-secondary-background, #adaeae)}.dark .topic.experience{background:#515253;background:var(--theme-dark-secondary-background, #515253)}.topic.experience>h1{margin:50px 0;position:relative;top:-25px}.topic.experience>div.items{display:grid;grid-auto-flow:row;-moz-column-gap:1em;column-gap:1em;font-size:20px;font-weight:200;margin:0 200px}.topic.experience>div.items>div{padding-left:50px;position:relative;margin:25px 0}.light .topic.experience>div.items>div{border-left:3px solid rgba(0, 0, 0, 0.75)}.dark .topic.experience>div.items>div{border-left:3px solid rgba(255, 255, 255, 0.75)}.topic.experience>div.items>div::before{content:"";position:absolute;width:15px;height:15px;margin:5px;border-radius:50%;left:-14px;z-index:1}.light .topic.experience>div.items>div::before{background:#f0bf6c;background:var(--theme-light-brand, #f0bf6c)}.dark .topic.experience>div.items>div::before{background:#f0bf6c;background:var(--theme-dark-brand, #f0bf6c)}.light .topic.experience>div.items>div::before{box-shadow:0 0 5px 5px #f0bf6c;box-shadow:0 0 5px 5px var(--theme-light-brand, #f0bf6c)}.dark .topic.experience>div.items>div::before{box-shadow:0 0 5px 5px #f0bf6c;box-shadow:0 0 5px 5px var(--theme-dark-brand, #f0bf6c)}.topic.experience>div.items>div::after{content:"";position:absolute;width:56px;height:56px;left:-29.5px;top:-2.5px}.light .topic.experience>div.items>div::after{background:#adaeae;background:var(--theme-light-secondary-background, #adaeae)}.dark .topic.experience>div.items>div::after{background:#515253;background:var(--theme-dark-secondary-background, #515253)}.topic.experience>div.items>div>span{align-content:center;text-align:center;font-style:italic}.light .topic.experience>div.items>div>span{color:#f0bf6c;color:var(--theme-light-brand-text, #f0bf6c)}.dark .topic.experience>div.items>div>span{color:#f0bf6c;color:var(--theme-dark-brand-text, #f0bf6c)}.topic.experience>div.items>div>span::before{content:"("}.topic.experience>div.items>div>span::after{content:")"}.topic.contact{padding-left:0 !important;padding-right:0 !important}.topic.contact>.top-title,.topic.contact>.bottom-title{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.topic.contact>.top-title>:first-child,.topic.contact>.top-title>:last-child,.topic.contact>.bottom-title>:first-child,.topic.contact>.bottom-title>:last-child{height:3px}.light .topic.contact>.top-title>:first-child,.topic.contact>.top-title>:last-child,.topic.contact>.bottom-title>:first-child,.topic.contact>.bottom-title>:last-child{background:#f0bf6c;background:var(--theme-light-brand, #f0bf6c)}.dark .topic.contact>.top-title>:first-child,.topic.contact>.top-title>:last-child,.topic.contact>.bottom-title>:first-child,.topic.contact>.bottom-title>:last-child{background:#f0bf6c;background:var(--theme-dark-brand, #f0bf6c)}.topic.contact>.top-title>h1,.topic.contact>.bottom-title>h1{padding:0 20px}.topic.contact>.top-title{top:-28px;position:relative;z-index:0}.topic.contact>.bottom-title{bottom:-15px;position:relative;z-index:0}.topic.contact>.bottom-title>div>a:hover{scale:.9}.light .topic.contact>.bottom-title>div>a:hover{color:#f0bf6c;color:var(--theme-light-brand, #f0bf6c)}.dark .topic.contact>.bottom-title>div>a:hover{color:#f0bf6c;color:var(--theme-dark-brand, #f0bf6c)}.topic.contact>.items{display:flex;flex-wrap:wrap;justify-content:center;-moz-column-gap:10px;column-gap:10px;row-gap:10px;padding:0 450px}.topic.contact>.items>*{padding:10px;border-radius:4px}.light .topic.contact>.items>*{background:#adaeae;background:var(--theme-light-secondary-background, #adaeae)}.dark .topic.contact>.items>*{background:#515253;background:var(--theme-dark-secondary-background, #515253)}.light .topic.contact>.items>*{color:#f0bf6c;color:var(--theme-light-brand, #f0bf6c)}.dark .topic.contact>.items>*{color:#f0bf6c;color:var(--theme-dark-brand, #f0bf6c)}.topic.contact>.items>*:hover{scale:.9}.light .topic.contact>.items>*:hover{background:#f0bf6c;background:var(--theme-light-brand, #f0bf6c)}.dark .topic.contact>.items>*:hover{background:#f0bf6c;background:var(--theme-dark-brand, #f0bf6c)}.light .topic.contact>.items>*:hover{color:black;color:var(--theme-light-text, black)}.dark .topic.contact>.items>*:hover{color:white;color:var(--theme-dark-text, white)}footer{margin:0 !important}.light footer{background:#adaeae;background:var(--theme-light-secondary-background, #adaeae)}.dark footer{background:#515253;background:var(--theme-dark-secondary-background, #515253)}/*# sourceMappingURL=ui.css.map */ \ No newline at end of file +/* + @mixin theme($property, $key, $inlineExtra:null, $postExtra:null) + Assigns a property a theme value for each defined theme. + + Example usage: + .mySelector { + padding: 6px; + @include theme(background-color, backgroundLight); + @include theme(border, borderDark, 1px solid); + } + + sass generated equivalent: + .mySelector { + padding: 6px; + + :global(.light) & { + border: 1px solid color(woodsmoke); + border: 1px solid var(--theme-light-borderDark, color(woodsmoke)); + } + :global(.light) & { + background-color: color(alabaster); + background-color: var(--theme-light-backgroundLight, color(alabaster)); + } + + :global(.dark) & { + border: 1px solid color(alabaster); + border: 1px solid var(--theme-dark-borderDark, color(alabaster)); + } + :global(.dark) & { + background-color: color(woodsmoke); + background-color: var(--theme-dark-backgroundLight, color(woodsmoke)); + } + } + + browser output: + .mySelector { + padding: 6px; + } + .light .mySelector { + border: 1px solid #141519; + border: 1px solid var(--theme-light-borderDark, #141519); + } + .light .mySelector { + background-color: #FCFCFC; + background-color: var(--theme-light-backgroundLight, #FCFCFC); + } + + .dark .mySelector { + border: 1px solid #FCFCFC; + border: 1px solid var(--theme-dark-borderDark, #FCFCFC); + } + .dark .mySelector { + background-color: #141519; + background-color: var(--theme-dark-backgroundLight, #141519); + } +*/ +/* + @mixin generateThemeMappings(themeName: string, themeMap: map) + helper function for generating list of theme variables and adding to existing map. + This will add a new theme to the themes array and the theme color list. +*/ +/* + @mixin generateThemeVariables + Auto-generates the entire list of theme variables for use in var() statements. + Really should only be called in the html selector at the app root. +*/ +/** this section generates a theme map for each theme **/ +/** end theme generation **/ +a { + text-decoration: none; +} + +* { + transition: all 0.5s; +} + +body { + min-height: 100%; +} + +.light body > .container { + box-shadow: 0 0 20px -10px rgba(240, 191, 108, 0.5); +} + +.dark body > .container { + box-shadow: 0 0 20px -10px rgba(240, 191, 108, 0.5); +} + +body > .container { + padding: 0; +} +body > .container > header { + margin: 0 80px !important; +} +body > .container > footer { + padding-left: 80px !important; + padding-right: 80px !important; +} +body > .container > .main > * { + padding: 0 80px; +} + +header { + display: grid; + align-items: center; + padding: 30px 0; + height: 110px; +} +header > .nav { + justify-self: center; +} +header > .nav * { + padding: 0 10px; +} +.light header > .nav * { + color: #d0d0d0 !important; + color: var(--theme-light-secondary-text, #d0d0d0) !important; +} + +.dark header > .nav * { + color: #979898 !important; + color: var(--theme-dark-secondary-text, #979898) !important; +} + +header > .nav * { + text-decoration: none; + line-height: 1.5; +} +.light header > .nav *:hover, header > .nav *.active { + color: #f0bf6c !important; + color: var(--theme-light-brand-text, #f0bf6c) !important; +} + +.dark header > .nav *:hover, header > .nav *.active { + color: #f0bf6c !important; + color: var(--theme-dark-brand-text, #f0bf6c) !important; +} + +header > .nav *:hover, header > .nav *.active { + cursor: pointer; +} +header > .search { + justify-self: end; + position: relative; +} +header > .search input { + padding: 10px 40px 10px 20px; +} +header > .search input:focus { + width: 300px; +} +header > .search svg { + position: absolute; + height: 15px; + width: 15px; + padding: 12.5px; + right: 0; + opacity: 0.5; + border-radius: 7px; +} +header > .search:focus-within > svg { + opacity: 1; +} +.light header > .search:focus-within > svg { + background: #f0bf6c; + background: var(--theme-light-brand, #f0bf6c); +} + +.dark header > .search:focus-within > svg { + background: #f0bf6c; + background: var(--theme-dark-brand, #f0bf6c); +} + +header > .search:focus-within > svg { + cursor: pointer; +} + +div.main .banner { + margin-right: 80px; + height: calc(100vh - 110px); + display: grid; + grid-template-columns: minmax(auto, 50%) 1fr; + align-items: center; +} +div.main .banner img { + height: inherit; + width: auto; + filter: grayscale(100%); + opacity: 0.7; + margin: -80px; +} +div.main .banner { + position: relative; +} +div.main .banner .social { + position: absolute; + right: 0; + bottom: 50px; + display: flex; + flex-flow: column; + align-items: center; +} +div.main .banner .social * { + margin: 10px; +} +.light div.main .banner .social * { + color: #f0bf6c; + color: var(--theme-light-brand-text, #f0bf6c); +} + +.dark div.main .banner .social * { + color: #f0bf6c; + color: var(--theme-dark-brand-text, #f0bf6c); +} + +div.main .banner .social .line { + display: block; + height: 100px; + width: 3px; +} +.light div.main .banner .social .line { + background: #f0bf6c; + background: var(--theme-light-brand, #f0bf6c); +} + +.dark div.main .banner .social .line { + background: #f0bf6c; + background: var(--theme-dark-brand, #f0bf6c); +} + +div.main .banner .social svg { + width: 20px; + height: auto; +} +div.main .banner .social svg:hover { + cursor: pointer; + transform: scale(1.2); +} + +.hr-line { + display: block; + width: 50px; + height: 3px; +} +.light .hr-line { + background: #f0bf6c; + background: var(--theme-light-brand, #f0bf6c); +} + +.dark .hr-line { + background: #f0bf6c; + background: var(--theme-dark-brand, #f0bf6c); +} + +.light .topic h1 { + text-shadow: 0 0 20px rgba(240, 191, 108, 0.3); +} + +.dark .topic h1 { + text-shadow: 0 0 20px rgba(240, 191, 108, 0.3); +} + +.topic.about > div { + display: grid; + grid-auto-flow: column; + grid-template-columns: 1fr auto; + column-gap: 1em; + font-size: 20px; + font-weight: 200; +} +.topic.skills { + display: flex; + flex-direction: column; +} +.topic.skills div.filter { + text-align: right; +} +.topic.skills div.items { + display: flex; + flex-wrap: wrap; + justify-content: center; +} +.topic.skills div.items > div { + margin: 40px; + cursor: pointer; + display: grid; + grid-auto-flow: row; + align-content: space-evenly; + justify-content: center; + justify-items: center; + text-align: center; + align-self: center; +} +.light .topic.skills div.items > div { + background: #adaeae; + background: var(--theme-light-secondary-background, #adaeae); +} + +.dark .topic.skills div.items > div { + background: #515253; + background: var(--theme-dark-secondary-background, #515253); +} + +.topic.skills div.items > div { + width: 200px; + height: 200px; + border-radius: 10px; + box-sizing: border-box; +} +.light .topic.skills div.items > div:hover { + background: #f0bf6c; + background: var(--theme-light-brand, #f0bf6c); +} + +.dark .topic.skills div.items > div:hover { + background: #f0bf6c; + background: var(--theme-dark-brand, #f0bf6c); +} + +.light .topic.skills div.items > div:hover { + box-shadow: 0 0 10px 1px #f0bf6c; + box-shadow: 0 0 10px 1px var(--theme-light-brand, #f0bf6c); +} + +.dark .topic.skills div.items > div:hover { + box-shadow: 0 0 10px 1px #f0bf6c; + box-shadow: 0 0 10px 1px var(--theme-dark-brand, #f0bf6c); +} + +.topic.skills div.items > div { + transition: all 0.2s; +} +.topic.skills div.items > div.hide { + scale: 0; + opacity: 0; + visibility: hidden; + height: 0; + width: 0; + padding: 0; + margin: 0; +} +.topic.experience { + margin: 0 !important; + padding: 0 80px !important; +} +.light .topic.experience { + background: #adaeae; + background: var(--theme-light-secondary-background, #adaeae); +} + +.dark .topic.experience { + background: #515253; + background: var(--theme-dark-secondary-background, #515253); +} + +.topic.experience > h1 { + margin: 50px 0; + position: relative; + top: -25px; +} +.topic.experience > div.items { + display: grid; + grid-auto-flow: row; + column-gap: 1em; + font-size: 20px; + font-weight: 200; + margin: 0 200px; +} +.light .topic.experience > div.items > div { + border-left: 3px solid rgba(0, 0, 0, 0.75); +} + +.dark .topic.experience > div.items > div { + border-left: 3px solid rgba(255, 255, 255, 0.75); +} + +.topic.experience > div.items > div { + padding-left: 50px; + position: relative; + margin: 25px 0; +} +.topic.experience > div.items > div::before { + content: ""; + position: absolute; + width: 15px; + height: 15px; + margin: 5px; +} +.light .topic.experience > div.items > div::before { + background: #f0bf6c; + background: var(--theme-light-brand, #f0bf6c); +} + +.dark .topic.experience > div.items > div::before { + background: #f0bf6c; + background: var(--theme-dark-brand, #f0bf6c); +} + +.light .topic.experience > div.items > div::before { + box-shadow: 0 0 5px 5px #f0bf6c; + box-shadow: 0 0 5px 5px var(--theme-light-brand, #f0bf6c); +} + +.dark .topic.experience > div.items > div::before { + box-shadow: 0 0 5px 5px #f0bf6c; + box-shadow: 0 0 5px 5px var(--theme-dark-brand, #f0bf6c); +} + +.topic.experience > div.items > div::before { + border-radius: 50%; + left: -14px; + z-index: 1; +} +.topic.experience > div.items > div::after { + content: ""; + position: absolute; + width: 56px; + height: 56px; +} +.light .topic.experience > div.items > div::after { + background: #adaeae; + background: var(--theme-light-secondary-background, #adaeae); +} + +.dark .topic.experience > div.items > div::after { + background: #515253; + background: var(--theme-dark-secondary-background, #515253); +} + +.topic.experience > div.items > div::after { + left: -29.5px; + top: -2.5px; +} +.topic.experience > div.items > div > span { + align-content: center; + text-align: center; + font-style: italic; +} +.light .topic.experience > div.items > div > span { + color: #f0bf6c; + color: var(--theme-light-brand-text, #f0bf6c); +} + +.dark .topic.experience > div.items > div > span { + color: #f0bf6c; + color: var(--theme-dark-brand-text, #f0bf6c); +} + +.topic.experience > div.items > div > span::before { + content: "("; +} +.topic.experience > div.items > div > span::after { + content: ")"; +} +.topic.contact { + padding-left: 0 !important; + padding-right: 0 !important; +} +.topic.contact > .top-title, +.topic.contact > .bottom-title { + display: grid; + grid-template-columns: 1fr auto 1fr; + align-items: center; +} +.light .topic.contact > .top-title > :first-child, .topic.contact > .top-title > :last-child, .topic.contact > .bottom-title > :first-child, .topic.contact > .bottom-title > :last-child { + background: #f0bf6c; + background: var(--theme-light-brand, #f0bf6c); +} + +.dark .topic.contact > .top-title > :first-child, .topic.contact > .top-title > :last-child, .topic.contact > .bottom-title > :first-child, .topic.contact > .bottom-title > :last-child { + background: #f0bf6c; + background: var(--theme-dark-brand, #f0bf6c); +} + +.topic.contact > .top-title > :first-child, +.topic.contact > .top-title > :last-child, +.topic.contact > .bottom-title > :first-child, +.topic.contact > .bottom-title > :last-child { + height: 3px; +} +.topic.contact > .top-title > h1, +.topic.contact > .bottom-title > h1 { + padding: 0 20px; +} +.topic.contact > .top-title { + top: -28px; + position: relative; + z-index: 0; +} +.topic.contact > .bottom-title { + bottom: -15px; + position: relative; + z-index: 0; +} +.light .topic.contact > .bottom-title > div > a:hover { + color: #f0bf6c; + color: var(--theme-light-brand, #f0bf6c); +} + +.dark .topic.contact > .bottom-title > div > a:hover { + color: #f0bf6c; + color: var(--theme-dark-brand, #f0bf6c); +} + +.topic.contact > .bottom-title > div > a:hover { + scale: 0.9; +} +.topic.contact > .items { + display: flex; + flex-wrap: wrap; + justify-content: center; + column-gap: 10px; + row-gap: 10px; + padding: 0 450px; +} +.topic.contact > .items > * { + padding: 10px; + border-radius: 4px; +} +.light .topic.contact > .items > * { + background: #adaeae; + background: var(--theme-light-secondary-background, #adaeae); +} + +.dark .topic.contact > .items > * { + background: #515253; + background: var(--theme-dark-secondary-background, #515253); +} + +.light .topic.contact > .items > * { + color: #f0bf6c; + color: var(--theme-light-brand, #f0bf6c); +} + +.dark .topic.contact > .items > * { + color: #f0bf6c; + color: var(--theme-dark-brand, #f0bf6c); +} + +.light .topic.contact > .items > *:hover { + background: #f0bf6c; + background: var(--theme-light-brand, #f0bf6c); +} + +.dark .topic.contact > .items > *:hover { + background: #f0bf6c; + background: var(--theme-dark-brand, #f0bf6c); +} + +.light .topic.contact > .items > *:hover { + color: black; + color: var(--theme-light-text, black); +} + +.dark .topic.contact > .items > *:hover { + color: white; + color: var(--theme-dark-text, white); +} + +.topic.contact > .items > *:hover { + scale: 0.9; +} + +footer { + margin: 0 !important; +} +.light footer { + background: #adaeae; + background: var(--theme-light-secondary-background, #adaeae); +} + +.dark footer { + background: #515253; + background: var(--theme-dark-secondary-background, #515253); +} + +/*# sourceMappingURL=ui.css.map */ diff --git a/css/ui.css.map b/css/ui.css.map index b21f0d9..2fe2ce8 100644 --- a/css/ui.css.map +++ b/css/ui.css.map @@ -1 +1 @@ -{"version":3,"sources":["../scss/ui.scss","../scss/theming/mixins.scss"],"names":[],"mappings":"AAEA,EACI,oBAAA,CAGJ,EACI,kBAAA,CAGJ,KACI,eAAA,CAKJ,gBAEI,SAAA,CC+Ca,uBACP,kDAAA,CADO,sBACP,kDAAA,CD9CN,uBACI,wBAAA,CAGJ,uBACI,4BAAA,CACA,6BAAA,CAGJ,wBACI,cAAA,CAIR,OACI,YAAA,CAEA,kBAAA,CACA,cAAA,CACA,YAAA,CACA,YACI,mBAAA,CACA,cACI,cAAA,CAEA,oBAAA,CACA,eAAA,CCuBK,qBACP,wBAAA,CACA,2DAAA,CAFO,oBACP,wBAAA,CACA,0DAAA,CDxBE,yCAGI,cAAA,CCmBC,gDACP,wBAAA,CACA,uDAAA,CAFO,+CACP,wBAAA,CACA,sDAAA,CDjBN,eACI,gBAAA,CACA,iBAAA,CACA,qBACI,2BAAA,CACA,2BACI,WAAA,CAGR,mBACI,iBAAA,CACA,WAAA,CACA,UAAA,CACA,cAAA,CACA,OAAA,CACA,UAAA,CACA,iBAAA,CAGJ,gCACI,SAAA,CAEA,cAAA,CCPK,uCACP,kBAAA,CACA,4CAAA,CAFO,sCACP,kBAAA,CACA,2CAAA,CDWN,iBACI,iBArEuB,CAuEvB,0BAAA,CACA,YAAA,CACA,2CAAA,CACA,kBAAA,CAQA,iBAAA,CAPA,qBACI,cAAA,CACA,UAAA,CACA,sBAAA,CACA,UAAA,CACA,YAAA,CAGJ,yBACI,iBAAA,CACA,OAAA,CACA,WAAA,CACA,YAAA,CACA,gBAAA,CACA,kBAAA,CACA,2BACI,WAAA,CCpCC,kCACP,aAAA,CACA,4CAAA,CAFO,iCACP,aAAA,CACA,2CAAA,CDqCE,+BACI,aAAA,CACA,YAAA,CACA,SAAA,CC1CC,sCACP,kBAAA,CACA,4CAAA,CAFO,qCACP,kBAAA,CACA,2CAAA,CD2CE,6BACI,UAAA,CACA,WAAA,CAEA,mCACI,cAAA,CACA,oBAAA,CAOpB,SACI,aAAA,CACA,UAAA,CACA,UAAA,CC7Da,gBACP,kBAAA,CACA,4CAAA,CAFO,eACP,kBAAA,CACA,2CAAA,CANO,iBACP,6CAAA,CADO,gBACP,6CAAA,CDyEN,iBACI,YAAA,CACA,qBAAA,CACA,8BAAA,CACA,mBAAA,CAAA,cAAA,CACA,cAAA,CACA,eAAA,CAMJ,cACI,YAAA,CACA,qBAAA,CAEA,yBACI,gBAAA,CAGJ,wBACI,YAAA,CACA,cAAA,CACA,sBAAA,CAEA,4BACI,WAAA,CACA,cAAA,CACA,YAAA,CACA,kBAAA,CACA,0BAAA,CACA,sBAAA,CACA,oBAAA,CACA,iBAAA,CAEA,iBAAA,CAIA,WAAA,CACA,YAAA,CACA,kBAAA,CACA,qBAAA,CAOA,kBAAA,CCvHC,mCACP,kBAAA,CACA,2DAAA,CAFO,kCACP,kBAAA,CACA,0DAAA,CAFO,yCACP,kBAAA,CACA,4CAAA,CAFO,wCACP,kBAAA,CACA,2CAAA,CAFO,yCACP,+BAAA,CACA,yDAAA,CAFO,wCACP,+BAAA,CACA,wDAAA,CDuHM,iCACI,OAAA,CACA,SAAA,CACA,iBAAA,CACA,QAAA,CACA,OAAA,CACA,SAAA,CACA,QAAA,CAMhB,kBACI,mBAAA,CACA,yBAAA,CCxIS,yBACP,kBAAA,CACA,2DAAA,CAFO,wBACP,kBAAA,CACA,0DAAA,CDwIF,qBACI,aAAA,CACA,iBAAA,CACA,SAAA,CAGJ,4BACI,YAAA,CACA,kBAAA,CACA,mBAAA,CAAA,cAAA,CACA,cAAA,CACA,eAAA,CAEA,cAAA,CAEA,gCAGI,iBAAA,CACA,iBAAA,CAEA,aAAA,CCnKC,uCACP,yCAAA,CADO,sCACP,+CAAA,CD2KM,wCACI,UAAA,CACA,iBAAA,CACA,UATG,CAUH,WAVG,CAWH,UAAA,CAGA,iBAAA,CACA,UAAA,CACA,SAAA,CClLH,+CACP,kBAAA,CACA,4CAAA,CAFO,8CACP,kBAAA,CACA,2CAAA,CAFO,+CACP,8BAAA,CACA,wDAAA,CAFO,8CACP,8BAAA,CACA,uDAAA,CDmLM,uCACI,UAAA,CACA,iBAAA,CACA,UAAA,CACA,WAAA,CAGA,YAAA,CACA,UAAA,CC7LH,8CACP,kBAAA,CACA,2DAAA,CAFO,6CACP,kBAAA,CACA,0DAAA,CD8LM,qCAGI,oBAAA,CACA,iBAAA,CACA,iBAAA,CCrMH,4CACP,aAAA,CACA,4CAAA,CAFO,2CACP,aAAA,CACA,2CAAA,CD2MU,6CACI,WAAA,CAEJ,4CACI,WAAA,CAqBpB,eACI,yBAAA,CACA,0BAAA,CAGA,uDAEI,YAAA,CACA,kCAAA,CACA,kBAAA,CAEA,gKAGI,UAAA,CCpPC,uKACP,kBAAA,CACA,4CAAA,CAFO,sKACP,kBAAA,CACA,2CAAA,CDqPE,6DACI,cAAA,CAIR,0BACI,SAAA,CACA,iBAAA,CACA,SAAA,CAGJ,6BACI,YAAA,CACA,iBAAA,CACA,SAAA,CACA,yCAEI,QAAA,CCxQC,gDACP,aAAA,CACA,uCAAA,CAFO,+CACP,aAAA,CACA,sCAAA,CD0QF,sBACI,YAAA,CACA,cAAA,CACA,sBAAA,CACA,oBAAA,CAAA,eAAA,CACA,YAAA,CACA,eAAA,CAEA,wBACI,YAAA,CACA,iBAAA,CCtRC,+BACP,kBAAA,CACA,2DAAA,CAFO,8BACP,kBAAA,CACA,0DAAA,CAFO,+BACP,aAAA,CACA,uCAAA,CAFO,8BACP,aAAA,CACA,sCAAA,CDwRM,8BAGI,QAAA,CC7RH,qCACP,kBAAA,CACA,4CAAA,CAFO,oCACP,kBAAA,CACA,2CAAA,CAFO,qCACP,WAAA,CACA,oCAAA,CAFO,oCACP,WAAA,CACA,mCAAA,CDkSV,OACI,mBAAA,CCrSa,cACP,kBAAA,CACA,2DAAA,CAFO,aACP,kBAAA,CACA,0DAAA","file":"ui.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/theming/mixins.scss","../scss/colors.scss","../scss/ui.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+EA;AAAA;AAAA;AAAA;AAAA;AA2CA;AAAA;AAAA;AAAA;AAAA;AC1HA;AASA;ACTA;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AFsDa;EACP;;;AADO;EACP;;;AElDV;EAEI;;AAEA;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;;;AAIR;EACI;EAEA;EACA;EACA;;AACA;EACI;;AACA;EACI;;AF0BK;EACP;EACA;;;AAFO;EACP;EACA;;;AE7BF;EAGI;EACA;;AFuBK;EACP;EACA;;;AAFO;EACP;EACA;;;AExBE;EAGI;;AAIZ;EACI;EACA;;AACA;EACI;;AACA;EACI;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AFLK;EACP;EACA;;;AAFO;EACP;EACA;;;AEEF;EAGI;;;AAMR;EACI,cArEuB;EAuEvB;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAZR;EAcI;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;AFpCC;EACP;EACA;;;AAFO;EACP;EACA;;;AEqCE;EACI;EACA;EACA;;AF1CC;EACP;EACA;;;AAFO;EACP;EACA;;;AE2CE;EACI;EACA;;AAEA;EACI;EACA;;;AAOpB;EACI;EACA;EACA;;AF7Da;EACP;EACA;;;AAFO;EACP;EACA;;;AANO;EACP;;;AADO;EACP;;;AEyEN;EACI;EACA;EACA;EACA;EACA;EACA;;AAMJ;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AFzGC;EACP;EACA;;;AAFO;EACP;EACA;;;AE6FE;EAcI;EACA;EACA;EACA;;AFhHC;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AE6FE;EAwBI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAMhB;EACI;EACA;;AFxIS;EACP;EACA;;;AAFO;EACP;EACA;;;AEwIF;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAEA;;AF3JK;EACP;;;AADO;EACP;;;AE4JE;EAGI;EACA;EAEA;;AASA;EACI;EACA;EACA,OATG;EAUH,QAVG;EAWH;;AF7KH;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AEsKM;EAQI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AFzLH;EACP;EACA;;;AAFO;EACP;EACA;;;AEmLM;EAOI;EACA;;AAGJ;EAGI;EACA;EACA;;AFrMH;EACP;EACA;;;AAFO;EACP;EACA;;;AE2MU;EACI;;AAEJ;EACI;;AAqBpB;EACI;EACA;;AAGA;AAAA;EAEI;EACA;EACA;;AF/OK;EACP;EACA;;;AAFO;EACP;EACA;;;AE+OE;AAAA;AAAA;AAAA;EAGI;;AAGJ;AAAA;EACI;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AFrQK;EACP;EACA;;;AAFO;EACP;EACA;;;AEoQE;EAEI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AFtRC;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AEwRM;EAGI;;;AAOpB;EACI;;AFrSa;EACP;EACA;;;AAFO;EACP;EACA","file":"ui.css"} \ No newline at end of file From 983fae97fa8846fb1cdad2ea972a885436c87caf Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 7 Feb 2026 12:52:15 +0000 Subject: [PATCH 3/8] Fix light theme colors - use white backgrounds instead of gray Co-authored-by: BharathASL <33708810+BharathASL@users.noreply.github.com> --- css/theme.css | 38 +++++++++++++++--------------- css/ui.css | 30 +++++++++++------------ scss/theming/colorDefinitions.scss | 14 +++++------ 3 files changed, 41 insertions(+), 41 deletions(-) diff --git a/css/theme.css b/css/theme.css index cd40578..1dccd2d 100644 --- a/css/theme.css +++ b/css/theme.css @@ -68,15 +68,15 @@ /** end theme generation **/ @import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap"); html { - --theme-light-background: #979898; + --theme-light-background: #ffffff; --theme-dark-background: #272829; - --theme-light-secondary-background: #adaeae; + --theme-light-secondary-background: #eeeeee; --theme-dark-secondary-background: #515253; - --theme-light-background-3: #a2a3a3; + --theme-light-background-3: #f5f5f5; --theme-dark-background-3: #3b3c3d; - --theme-light-text: black; + --theme-light-text: #1a1a1a; --theme-dark-text: white; - --theme-light-secondary-text: #d0d0d0; + --theme-light-secondary-text: #999999; --theme-dark-secondary-text: #979898; --theme-light-brand: #f0bf6c; --theme-dark-brand: #f0bf6c; @@ -86,8 +86,8 @@ html { } .light body { - background: #adaeae; - background: var(--theme-light-secondary-background, #adaeae); + background: #eeeeee; + background: var(--theme-light-secondary-background, #eeeeee); } .dark body { @@ -96,8 +96,8 @@ html { } .light body { - color: black; - color: var(--theme-light-text, black); + color: #1a1a1a; + color: var(--theme-light-text, #1a1a1a); } .dark body { @@ -110,8 +110,8 @@ body { } .light a { - color: black; - color: var(--theme-light-text, black); + color: #1a1a1a; + color: var(--theme-light-text, #1a1a1a); } .dark a { @@ -120,8 +120,8 @@ body { } .light .container { - background-color: #979898; - background-color: var(--theme-light-background, #979898); + background-color: #ffffff; + background-color: var(--theme-light-background, #ffffff); } .dark .container { @@ -130,8 +130,8 @@ body { } .light input[type=text] { - background: #a2a3a3; - background: var(--theme-light-background-3, #a2a3a3); + background: #f5f5f5; + background: var(--theme-light-background-3, #f5f5f5); } .dark input[type=text] { @@ -140,8 +140,8 @@ body { } .light input[type=text] { - color: black; - color: var(--theme-light-text, black); + color: #1a1a1a; + color: var(--theme-light-text, #1a1a1a); } .dark input[type=text] { @@ -194,8 +194,8 @@ input[type=text]:hover, input[type=text]:focus { } .light .highlight.btn:hover { - color: black; - color: var(--theme-light-text, black); + color: #1a1a1a; + color: var(--theme-light-text, #1a1a1a); } .dark .highlight.btn:hover { diff --git a/css/ui.css b/css/ui.css index 8960fa9..83ca3b5 100644 --- a/css/ui.css +++ b/css/ui.css @@ -113,8 +113,8 @@ header > .nav * { padding: 0 10px; } .light header > .nav * { - color: #d0d0d0 !important; - color: var(--theme-light-secondary-text, #d0d0d0) !important; + color: #999999 !important; + color: var(--theme-light-secondary-text, #999999) !important; } .dark header > .nav * { @@ -292,8 +292,8 @@ div.main .banner .social svg:hover { align-self: center; } .light .topic.skills div.items > div { - background: #adaeae; - background: var(--theme-light-secondary-background, #adaeae); + background: #eeeeee; + background: var(--theme-light-secondary-background, #eeeeee); } .dark .topic.skills div.items > div { @@ -344,8 +344,8 @@ div.main .banner .social svg:hover { padding: 0 80px !important; } .light .topic.experience { - background: #adaeae; - background: var(--theme-light-secondary-background, #adaeae); + background: #eeeeee; + background: var(--theme-light-secondary-background, #eeeeee); } .dark .topic.experience { @@ -367,7 +367,7 @@ div.main .banner .social svg:hover { margin: 0 200px; } .light .topic.experience > div.items > div { - border-left: 3px solid rgba(0, 0, 0, 0.75); + border-left: 3px solid rgba(26, 26, 26, 0.75); } .dark .topic.experience > div.items > div { @@ -418,8 +418,8 @@ div.main .banner .social svg:hover { height: 56px; } .light .topic.experience > div.items > div::after { - background: #adaeae; - background: var(--theme-light-secondary-background, #adaeae); + background: #eeeeee; + background: var(--theme-light-secondary-background, #eeeeee); } .dark .topic.experience > div.items > div::after { @@ -518,8 +518,8 @@ div.main .banner .social svg:hover { border-radius: 4px; } .light .topic.contact > .items > * { - background: #adaeae; - background: var(--theme-light-secondary-background, #adaeae); + background: #eeeeee; + background: var(--theme-light-secondary-background, #eeeeee); } .dark .topic.contact > .items > * { @@ -548,8 +548,8 @@ div.main .banner .social svg:hover { } .light .topic.contact > .items > *:hover { - color: black; - color: var(--theme-light-text, black); + color: #1a1a1a; + color: var(--theme-light-text, #1a1a1a); } .dark .topic.contact > .items > *:hover { @@ -565,8 +565,8 @@ footer { margin: 0 !important; } .light footer { - background: #adaeae; - background: var(--theme-light-secondary-background, #adaeae); + background: #eeeeee; + background: var(--theme-light-secondary-background, #eeeeee); } .dark footer { diff --git a/scss/theming/colorDefinitions.scss b/scss/theming/colorDefinitions.scss index da21281..52403ca 100644 --- a/scss/theming/colorDefinitions.scss +++ b/scss/theming/colorDefinitions.scss @@ -1,11 +1,11 @@ $colors: ( - light-100: #979898, - light-200: #a2a3a3, - light-300: #adaeae, - light-400: #b9b9b9, - light-500: #c4c5c5, - light-600: #d0d0d0, - light-text: black, + light-100: #ffffff, + light-200: #f5f5f5, + light-300: #eeeeee, + light-400: #e0e0e0, + light-500: #d0d0d0, + light-600: #999999, + light-text: #1a1a1a, light-brand: #f0bf6c, light-brand-text: #f0bf6c, From 9e5580baedf52581fb1749e9dad9ec97b64a9e60 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 7 Feb 2026 13:06:43 +0000 Subject: [PATCH 4/8] Update to modern color palette with vibrant orange accent Co-authored-by: BharathASL <33708810+BharathASL@users.noreply.github.com> --- css/theme.css | 102 ++++++++-------- css/ui.css | 180 ++++++++++++++--------------- scss/theming/colorDefinitions.scss | 36 +++--- 3 files changed, 160 insertions(+), 158 deletions(-) diff --git a/css/theme.css b/css/theme.css index 1dccd2d..5cc5c0a 100644 --- a/css/theme.css +++ b/css/theme.css @@ -69,40 +69,40 @@ @import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap"); html { --theme-light-background: #ffffff; - --theme-dark-background: #272829; - --theme-light-secondary-background: #eeeeee; - --theme-dark-secondary-background: #515253; - --theme-light-background-3: #f5f5f5; - --theme-dark-background-3: #3b3c3d; - --theme-light-text: #1a1a1a; - --theme-dark-text: white; - --theme-light-secondary-text: #999999; - --theme-dark-secondary-text: #979898; - --theme-light-brand: #f0bf6c; - --theme-dark-brand: #f0bf6c; - --theme-light-brand-text: #f0bf6c; - --theme-dark-brand-text: #f0bf6c; + --theme-dark-background: #0d1117; + --theme-light-secondary-background: #e9ecef; + --theme-dark-secondary-background: #21262d; + --theme-light-background-3: #f8f9fa; + --theme-dark-background-3: #161b22; + --theme-light-text: #212529; + --theme-dark-text: #f0f6fc; + --theme-light-secondary-text: #6c757d; + --theme-dark-secondary-text: #8b949e; + --theme-light-brand: #ff6b35; + --theme-dark-brand: #ff6b35; + --theme-light-brand-text: #ff6b35; + --theme-dark-brand-text: #ff6b35; height: 100%; } .light body { - background: #eeeeee; - background: var(--theme-light-secondary-background, #eeeeee); + background: #e9ecef; + background: var(--theme-light-secondary-background, #e9ecef); } .dark body { - background: #515253; - background: var(--theme-dark-secondary-background, #515253); + background: #21262d; + background: var(--theme-dark-secondary-background, #21262d); } .light body { - color: #1a1a1a; - color: var(--theme-light-text, #1a1a1a); + color: #212529; + color: var(--theme-light-text, #212529); } .dark body { - color: white; - color: var(--theme-dark-text, white); + color: #f0f6fc; + color: var(--theme-dark-text, #f0f6fc); } body { @@ -110,13 +110,13 @@ body { } .light a { - color: #1a1a1a; - color: var(--theme-light-text, #1a1a1a); + color: #212529; + color: var(--theme-light-text, #212529); } .dark a { - color: white; - color: var(--theme-dark-text, white); + color: #f0f6fc; + color: var(--theme-dark-text, #f0f6fc); } .light .container { @@ -125,28 +125,28 @@ body { } .dark .container { - background-color: #272829; - background-color: var(--theme-dark-background, #272829); + background-color: #0d1117; + background-color: var(--theme-dark-background, #0d1117); } .light input[type=text] { - background: #f5f5f5; - background: var(--theme-light-background-3, #f5f5f5); + background: #f8f9fa; + background: var(--theme-light-background-3, #f8f9fa); } .dark input[type=text] { - background: #3b3c3d; - background: var(--theme-dark-background-3, #3b3c3d); + background: #161b22; + background: var(--theme-dark-background-3, #161b22); } .light input[type=text] { - color: #1a1a1a; - color: var(--theme-light-text, #1a1a1a); + color: #212529; + color: var(--theme-light-text, #212529); } .dark input[type=text] { - color: white; - color: var(--theme-dark-text, white); + color: #f0f6fc; + color: var(--theme-dark-text, #f0f6fc); } input[type=text] { @@ -164,43 +164,43 @@ input[type=text]:hover, input[type=text]:focus { } .light .highlight { - color: #f0bf6c; - color: var(--theme-light-brand-text, #f0bf6c); + color: #ff6b35; + color: var(--theme-light-brand-text, #ff6b35); } .dark .highlight { - color: #f0bf6c; - color: var(--theme-dark-brand-text, #f0bf6c); + color: #ff6b35; + color: var(--theme-dark-brand-text, #ff6b35); } .light .highlight.btn { - border: 1px solid #f0bf6c !important; - border: 1px solid var(--theme-light-brand-text, #f0bf6c) !important; + border: 1px solid #ff6b35 !important; + border: 1px solid var(--theme-light-brand-text, #ff6b35) !important; } .dark .highlight.btn { - border: 1px solid #f0bf6c !important; - border: 1px solid var(--theme-dark-brand-text, #f0bf6c) !important; + border: 1px solid #ff6b35 !important; + border: 1px solid var(--theme-dark-brand-text, #ff6b35) !important; } .light .highlight.btn:hover { - background: #f0bf6c !important; - background: var(--theme-light-brand-text, #f0bf6c) !important; + background: #ff6b35 !important; + background: var(--theme-light-brand-text, #ff6b35) !important; } .dark .highlight.btn:hover { - background: #f0bf6c !important; - background: var(--theme-dark-brand-text, #f0bf6c) !important; + background: #ff6b35 !important; + background: var(--theme-dark-brand-text, #ff6b35) !important; } .light .highlight.btn:hover { - color: #1a1a1a; - color: var(--theme-light-text, #1a1a1a); + color: #212529; + color: var(--theme-light-text, #212529); } .dark .highlight.btn:hover { - color: white; - color: var(--theme-dark-text, white); + color: #f0f6fc; + color: var(--theme-dark-text, #f0f6fc); } .highlight.btn:hover { diff --git a/css/ui.css b/css/ui.css index 83ca3b5..ca85e52 100644 --- a/css/ui.css +++ b/css/ui.css @@ -79,11 +79,11 @@ body { } .light body > .container { - box-shadow: 0 0 20px -10px rgba(240, 191, 108, 0.5); + box-shadow: 0 0 20px -10px rgba(255, 107, 53, 0.5); } .dark body > .container { - box-shadow: 0 0 20px -10px rgba(240, 191, 108, 0.5); + box-shadow: 0 0 20px -10px rgba(255, 107, 53, 0.5); } body > .container { @@ -113,13 +113,13 @@ header > .nav * { padding: 0 10px; } .light header > .nav * { - color: #999999 !important; - color: var(--theme-light-secondary-text, #999999) !important; + color: #6c757d !important; + color: var(--theme-light-secondary-text, #6c757d) !important; } .dark header > .nav * { - color: #979898 !important; - color: var(--theme-dark-secondary-text, #979898) !important; + color: #8b949e !important; + color: var(--theme-dark-secondary-text, #8b949e) !important; } header > .nav * { @@ -127,13 +127,13 @@ header > .nav * { line-height: 1.5; } .light header > .nav *:hover, header > .nav *.active { - color: #f0bf6c !important; - color: var(--theme-light-brand-text, #f0bf6c) !important; + color: #ff6b35 !important; + color: var(--theme-light-brand-text, #ff6b35) !important; } .dark header > .nav *:hover, header > .nav *.active { - color: #f0bf6c !important; - color: var(--theme-dark-brand-text, #f0bf6c) !important; + color: #ff6b35 !important; + color: var(--theme-dark-brand-text, #ff6b35) !important; } header > .nav *:hover, header > .nav *.active { @@ -162,13 +162,13 @@ header > .search:focus-within > svg { opacity: 1; } .light header > .search:focus-within > svg { - background: #f0bf6c; - background: var(--theme-light-brand, #f0bf6c); + background: #ff6b35; + background: var(--theme-light-brand, #ff6b35); } .dark header > .search:focus-within > svg { - background: #f0bf6c; - background: var(--theme-dark-brand, #f0bf6c); + background: #ff6b35; + background: var(--theme-dark-brand, #ff6b35); } header > .search:focus-within > svg { @@ -204,13 +204,13 @@ div.main .banner .social * { margin: 10px; } .light div.main .banner .social * { - color: #f0bf6c; - color: var(--theme-light-brand-text, #f0bf6c); + color: #ff6b35; + color: var(--theme-light-brand-text, #ff6b35); } .dark div.main .banner .social * { - color: #f0bf6c; - color: var(--theme-dark-brand-text, #f0bf6c); + color: #ff6b35; + color: var(--theme-dark-brand-text, #ff6b35); } div.main .banner .social .line { @@ -219,13 +219,13 @@ div.main .banner .social .line { width: 3px; } .light div.main .banner .social .line { - background: #f0bf6c; - background: var(--theme-light-brand, #f0bf6c); + background: #ff6b35; + background: var(--theme-light-brand, #ff6b35); } .dark div.main .banner .social .line { - background: #f0bf6c; - background: var(--theme-dark-brand, #f0bf6c); + background: #ff6b35; + background: var(--theme-dark-brand, #ff6b35); } div.main .banner .social svg { @@ -243,21 +243,21 @@ div.main .banner .social svg:hover { height: 3px; } .light .hr-line { - background: #f0bf6c; - background: var(--theme-light-brand, #f0bf6c); + background: #ff6b35; + background: var(--theme-light-brand, #ff6b35); } .dark .hr-line { - background: #f0bf6c; - background: var(--theme-dark-brand, #f0bf6c); + background: #ff6b35; + background: var(--theme-dark-brand, #ff6b35); } .light .topic h1 { - text-shadow: 0 0 20px rgba(240, 191, 108, 0.3); + text-shadow: 0 0 20px rgba(255, 107, 53, 0.3); } .dark .topic h1 { - text-shadow: 0 0 20px rgba(240, 191, 108, 0.3); + text-shadow: 0 0 20px rgba(255, 107, 53, 0.3); } .topic.about > div { @@ -292,13 +292,13 @@ div.main .banner .social svg:hover { align-self: center; } .light .topic.skills div.items > div { - background: #eeeeee; - background: var(--theme-light-secondary-background, #eeeeee); + background: #e9ecef; + background: var(--theme-light-secondary-background, #e9ecef); } .dark .topic.skills div.items > div { - background: #515253; - background: var(--theme-dark-secondary-background, #515253); + background: #21262d; + background: var(--theme-dark-secondary-background, #21262d); } .topic.skills div.items > div { @@ -308,23 +308,23 @@ div.main .banner .social svg:hover { box-sizing: border-box; } .light .topic.skills div.items > div:hover { - background: #f0bf6c; - background: var(--theme-light-brand, #f0bf6c); + background: #ff6b35; + background: var(--theme-light-brand, #ff6b35); } .dark .topic.skills div.items > div:hover { - background: #f0bf6c; - background: var(--theme-dark-brand, #f0bf6c); + background: #ff6b35; + background: var(--theme-dark-brand, #ff6b35); } .light .topic.skills div.items > div:hover { - box-shadow: 0 0 10px 1px #f0bf6c; - box-shadow: 0 0 10px 1px var(--theme-light-brand, #f0bf6c); + box-shadow: 0 0 10px 1px #ff6b35; + box-shadow: 0 0 10px 1px var(--theme-light-brand, #ff6b35); } .dark .topic.skills div.items > div:hover { - box-shadow: 0 0 10px 1px #f0bf6c; - box-shadow: 0 0 10px 1px var(--theme-dark-brand, #f0bf6c); + box-shadow: 0 0 10px 1px #ff6b35; + box-shadow: 0 0 10px 1px var(--theme-dark-brand, #ff6b35); } .topic.skills div.items > div { @@ -344,13 +344,13 @@ div.main .banner .social svg:hover { padding: 0 80px !important; } .light .topic.experience { - background: #eeeeee; - background: var(--theme-light-secondary-background, #eeeeee); + background: #e9ecef; + background: var(--theme-light-secondary-background, #e9ecef); } .dark .topic.experience { - background: #515253; - background: var(--theme-dark-secondary-background, #515253); + background: #21262d; + background: var(--theme-dark-secondary-background, #21262d); } .topic.experience > h1 { @@ -367,11 +367,11 @@ div.main .banner .social svg:hover { margin: 0 200px; } .light .topic.experience > div.items > div { - border-left: 3px solid rgba(26, 26, 26, 0.75); + border-left: 3px solid rgba(33, 37, 41, 0.75); } .dark .topic.experience > div.items > div { - border-left: 3px solid rgba(255, 255, 255, 0.75); + border-left: 3px solid rgba(240, 246, 252, 0.75); } .topic.experience > div.items > div { @@ -387,23 +387,23 @@ div.main .banner .social svg:hover { margin: 5px; } .light .topic.experience > div.items > div::before { - background: #f0bf6c; - background: var(--theme-light-brand, #f0bf6c); + background: #ff6b35; + background: var(--theme-light-brand, #ff6b35); } .dark .topic.experience > div.items > div::before { - background: #f0bf6c; - background: var(--theme-dark-brand, #f0bf6c); + background: #ff6b35; + background: var(--theme-dark-brand, #ff6b35); } .light .topic.experience > div.items > div::before { - box-shadow: 0 0 5px 5px #f0bf6c; - box-shadow: 0 0 5px 5px var(--theme-light-brand, #f0bf6c); + box-shadow: 0 0 5px 5px #ff6b35; + box-shadow: 0 0 5px 5px var(--theme-light-brand, #ff6b35); } .dark .topic.experience > div.items > div::before { - box-shadow: 0 0 5px 5px #f0bf6c; - box-shadow: 0 0 5px 5px var(--theme-dark-brand, #f0bf6c); + box-shadow: 0 0 5px 5px #ff6b35; + box-shadow: 0 0 5px 5px var(--theme-dark-brand, #ff6b35); } .topic.experience > div.items > div::before { @@ -418,13 +418,13 @@ div.main .banner .social svg:hover { height: 56px; } .light .topic.experience > div.items > div::after { - background: #eeeeee; - background: var(--theme-light-secondary-background, #eeeeee); + background: #e9ecef; + background: var(--theme-light-secondary-background, #e9ecef); } .dark .topic.experience > div.items > div::after { - background: #515253; - background: var(--theme-dark-secondary-background, #515253); + background: #21262d; + background: var(--theme-dark-secondary-background, #21262d); } .topic.experience > div.items > div::after { @@ -437,13 +437,13 @@ div.main .banner .social svg:hover { font-style: italic; } .light .topic.experience > div.items > div > span { - color: #f0bf6c; - color: var(--theme-light-brand-text, #f0bf6c); + color: #ff6b35; + color: var(--theme-light-brand-text, #ff6b35); } .dark .topic.experience > div.items > div > span { - color: #f0bf6c; - color: var(--theme-dark-brand-text, #f0bf6c); + color: #ff6b35; + color: var(--theme-dark-brand-text, #ff6b35); } .topic.experience > div.items > div > span::before { @@ -463,13 +463,13 @@ div.main .banner .social svg:hover { align-items: center; } .light .topic.contact > .top-title > :first-child, .topic.contact > .top-title > :last-child, .topic.contact > .bottom-title > :first-child, .topic.contact > .bottom-title > :last-child { - background: #f0bf6c; - background: var(--theme-light-brand, #f0bf6c); + background: #ff6b35; + background: var(--theme-light-brand, #ff6b35); } .dark .topic.contact > .top-title > :first-child, .topic.contact > .top-title > :last-child, .topic.contact > .bottom-title > :first-child, .topic.contact > .bottom-title > :last-child { - background: #f0bf6c; - background: var(--theme-dark-brand, #f0bf6c); + background: #ff6b35; + background: var(--theme-dark-brand, #ff6b35); } .topic.contact > .top-title > :first-child, @@ -493,13 +493,13 @@ div.main .banner .social svg:hover { z-index: 0; } .light .topic.contact > .bottom-title > div > a:hover { - color: #f0bf6c; - color: var(--theme-light-brand, #f0bf6c); + color: #ff6b35; + color: var(--theme-light-brand, #ff6b35); } .dark .topic.contact > .bottom-title > div > a:hover { - color: #f0bf6c; - color: var(--theme-dark-brand, #f0bf6c); + color: #ff6b35; + color: var(--theme-dark-brand, #ff6b35); } .topic.contact > .bottom-title > div > a:hover { @@ -518,43 +518,43 @@ div.main .banner .social svg:hover { border-radius: 4px; } .light .topic.contact > .items > * { - background: #eeeeee; - background: var(--theme-light-secondary-background, #eeeeee); + background: #e9ecef; + background: var(--theme-light-secondary-background, #e9ecef); } .dark .topic.contact > .items > * { - background: #515253; - background: var(--theme-dark-secondary-background, #515253); + background: #21262d; + background: var(--theme-dark-secondary-background, #21262d); } .light .topic.contact > .items > * { - color: #f0bf6c; - color: var(--theme-light-brand, #f0bf6c); + color: #ff6b35; + color: var(--theme-light-brand, #ff6b35); } .dark .topic.contact > .items > * { - color: #f0bf6c; - color: var(--theme-dark-brand, #f0bf6c); + color: #ff6b35; + color: var(--theme-dark-brand, #ff6b35); } .light .topic.contact > .items > *:hover { - background: #f0bf6c; - background: var(--theme-light-brand, #f0bf6c); + background: #ff6b35; + background: var(--theme-light-brand, #ff6b35); } .dark .topic.contact > .items > *:hover { - background: #f0bf6c; - background: var(--theme-dark-brand, #f0bf6c); + background: #ff6b35; + background: var(--theme-dark-brand, #ff6b35); } .light .topic.contact > .items > *:hover { - color: #1a1a1a; - color: var(--theme-light-text, #1a1a1a); + color: #212529; + color: var(--theme-light-text, #212529); } .dark .topic.contact > .items > *:hover { - color: white; - color: var(--theme-dark-text, white); + color: #f0f6fc; + color: var(--theme-dark-text, #f0f6fc); } .topic.contact > .items > *:hover { @@ -565,13 +565,13 @@ footer { margin: 0 !important; } .light footer { - background: #eeeeee; - background: var(--theme-light-secondary-background, #eeeeee); + background: #e9ecef; + background: var(--theme-light-secondary-background, #e9ecef); } .dark footer { - background: #515253; - background: var(--theme-dark-secondary-background, #515253); + background: #21262d; + background: var(--theme-dark-secondary-background, #21262d); } /*# sourceMappingURL=ui.css.map */ diff --git a/scss/theming/colorDefinitions.scss b/scss/theming/colorDefinitions.scss index 52403ca..ab93819 100644 --- a/scss/theming/colorDefinitions.scss +++ b/scss/theming/colorDefinitions.scss @@ -1,23 +1,25 @@ $colors: ( + // Light theme - Clean and modern with soft backgrounds light-100: #ffffff, - light-200: #f5f5f5, - light-300: #eeeeee, - light-400: #e0e0e0, - light-500: #d0d0d0, - light-600: #999999, - light-text: #1a1a1a, - light-brand: #f0bf6c, - light-brand-text: #f0bf6c, + light-200: #f8f9fa, + light-300: #e9ecef, + light-400: #dee2e6, + light-500: #adb5bd, + light-600: #6c757d, + light-text: #212529, + light-brand: #ff6b35, + light-brand-text: #ff6b35, - dark-100: #272829, - dark-200: #3b3c3d, - dark-300: #515253, - dark-400: #676869, - dark-500: #7f8080, - dark-600: #979898, - dark-text: white, - dark-brand: #f0bf6c, - dark-brand-text: #f0bf6c, + // Dark theme - Rich blue-gray with excellent contrast + dark-100: #0d1117, + dark-200: #161b22, + dark-300: #21262d, + dark-400: #30363d, + dark-500: #484f58, + dark-600: #8b949e, + dark-text: #f0f6fc, + dark-brand: #ff6b35, + dark-brand-text: #ff6b35, mixed-100: #5c5d5e, mixed-200: #6d6d6e, From 279489a81f872fe7b164d2aef1fcd0bc147d5534 Mon Sep 17 00:00:00 2001 From: Bharath Sendhurpandi Date: Sat, 7 Feb 2026 14:02:41 +0000 Subject: [PATCH 5/8] Add themed background pattern and soften light palette --- assests/images/background-pattern.svg | 1 + css/theme.css | 82 +++++++++++++++++++++------ css/ui.css | 6 +- scss/theme.scss | 15 +++++ scss/theming/colorDefinitions.scss | 14 ++--- scss/theming/dark.scss | 5 +- scss/theming/light.scss | 5 +- scss/ui.scss | 2 + 8 files changed, 102 insertions(+), 28 deletions(-) create mode 100644 assests/images/background-pattern.svg diff --git a/assests/images/background-pattern.svg b/assests/images/background-pattern.svg new file mode 100644 index 0000000..8f08f21 --- /dev/null +++ b/assests/images/background-pattern.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/css/theme.css b/css/theme.css index 5cc5c0a..a8134ea 100644 --- a/css/theme.css +++ b/css/theme.css @@ -68,26 +68,32 @@ /** end theme generation **/ @import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap"); html { - --theme-light-background: #ffffff; + --theme-light-background: #ece6df; --theme-dark-background: #0d1117; - --theme-light-secondary-background: #e9ecef; + --theme-light-secondary-background: #e2d7cf; --theme-dark-secondary-background: #21262d; - --theme-light-background-3: #f8f9fa; + --theme-light-background-3: #f2ece6; --theme-dark-background-3: #161b22; - --theme-light-text: #212529; + --theme-light-text: #1f2322; --theme-dark-text: #f0f6fc; - --theme-light-secondary-text: #6c757d; + --theme-light-secondary-text: #5f5a55; --theme-dark-secondary-text: #8b949e; --theme-light-brand: #ff6b35; --theme-dark-brand: #ff6b35; --theme-light-brand-text: #ff6b35; --theme-dark-brand-text: #ff6b35; + --theme-light-background-pattern: url("/assests/images/background-pattern.svg"); + --theme-dark-background-pattern: url("/assests/images/background-pattern.svg"); + --theme-light-background-pattern-opacity: 0.12; + --theme-dark-background-pattern-opacity: 0.18; + --theme-light-background-pattern-filter: none; + --theme-dark-background-pattern-filter: none; height: 100%; } .light body { - background: #e9ecef; - background: var(--theme-light-secondary-background, #e9ecef); + background: #e2d7cf; + background: var(--theme-light-secondary-background, #e2d7cf); } .dark body { @@ -96,8 +102,8 @@ html { } .light body { - color: #212529; - color: var(--theme-light-text, #212529); + color: #1f2322; + color: var(--theme-light-text, #1f2322); } .dark body { @@ -107,11 +113,53 @@ html { body { font-family: "Josefin Sans", sans-serif; + position: relative; +} + +body::before { + content: ""; + position: fixed; + inset: 0; + pointer-events: none; + z-index: 0; + background-repeat: repeat; + background-size: 512px 512px; + background-position: center; +} + +.light body::before { + background-image: url("/assests/images/background-pattern.svg"); + background-image: var(--theme-light-background-pattern, url("/assests/images/background-pattern.svg")); +} + +.dark body::before { + background-image: url("/assests/images/background-pattern.svg"); + background-image: var(--theme-dark-background-pattern, url("/assests/images/background-pattern.svg")); +} + +.light body::before { + opacity: 0.35; + opacity: var(--theme-light-background-pattern-opacity, 0.35); +} + +.dark body::before { + opacity: 0.18; + opacity: var(--theme-dark-background-pattern-opacity, 0.18); +} + +.light body::before { + filter: none; + filter: var(--theme-light-background-pattern-filter, none); +} + +.dark body::before { + filter: none; + filter: var(--theme-dark-background-pattern-filter, none); } .light a { - color: #212529; - color: var(--theme-light-text, #212529); + color: #1f2322; + color: var(--theme-light-text, #1f2322); } .dark a { @@ -120,8 +168,8 @@ body { } .light .container { - background-color: #ffffff; - background-color: var(--theme-light-background, #ffffff); + background-color: #ece6df; + background-color: var(--theme-light-background, #ece6df); } .dark .container { @@ -130,8 +178,8 @@ body { } .light input[type=text] { - background: #f8f9fa; - background: var(--theme-light-background-3, #f8f9fa); + background: #f2ece6; + background: var(--theme-light-background-3, #f2ece6); } .dark input[type=text] { @@ -140,8 +188,8 @@ body { } .light input[type=text] { - color: #212529; - color: var(--theme-light-text, #212529); + color: #1f2322; + color: var(--theme-light-text, #1f2322); } .dark input[type=text] { diff --git a/css/ui.css b/css/ui.css index ca85e52..e78fad6 100644 --- a/css/ui.css +++ b/css/ui.css @@ -88,6 +88,8 @@ body { body > .container { padding: 0; + position: relative; + z-index: 1; } body > .container > header { margin: 0 80px !important; @@ -113,8 +115,8 @@ header > .nav * { padding: 0 10px; } .light header > .nav * { - color: #6c757d !important; - color: var(--theme-light-secondary-text, #6c757d) !important; + color: #5f5a55 !important; + color: var(--theme-light-secondary-text, #5f5a55) !important; } .dark header > .nav * { diff --git a/scss/theme.scss b/scss/theme.scss index 94a3f9d..9be5d0a 100644 --- a/scss/theme.scss +++ b/scss/theme.scss @@ -10,6 +10,21 @@ body { @include theme(background, secondary-background); @include theme(color, text); font-family: "Josefin Sans", sans-serif; + position: relative; +} + +body::before { + content: ""; + position: fixed; + inset: 0; + pointer-events: none; + z-index: 0; + background-repeat: repeat; + background-size: 512px 512px; + background-position: center; + @include theme(background-image, background-pattern); + @include theme(opacity, background-pattern-opacity); + @include theme(filter, background-pattern-filter); } a { diff --git a/scss/theming/colorDefinitions.scss b/scss/theming/colorDefinitions.scss index ab93819..25839ac 100644 --- a/scss/theming/colorDefinitions.scss +++ b/scss/theming/colorDefinitions.scss @@ -1,12 +1,12 @@ $colors: ( // Light theme - Clean and modern with soft backgrounds - light-100: #ffffff, - light-200: #f8f9fa, - light-300: #e9ecef, - light-400: #dee2e6, - light-500: #adb5bd, - light-600: #6c757d, - light-text: #212529, + light-100: #ece6df, + light-200: #f2ece6, + light-300: #e2d7cf, + light-400: #d5c7bd, + light-500: #b4a99f, + light-600: #5f5a55, + light-text: #1f2322, light-brand: #ff6b35, light-brand-text: #ff6b35, diff --git a/scss/theming/dark.scss b/scss/theming/dark.scss index 3651a21..a817902 100644 --- a/scss/theming/dark.scss +++ b/scss/theming/dark.scss @@ -7,5 +7,8 @@ $dark: ( text: color(dark-text), secondary-text: color(dark-600), brand: color(dark-brand), - brand-text: color(dark-brand-text) + brand-text: color(dark-brand-text), + background-pattern: url("/assests/images/background-pattern.svg"), + background-pattern-opacity: 0.18, + background-pattern-filter: none ); diff --git a/scss/theming/light.scss b/scss/theming/light.scss index 84f2ca4..f717d48 100644 --- a/scss/theming/light.scss +++ b/scss/theming/light.scss @@ -7,5 +7,8 @@ $light: ( text: color(light-text), secondary-text: color(light-600), brand: color(light-brand), - brand-text: color(light-brand-text) + brand-text: color(light-brand-text), + background-pattern: url("/assests/images/background-pattern.svg"), + background-pattern-opacity: 0.12, + background-pattern-filter: none ); diff --git a/scss/ui.scss b/scss/ui.scss index 69c961e..b24092c 100644 --- a/scss/ui.scss +++ b/scss/ui.scss @@ -16,6 +16,8 @@ $container-padding-horizontal: 80px; body > .container { @include theme(box-shadow, brand, 0 0 20px -10px, null, 0.5); + position: relative; + z-index: 1; padding: 0; > header { From 18ec05e86dcf670644cc3260b3ecbd46b37f07e8 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 7 Feb 2026 14:07:22 +0000 Subject: [PATCH 6/8] Fix background pattern visibility with proper filters and opacity Co-authored-by: BharathASL <33708810+BharathASL@users.noreply.github.com> --- css/theme.css | 29 ++++++++++++++--------------- css/theme.css.map | 2 +- css/ui.css | 28 ++++++++++++++-------------- css/ui.css.map | 2 +- scss/theming/dark.scss | 4 ++-- scss/theming/light.scss | 4 ++-- 6 files changed, 34 insertions(+), 35 deletions(-) diff --git a/css/theme.css b/css/theme.css index a8134ea..f0acfd5 100644 --- a/css/theme.css +++ b/css/theme.css @@ -84,10 +84,10 @@ html { --theme-dark-brand-text: #ff6b35; --theme-light-background-pattern: url("/assests/images/background-pattern.svg"); --theme-dark-background-pattern: url("/assests/images/background-pattern.svg"); - --theme-light-background-pattern-opacity: 0.12; - --theme-dark-background-pattern-opacity: 0.18; - --theme-light-background-pattern-filter: none; - --theme-dark-background-pattern-filter: none; + --theme-light-background-pattern-opacity: 0.05; + --theme-dark-background-pattern-opacity: 0.08; + --theme-light-background-pattern-filter: grayscale(1) opacity(0.3); + --theme-dark-background-pattern-filter: invert(1) hue-rotate(180deg); height: 100%; } @@ -126,7 +126,6 @@ body::before { background-size: 512px 512px; background-position: center; } - .light body::before { background-image: url("/assests/images/background-pattern.svg"); background-image: var(--theme-light-background-pattern, url("/assests/images/background-pattern.svg")); @@ -138,23 +137,23 @@ body::before { } .light body::before { - opacity: 0.35; - opacity: var(--theme-light-background-pattern-opacity, 0.35); + opacity: 0.05; + opacity: var(--theme-light-background-pattern-opacity, 0.05); } .dark body::before { - opacity: 0.18; - opacity: var(--theme-dark-background-pattern-opacity, 0.18); + opacity: 0.08; + opacity: var(--theme-dark-background-pattern-opacity, 0.08); } .light body::before { - filter: none; - filter: var(--theme-light-background-pattern-filter, none); + filter: grayscale(1) opacity(0.3); + filter: var(--theme-light-background-pattern-filter, grayscale(1) opacity(0.3)); } .dark body::before { - filter: none; - filter: var(--theme-dark-background-pattern-filter, none); + filter: invert(1) hue-rotate(180deg); + filter: var(--theme-dark-background-pattern-filter, invert(1) hue-rotate(180deg)); } .light a { @@ -242,8 +241,8 @@ input[type=text]:hover, input[type=text]:focus { } .light .highlight.btn:hover { - color: #212529; - color: var(--theme-light-text, #212529); + color: #1f2322; + color: var(--theme-light-text, #1f2322); } .dark .highlight.btn:hover { diff --git a/css/theme.css.map b/css/theme.css.map index 2437859..5fcaef1 100644 --- a/css/theme.css.map +++ b/css/theme.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/theming/mixins.scss","../scss/colors.scss","../scss/theme.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+EA;AAAA;AAAA;AAAA;AAAA;AA2CA;AAAA;AAAA;AAAA;AAAA;AC1HA;AASA;ACVQ;AAER;EFkIQ;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EEhIJ;;;AFgEa;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AE/DV;EAGI;;;AF0Da;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AEjDV;EAGI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAEI;;;AFkCS;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AEzBN;EAGI;;AAGJ;EACI;EACA","file":"theme.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/theming/mixins.scss","../scss/colors.scss","../scss/theme.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+EA;AAAA;AAAA;AAAA;AAAA;AA2CA;AAAA;AAAA;AAAA;AAAA;AC1HA;AASA;ACVQ;AAER;EFkIQ;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EEhIJ;;;AFgEa;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AE/DV;EAGI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AF8Ca;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AElCV;EAGI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAEI;;;AFmBS;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AEVN;EAGI;;AAGJ;EACI;EACA","file":"theme.css"} \ No newline at end of file diff --git a/css/ui.css b/css/ui.css index e78fad6..8c89d8d 100644 --- a/css/ui.css +++ b/css/ui.css @@ -87,9 +87,9 @@ body { } body > .container { - padding: 0; position: relative; z-index: 1; + padding: 0; } body > .container > header { margin: 0 80px !important; @@ -294,8 +294,8 @@ div.main .banner .social svg:hover { align-self: center; } .light .topic.skills div.items > div { - background: #e9ecef; - background: var(--theme-light-secondary-background, #e9ecef); + background: #e2d7cf; + background: var(--theme-light-secondary-background, #e2d7cf); } .dark .topic.skills div.items > div { @@ -346,8 +346,8 @@ div.main .banner .social svg:hover { padding: 0 80px !important; } .light .topic.experience { - background: #e9ecef; - background: var(--theme-light-secondary-background, #e9ecef); + background: #e2d7cf; + background: var(--theme-light-secondary-background, #e2d7cf); } .dark .topic.experience { @@ -369,7 +369,7 @@ div.main .banner .social svg:hover { margin: 0 200px; } .light .topic.experience > div.items > div { - border-left: 3px solid rgba(33, 37, 41, 0.75); + border-left: 3px solid rgba(31, 35, 34, 0.75); } .dark .topic.experience > div.items > div { @@ -420,8 +420,8 @@ div.main .banner .social svg:hover { height: 56px; } .light .topic.experience > div.items > div::after { - background: #e9ecef; - background: var(--theme-light-secondary-background, #e9ecef); + background: #e2d7cf; + background: var(--theme-light-secondary-background, #e2d7cf); } .dark .topic.experience > div.items > div::after { @@ -520,8 +520,8 @@ div.main .banner .social svg:hover { border-radius: 4px; } .light .topic.contact > .items > * { - background: #e9ecef; - background: var(--theme-light-secondary-background, #e9ecef); + background: #e2d7cf; + background: var(--theme-light-secondary-background, #e2d7cf); } .dark .topic.contact > .items > * { @@ -550,8 +550,8 @@ div.main .banner .social svg:hover { } .light .topic.contact > .items > *:hover { - color: #212529; - color: var(--theme-light-text, #212529); + color: #1f2322; + color: var(--theme-light-text, #1f2322); } .dark .topic.contact > .items > *:hover { @@ -567,8 +567,8 @@ footer { margin: 0 !important; } .light footer { - background: #e9ecef; - background: var(--theme-light-secondary-background, #e9ecef); + background: #e2d7cf; + background: var(--theme-light-secondary-background, #e2d7cf); } .dark footer { diff --git a/css/ui.css.map b/css/ui.css.map index 2fe2ce8..97c0d9e 100644 --- a/css/ui.css.map +++ b/css/ui.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/theming/mixins.scss","../scss/colors.scss","../scss/ui.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+EA;AAAA;AAAA;AAAA;AAAA;AA2CA;AAAA;AAAA;AAAA;AAAA;AC1HA;AASA;ACTA;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AFsDa;EACP;;;AADO;EACP;;;AElDV;EAEI;;AAEA;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;;;AAIR;EACI;EAEA;EACA;EACA;;AACA;EACI;;AACA;EACI;;AF0BK;EACP;EACA;;;AAFO;EACP;EACA;;;AE7BF;EAGI;EACA;;AFuBK;EACP;EACA;;;AAFO;EACP;EACA;;;AExBE;EAGI;;AAIZ;EACI;EACA;;AACA;EACI;;AACA;EACI;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AFLK;EACP;EACA;;;AAFO;EACP;EACA;;;AEEF;EAGI;;;AAMR;EACI,cArEuB;EAuEvB;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAZR;EAcI;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;AFpCC;EACP;EACA;;;AAFO;EACP;EACA;;;AEqCE;EACI;EACA;EACA;;AF1CC;EACP;EACA;;;AAFO;EACP;EACA;;;AE2CE;EACI;EACA;;AAEA;EACI;EACA;;;AAOpB;EACI;EACA;EACA;;AF7Da;EACP;EACA;;;AAFO;EACP;EACA;;;AANO;EACP;;;AADO;EACP;;;AEyEN;EACI;EACA;EACA;EACA;EACA;EACA;;AAMJ;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AFzGC;EACP;EACA;;;AAFO;EACP;EACA;;;AE6FE;EAcI;EACA;EACA;EACA;;AFhHC;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AE6FE;EAwBI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAMhB;EACI;EACA;;AFxIS;EACP;EACA;;;AAFO;EACP;EACA;;;AEwIF;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAEA;;AF3JK;EACP;;;AADO;EACP;;;AE4JE;EAGI;EACA;EAEA;;AASA;EACI;EACA;EACA,OATG;EAUH,QAVG;EAWH;;AF7KH;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AEsKM;EAQI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AFzLH;EACP;EACA;;;AAFO;EACP;EACA;;;AEmLM;EAOI;EACA;;AAGJ;EAGI;EACA;EACA;;AFrMH;EACP;EACA;;;AAFO;EACP;EACA;;;AE2MU;EACI;;AAEJ;EACI;;AAqBpB;EACI;EACA;;AAGA;AAAA;EAEI;EACA;EACA;;AF/OK;EACP;EACA;;;AAFO;EACP;EACA;;;AE+OE;AAAA;AAAA;AAAA;EAGI;;AAGJ;AAAA;EACI;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AFrQK;EACP;EACA;;;AAFO;EACP;EACA;;;AEoQE;EAEI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AFtRC;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AEwRM;EAGI;;;AAOpB;EACI;;AFrSa;EACP;EACA;;;AAFO;EACP;EACA","file":"ui.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/theming/mixins.scss","../scss/colors.scss","../scss/ui.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+EA;AAAA;AAAA;AAAA;AAAA;AA2CA;AAAA;AAAA;AAAA;AAAA;AC1HA;AASA;ACTA;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AFsDa;EACP;;;AADO;EACP;;;AElDV;EAEI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;;;AAIR;EACI;EAEA;EACA;EACA;;AACA;EACI;;AACA;EACI;;AFwBK;EACP;EACA;;;AAFO;EACP;EACA;;;AE3BF;EAGI;EACA;;AFqBK;EACP;EACA;;;AAFO;EACP;EACA;;;AEtBE;EAGI;;AAIZ;EACI;EACA;;AACA;EACI;;AACA;EACI;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AFPK;EACP;EACA;;;AAFO;EACP;EACA;;;AEIF;EAGI;;;AAMR;EACI,cAvEuB;EAyEvB;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAZR;EAcI;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;AFtCC;EACP;EACA;;;AAFO;EACP;EACA;;;AEuCE;EACI;EACA;EACA;;AF5CC;EACP;EACA;;;AAFO;EACP;EACA;;;AE6CE;EACI;EACA;;AAEA;EACI;EACA;;;AAOpB;EACI;EACA;EACA;;AF/Da;EACP;EACA;;;AAFO;EACP;EACA;;;AANO;EACP;;;AADO;EACP;;;AE2EN;EACI;EACA;EACA;EACA;EACA;EACA;;AAMJ;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AF3GC;EACP;EACA;;;AAFO;EACP;EACA;;;AE+FE;EAcI;EACA;EACA;EACA;;AFlHC;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AE+FE;EAwBI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAMhB;EACI;EACA;;AF1IS;EACP;EACA;;;AAFO;EACP;EACA;;;AE0IF;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAEA;;AF7JK;EACP;;;AADO;EACP;;;AE8JE;EAGI;EACA;EAEA;;AASA;EACI;EACA;EACA,OATG;EAUH,QAVG;EAWH;;AF/KH;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AEwKM;EAQI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AF3LH;EACP;EACA;;;AAFO;EACP;EACA;;;AEqLM;EAOI;EACA;;AAGJ;EAGI;EACA;EACA;;AFvMH;EACP;EACA;;;AAFO;EACP;EACA;;;AE6MU;EACI;;AAEJ;EACI;;AAqBpB;EACI;EACA;;AAGA;AAAA;EAEI;EACA;EACA;;AFjPK;EACP;EACA;;;AAFO;EACP;EACA;;;AEiPE;AAAA;AAAA;AAAA;EAGI;;AAGJ;AAAA;EACI;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AFvQK;EACP;EACA;;;AAFO;EACP;EACA;;;AEsQE;EAEI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AFxRC;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AE0RM;EAGI;;;AAOpB;EACI;;AFvSa;EACP;EACA;;;AAFO;EACP;EACA","file":"ui.css"} \ No newline at end of file diff --git a/scss/theming/dark.scss b/scss/theming/dark.scss index a817902..5e1549b 100644 --- a/scss/theming/dark.scss +++ b/scss/theming/dark.scss @@ -9,6 +9,6 @@ $dark: ( brand: color(dark-brand), brand-text: color(dark-brand-text), background-pattern: url("/assests/images/background-pattern.svg"), - background-pattern-opacity: 0.18, - background-pattern-filter: none + background-pattern-opacity: 0.08, + background-pattern-filter: invert(1) hue-rotate(180deg) ); diff --git a/scss/theming/light.scss b/scss/theming/light.scss index f717d48..5225f3b 100644 --- a/scss/theming/light.scss +++ b/scss/theming/light.scss @@ -9,6 +9,6 @@ $light: ( brand: color(light-brand), brand-text: color(light-brand-text), background-pattern: url("/assests/images/background-pattern.svg"), - background-pattern-opacity: 0.12, - background-pattern-filter: none + background-pattern-opacity: 0.05, + background-pattern-filter: grayscale(1) opacity(0.3) ); From dbc89789688034756bff36433b0b4190b4cca894 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 7 Feb 2026 14:20:01 +0000 Subject: [PATCH 7/8] Simplify background pattern with mix-blend-mode instead of complex filters Co-authored-by: BharathASL <33708810+BharathASL@users.noreply.github.com> --- css/theme.css | 24 ++++++++---------------- css/theme.css.map | 2 +- scss/theme.scss | 2 +- scss/theming/dark.scss | 3 +-- scss/theming/light.scss | 3 +-- 5 files changed, 12 insertions(+), 22 deletions(-) diff --git a/css/theme.css b/css/theme.css index f0acfd5..e33e82d 100644 --- a/css/theme.css +++ b/css/theme.css @@ -84,10 +84,8 @@ html { --theme-dark-brand-text: #ff6b35; --theme-light-background-pattern: url("/assests/images/background-pattern.svg"); --theme-dark-background-pattern: url("/assests/images/background-pattern.svg"); - --theme-light-background-pattern-opacity: 0.05; - --theme-dark-background-pattern-opacity: 0.08; - --theme-light-background-pattern-filter: grayscale(1) opacity(0.3); - --theme-dark-background-pattern-filter: invert(1) hue-rotate(180deg); + --theme-light-background-pattern-opacity: 0.08; + --theme-dark-background-pattern-opacity: 0.15; height: 100%; } @@ -137,23 +135,17 @@ body::before { } .light body::before { - opacity: 0.05; - opacity: var(--theme-light-background-pattern-opacity, 0.05); -} - -.dark body::before { opacity: 0.08; - opacity: var(--theme-dark-background-pattern-opacity, 0.08); + opacity: var(--theme-light-background-pattern-opacity, 0.08); } -.light body::before { - filter: grayscale(1) opacity(0.3); - filter: var(--theme-light-background-pattern-filter, grayscale(1) opacity(0.3)); +.dark body::before { + opacity: 0.15; + opacity: var(--theme-dark-background-pattern-opacity, 0.15); } -.dark body::before { - filter: invert(1) hue-rotate(180deg); - filter: var(--theme-dark-background-pattern-filter, invert(1) hue-rotate(180deg)); +body::before { + mix-blend-mode: overlay; } .light a { diff --git a/css/theme.css.map b/css/theme.css.map index 5fcaef1..3b4eff7 100644 --- a/css/theme.css.map +++ b/css/theme.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/theming/mixins.scss","../scss/colors.scss","../scss/theme.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+EA;AAAA;AAAA;AAAA;AAAA;AA2CA;AAAA;AAAA;AAAA;AAAA;AC1HA;AASA;ACVQ;AAER;EFkIQ;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EEhIJ;;;AFgEa;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AE/DV;EAGI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AF8Ca;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AElCV;EAGI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAEI;;;AFmBS;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AEVN;EAGI;;AAGJ;EACI;EACA","file":"theme.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/theming/mixins.scss","../scss/colors.scss","../scss/theme.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+EA;AAAA;AAAA;AAAA;AAAA;AA2CA;AAAA;AAAA;AAAA;AAAA;AC1HA;AASA;ACVQ;AAER;EFkIQ;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EEhIJ;;;AFgEa;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AE/DV;EAGI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AF8Ca;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AExDV;EAWI;;;AF2Ca;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AElCV;EAGI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAEI;;;AFmBS;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AAFO;EACP;EACA;;;AEVN;EAGI;;AAGJ;EACI;EACA","file":"theme.css"} \ No newline at end of file diff --git a/scss/theme.scss b/scss/theme.scss index 9be5d0a..e1a9f72 100644 --- a/scss/theme.scss +++ b/scss/theme.scss @@ -24,7 +24,7 @@ body::before { background-position: center; @include theme(background-image, background-pattern); @include theme(opacity, background-pattern-opacity); - @include theme(filter, background-pattern-filter); + mix-blend-mode: overlay; } a { diff --git a/scss/theming/dark.scss b/scss/theming/dark.scss index 5e1549b..9bb4baf 100644 --- a/scss/theming/dark.scss +++ b/scss/theming/dark.scss @@ -9,6 +9,5 @@ $dark: ( brand: color(dark-brand), brand-text: color(dark-brand-text), background-pattern: url("/assests/images/background-pattern.svg"), - background-pattern-opacity: 0.08, - background-pattern-filter: invert(1) hue-rotate(180deg) + background-pattern-opacity: 0.15 ); diff --git a/scss/theming/light.scss b/scss/theming/light.scss index 5225f3b..c3c4727 100644 --- a/scss/theming/light.scss +++ b/scss/theming/light.scss @@ -9,6 +9,5 @@ $light: ( brand: color(light-brand), brand-text: color(light-brand-text), background-pattern: url("/assests/images/background-pattern.svg"), - background-pattern-opacity: 0.05, - background-pattern-filter: grayscale(1) opacity(0.3) + background-pattern-opacity: 0.08 ); From a62c3f5da4a089daab97d6127cbbb44e7738ff41 Mon Sep 17 00:00:00 2001 From: Bharath Sendhurpandi Date: Sun, 8 Feb 2026 17:20:30 +0000 Subject: [PATCH 8/8] Fix Quarkus logo URL --- js/skills.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/skills.json b/js/skills.json index a12e2af..9bb4c4e 100644 --- a/js/skills.json +++ b/js/skills.json @@ -56,7 +56,7 @@ }, { "label": "Quarkus (Java & Kotlin)", - "svg-url": "https://quarkus.io/assets/images/brand/quarkus_icon_default.svg", + "svg-url": "https://raw.githubusercontent.com/commonhaus/artwork/refs/heads/main/projects/quarkus/icon/quarkus_icon_default.svg", "tag": ["framework-library"] }, {