aboutsummaryrefslogtreecommitdiff
path: root/htdocs/public/assets/css
diff options
context:
space:
mode:
Diffstat (limited to 'htdocs/public/assets/css')
-rw-r--r--htdocs/public/assets/css/fonts.css19
-rw-r--r--htdocs/public/assets/css/main.css619
-rw-r--r--htdocs/public/assets/css/rainbow.css101
3 files changed, 444 insertions, 295 deletions
diff --git a/htdocs/public/assets/css/fonts.css b/htdocs/public/assets/css/fonts.css
deleted file mode 100644
index a7fc4d5..0000000
--- a/htdocs/public/assets/css/fonts.css
+++ /dev/null
@@ -1,19 +0,0 @@
-@font-face {
- font-family: 'Raleway';
- src: url('/assets/fonts/new/regular.ttf');
- font-weight: 125 950;
- font-stretch: 75% 125%;
- font-style: normal;
-}
-
-@font-face {
- font-family: 'Raleway';
- src: url('/assets/fonts/new/italic.ttf');
- font-weight: 125 950;
- font-stretch: 75% 125%;
- font-style: italic;
-}
-
-* {
- font-family: "Raleway", sans-serif;
-} \ No newline at end of file
diff --git a/htdocs/public/assets/css/main.css b/htdocs/public/assets/css/main.css
index ce2d306..157d6d0 100644
--- a/htdocs/public/assets/css/main.css
+++ b/htdocs/public/assets/css/main.css
@@ -1,288 +1,557 @@
-html, body {
- height: 100%;
- width: 100%;
- background-color: #222;
+@font-face {
+ font-family: "Readex Pro";
+ src: url("/assets/font.ttf");
+ font-weight: 125 950;
+ font-stretch: 75% 125%;
+}
+
+* {
+ font-family: "Readex Pro", arial, sans-serif;
+}
+
+body, html {
+ background: #222;
+ color: white;
margin: 0;
- padding: 0;
+ font-family: "Readex Pro", arial, sans-serif;
}
-main {
- position: fixed;
- overflow: auto;
- padding: 20px;
- inset: 0;
+#results.results-none {
+ padding-top: 10px !important;
+}
+
+.result-url, .result-name {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+.result-description {
+ margin-top: 5px;
+ margin-bottom: 5px;
+}
+
+.result {
color: white;
+ text-decoration: none;
+ padding: 8px;
+ margin-bottom: 5px;
+ border-radius: 5px;
+ border: 2px solid transparent;
}
-.grid-3 {
- display: grid;
- grid-template-columns: 1fr 1fr 1fr;
- grid-gap: 20px;
+.result:hover {
+ background: #333;
}
-.bb-main-mobile {
- display: none;
+.result:active, .result:focus {
+ background: #444;
}
-@media (max-width: 900px) {
- .grid-3:not(.dont-break-me) {
- grid-template-columns: 1fr 1fr;
- grid-gap: 10px;
- grid-column-gap: 0;
- }
+.result a {
+ text-decoration: inherit;
+ color: inherit;
+}
- .projects {
- grid-column-gap: 10px !important;
- }
+.result.result-official {
+ border-color: rgba(255, 255, 0, 0.3);
+}
- .button h2 {
- margin-block-start: 0.33em;
- margin-block-end: 0.33em;
- font-size: 1.25em;
- }
+.result.result-verified {
+ border-color: rgba(0, 255, 21, 0.3);
+}
- .button h3 {
- margin-block-start: 0.5em;
- margin-block-end: 0.5em;
- font-size: 1em;
- }
+.result-relevant {
+ vertical-align: middle;
+}
- .button .rnbwsquare-stand.rnbwsquare-outer {
- padding-right: 0;
- padding-left: 0;
- padding-top: 0;
- }
+#results-intro-logo, #results-intro-bar {
+ display: inline-block;
+ margin: 0;
+}
- .button .rnbwsquare-stand.rnbwsquare-outer, .button .rnbwsquare-stand.rnbwsquare-outer .rnbwsquare-inner {
- border-radius: 0 !important;
- }
+#results-intro {
+ background: #111;
+ padding: 0 50px;
+ margin-bottom: 20px;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ border-bottom: 1px solid #252525;
+}
- @media (min-width: 500px) {
- .big-button.big-button-bg2.big-button-pt1, .big-button.big-button-bg2.big-button-pt2 {
- border-radius: 5px !important;
- border: 1px solid white !important;
- display: inline-block;
- }
- }
+#results-intro-bar-input {
+ background: #171717;
+ color: white;
+ border: 1px solid #222;
+ padding: 10px;
+ outline: none;
+ height: 8px;
+ border-radius: 999px;
+ width: calc(100vw - 230px);
+ margin: 8px 10px;
}
+#results-intro-bar-input:hover {
+ border-color: #333;
+}
-@media (max-width: 500px) {
- .grid-3 {
- grid-template-columns: 1fr !important;
+#home-bar:hover {
+ border-color: #444;
+}
+
+#results-intro-bar-input:active, #results-intro-bar-input:focus {
+ border-color: #444;
+}
+
+#home-bar:active, #home-bar:focus {
+ border-color: #555;
+}
+
+#intro-results-separator {
+ margin-top: 87px;
+}
+
+@media (max-width: 1200px) {
+ #results, #details, #results-debug {
+ padding: 50px 200px !important;
}
+}
- .bb-main-mobile {
- display: inline-block;
+@media (max-width: 1000px) {
+ #results, #details, #results-debug {
+ padding: 50px 150px !important;
}
+}
- .bb-main-desktop {
- display: none;
+@media (max-width: 700px) {
+ #results, #details, #results-debug {
+ padding: 50px 100px !important;
}
}
-@media (max-width: 375px) {
- .grid-2 {
- grid-template-columns: 1fr !important;
- margin-bottom: 10px;
+@media (max-width: 500px) {
+ #results, #details, #results-debug {
+ padding: 50px 50px !important;
}
+}
- .big-button.big-button-bg2.big-button-pt1, .big-button.big-button-bg2.big-button-pt2 {
- border-radius: 5px !important;
- border: 1px solid white !important;
- display: inline-block;
+@media (max-width: 450px) {
+ #results, #details, #results-debug {
+ padding: 50px 10px !important;
}
}
-.grid-2 {
- display: grid;
- grid-template-columns: 1fr 1fr;
- grid-gap: 20px;
+#results, #details, #results-debug {
+ padding: 50px 250px;
}
-.button {
- color: inherit;
- text-decoration: inherit;
- transform: scale(1);
- opacity: 1;
- transition: transform 200ms;
+.dym-link {
+ color: lightgray;
}
-.button:hover {
- opacity: .5;
+.dym-section {
+ position: fixed;
+ width: 100%;
+ top: 46px;
+ padding: 10px;
+ background: #333;
+ border-bottom: 1px solid #353535;
}
-.button:active {
- transform: scale(.95);
+.result-icon {
+ width: 24px;
+ height: 24px;
+ vertical-align: middle;
}
-.tagline {
- opacity: .5;
- margin-top: 0;
+#results-intro-logo-img {
+ width: 32px;
+ height: 32px;
+ vertical-align: middle;
}
-a {
- color: #ffa0a0;
+#details {
+ padding-top: 10px !important;
+ padding-bottom: 10px !important;
}
-a:hover {
- opacity: .75;
+#results-intro-bar-submit {
+ background-color: transparent;
+ color: transparent;
+ border: transparent;
+ cursor: pointer;
+ background-image: url("/assets/search.svg");
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: contain;
+ width: 24px;
+ height: 24px;
+ padding: 4px;
+}
+
+@media (max-width: 50px) {
+ #results-intro {
+ padding: 0 50px;
+ }
+ #results-intro-bar-input {
+ width: calc(100vw - 152px);
+ margin: 8px 5px;
+ }
}
-a:focus, a:active {
- opacity: .5;
+#results-debug {
+ margin: 0;
+ padding-top: 10px !important;
+ padding-bottom: 0 !important;
}
-.hr-style-01 {
- border-bottom: none;
- border-top: 1px solid white;
+#results.with-details {
+ padding-top: 10px !important;
}
-a.big-button-bg2 {
- background: #222;
+#results-debug-inner-details {
+ opacity: 0;
+ font-family: monospace;
}
-a.big-button-bg3 {
- background: #151515;
+#results-debug-inner-details:hover {
+ opacity: 1;
}
-.big-button {
- transition: color 200ms, background 200ms, opacity 200ms;
- color: white;
- background: #333;
- border: 1px solid white;
- padding: 10px 20px;
- text-decoration: none;
- margin-top: 10px;
- opacity: 1 !important;
- border-radius: 5px;
+#details-source {
+ display: inline-block;
+ opacity: .5;
}
-.big-button:hover {
- color: #333;
- background: white;
+#details-source-link, #details-data-link {
+ color: white;
}
-.big-button:active {
- opacity: .5 !important;
+.container-fluid { /* Ah yes, here is the container for the gender fluid */
+ width: 100%;
}
-.stand {
- padding: 5px;
- margin-left: -20px;
- margin-right: -20px;
- background: #333;
+.container {
+ text-align: center;
+ width: 60vw;
+ margin-left: auto;
+ margin-right: auto;
}
-.stand-strong {
- padding: 20px;
+@media (max-width: 700px) {
+ .container {
+ width: 75vw !important;
+ }
}
-.big-button-pt1 {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- border-right: 0;
+@media (max-width: 500px) {
+ .container {
+ width: 95vw !important;
+ }
}
-.big-button-pt2 {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
+.title.is-1 {
+ font-size: 4rem;
+ text-align: center;
}
-.scroller {
+.search-input {
+ border-radius: 5px;
+ border: 1px solid #333;
+ background: #111;
color: white;
- text-decoration: none;
+}
+
+.search-input {
+ z-index: 5;
+ position: relative;
+ outline: none;
+ max-width: 100%;
+ width: 88%;
+ padding: 12px 20px;
+ margin: 8px 0;
+ border-radius: 999px;
+ background-position: 5px 5px;
+ background-repeat: no-repeat;
+ background-size: 8%;
+}
+
+div.searchbtn {
+ text-align: center;
+}
+
+div.searchbtn input {
cursor: pointer;
+ padding: 8px 15px;
+ margin: 4px 2px;
+ font-size: 14px;
}
-.scroller:hover {
- opacity: .75;
+#home-logo {
+ z-index: 5;
+ font-size: 8vh;
+ position: relative;
+ margin-bottom: 10px;
+ margin-top: 50px;
}
-.scroller:active, .scroller:focus {
- opacity: .5;
+#home-logo img {
+ width: 128px;
}
-html, body, #intro, #main {
- overflow-x: hidden;
+.home-btn {
+ border: 1px solid #666;
+ border-radius: 999px;
+ z-index: 5;
+ position: relative;
+ background: rgba(53,53,53,1);
+ color: white;
+}
+
+.home-btn:hover {
+ border-color: #656565;
+ background: #333333;
}
-.project {
+.home-btn:active {
+ border-color: #777;
+ background: #353535;
+}
+
+#details-inner {
+ padding: 10px 20px;
background: #151515;
- border: 1px solid #333;
- padding: 20px;
border-radius: 5px;
}
-.project-name {
- margin: 10px 0;
- text-align: center;
+#details-loader {
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
-.project-icon {
+#details-loader img {
width: 64px;
- height: 64px;
+}
+
+#version {
+ font-size: 16px;
display: block;
+ font-weight: normal;
+ background: linear-gradient(
+ 0deg, rgba(205,55,55,1) 0%, rgba(255,100,100,1) 100%);
+ border-radius: 999px;
+ width: max-content;
margin-left: auto;
margin-right: auto;
+ padding: 5px 10px;
}
-.project-description, .project-buttons {
+html, body, main {
+ height: 100%;
+}
+
+#home {
+ height: 100%;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.icon {
+ position: fixed;
+ width: 48px;
+ opacity: .1;
+ z-index: 0;
+ pointer-events: none;
+ animation-name: hue;
+ animation-duration: 10s;
+ animation-timing-function: linear;
+ animation-fill-mode: forwards;
+ animation-iteration-count: infinite;
+}
+
+@keyframes hue {
+ 0% { filter: hue-rotate(0deg); }
+ 100% { filter: hue-rotate(360deg); }
+}
+
+.icon-1 {
+ top: 5vh;
+ left: 50vw;
+}
+
+.icon-2 {
+ top: 20vh;
+ left: 70vw;
+ transform: rotate(45deg);
+}
+
+.icon-3 {
+ top: 40vh;
+ left: 85vw;
+ transform: rotate(90deg);
+}
+
+.icon-4 {
+ top: 60vh;
+ left: 70vw;
+ transform: rotate(135deg);
+}
+
+.icon-5 {
+ top: 80vh;
+ left: 50vw;
+ transform: rotate(180deg);
+}
+
+.icon-6 {
+ top: 60vh;
+ left: 30vw;
+ transform: rotate(-135deg);
+}
+
+.icon-7 {
+ top: 40vh;
+ left: 10vw;
+ transform: rotate(-90deg);
+}
+
+.icon-8 {
+ top: 20vh;
+ left: 30vw;
+ transform: rotate(-45deg);
+}
+
+#home-pages {
+ background: #222;
+ padding-top: 20px;
+ z-index: 5;
+ position: relative;
+}
+
+#home-pages .container {
+ text-align: left;
+}
+
+.section-center {
text-align: center;
}
-.project-buttons {
- margin-top: 30px;
+.home-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
}
-.main-icon {
- width: 64px;
- margin-top: 10px;
+.home-grid-icon {
+ width: 40%;
+ max-width: 72px;
}
-.main-icon-sub {
- margin-top: 10px;
+.home-page {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
}
-.sky {
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- height: 86vh;
- margin-left: auto;
- margin-right: auto;
- pointer-events: none;
+.ibeam {
+ font-weight: lighter;
+ color: #007cff;
+ display: inline-block;
+ position: relative;
+ top: -3px;
+ animation-name: beam;
+ animation-timing-function: linear;
+ animation-duration: 0.5s;
+ animation-iteration-count: infinite;
+ animation-fill-mode: both;
+ animation-direction: alternate-reverse;
}
-@media (max-width: 700px) {
- .sky {
- display: none;
- }
+@keyframes beam {
+ 0% { opacity: 1; }
+ 100% { opacity: 0; }
}
-.container {
- margin-left: 20vw;
- margin-right: 20vw;
+.instant-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-column-gap: 20px;
}
-@media (max-width: 1000px) {
- .container {
- margin-left: 10vw;
- margin-right: 10vw;
- }
+.solid {
+ text-decoration-skip-ink: none;
+ text-decoration-thickness: 6px;
+ text-decoration-color: #00adffa3;
+ text-decoration-style: solid;
+}
+
+.member-icon {
+ width: 96px;
+ border-radius: 999px;
+}
+
+.member-name {
+ font-weight: bold;
+ display: block;
+}
+
+.member-description {
+ display: block;
+}
+
+.team {
+ display: grid;
+ justify-content: center;
+ align-content: center;
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-gap: 20px;
}
@media (max-width: 700px) {
- .container {
- margin-left: 5vw;
- margin-right: 5vw;
+ .team, .home-grid {
+ grid-template-columns: 1fr 1fr !important;
+ }
+
+ .instant-grid {
+ grid-template-columns: 1fr !important;
}
}
@media (max-width: 500px) {
- .container {
- margin-left: 0;
- margin-right: 0;
+ .team, .home-grid {
+ grid-template-columns: 1fr !important;
}
+}
+
+.legal-btn {
+ background: transparent;
+ padding: 10px;
+ border-radius: 10px;
+ color: white;
+ text-decoration: none;
+}
+
+.legal-btn:hover {
+ background: #151515;
+}
+
+.legal-btn:active, .legal-btn:focus {
+ background: #111;
+}
+
+.aside-link {
+ color: white;
+}
+
+.aside-link:hover {
+ opacity: .75;
+}
+
+.aside-link:active, .aside-link:focus {
+ opacity: .5;
} \ No newline at end of file
diff --git a/htdocs/public/assets/css/rainbow.css b/htdocs/public/assets/css/rainbow.css
deleted file mode 100644
index d9ec266..0000000
--- a/htdocs/public/assets/css/rainbow.css
+++ /dev/null
@@ -1,101 +0,0 @@
-:root {
- --rainbow-1: rgba(0, 116, 10, 1);
- --rainbow-2: rgba(97, 116, 0, 1);
- --rainbow-3: rgba(116, 69, 0, 1);
- --rainbow-4: rgba(116, 0, 13, 1);
- --rainbow-5: rgba(104, 0, 116, 1);
- --rainbow-6: rgba(46, 0, 116, 1);
- --rainbow-1l: rgb(184, 230, 187);
- --rainbow-2l: rgb(222, 230, 184);
- --rainbow-3l: rgb(230, 212, 184);
- --rainbow-4l: rgb(230, 184, 189);
- --rainbow-5l: rgb(225, 184, 230);
- --rainbow-6l: rgb(201, 184, 230);
- --rainbow-1ld: rgb(77, 128, 80);
- --rainbow-2ld: rgb(119, 128, 77);
- --rainbow-3ld: rgb(128, 108, 77);
- --rainbow-4ld: rgb(128, 77, 82);
- --rainbow-5ld: rgb(122, 77, 128);
- --rainbow-6ld: rgb(95, 77, 128);
-}
-
-.rnbwsquare-outer {
- border-radius: 5px;
- background: linear-gradient(135deg, var(--rainbow-1) 0%, var(--rainbow-2) 20%, var(--rainbow-3) 40%, var(--rainbow-4) 60%, var(--rainbow-5) 80%, var(--rainbow-6) 100%);
- /*animation-name: rainbow;*/
- /*animation-timing-function: linear;*/
- /*animation-duration: 240s;*/
- /*animation-direction: normal;*/
- /*animation-play-state: running;*/
- /*animation-fill-mode: forwards;*/
- /*animation-iteration-count: infinite;*/
- padding: 2px;
-}
-
-.rnbwsquare-fixed {
- background: linear-gradient(135deg, var(--rainbow-1l) 0%, var(--rainbow-2l) 20%, var(--rainbow-3l) 40%, var(--rainbow-4l) 60%, var(--rainbow-5l) 80%, var(--rainbow-6l) 100%);
- animation: none !important;
-}
-
-.rnbwsquare-fixed-top {
- background: linear-gradient(135deg, var(--rainbow-1ld) 0%, var(--rainbow-2ld) 20%, var(--rainbow-3ld) 40%, var(--rainbow-4ld) 60%, var(--rainbow-5ld) 80%, var(--rainbow-6ld) 100%);
- animation: none !important;
-}
-
-.rnbwsquare-fixed .rnbwsquare-inner {
- animation: none !important;
-}
-
-.rnbwsquare-stand .rnbwsquare-inner {
- background: #333;
-}
-
-.rnbwsquare-inner {
- border-radius: 5px;
- background: #222;
- padding: 15px;
-}
-
-@keyframes rainbow {
- 0% {
- filter: hue-rotate(0deg);
- }
- 100% {
- filter: hue-rotate(360deg);
- }
-}
-
-@keyframes rainbow-back {
- 0% {
- filter: hue-rotate(0deg);
- }
- 100% {
- filter: hue-rotate(-360deg);
- }
-}
-
-@keyframes rainbow-compensate {
- 0% {
- filter: hue-rotate(360deg);
- }
- 100% {
- filter: hue-rotate(0deg);
- }
-}
-
-/*noinspection CssInvalidPropertyValue*/
-.rnbwsquare-title {
- background: linear-gradient(90deg, rgba(80, 191, 90, 1) 0%, rgba(191, 210, 92, 1) 20%, rgba(200, 152, 82, 1) 40%, rgba(199, 85, 97, 1) 60%, rgba(183, 80, 195, 1) 80%, rgba(118, 68, 194, 1) 100%);
- background-clip: text;
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- animation: rainbow-back 3s ease-in-out infinite;
- margin-bottom: 5px;
-}
-
-.rnbwsquare-separator {
- border: none;
- height: 3px;
- padding: 0 !important;
- margin: 20px -20px;
-} \ No newline at end of file
© Floofi Systems, Some rights reserved. Powered by cgit.