diff --git a/static/index.html b/static/index.html index 9d8eeaff..d59599b3 100644 --- a/static/index.html +++ b/static/index.html @@ -9,13 +9,6 @@ -
-
- - - -
-
Ubiquity DAO | DevPool Directory
Ubiquity DAO | DevPool Directory
+
+ + + +
+
diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css index 189f48f4..d41c3497 100644 --- a/static/style/inverted-style.css +++ b/static/style/inverted-style.css @@ -50,8 +50,8 @@ /* border-left: 1px solid #7f7f7f10; */ padding: 0 0 48px; /* background: linear-gradient(to bottom, #7f7f7f00 0%, #7f7f7fff 15%, #7f7f7fff 85%, #7f7f7f00 100%); */ - -webkit-mask-image: linear-gradient(to bottom, #ffffff00, #ffffffff 48px, #ffffffff 75%, #ffffff00 100%); - height: calc(100vh - 96px); + /* -webkit-mask-image: linear-gradient(to bottom, #ffffff00, #ffffffff 48px, #ffffffff 75%, #ffffff00 100%); */ + /* height: calc(100vh - 96px); */ overflow: scroll; scrollbar-width: none; /* For Firefox */ -ms-overflow-style: none; /* For Internet Explorer and Edge */ @@ -187,7 +187,7 @@ /* margin: 0; */ } #filters { - padding: 4px 6px; + /* padding: 4px; */ } #filters label { cursor: pointer; @@ -207,6 +207,8 @@ display: flex; /* justify-content: center; */ margin-left: auto; + /* max-width: 640px; */ + /* margin: 0 auto; */ } .partner { @@ -282,7 +284,7 @@ #toolbar { position: fixed; - width: 100vw; + width: calc(100vw - 8px); height: 48px; /* background: red; */ bottom: 0; @@ -300,6 +302,7 @@ /* align-items: flex-end; This will align the items to the bottom of the container */ /* width: 100%; */ /* padding: 0 16.66%; Adding padding to the container so that items align approximately at 33% and 66% */ + /* justify-content: end; */ } #toolbar > * { /* justify-content: center; */ @@ -373,24 +376,40 @@ background-color: #00ffff; /* Example background color */ } - @media screen and (max-width: 640px) { + @media screen and (max-width: 896px) { .full { display: none !important; } .issue-element-inner { display: block; } - .labels { + #issues-container .labels { margin-left: 48px; margin-top: 4px; } + #branding { + margin: auto; + margin-left: 12px; + } + #branding > span { + padding: 0; + } + #toolbar > * { + margin: auto; + } + #toolbar > button{ + /* margin: 16px auto; */ + padding: 12px 16px; + } } #toolbar > button { text-align: center; } #filters > div { - text-align: right; + /* text-align: center; */ + /* margin: 0 auto; */ + /* max-width: 640px; */ } #filters button { margin-top: 8px; diff --git a/static/style/special.css b/static/style/special.css index 302a45d7..643ed619 100644 --- a/static/style/special.css +++ b/static/style/special.css @@ -2,9 +2,15 @@ html { background-color: #06061aff; } + #toolbar.ready{ + background-color: #06061a80 + } } @media (prefers-color-scheme: light) { html { background-color: #f0f0f0; } + #toolbar.ready{ + background-color: #f0f0f080; + } } diff --git a/static/style/style.css b/static/style/style.css index a97daec1..e3ba8968 100644 --- a/static/style/style.css +++ b/static/style/style.css @@ -50,8 +50,8 @@ /* border-left: 1px solid #80808010; */ 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 48px, #000000ff 75%, #00000000 100%); - height: calc(100vh - 96px); + /* -webkit-mask-image: linear-gradient(to bottom, #00000000, #000000ff 48px, #000000ff 75%, #00000000 100%); */ + /* height: calc(100vh - 96px); */ overflow: scroll; scrollbar-width: none; /* For Firefox */ -ms-overflow-style: none; /* For Internet Explorer and Edge */ @@ -187,7 +187,7 @@ /* margin: 0; */ } #filters { - padding: 4px; + /* padding: 4px; */ } #filters label { cursor: pointer; @@ -284,7 +284,7 @@ #toolbar { position: fixed; - width: 100vw; + width: calc(100vw - 8px); height: 48px; /* background: red; */ bottom: 0; @@ -302,6 +302,7 @@ /* align-items: flex-end; This will align the items to the bottom of the container */ /* width: 100%; */ /* padding: 0 16.66%; Adding padding to the container so that items align approximately at 33% and 66% */ + /* justify-content: end; */ } #toolbar > * { /* justify-content: center; */ @@ -375,17 +376,31 @@ background-color: #00ffff; /* Example background color */ } - @media screen and (max-width: 640px) { + @media screen and (max-width: 896px) { .full { display: none !important; } .issue-element-inner { display: block; } - .labels { + #issues-container .labels { margin-left: 48px; margin-top: 4px; } + #branding { + margin: auto; + margin-left: 12px; + } + #branding > span { + padding: 0; + } + #toolbar > * { + margin: auto; + } + #toolbar > button{ + /* margin: 16px auto; */ + padding: 12px 16px; + } } #toolbar > button { @@ -393,8 +408,8 @@ } #filters > div { /* text-align: center; */ - margin: 0 auto; - max-width: 640px; + /* margin: 0 auto; */ + /* max-width: 640px; */ } #filters button { margin-top: 8px;