/
style.scss
142 lines (102 loc) · 4.85 KB
/
style.scss
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
// Display a message to anyone looking at the CSS directly in the hopes of saving them a headache.
/*
Stylesheet by /u/awkisopen. Icons by /u/douchebag_karren.
Partially inspired by /r/boxed.
/
/ o _/_o
_ /, , , _ , / , _ _ _ ,
/ (_/(_(_/_/ (_(_(__(_/ / /_(_)_
/|
(/
v0.1
This stylesheet was written in SASS and then compiled to CSS. To view the
(hopefully) more readable and (somewhat) documented code, visit:
https://github.com/awkisopen/reddit-writing-stylesheet
If you spot a problem or something that could be improved, please open a new
issue or submit a pull request.
*/
// Import helper functions
@import "lib/mixins.scss";
// Size of the header image, used for calculating the announcement bar
$header-height: 75px - 3px;
// I am terrible at variable names and willing to take suggestions. Here's what I've come up with out of necessity:
// ENTIRE PAGE
// background The background of the entire page. Sits behinds the "boxes" of content.
// text Default text color.
// muted-text Text that stands out against the background but is nevertheless muted
// (i.e. the ranking numbers next to each post)
// BOXES
// box-shadow A box's dropshadow.
// box-border A box's border.
// box-background Background color of a box.
// LINKS (SUBMITTED)
// post-link A submitted link.
// post-link-visited A submitted link after having visited.
// post-link-alt-background Background of odd-numbered posts.
// LINKS (OTHER)
// link All links except post links.
// HEADER
// header-background Background color of the header.
// header-foreground A color contrasting with the header's background color.
// CONTENT (this may be expanded to more specific elements in later revisions)
// content-foreground
// content-background
// content-border
// CONTRAST (this may be expanded to more specific elements in later revisions)
// contrast-background The background of an element meant to contrast with the rest of the page.
// contrast-foreground The foreground of an element meant to contrast with the rest of the page.
// contrast-background-selected The background of a selected element inside a contrasting element.
// contrast-foreground-selected The foreground of a selected element inside a contrasting element.
// Color scheme - day
$night: false;
$background: #d3c5a5;
$text: #333333;
$selected: lighten($background, 15%);
$box-shadow: mix(#5f5744, #d3c5a5);
$box-border: #bbbbbb;
$box-background: #ffffff;
$muted-text: #5a5b54;
$post-link: #333333;
$post-link-visited: darken(#ccab99, 20%);
$post-link-alt-background: #fafafa; // Reddit default for self.posts
$link: darkred;
$flair-background: #5f5744;
$flair-foreground: #d3c5a5;
$header-background: #d3c5a5;
$header-foreground: #5f5744;
$content-foreground: #333333;
$content-background: #fafafa;
$content-border: #bbbbbb;
$contrast-background: #5f5744;
$contrast-foreground: #d3c5a5;
$contrast-highlight-background: $contrast-foreground;
$contrast-highlight-foreground: $contrast-background;
body {
@import "elements/all.scss";
}
// Color scheme - night
$night: true;
$background: #2c2922;
$text: #ffffff;
$box-shadow: mix(#2c2922, #000000);
$box-border: #333333;
$box-background: #222222;
$muted-text: #5a5b54;
$post-link: #333333;
$post-link-visited: darken(#ccab99, 20%);
$post-link-alt-background: lighten(#222222, 5%);
$link: red;
$flair-background: #5f5744;
$flair-foreground: #d3c5a5;
$header-background: #d3c5a5;
$header-foreground: #5f5744;
$content-foreground: #fafafa;
$content-background: #333333;
$content-border: #444444;
$contrast-background: #5f5744;
$contrast-foreground: #d3c5a5;
$contrast-highlight-background: $contrast-foreground;
$contrast-highlight-foreground: $contrast-background;
body.res-nightmode {
@import "elements/all.scss";
}