Improve responsiveness · kasper.space/starchart@7dc2dd2

+1 -1

src/app.sass

··· 26 26 margin: 1.5rem 0rem 27 27 .bordered 28 28 padding: 0.2rem 0.6rem 29 - border: 1px solid hsla(0, 0%, 50%, 0.7) 29 + border: 1px solid #515256 30 30 color: #e0e0e0 31 31 line-height: 1.4 32 32 font-size: 1rem

+4 -1

src/routes/AccessToken.svelte

··· 56 56 margin-left: auto 57 57 padding-left: 1.5rem 58 58 padding-right: 1.5rem 59 + border-color: #7d7da7 60 + &:focus-visible 61 + border-color: #cbcaf7 59 62 .highlight 60 63 background-color: hsla(243, 100%, 77%, 0.5) 61 64 input 62 65 width: 100% 63 - &:focus 66 + &:focus-visible 64 67 outline: none 65 68 border-color: #cbcaf7 66 69 </style>

+5

src/routes/Chart.svelte

··· 69 69 <style lang="sass"> 70 70 .labels 71 71 text-align: center 72 + display: flex 73 + flex-wrap: wrap 74 + justify-content: center 75 + gap: 8px 76 + padding-bottom: 14px 72 77 </style>

+1 -2

src/routes/Label.svelte

··· 66 66 .serie 67 67 border-radius: 8px 68 68 border: 2px solid 69 - margin: 0.25rem 70 69 display: inline-flex 71 70 align-items: center 72 71 font-size: 0.9rem ··· 92 91 button.x 93 92 position: relative 94 93 transition: all 100ms ease-out 95 - padding-left: 0.2rem 94 + padding-left: 0.1rem 96 95 &:hover 97 96 opacity: 0.7 98 97 .name

+48 -18

src/routes/Nav.svelte

··· 8 8 </script> 9 9 10 10 <nav> 11 - <span class="left"> 11 + <span class="logo"> 12 12 <h1>Starchart</h1> 13 13 </span> 14 - <RepoInput bind:owner bind:repo {onSubmit} /> 15 - <div class="right"> 14 + <div class="repo-input first"> 15 + <RepoInput bind:owner bind:repo {onSubmit} /> 16 + </div> 17 + <div class="menu"> 16 18 <AccessToken /> 17 19 <a href="https://github.com/probablykasper/starchart"> 18 20 <svg ··· 33 35 > 34 36 </a> 35 37 </div> 38 + <div class="repo-input second"> 39 + <RepoInput bind:owner bind:repo {onSubmit} /> 40 + </div> 36 41 </nav> 37 42 38 43 <style lang="sass"> 44 + h1 45 + margin: 20px 0px 39 46 nav 40 - display: flex 41 - width: 100% 42 - padding-top: 0.25rem 43 - padding-bottom: 1rem 44 - flex-direction: column 45 - align-items: center 46 - justify-content: center 47 + display: grid 48 + grid-template-areas: "left right" "mid mid" 49 + grid-template-columns: 1fr 1fr 50 + // width: 100% 51 + // padding-top: 0.25rem 52 + // padding-bottom: 1rem 53 + 54 + // display: flex 55 + // align-items: center 56 + // flex-direction: column 57 + // justify-content: center 58 + .repo-input.first 59 + display: none 60 + .repo-input.second 61 + margin-bottom: 20px 47 62 @media (min-width: 768px) 48 - flex-direction: row 49 - justify-content: space-between 50 - .left, .right 51 - width: 12rem 52 - .right 63 + display: grid 64 + grid-template-areas: "left mid right" 65 + grid-template-columns: 192px 1fr 192px 66 + gap: 10px 67 + .repo-input.first 53 68 display: flex 54 - justify-content: flex-end 55 - .left 69 + .repo-input.second 70 + display: none 71 + // display: flex 72 + // flex-direction: row 73 + // justify-content: space-between 74 + // .left, .right 75 + // width: 192px 76 + // .right 77 + // display: flex 78 + // justify-content: flex-end 79 + .logo 56 80 display: flex 57 - .right 81 + grid-area: left 82 + .repo-input 83 + grid-area: mid 84 + .menu 58 85 display: flex 59 86 align-items: center 87 + margin: 20px 0px 88 + grid-area: right 89 + justify-content: right 60 90 a 61 91 color: #ffffff 62 92 cursor: default

+32 -24

src/routes/RepoInput.svelte

··· 29 29 } 30 30 </script> 31 31 32 - <div> 33 - <input 34 - class="bordered owner" 35 - type="text" 36 - bind:value={owner} 37 - placeholder="probablykasper" 38 - on:keydown={inputKeydown} 39 - /> 40 - <div><span class="bordered slash">/</span></div> 41 - <input 42 - class="bordered repo" 43 - type="text" 44 - bind:this={repoElement} 45 - bind:value={repo} 46 - placeholder="cpc" 47 - on:keydown={inputKeydown} 48 - /> 32 + <div class="container"> 33 + <div class="inputs"> 34 + <input 35 + class="bordered owner" 36 + type="text" 37 + bind:value={owner} 38 + placeholder="probablykasper" 39 + on:keydown={inputKeydown} 40 + /> 41 + <div><span class="bordered slash">/</span></div> 42 + <input 43 + class="bordered repo" 44 + type="text" 45 + bind:this={repoElement} 46 + bind:value={repo} 47 + placeholder="cpc" 48 + on:keydown={inputKeydown} 49 + /> 50 + </div> 49 51 <button class="bordered button" on:click={() => onSubmit()}>Load</button> 50 52 </div> 51 53 52 54 <style lang="sass"> 55 + .container 56 + margin: auto 53 57 div 54 58 display: flex 55 59 align-items: center 56 60 flex-direction: column 57 61 justify-content: center 58 - flex-grow: 1 59 62 max-width: 32rem 60 63 flex-direction: row 61 64 .owner 62 65 margin-bottom: 0px 63 66 border-radius: 6px 0px 0px 6px 64 - &:focus 67 + &:focus-visible 65 68 z-index: 10 66 69 .slash 67 70 border-left: none 68 71 border-right: none 69 72 input 70 73 width: 100% 74 + .repo 75 + border-right: none 76 + box-shadow: 1px 0 0 0 transparent 77 + &:focus-visible 78 + box-shadow: 1px 0 0 0 #cbcaf7 79 + .inputs 80 + z-index: 5 81 + position: relative 71 82 button.bordered 83 + display: block 72 84 background-color: hsla(243, 100%, 77%, 0.5) 73 - border-left-color: transparent 74 - border-left-width: 0px 85 + border-color: #7d7da7 75 86 border-radius: 0px 6px 6px 0px 76 87 &:focus-visible 77 88 border-color: #cbcaf7 78 - z-index: 10 79 - margin-left: -1px 80 - border-left-width: 1px 81 89 </style>

Configure Feed

Configure Feed