Giter VIP home page Giter VIP logo

gplustheme-for-mastodon's Introduction

Google+ Theme for Mastodon v1.1

Languages

Overview

This theme replaces WebUI of any Mastodon instances with Google+ like one.

Requirement

Installation

  1. Follow the official guide and add this theme

    1. Copy these files in src of this repository into app/javascript/styles of Mastodon source directory

      • /gplus-theme-for-mastodon/
      • /gplus-theme-for-mastodon.scss
    2. Add the below code on config/themes.yml

      default: styles/application.scss
      contrast: styles/contrast.scss
      mastodon-light: styles/mastodon-light.scss
      # Maybe there are other themes...
      
      google-plus: styles/gplus-theme-for-mastodon.scss # Insert this one into any lines
    3. Add localization data to config/locales/{lang}.yml (At least config/locales/en.yml is REQUIRED)

      themes:
        contrast: High contrast
        default: Mastodon
        mastodon-light: Mastodon (light)
        # Maybe there are other themes...
      
        gplus-theme-for-mastodon: Google+ # Insert this one into the below line
  2. To avoid CSP(Content Security Policy), MAKE SURE to change config/initializers/content_security_policy.rb :

    base_host     = Rails.configuration.x.web_domain
    assets_host   = Rails.configuration.action_controller.asset_host
    assets_host ||= "http#{Rails.configuration.x.use_https ? 's' : ''}://#{base_host}"
    
    Rails.application.config.content_security_policy do |p|
    p.base_uri        :none
    p.default_src     :none
    p.frame_ancestors :none
    p.font_src        :self, assets_host, google_font_host
    p.img_src         :self, :https, :data, :blob, assets_host
    p.style_src       :self, :unsafe_inline, assets_host
    p.media_src       :self, :https, :data, assets_host
    p.frame_src       :self, :https
    p.manifest_src    :self, assets_host

    into

    base_host     = Rails.configuration.x.web_domain
    assets_host   = Rails.configuration.action_controller.asset_host
    assets_host ||= "http#{Rails.configuration.x.use_https ? 's' : ''}://#{base_host}"
    google_font_host = "https://fonts.gstatic.com"
    gplus_theme_host = "https://raw.githubusercontent.com"
    
    Rails.application.config.content_security_policy do |p|
    p.base_uri        :none
    p.default_src     :none
    p.frame_ancestors :none
    p.font_src        :self, assets_host, google_font_host, gplus_theme_host
    p.img_src         :self, :https, :data, :blob, assets_host, gplus_theme_host
    p.style_src       :self, :unsafe_inline, assets_host, gplus_theme_host
    p.media_src       :self, :https, :data, assets_host
    p.frame_src       :self, :https
    p.manifest_src    :self, assets_host

Screenshots

Overview on Google Chrome@Windows 8.1(64bit)

Account on Google Chrome@Windows 8.1(64bit)

Setting on Google Chrome@Windows 8.1(64bit)

Account on Google Chrome@Nexus 5X

gplustheme-for-mastodon's People

Contributors

genbuhase avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

Forkers

accelforce

gplustheme-for-mastodon's Issues

鯖主向けカスタマイズの実装

導入する管理者が変更したいと想定される外観(例:+1ボタン、角丸の半径など)を簡単に変更できるよう、カスタマイズが想定される部分をpreference.scssなどのファイルに分けてしまうというのはどうでしょうか。また、あらかじめこちらでプリセット(値)を用意し、@includeしてもらうことによってより負担軽減につながると思います。

色調の設定

variables.scssの40行目あたりの $status-actionbar-color: change-color($color: $status-color, $lightness: 98%);lighter() で書き直すことはできますか?どんなテーマでも真っ白に表示されてしまいますので、できれば他の $lightness を使ったコードがあればそれも修正を希望します。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.