diff --git a/app/javascript/images/background-cybre.png b/app/javascript/images/background-cybre.png new file mode 100644 index 000000000..151fd5584 Binary files /dev/null and b/app/javascript/images/background-cybre.png differ diff --git a/app/javascript/images/header-cybre-colour.jpg b/app/javascript/images/header-cybre-colour.jpg new file mode 100644 index 000000000..2d1b5b4f0 Binary files /dev/null and b/app/javascript/images/header-cybre-colour.jpg differ diff --git a/app/javascript/images/header-cybre.jpeg b/app/javascript/images/header-cybre.jpeg new file mode 100644 index 000000000..e9d7b336f Binary files /dev/null and b/app/javascript/images/header-cybre.jpeg differ diff --git a/app/javascript/styles/cybre.scss b/app/javascript/styles/cybre.scss new file mode 100644 index 000000000..9da998103 --- /dev/null +++ b/app/javascript/styles/cybre.scss @@ -0,0 +1,282 @@ +$ui-base-color: #181818; // darkest +$ui-highlight-color: #1ea21e; // vibrant +$ui-secondary-color: #E4F2E4; // lightest +$ui-primary-color: #E4F2E4; // lighter +$ui-primary-color-alt: #a0b49c; // darker, for external pages + +$about-page-text: lighten($ui-base-color, 50%); + +@import 'cybre-base'; + +@keyframes floating { + from { + transform: translate(0, 0); + } + 65% { + transform: translate(0, 4px); + } + to { + transform: translate(0, -0); + } +} + +body, body.about-body { + background: $ui-base-color url('../images/background-cybre.png'); +} + +body.about-body { + // basics.scss &.about-body + background: darken($ui-base-color, 8%) url('../images/background-cybre.png'); + + background-position-y: 200px; + background-position-x: center; +} + +.about-body .mascot { + display: none; +} + +.muted { + .status__content p, .status__content a { + color: lighten($ui-base-color, 35%); + } + + .status__display-name strong { + color: lighten($ui-base-color, 35%); + } +} + +.compose-form__buttons button.active:last-child { + color:$ui-secondary-color; + background-color: $ui-highlight-color; + border-radius:3px; +} + +.screenshot-with-signup { + min-height:300px; +} + +.container.hero .closed-registrations-message .clock { + font-size: 150%; + margin: 1em auto; +} + +.column .static-content.getting-started { + background-image: url('../images/logo-cybre.png'), url('../images/background-cybre.png'); + background-size:auto 50%, cover; + background-position: 50% 75%, center center; + background-repeat:no-repeat, no-repeat; +} + +.columns-area { + background: $ui-base-color url('../images/background-cybre.png'); +} + +.actions .button.button-alternative { + background: $ui-highlight-color; + color: $ui-primary-color; + + &:active, + &:focus, + &:hover { + background-color: lighten($ui-highlight-color, 4%); + } +} + +@media screen and (max-width: 1280px) { + .landing-page .container.links { + top: -15px; + } +} + +.landing-page.alternative .header { + background-image:url('../images/header-cybre-colour.jpg'); + background-repeat: repeat-x; + background-size:contain; + height:45vh; + width: 100%; + position:absolute; + z-index: 1; + text-align:center; + + display: unset!important; +} + +.landing-page.alternative .header img { + margin: auto; + max-height:45vh; +} + + +.landing-page.alternative .grid { + position: relative; + z-index:2; + margin-top:15vh; +} + +.landing-page.alternative .landing-page__hero img { + visibility: hidden; + max-height:170px; +} + +.landing-page.alternative .landing-page__forms { + height:auto; +} + +.landing-page.alternative .column-1 { + display:flex; + align-items:flex-end; +} + +.landing-page.alternative .column { + max-height:initial; +} + +.landing-page.alternative .row__mascot { + .floats { + position:absolute; + img { + width:100%; + height:100%; + } + transition: all 0.1s linear; + animation-name: floating; + animation-iteration-count: infinite; + animation-direction: alternate; + animation-timing-function: ease-in-out; + } + + .float-1 { + width:50px; + height:50px; + bottom:60px; + left:110px; + animation-duration: 3s; + } + + .float-2 { + width:130px; + height:130px; + left:85px; + bottom: -60px; + animation-duration: 3.5s; + animation-delay: 0.2s; + } + + .float-3 { + width:100px; + height:100px; + right: 50; + top: -10px; + animation-duration: 4s; + animation-delay: 0.5s; + } +} + +.activity-stream { + .status.light { + .status__header .status__meta .status__relative-time { + color: $ui-primary-color-alt; + } + + .display-name span { + color: $ui-primary-color-alt; + } + + .status__content { + a.status__content__spoiler-link { + background: $ui-primary-color-alt; + + &:hover { + background: lighten($ui-primary-color-alt, 8%); + } + } + } + } + + .detailed-status.light { + .detailed-status__display-name .display-name span { + color: $ui-primary-color-alt; + } + + .status__content a.status__content__spoiler-link { + background: $ui-primary-color-alt; + + &:hover { + background: lighten($ui-primary-color-alt, 8%); + } + } + + .detailed-status__meta { + color: $ui-primary-color-alt; + } + } + + .media-spoiler { + background: $ui-primary-color-alt; + &:hover { + background: darken($ui-primary-color-alt, 5%); + } + } + + .pre-header { + color: $ui-primary-color-alt; + .status__display-name.muted strong { + color: $ui-primary-color-alt; + } + } +} + +.embed .activity-stream .entry .detailed-status.light .button.button-secondary.logo-button { + color: $ui-primary-color-alt; + svg { + path:first-child { + fill: $ui-primary-color-alt; + } + } + &:active, + &:focus, + &:hover { + svg path:first-child { + fill: lighten($ui-primary-color-alt, 4%); + } + } +} + +.emoji-mart-search { + background: $simple-background-color; + input { + color: $ui-primary-color-alt; + border: 1px solid $ui-primary-color-alt; + } +} + +.emoji-mart-anchor { + color: $ui-primary-color-alt; + &:hover { + color: darken($ui-primary-color-alt, 8%); + } +} + +.search-popout { + background: $ui-base-color; + color: $ui-primary-color; + + h4 { + color: $ui-primary-color; + } + + em { + color: $ui-highlight-color; + } +} + +/* Octagonal avatars, because ???? */ +.account__avatar, +.account__avatar-overlay-base, +.account__header__avatar, +.account__avatar-overlay-overlay { + border-radius:0px !important; + -webkit-clip-path: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%); + clip-path: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%); +} diff --git a/config/locales/en.yml b/config/locales/en.yml index a03b12a39..f2b2f6bcc 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -316,9 +316,6 @@ en: peers_api_enabled: desc_html: Domain names this instance has encountered in the fediverse title: Publish list of discovered instances - preview_sensitive_media: - desc_html: Link previews on other websites will display a thumbnail even if the media is marked as sensitive - title: Show sensitive media in OpenGraph previews registrations: closed_message: desc_html: Displayed on frontpage when registrations are closed. You can use HTML tags @@ -477,22 +474,6 @@ en: follows: You follow mutes: You mute storage: Media storage - filters: - contexts: - home: Home timeline - notifications: Notifications - public: Public timelines - thread: Conversations - edit: - title: Edit filter - errors: - invalid_context: None or invalid context supplied - invalid_irreversible: Irreversible filtering only works with home or notifications context - index: - delete: Delete - title: Filters - new: - title: Add new filter followers: domain: Domain explanation_html: If you want to ensure the privacy of your statuses, you must be aware of who is following you. Your private statuses are delivered to all instances where you have followers. You may wish to review them, and remove followers if you do not trust your privacy to be respected by the staff or software of those instances. @@ -533,7 +514,6 @@ en: '86400': 1 day expires_in_prompt: Never generate: Generate - invited_by: 'You were invited by:' max_uses: one: 1 use other: "%{count} uses" @@ -618,7 +598,6 @@ en: remote_follow: acct: Enter your username@domain you want to follow from missing_resource: Could not find the required redirect URL for your account - no_account_html: Don't have an account? You can sign up here proceed: Proceed to follow prompt: 'You are going to follow:' remote_unfollow: @@ -695,7 +674,6 @@ en: disallowed_hashtags: one: 'contained a disallowed hashtag: %{tags}' other: 'contained the disallowed hashtags: %{tags}' - language_detection: Automatically detect language open_in_web: Open in web over_character_limit: character limit of %{max} exceeded pin_errors: @@ -802,7 +780,8 @@ en: title: "%{instance} Terms of Service and Privacy Policy" themes: contrast: High contrast - default: Mastodon + default: Cybrespace + mastodon: Mastodon mastodon-light: Mastodon (light) time: formats: diff --git a/config/themes.yml b/config/themes.yml index 9c21c9459..8d0db76b5 100644 --- a/config/themes.yml +++ b/config/themes.yml @@ -1,3 +1,4 @@ -default: styles/application.scss +default: styles/cybre.scss +mastodon: styles/application.scss contrast: styles/contrast.scss mastodon-light: styles/mastodon-light.scss