diff --git a/src/home/home-controller.ts b/src/home/home-controller.ts index c975809e..adc4ba6b 100644 --- a/src/home/home-controller.ts +++ b/src/home/home-controller.ts @@ -56,11 +56,9 @@ export function homeController(container: HTMLDivElement, issues: GitHubIssue[]) }); issueElement.innerHTML = ` -
${labels.join( +

${issue.title}

${organizationName}

${repositoryName}

${labels.join( "" - )}

${organizationName}

${repositoryName}

-

${issue.title}

- `; + )}
`; issueElement.addEventListener("click", () => { console.log(issue); diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css index 29e13c7f..006f593c 100644 --- a/static/style/inverted-style.css +++ b/static/style/inverted-style.css @@ -80,8 +80,8 @@ #issues-container > div { padding: 0 16px; overflow: hidden; - background-size: 20px; - background-position: 12px calc(100% - 9px); + background-size: 56px; + background-position: 0; background-repeat: no-repeat; opacity: 0.25; margin: 3px auto; @@ -118,10 +118,11 @@ } h3 { - margin: 0 0 0 12px; + /* margin: 0 0 0 12px; */ line-height: 1; font-size: 16px; text-overflow: ellipsis; + margin: 0; } p { @@ -155,7 +156,7 @@ margin-left: 0; } .labels > .label { - display: inline-block; + /* display: inline-block; */ padding: 4px 6px; border-radius: 4px; margin: 0px 4px 0px; @@ -166,17 +167,25 @@ width: 64px; letter-spacing: 0.5px; flex-grow: 3; + display: flex; + justify-content: center; + display: flex; + align-items: center; + height: 16px; } .labels { - text-align: right; - display: inline-block; + /* text-align: right; */ + /* display: inline-block; */ display: flex; + /* justify-content: center; */ + margin-left: auto; } .partner { bottom: 0; - text-align: right; - margin: 4px 4px 0; + /* text-align: right; */ + /* margin: 4px 4px 0; */ + margin: 0; } body { @@ -185,11 +194,14 @@ .info { opacity: 0.66; transition: 0.125s opacity ease-in-out; + /* display: flex; */ + align-items: center; + margin: 0 0 0 48px; } .title { - display: flex; - align-items: center; + /* display: flex; */ + /* align-items: center; */ } .label.pricing { @@ -199,7 +211,7 @@ opacity: 0.5; /* margin-left: 100vw; */ transition: 0.33s all cubic-bezier(0, 1, 1, 1); - filter: blur(4px); + filter: blur(8px); } button { @@ -316,11 +328,18 @@ } .full { - display: none !important; + display: unset !important; } - @media screen and (min-width: 640px) { + @media screen and (max-width: 640px) { .full { - display: unset !important; + display: none !important; + } + .issue-element-inner { + display: block; + } + .labels{ + margin-left: 48px; + margin-top: 4px; } } diff --git a/static/style/special.css b/static/style/special.css index 302a45d7..ae8eed04 100644 --- a/static/style/special.css +++ b/static/style/special.css @@ -5,6 +5,6 @@ } @media (prefers-color-scheme: light) { html { - background-color: #f0f0f0; + background-color: #f8f8f8; } } diff --git a/static/style/style.css b/static/style/style.css index ce6e1494..aefdcbd3 100644 --- a/static/style/style.css +++ b/static/style/style.css @@ -46,7 +46,7 @@ max-width: 640px; margin: auto; /* border-left: 1px solid #80808010; */ - padding: 48px 0; + padding: 0 0 48px; /* background: linear-gradient(to bottom, #80808000 0%, #808080ff 15%, #808080ff 85%, #80808000 100%); */ -webkit-mask-image: linear-gradient(to bottom, #00000000, #000000ff 0%, #000000ff 75%, #00000000 100%); height: calc(100vh - 96px); @@ -80,8 +80,8 @@ #issues-container > div { padding: 0 16px; overflow: hidden; - background-size: 20px; - background-position: 12px calc(100% - 9px); + background-size: 56px; + background-position: 0; background-repeat: no-repeat; opacity: 0.25; margin: 3px auto; @@ -118,10 +118,11 @@ } h3 { - margin: 0 0 0 12px; + /* margin: 0 0 0 12px; */ line-height: 1; font-size: 16px; text-overflow: ellipsis; + margin: 0; } p { @@ -155,7 +156,7 @@ margin-left: 0; } .labels > .label { - display: inline-block; + /* display: inline-block; */ padding: 4px 6px; border-radius: 4px; margin: 0px 4px 0px; @@ -166,17 +167,25 @@ width: 64px; letter-spacing: 0.5px; flex-grow: 3; + display: flex; + justify-content: center; + display: flex; + align-items: center; + height: 16px; } .labels { - text-align: right; - display: inline-block; + /* text-align: right; */ + /* display: inline-block; */ display: flex; + /* justify-content: center; */ + margin-left: auto; } .partner { bottom: 0; - text-align: right; - margin: 4px 4px 0; + /* text-align: right; */ + /* margin: 4px 4px 0; */ + margin: 0; } body { @@ -185,11 +194,14 @@ .info { opacity: 0.66; transition: 0.125s opacity ease-in-out; + /* display: flex; */ + align-items: center; + margin: 0 0 0 50px; } .title { - display: flex; - align-items: center; + /* display: flex; */ + /* align-items: center; */ } .label.pricing { @@ -199,7 +211,7 @@ opacity: 0.5; /* margin-left: 100vw; */ transition: 0.33s all cubic-bezier(0, 1, 1, 1); - filter: blur(4px); + filter: blur(8px); } button { @@ -316,11 +328,18 @@ } .full { - display: none !important; + display: unset !important; } - @media screen and (min-width: 640px) { + @media screen and (max-width: 640px) { .full { - display: unset !important; + display: none !important; + } + .issue-element-inner { + display: block; + } + .labels{ + margin-left: 48px; + margin-top: 4px; } }