Skip to content

Commit 8f077a1

Browse files
author
US\vebalusu
committed
TEST
Merge branch 'master' of https://github.com/devopsharish/example-github
2 parents 736ac15 + 52a0e88 commit 8f077a1

966 files changed

Lines changed: 498409 additions & 0 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules/

‎New Text Document (2).txt‎

Whitespace-only changes.

‎New Text Document (3).txt‎

Whitespace-only changes.

‎New Text Document.txt‎

Whitespace-only changes.

‎README.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# GitHub Theming Example
2+
3+
This repo is intended to help give an example of the power of theming in Semantic UI.
4+
5+
#### Example Layouts
6+
7+
* [GitHub Modern Layout](http://semantic-org.github.io/example-github/index.html)
8+
* [GitHub Classic Layout](http://semantic-org.github.io/example-github/index-classic.html)
9+
10+
### About
11+
12+
* GitHub's repo homepage is redone using Semantic UI and a packaged [GitHub Theme](https://github.com/Semantic-Org/example-github/tree/master/semantic/src/themes/github)
13+
* To view how this page would look using other themes, simply clone the repo and adjust component's themes in [theme.config](https://github.com/Semantic-Org/example-github/blob/master/semantic/src/theme.config)
14+
* This is also intended to help provide insight into when CSS changes should be included in theme `.overrides` or in custom [layout specific css](https://github.com/Semantic-Org/example-github/blob/master/css/layouts/home.css)
15+
* For example, check out how [theming variables](https://github.com/Semantic-Org/example-github/blob/master/semantic/src/themes/github/collections/menu.variables#L29) and [css overrides](https://github.com/Semantic-Org/example-github/blob/master/semantic/src/themes/github/collections/menu.overrides) create GitHub's unique style of `tabular menu`.
16+

‎css/global.classic.css‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
2+
/*******************************
3+
Global CSS
4+
*******************************/
5+
6+
/*--------------
7+
Global Styles
8+
---------------*/
9+
10+
b {
11+
color: #333
12+
}
13+
14+
a:hover b {
15+
color: inherit;
16+
}
17+
18+
19+
/*--------------
20+
Page Header
21+
---------------*/
22+
23+
.page.header {
24+
background-color: #F5F5F5;
25+
border-bottom: 1px solid #E5E5E5;
26+
padding: 5px 0px;
27+
}
28+
29+
/* No padding on menu */
30+
.page.header .menu {
31+
margin-top: 0em;
32+
margin-bottom: 0em;
33+
}
34+
35+
/* Space right of input */
36+
.page.header .menu .item:first-child {
37+
padding-left: 0em;
38+
}
39+
.page.header .menu .item .input {
40+
margin-right: 1em;
41+
}
42+
.page.header .menu .item input {
43+
width: 250px;
44+
}
45+
46+
/* Min Width on Dropdown */
47+
.page.header .ui.dropdown .menu {
48+
min-width: 175px;
49+
}
50+
51+
/* Resize images */
52+
.page.header .menu .item > .logo.image {
53+
width: auto;
54+
height: 28px;
55+
}
56+
.page.header .menu .item > .user.image {
57+
width: auto;
58+
height: 20px;
59+
}
60+
61+
.page.header .plus.icon + .dropdown.icon {
62+
margin-left: 2px;
63+
}
64+
65+
/* Notification Bubble */
66+
.page.header .notification.label {
67+
top: -1px;
68+
right: 1px;
69+
left: auto;
70+
}
71+
72+
/*--------------
73+
User Dropdown
74+
---------------*/
75+
76+
/* Align dropdown with dropdown icon */
77+
.page.header .add.dropdown .menu {
78+
margin: 0 -7px 0 0 !important;
79+
}
80+
81+
.page.header .user.dropdown .menu {
82+
margin: 0 -7px 0 0 !important;
83+
}
84+
.page.header .user.dropdown .user.header {
85+
font-size: inherit;
86+
padding-bottom: 0em;
87+
}
88+
.page.header .user.dropdown .user.header b {
89+
color: inherit;
90+
}
91+
92+
93+
/*--------------
94+
Repo Menu
95+
---------------*/
96+
97+
.repo.menu:first-child {
98+
margin-top: 0.35em;
99+
}
100+
.column .checkout p {
101+
font-size: 11px;
102+
margin: 5px 0px;
103+
color: #767676;
104+
}
105+
.column .checkout > .button {
106+
margin-top: 10px;
107+
}
108+
.column .checkout > .button:last-child {
109+
margin: 7px 0px;
110+
}
111+
112+
113+
/*--------------
114+
Watch Button
115+
---------------*/
116+
117+
.watch.dropdown.button > .menu h4 {
118+
margin-bottom: 5px;
119+
}
120+
121+
122+
/*--------------
123+
Footer
124+
---------------*/
125+
126+
.footer.container {
127+
position: relative;
128+
padding-bottom: 2.5em;
129+
}
130+
.footer.container .github.mark {
131+
position: absolute;
132+
top: 50%;
133+
left: 50%;
134+
transform: translateX(-50%) translateY(-50%);
135+
}

‎css/global.css‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
2+
/*******************************
3+
Global CSS
4+
*******************************/
5+
6+
/*--------------
7+
Global Styles
8+
---------------*/
9+
10+
b {
11+
color: #333
12+
}
13+
14+
a:hover b {
15+
color: inherit;
16+
}
17+
18+
19+
/*--------------
20+
Page Header
21+
---------------*/
22+
23+
.page.header {
24+
background-color: #F5F5F5;
25+
border-bottom: 1px solid #E5E5E5;
26+
padding: 5px 0px;
27+
}
28+
29+
/* No padding on menu */
30+
.page.header .menu {
31+
margin-top: 0em;
32+
margin-bottom: 0em;
33+
}
34+
35+
/* Space right of input */
36+
.page.header .menu .item .input {
37+
margin-right: 1em;
38+
}
39+
.page.header .menu .item input {
40+
width: 250px;
41+
}
42+
43+
/* Min Width on Dropdown */
44+
.page.header .ui.dropdown .menu {
45+
min-width: 175px;
46+
}
47+
48+
/* Resize images */
49+
.page.header .menu .item > .logo.image {
50+
width: auto;
51+
height: 28px;
52+
}
53+
.page.header .menu .item > .user.image {
54+
width: auto;
55+
height: 20px;
56+
}
57+
58+
.page.header .plus.icon + .dropdown.icon {
59+
margin-left: 2px;
60+
}
61+
62+
/* Notification Bubble */
63+
.page.header .notification.label {
64+
top: -1px;
65+
right: 1px;
66+
left: auto;
67+
}
68+
69+
/*--------------
70+
User Dropdown
71+
---------------*/
72+
73+
/* Align dropdown with dropdown icon */
74+
.page.header .add.dropdown .menu {
75+
margin: 0 -7px 0 0 !important;
76+
}
77+
78+
.page.header .user.dropdown .menu {
79+
margin: 0 -7px 0 0 !important;
80+
}
81+
.page.header .user.dropdown .user.header {
82+
font-size: inherit;
83+
padding-bottom: 0em;
84+
}
85+
.page.header .user.dropdown .user.header b {
86+
color: inherit;
87+
}
88+
89+
90+
/*--------------
91+
Repo Menu
92+
---------------*/
93+
94+
.repo.menu:first-child {
95+
margin-top: 0.35em;
96+
}
97+
.column .checkout p {
98+
font-size: 11px;
99+
margin: 5px 0px;
100+
color: #767676;
101+
}
102+
.column .checkout > .button {
103+
margin-top: 10px;
104+
}
105+
.column .checkout > .button:last-child {
106+
margin: 7px 0px;
107+
}
108+
109+
110+
/*--------------
111+
Watch Button
112+
---------------*/
113+
114+
.watch.dropdown.button > .menu h4 {
115+
margin-bottom: 5px;
116+
}
117+
118+
119+
/*--------------
120+
Footer
121+
---------------*/
122+
123+
.footer .container {
124+
position: relative;
125+
margin-top: 60px;
126+
padding-bottom: 2.5em;
127+
}
128+
.footer .container .github.mark {
129+
position: absolute;
130+
top: 50%;
131+
left: 50%;
132+
transform: translateX(-50%) translateY(-50%);
133+
}

0 commit comments

Comments
 (0)