This repository has been archived by the owner on May 4, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
237 lines (234 loc) · 14.3 KB
/
index.html
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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ClearShift</title>
<meta name="description" content="ClearShift is a minimalistic subreddit theme for reddit platform which i built and continuously updated over 2 years span. To improve this theme i took feedback across various subreddits, /r/Windows10 is a prime example of this theme. As long as feedback keeps flowing i can keep evaluating feedback pieces and improve upon it">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" href="dist/css/minified/style.css">
</head>
<body>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="/">ClearShift</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#home">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">Examples</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#download">Download</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Featured subreddits
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="https://www.reddit.com/r/GreatXboxDeals/">/r/GreatXboxDeals</a>
<a class="dropdown-item" href="https://www.reddit.com/r/olympics/">/r/Olympics</a>
<a class="dropdown-item" href="https://www.reddit.com/r/uspolitics/">/r/USpolitics</a>
<a class="dropdown-item" href="https://www.reddit.com/r/speedy/">/r/Speedy</a>
<a class="dropdown-item" href="https://www.reddit.com/r/androidafterlife">/r/AndroidAfterLife</a>
<h6 class="dropdown-header">Developer subreddits</h6>
<a class="dropdown-item" href="https://www.reddit.com/r/Windows10/">/r/Windows10</a>
</div>
</li>
</ul>
</div>
</nav>
<div id="home" class="jumbotron">
<div class="container">
<div class="alert alert-danger" role="alert">
2018-10-01: Due to Reddit deprecating theming system with their new redesign I will no longer actively develop this theme, but I will still provide bug fixes if needed up until 2019-03-01.
</div>
<h1>ClearShift</h1>
<p>ClearShift is a minimalistic subreddit theme for reddit platform which i built and continuously updated over 3 years span. To improve this theme i took feedback across various subreddits,
<a title="Windows10" href="https://www.reddit.com/r/Windows10/" target="_blank">/r/Windows10</a> is a prime example of this theme.</p>
<p>
<div class="before-and-after">
<img link rel="preload" src="assets/images/band.PNG" class="subject-before" />
<div class="subject-scraper">
<img link rel="preload" src="assets/images/default.PNG" class="subject-after" />
</div>
</div>
</div>
</div>
</div>
</div>
<div id="projects" class="container-fluid">
<h1>Subreddits that use ClearShift</h1>
<div class="row">
<div class="col-md-4">
<h2>Windows 10</h2>
<div class="title-border"></div>
<a href="assets/images/w10.png" target="_blank">
<img src="assets/images/w10.png" alt="Windows 10 subreddit" ;="" class="img-fluid">
</a>
<p>/r/Windows10 was the first subreddit to get treatment of ClearShift V3 theme, feedback from users and Microsoft employees influenced some of the changes.
<center>
<a href="https://www.reddit.com/r/Windows10/" id="minimal" class="btn btn-outline-primary" target="_blank" role="button">Subreddit</a>
<a href="https://github.com/Jasius/Windows-theme/blob/master/dist/css/r-windows10.css" id="minimal" target="_blank" class="btn btn-outline-primary" role="button">Stylesheet</a>
</center>
</p>
</div>
<div class="col-md-4">
<h2>Olympics</h2>
<div class="title-border"></div>
<a href="assets/assets/images/speedy.png" target="_blank">
<img src="assets/images/speedy.png" alt="Youtuber Speedy subreddit" ;="" class="img-fluid">
</a>
<p>/r/Olympics community during 2016 Olympic was using /r/ClearShift theme and thus it was seen by 3 million unique users and viewed 22 million times during the month of olympic games.
<center>
<a href="https://www.reddit.com/r/olympics/" id="minimal" class="btn btn-outline-primary" target="_blank" role="button">Subreddit</a>
<a href="https://www.reddit.com/r/olympics/about/stylesheet" id="minimal" target="_blank" class="btn btn-outline-primary" role="button">Stylesheet</a>
</center>
</p>
</div>
<div class="col-md-4">
<h2>Xbox Deals</h2>
<div class="title-border"></div>
<a href="assets/images/xbox.png" target="_blank">
<img src="assets/images/xbox.png" alt="Xbox Deals subreddit" ;="" class="img-fluid">
</a>
<p>/r/GreatXboxDeals is your one stop shop for all Xbox One related deals! Subscribers in this community share great Xbox deals that they find all over the internet.
<center>
<a href="https://www.reddit.com/r/GreatXboxDeals/" id="minimal" class="btn btn-outline-primary" target="_blank" role="button">Subreddit</a>
<a href="https://github.com/Jasius/Windows-theme/blob/master/dist/css/r-greatxboxdeals.css" id="minimal" target="_blank" class="btn btn-outline-primary" role="button">Stylesheet</a>
</center>
</p>
</div>
</div>
</div>
<div id="features" class="container">
<h1>ClearShift features</h1>
<h2>Night mode</h2>
<a href="assets/assets/images/xboxonen.png" target="_blank">
<img src="assets/images/xboxonen.png" alt="prototype subreddit" ;="" class="img-fluid">
</a>
<p>ClearShift Night Mode supports both RES night mode and CSS night mode.</p>
<div class="row">
<div class="col-md-4">
<h2>Header Stickies</h2>
<img src="assets/images/sstickies.PNG" alt="Windows Mobile subreddit 2015" ;="" class="img-fluid">
<p>Header stickies code is already in the main code of ClearShift so all you have to do is use this template, modify its text, link and then simply
<b>put it into sidebar through "subreddit settings" section.</b> Example of these stickies also provided in sidebar.css file.</p>
<script src="https://gist.github.com/Jasius/72dd7048c635b4178814437fdc0870a6.js"></script>
<p>
<b>#Sticky</b> - Classic blue sticky
<br>
<b>#Stickyg</b> - Green color sticky for important announcements or moderator posts
<br>
<b>#Update</b> - Blue stickie with word "Update" instead of sticky, can be used for follow up threads, software updates
</p>
</div>
<div class="col-md-4">
<h2>Interactive sidebar</h2>
<div style='position:relative;padding-bottom:112%'>
<iframe src='https://gfycat.com/ifr/GreatImmediateAsianporcupine' frameborder='0' scrolling='no' width='100%' height='100%' style='position:absolute;top:0;left:0;' allowfullscreen></iframe>
</div>
<p>Expandable sections on hover sections useful for rules, related subreddits section or even flair toggles if you have them on your subreddit. It's really easy to set up, all you need is put three hash tags and text after them
<b>###General rules</b>, expandable section example shown below.</p>
<script src="https://gist.github.com/Jasius/4bec8631e83487225315b7ea3ba0894b.js"></script>
</div>
<div class="col-md-4">
<h2>UX improvements spotlight</h2>
<strong>New and OP comments highlighted for moderators and Reddit gold users</strong>
<a href="assets/images/newcomments.PNG" target="_blank">
<img src="assets/images/newcomments.PNG" alt="Comments highlighting" ;="" class="img-fluid">
</a>
<strong>Easier and more intuitive comments collapsing</strong>
<a href="assets/images/collapsing.PNG" target="_blank">
<img src="assets/images/collapsing.PNG" alt="Comments collapsing" ;="" class="img-fluid">
</a>
<p>And lots of other smaller additions.</p>
</div>
</div>
</div>
<div id="download" class="container">
<h1>ClearShift installation</h1>
<a href="assets/assets/images/android.png" target="_blank">
<img src="assets/images/android.png" alt="Default ClearShift" ;="" class="img-fluid">
</a>
<p>1.
<a href="https://github.com/Jasius/ClearShift/releases/download/v4.0.5/r-clearshift.zip" download title="Download">Download ClearShift</a> and extract its content.
<br>2. Upload icons and ClearShift.css into stylesheet.
<strong>Note:</strong> Upload icons spritesheet first.
<br>3. Upload
<strong>Sidebar.md</strong> placeholder content into
<strong>subreddit settings</strong>
<em>sidebar section
<strong>(make sure to leave
<code>[](#/RES_SR_Config/NightModeCompatible)</code> at the bottom of the sidebar as it's required for RES night mode)</strong>
</em> and then upload
<strong>Reddit-Logo.png</strong> into
<em>look and feel section.</em>
<br>4. In
<strong>subreddit settings</strong> change custom labels to "Submit Link" and "Submit Text"
<br>5. Enjoy the theme! If you have any questions regarding the theme make a post over at
<a title="ClearShift" href="https://www.reddit.com/r/ClearShift/">/r/ClearShift subreddit.</a>
<br> For CSS related questions
<a title="CSShelp" href="https://www.reddit.com/r/CSShelp/" target="_blank">/r/CSShelp subreddit</a> is the place worth visiting.</p>
<p>
<center>
<a download id="minimal" class="btn btn-outline-primary" role="button" href="https://github.com/Jasius/ClearShift/releases/download/v4.0.5/r-clearshift.zip">Download ClearShift</a>
<a href="https://github.com/Jasius/Windows-theme" id="minimal" class="btn btn-outline-primary" role="button">Source Code</a>
</center>
</p>
</div>
</body>
<footer>
<div class="copyright">
<p>
© Jaska 2015 -
<script>
now = new Date
theYear = now.getYear()
if (theYear < 1900)
theYear = theYear + 1900
document.write(theYear)
</script>
<span style="padding-left:20px">Made with
<img src="assets/images/coffee.png" height="25px" width="25px" alt="coffee"> by
<a href="https://twitter.com/JaskaJasius" target="_blank">
<span class="jaska-foot">Jaska</span>
</a>
</span>
</p>
</div>
<div class="social">
<a href="mailto:[email protected]" class="support" target="_top">Contact Me</a>
<a href="https://twitter.com/JaskaJasius" class="tweet" target="_blank">t</a>
<a href="https://www.reddit.com/message/compose/?to=jaskys" class="linkedin" target="_blank">r</a>
</div>
</footer>
<script src="dist/js/comparison.js"></script>
<script src="dist/js/app.js"></script>
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-76869550-1', 'auto');
ga('send', 'pageview');
</script>