GithubHelp home page GithubHelp logo

atrium-ui's Introduction

Atrium UI

Medium Grey

A nice UI theme for Atom.

This theme uses Overpass as the default font.

The matching syntax UI theme is available here. And it uses Overpass Mono.

Preview

A small ad: you can check out the background image on my Dribbble.

The River GIF

Have fun!

atrium-ui's People

Contributors

yl92 avatar

Stargazers

David B. Waters avatar avatar

Watchers

avatar

atrium-ui's Issues

Question: Should I be using CSS to specify font information

Thanks for the theme. It's great. I have a two questions about the suggested font (using Win 10 and Atom 1.25.0 x64):

  1. Is there a difference between incorporating incorporating the overpass font CSS* in the Atom stylesheet versus specifying the system-installed font under Editor settings > Font Family ?

  2. I see the otf font on the overpass webpage but can't get the installed otf to show up -is there a way to use the otf or do I need to use ttf instead?

*CSS from http://overpassfont.org/

@font-face {
  font-family: 'overpass';
  src: url('overpass-thin.eot'); /* IE9 Compat Modes */
  src: url('overpass-thin.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('overpass-thin.woff2') format('woff2'), /* Super Modern Browsers */
       url('overpass-thin.woff') format('woff'), /* Pretty Modern Browsers */
       url('overpass-thin.ttf')  format('truetype'); /* Safari, Android, iOS */
       font-weight: 200;
       font-style: normal;
}

@font-face {
  font-family: 'overpass';
  src: url('overpass-thin-italic.eot');
  src: url('overpass-thin-italic.eot?#iefix') format('embedded-opentype'),
       url('overpass-thin-italic.woff2') format('woff2'),
       url('overpass-thin-italic.woff') format('woff'),
       url('overpass-thin-italic.ttf')  format('truetype');
       font-weight: 200;
       font-style: italic;
}


@font-face {
  font-family: 'overpass';
  src: url('overpass-extralight.eot');
  src: url('overpass-extralight.eot?#iefix') format('embedded-opentype'),
       url('overpass-extralight.woff2') format('woff2'),
       url('overpass-extralight.woff') format('woff'),
       url('overpass-extralight.ttf')  format('truetype');
       font-weight: 300;
       font-style: normal;
}

@font-face {
  font-family: 'overpass';
  src: url('overpass-extralight-italic.eot');
  src: url('overpass-extralight-italic.eot?#iefix') format('embedded-opentype'),
       url('overpass-extralight-italic.woff2') format('woff2'),
       url('overpass-extralight-italic.woff') format('woff'),
       url('overpass-extralight-italic.ttf')  format('truetype');
       font-weight: 300;
       font-style: italic;
}



@font-face {
  font-family: 'overpass';
  src: url('overpass-light.eot');
  src: url('overpass-light.eot?#iefix') format('embedded-opentype'),
       url('overpass-light.woff2') format('woff2'),
       url('overpass-light.woff') format('woff'),
       url('overpass-light.ttf')  format('truetype');
       font-weight: 400;
       font-style: normal;
}

@font-face {
  font-family: 'overpass';
  src: url('overpass-light-italic.eot');
  src: url('overpass-light-italic.eot?#iefix') format('embedded-opentype'),
       url('overpass-light-italic.woff2') format('woff2'),
       url('overpass-light-italic.woff') format('woff'),
       url('overpass-light-italic.ttf')  format('truetype');
       font-weight: 400;
       font-style: italic;
}



@font-face {
  font-family: 'overpass';
  src: url('overpass-regular.eot');
  src: url('overpass-regular.eot?#iefix') format('embedded-opentype'),
       url('overpass-regular.woff2') format('woff2'),
       url('overpass-regular.woff') format('woff'),
       url('overpass-regular.ttf')  format('truetype');
       font-weight: 500;
       font-style: normal;
}

@font-face {
  font-family: 'overpass';
  src: url('overpass-italic.eot');
  src: url('overpass-italic.eot?#iefix') format('embedded-opentype'),
       url('overpass-italic.woff2') format('woff2'),
       url('overpass-italic.woff') format('woff'),
       url('overpass-italic.ttf')  format('truetype');
       font-weight: 500;
       font-style: italic;
}




@font-face {
  font-family: 'overpass';
  src: url('overpass-semibold.eot');
  src: url('overpass-semibold.eot?#iefix') format('embedded-opentype'),
       url('overpass-semibold.woff2') format('woff2'),
       url('overpass-semibold.woff') format('woff'),
       url('overpass-semibold.ttf')  format('truetype');
       font-weight: 600;
       font-style: normal;
}

@font-face {
  font-family: 'overpass';
  src: url('overpass-semibold-italic.eot');
  src: url('overpass-semibold-italic.eot?#iefix') format('embedded-opentype'),
       url('overpass-semibold-italic.woff2') format('woff2'),
       url('overpass-semibold-italic.woff') format('woff'),
       url('overpass-semibold-italic.ttf')  format('truetype');
       font-weight: 600;
       font-style: italic;
}




@font-face {
  font-family: 'overpass';
  src: url('overpass-bold.eot');
  src: url('overpass-bold.eot?#iefix') format('embedded-opentype'),
       url('overpass-bold.woff2') format('woff2'),
       url('overpass-bold.woff') format('woff'),
       url('overpass-bold.ttf')  format('truetype');
       font-weight: 700;
       font-style: normal;
}

@font-face {
  font-family: 'overpass';
  src: url('overpass-bold-italic.eot');
  src: url('overpass-bold-italic.eot?#iefix') format('embedded-opentype'),
       url('overpass-bold-italic.woff2') format('woff2'),
       url('overpass-bold-italic.woff') format('woff'),
       url('overpass-bold-italic.ttf')  format('truetype');
       font-weight: 700;
       font-style: italic;
}



@font-face {
  font-family: 'overpass';
  src: url('overpass-extrabold.eot');
  src: url('overpass-extrabold.eot?#iefix') format('embedded-opentype'),
       url('overpass-extrabold.woff2') format('woff2'),
       url('overpass-extrabold.woff') format('woff'),
       url('overpass-extrabold.ttf')  format('truetype');
       font-weight: 800;
       font-style: normal;
}

@font-face {
  font-family: 'overpass';
  src: url('overpass-extrabold-italic.eot');
  src: url('overpass-extrabold-italic.eot?#iefix') format('embedded-opentype'),
       url('overpass-extrabold-italic.woff2') format('woff2'),
       url('overpass-extrabold-italic.woff') format('woff'),
       url('overpass-extrabold-italic.ttf')  format('truetype');
       font-weight: 800;
       font-style: italic;
}


@font-face {
  font-family: 'overpass';
  src: url('overpass-heavy.eot');
  src: url('overpass-heavy.eot?#iefix') format('embedded-opentype'),
       url('overpass-heavy.woff2') format('woff2'),
       url('overpass-heavy.woff') format('woff'),
       url('overpass-heavy.ttf')  format('truetype');
       font-weight: 900;
       font-style: normal;
}

@font-face {
  font-family: 'overpass';
  src: url('overpass-heavy-italic.eot');
  src: url('overpass-heavy-italic.eot?#iefix') format('embedded-opentype'),
       url('overpass-heavy-italic.woff2') format('woff2'),
       url('overpass-heavy-italic.woff') format('woff'),
       url('overpass-heavy-italic.ttf')  format('truetype');
       font-weight: 900;
       font-style: italic;
}

Color brightness changes between text and Tag (okay, it is the thickness)

Problem description:

The brightness of tags change radomly if i change the position of the cursor. (in Tag, in class or in text)
I do not know how to describe it better, and here is a screenshot:
Example1
btw: i like the first one (brighter)

System:

Windows 7 64bit
Atom: 1.24.0
UI: Atrium
Syntax: Base16
own Style.less:

atom-text-editor {
   background-color: #0d0011;
}
atom-text-editor.editor .gutter {
    background-color: #0d0011;
}
atom-text-editor.editor .wrap-guide {
	visibility: hidden;
}
atom-text-editor.editor .lines .line.cursor-line {
  background-color: #18001f;
}

Packages:

  • Sublime-Style-Column-Selection
  • Activate-Power-mode
  • color-picker
  • highlight-selected
  • minimap
  • sync-settings

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.