github-dashboard/screen.css at master · danielve4/github-dashboard · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
/* stylelint-disable*/
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}html{line-height:1}body{line-height:inherit}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
/* stylelint-enable */

/*
http://www.modularscale.com/?22&px&1.125&web&text
*/

html {
  font-size: 1.125em;     /*18px / 16px = 1.125em*/
  line-height: 1.222em;   /*22px is 1 gridline at 18px | 22px / 18px = 1.222em*/
  background-color: #EDEDED;
  color: #001A26;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 500;
}

h1 {
  font-size: 1.9531111em;  /*35.156px / 18px = 1.9531111em*/
  line-height: 1.251564456em; /*44px gridline at 35.156px | 44px / 35.156px = 1.251564456em*/
  font-weight: 600;
}

h2 {
  font-size: 1.5625em;     /*28.125px /18px = 1.5625em*/
  line-height: 1.1733333em; /*33px = 1.5 gridline at 28.125px*/
  padding-bottom: 0.39111111em; /*11px/28.125px*/
  font-weight: 600;
}

.card {
  margin-top: 0.61111111em; /*11px / 18px = 0.611111em*/
  border-radius: 0.18181818em; /*2px / 11px = 0.18181818em*/
  box-shadow: 0 0.36363636em 0.7272727em rgba(0,0,0,0.26);/*The shadow of the navigation bar 4px down, 8px blur radius*/
  padding: 1.222222em; /*22px / 18px = 1.2222em*/
  background-color: #F9F9F9;
}

#page {
  padding: 0.611111111em; /*half gridline*/
}

section {
  padding-top: 1.222222em; /*One gridline, 22px*/
}

footer {
  clear: both;
  padding-bottom: 2.4444444em;/*2 gridlines, 44px*/
}

/* 480px @ 16px/em*/
@media screen and (min-width: 30em) {

  #page {
    padding-left: 3.33333%;
    padding-right: 3.33333%;
  }
}

/* 600px @ 16px/em*/
/* Based on an 8 column grid with 16px gutters*/
@media screen and (min-width: 37.5em) {

  #page {
    padding-left: 2.66667%;
    padding-right: 2.66667%;
  }

  .card {
    width: 40.84507042%; /*((600-48[gutters])/2)-44 = 232 | 232/600=40.845%*/
  }

  #all-repos-info > li:nth-child(odd) {
    float: left;
  }

  #all-repos-info > li:nth-child(even) {
    float: right;
  }

  .stats li {
    overflow: hidden;
    padding-top: 0.61111111em; /*11px / 18px = 0.611111em*/
  }

}

/* 840px @ 16px/em*/
/* Based on a 12 column grid with 24px gutters*/
@media screen and (min-width: 52.5em) {
  #page {
    padding-left: 19.04762%;
    padding-right: 19.04762%;
  }
}

/* 1440px @ 16px/em*/
/* Based on a 12 column grid with 24px gutters*/
@media screen and (min-width: 90em) {
  #page {
    padding-left: 26.25%;
    padding-right: 26.25%;
  }
}