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;
}
}