-
Notifications
You must be signed in to change notification settings - Fork 6
Expand file tree
/
Copy pathosurb.sass
More file actions
157 lines (136 loc) · 5.18 KB
/
osurb.sass
File metadata and controls
157 lines (136 loc) · 5.18 KB
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
// useful to note: http://colorschemedesigner.com/#5y11TrYcxw0w0
@import reset.sass
$color_bg_red: #5F0C17
$color_para_grey: #e5e5e5
$color_dark_text: #333
$color_green_base: #1c550b
$color_green_dark: #103703
$color_red_dark: #5F121E
$color_red_darker: #4F141D
$color_green_bright: #55aa3b
$page_width: 650px
$paragraph_padding_v: .5em
$paragraph_padding_h: 16px
$paragraph_width: $page_width - ($paragraph_padding_h * 2)
$button_border_width: 2px
$button_height: 2em
$button_width: 6.5em // (0.5em / char) * |max_button_text| / 2
// The border_radius function from Compass is much more cross-browser compatible,
// but it is not easily transferred here. If this becomes an issue, use Compass.
=border_radius($top_left, $bottom_left, $top_right, $bottom_right)
-moz-border-radius-bottomleft: $bottom_left
-moz-border-radius-bottomright: $bottom_right
-moz-border-radius-topleft: $top_left
-moz-border-radius-topright: $top_right
-webkit-border-bottom-left-radius: $bottom_left
-webkit-border-bottom-right-radius: $bottom_right
-webkit-border-top-left-radius: $top_left
-webkit-border-top-right-radius: $top_right
border-bottom-left-radius: $bottom_left
border-bottom-right-radius: $bottom_right
border-top-left-radius: $top_left
border-top-right-radius: $top_right
=beveled_text
text-shadow: rgba(0,0,0,0.5) 0px -1px 0px, rgba(255,255,255,0.5) 0px 1px 0px
body
background-image: url("textured-bg.png")
background-repeat: repeat
background-color: $color_bg_red
margin: 0 auto
font-family: Arial, Helvetica, sans-serif
line-height: 1.5em
#background-bar
background-color: lighten($color_green_dark, 25%)
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(lighten($color_green_bright,15%)), to(lighten($color_green_dark,20%))) // from: 6ECF36 to: 4E9326
background-image: -moz-linear-gradient(center top , lighten($color_green_bright,15%) 0%, lighten($color_green_dark,20%) 100%)
width: 100%
height: $button_height / 3
position: absolute
top: 0
left: 0
#header
margin: 0px auto
margin-bottom: -20px
position: relative
width: $page_width
img
width: 35%
padding-left: 20px
margin-top: 15px
h1
position: absolute
right: 0px
top: 50%
bottom: 50px
color: $color_para_grey
font-size: 5.5em
text-shadow: rgba(0,0,0,0.7) 0px 2px 2px
.relevant_links
width: $page_width
font-size: .8em
li
height: $button_height
width: 25%
display: inline-block
background-color: lighten($color_green_dark, 25%)
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(lighten($color_green_bright,15%)), to(lighten($color_green_dark,20%))) // from: 6ECF36 to: 4E9326
// background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6ECF36), to(#4E9326))
background-image: -moz-linear-gradient(center top , lighten($color_green_bright,15%) 0%, lighten($color_green_dark,20%) 100%)
// background-image: -moz-linear-gradient(center top , #6ECF36 0%, #4E9326 100%)
float: left
&:hover
background-color: lighten($color_green_dark, 35%)
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(lighten($color_green_bright,25%)), to(lighten($color_green_dark,30%))) // from: 6ECF36 to: 4E9326
// background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4E9326), to(#528F2C))
background-image: -moz-linear-gradient(center top , lighten($color_green_bright,25%) 0%, lighten($color_green_dark,30%) 100%)
// background-image: -moz-linear-gradient(center top , #4E9326 0%, #528F2C 100%)
li.first
+border_radius(0px,5px,0px,0px)
li.last
+border_radius(0px,0px,0px,5px)
a.button
/* background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6ECF36), to(#4E9326))
/* background-image: -moz-linear-gradient(center top , #6ECF36 0%, #4E9326 100%)
color: $color_green_dark //$color_dark_text
+beveled_text
//text-shadow: rgba(255,255,255,0.5) 1px 1px 3px
display: block
text-align: center
text-decoration: none
height: 100%
#content
width: $page_width
margin: 0px auto
margin-bottom: 50px
ul
li.blurb
display: block
clear: both
margin-bottom: 1.5em
h2
color: $color_red_dark
font-size: 1.4em
line-height: 1.8em
padding: 0 0 8px 0
font-family: Georgia
font-style: italic
.introduction
+border_radius(5px,5px,5px,5px)
width: $paragraph_width
padding: $paragraph_padding_v $paragraph_padding_h
background-color: $color_para_grey
-moz-box-shadow: 0 0 3px 3px $color_red_darker
-webkit-box-shadow: 0 0 3px 3px $color_red_darker
box-shadow: 0 0 3px 3px $color_red_darker
//background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(lighten($color_para_grey, 10%)), to(darken($color_para_grey, 10%)))
//background-image: -moz-linear-gradient(center top , lighten($color_para_grey, 10%) 0%, darken($color_para_grey, 10%) 100%)
/* background-color: rgba(255, 255, 255, 0.1) */
/* float: left */
p
color: #111 /* #e5e5e5 */
text-shadow: #bbb 2px 1px 4px
em
font-weight: bold
color: $color_green_bright
font-style: normal
text-shadow: none