diff options
Diffstat (limited to 'app/assets/stylesheets')
-rw-r--r-- | app/assets/stylesheets/main/entries.scss | 79 | ||||
-rw-r--r-- | app/assets/stylesheets/main/layout.scss | 151 |
2 files changed, 170 insertions, 60 deletions
diff --git a/app/assets/stylesheets/main/entries.scss b/app/assets/stylesheets/main/entries.scss index 4d884fa..b2832e4 100644 --- a/app/assets/stylesheets/main/entries.scss +++ b/app/assets/stylesheets/main/entries.scss | |||
@@ -8,23 +8,73 @@ | |||
8 | #blog-post { | 8 | #blog-post { |
9 | font-size: 16px; | 9 | font-size: 16px; |
10 | line-height: 24px; | 10 | line-height: 24px; |
11 | margin: 0 3em; | 11 | margin: 0 1em; |
12 | 12 | ||
13 | h2 { | 13 | .blog-title { |
14 | font-size: 45px; | 14 | h2 { |
15 | line-height: 48px; | 15 | width: 100%; |
16 | margin-top: .5em; | 16 | margin-left: 10px; |
17 | margin-top: 0; | ||
18 | margin-bottom: 0; | ||
19 | color: #59770e; | ||
20 | border-bottom: 1px dotted #CCCCCC; | ||
21 | padding-bottom: 3px; | ||
22 | } | ||
17 | } | 23 | } |
18 | 24 | ||
19 | h3 { | 25 | header { |
20 | font-size: 37px; | 26 | display: flex; |
21 | line-height: 42px; | 27 | |
22 | } | 28 | .post-calendar { |
29 | width: 45px; | ||
30 | height: 49px; | ||
31 | |||
32 | &.post-date-1 { | ||
33 | background: image-url("date-bg-1.gif") no-repeat; | ||
34 | } | ||
35 | |||
36 | &.post-date-2 { | ||
37 | background: image-url("date-bg-2.gif") no-repeat; | ||
38 | } | ||
39 | |||
40 | &.post-date-3 { | ||
41 | background: image-url("date-bg-3.gif") no-repeat; | ||
42 | } | ||
43 | |||
44 | &.post-date-4 { | ||
45 | background: image-url("date-bg-4.gif") no-repeat; | ||
46 | } | ||
47 | |||
48 | .post-month { | ||
49 | font-size: 11px; | ||
50 | color: white; | ||
51 | text-align: center; | ||
52 | display: block; | ||
53 | line-height: 11px; | ||
54 | padding-top: 2px; | ||
55 | margin-left: -3px; | ||
56 | } | ||
57 | |||
58 | .post-day { | ||
59 | font-size: 18px; | ||
60 | color: #999999; | ||
61 | text-align: center; | ||
62 | display: block; | ||
63 | line-height: 18px; | ||
64 | padding-top: 7px; | ||
65 | margin-left: -3px; | ||
66 | } | ||
67 | } | ||
23 | 68 | ||
24 | h2, h3 { | 69 | .post-author { |
25 | font-family: 'Slabo 27px', serif; | 70 | background: image-url("Hatkirby.ico") no-repeat; |
26 | margin-bottom: 0; | 71 | padding-left: 20px; |
27 | font-weight: normal; | 72 | margin-left: 10px; |
73 | float: left; | ||
74 | font-size: 95%; | ||
75 | font: 75%/150% sans-serif; | ||
76 | color: #999; | ||
77 | } | ||
28 | } | 78 | } |
29 | } | 79 | } |
30 | 80 | ||
@@ -80,7 +130,6 @@ | |||
80 | .entry-content { | 130 | .entry-content { |
81 | hyphens: auto; | 131 | hyphens: auto; |
82 | word-wrap: break-word; | 132 | word-wrap: break-word; |
83 | text-align: justify; | ||
84 | font-family: 'Roboto', sans-serif; | 133 | font-family: 'Roboto', sans-serif; |
85 | 134 | ||
86 | a { | 135 | a { |
diff --git a/app/assets/stylesheets/main/layout.scss b/app/assets/stylesheets/main/layout.scss index 774ec4c..180d1c7 100644 --- a/app/assets/stylesheets/main/layout.scss +++ b/app/assets/stylesheets/main/layout.scss | |||
@@ -1,51 +1,41 @@ | |||
1 | body#main-body { | 1 | body#main-body { |
2 | background-color: #bfefff; | ||
3 | height: 100%; | 2 | height: 100%; |
4 | font-family: sans-serif; | 3 | font-family: sans-serif; |
5 | } | 4 | } |
6 | 5 | ||
7 | #container { | 6 | #container { |
8 | height: 100%; | 7 | height: 100%; |
9 | margin: 7em auto 2em; | 8 | margin: 10px auto; |
10 | width: 75%; /* 66% */ | 9 | width: 75%; /* 66% */ |
11 | box-sizing: border-box; | 10 | box-sizing: border-box; |
12 | min-width: 890px; | 11 | min-width: 910px; |
13 | display: flex; | ||
14 | flex-direction: row-reverse; | ||
15 | } | ||
16 | |||
17 | @keyframes trottingPonies { | ||
18 | from { background-position-x: 0px; } | ||
19 | to { background-position-x: -1280px; } | ||
20 | } | 12 | } |
21 | 13 | ||
22 | #banner { | 14 | #banner { |
23 | background-image: image-url("walk_cycle.png"); | 15 | background-image: image-url("fourisland_header.png"); |
24 | background-repeat: repeat-x; | 16 | width: 900px; |
25 | animation: trottingPonies 1s steps(16) infinite; | 17 | height: 200px; |
26 | width: 100%; | 18 | |
27 | padding: 1em; | 19 | h1 { |
28 | box-sizing: border-box; | 20 | margin: 0; |
29 | text-indent: -9999px; | 21 | |
30 | height: 80px; | 22 | a { |
31 | margin-bottom: -80px; | 23 | display: block; |
32 | position: relative; | 24 | width: 900px; |
33 | top: -70px; | 25 | height: 200px; |
34 | 26 | text-indent: -5000px; | |
35 | a { | 27 | text-decoration: none; |
36 | display: block; | 28 | margin: 0; |
37 | width: 100%; | 29 | } |
38 | height: 55px; | ||
39 | } | 30 | } |
40 | } | 31 | } |
41 | 32 | ||
33 | #page-body { | ||
34 | display: flex; | ||
35 | } | ||
36 | |||
42 | #main { | 37 | #main { |
43 | background-color: white; | 38 | width: 70%; |
44 | -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); | ||
45 | -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); | ||
46 | box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); | ||
47 | width: 75%; | ||
48 | min-width: 720px | ||
49 | } | 39 | } |
50 | 40 | ||
51 | #content { | 41 | #content { |
@@ -70,10 +60,9 @@ body#main-body { | |||
70 | 60 | ||
71 | #sidebar { | 61 | #sidebar { |
72 | box-sizing: border-box; | 62 | box-sizing: border-box; |
73 | width: 25%; | 63 | width: 30%; |
74 | font-size: .75em; | 64 | font-size: .75em; |
75 | color: black; | 65 | color: black; |
76 | border-left: 1px solid #eee; | ||
77 | margin-top: 1em; | 66 | margin-top: 1em; |
78 | margin-bottom: 2em; | 67 | margin-bottom: 2em; |
79 | font-family: sans-serif; | 68 | font-family: sans-serif; |
@@ -81,21 +70,14 @@ body#main-body { | |||
81 | 70 | ||
82 | #sidebar h2 { | 71 | #sidebar h2 { |
83 | font-size: 1em; | 72 | font-size: 1em; |
84 | margin: 0; | ||
85 | } | 73 | } |
86 | 74 | ||
87 | .sidebar-module { | 75 | .sidebar-module { |
88 | padding: 1em; | 76 | padding: 0 1em; |
89 | margin-top: 1em; | ||
90 | box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.75); | ||
91 | } | ||
92 | |||
93 | .sidebar-module:nth-child(2n+1) { | ||
94 | background-color: #feff8f; | ||
95 | } | ||
96 | 77 | ||
97 | .sidebar-module:nth-child(2n+2) { | 78 | & + .sidebar-module { |
98 | background-color: #8fefab; | 79 | margin-top: 1em; |
80 | } | ||
99 | } | 81 | } |
100 | 82 | ||
101 | .sidebar-module p { | 83 | .sidebar-module p { |
@@ -123,6 +105,85 @@ body#main-body { | |||
123 | color: #352712; | 105 | color: #352712; |
124 | } | 106 | } |
125 | 107 | ||
108 | blockquote.bubble { | ||
109 | margin: 0; | ||
110 | border: 1px solid #c9c2c1; | ||
111 | background-color: #fff; | ||
112 | position: relative; | ||
113 | |||
114 | div { | ||
115 | margin: 10px; | ||
116 | padding: 0; | ||
117 | } | ||
118 | } | ||
119 | |||
120 | .bubble { | ||
121 | width: auto; | ||
122 | margin-bottom: 24px; | ||
123 | padding: 0 1em 1em; | ||
124 | |||
125 | &.rounded { | ||
126 | margin-bottom: 10px; | ||
127 | border: 3px solid #fff; | ||
128 | background-color: #b7e0ff; | ||
129 | border-radius: 10px; | ||
130 | |||
131 | blockquote { | ||
132 | border: 0; | ||
133 | background-color: transparent; | ||
134 | |||
135 | div { | ||
136 | margin: 0 10px; | ||
137 | } | ||
138 | } | ||
139 | } | ||
140 | |||
141 | &.pimped { | ||
142 | color: white; | ||
143 | border: 3px solid white; | ||
144 | background-color: #111; | ||
145 | } | ||
146 | |||
147 | div.bquote blockquote { | ||
148 | margin: 0; | ||
149 | padding: 0; | ||
150 | border: 1px solid #c9c2c1; | ||
151 | background-color: white; | ||
152 | } | ||
153 | } | ||
154 | |||
155 | cite.bubble { | ||
156 | font-style: normal; | ||
157 | position: relative; | ||
158 | margin: 0; | ||
159 | padding: 7px 0px 0px 15px; | ||
160 | } | ||
161 | |||
162 | blockquote.bubble::after { | ||
163 | /* (B1-1) ATTACH TRANSPARENT BORDERS */ | ||
164 | content: ""; | ||
165 | border: 10px solid transparent; | ||
166 | |||
167 | /* (B1-2) NECESSARY TO POSITION THE "TAIL" */ | ||
168 | position: absolute; | ||
169 | } | ||
170 | |||
171 | /* (B2) BOTTOM "CALLOUT TAIL" */ | ||
172 | blockquote.bubble.bottom::after { | ||
173 | /* (B2-1) DOWN TRIANGLE */ | ||
174 | border-top-color: #b7e0ff; | ||
175 | border-bottom: 0; | ||
176 | |||
177 | /* (B2-2) POSITION AT BOTTOM */ | ||
178 | bottom: -10px; | ||
179 | left: 3.5em; | ||
180 | margin-left: -20px; | ||
181 | |||
182 | &.pimped { | ||
183 | border-top-color: black; | ||
184 | } | ||
185 | } | ||
186 | |||
126 | .breadcrumb { | 187 | .breadcrumb { |
127 | margin-left: 1em; | 188 | margin-left: 1em; |
128 | 189 | ||