about summary refs log tree commit diff stats
path: root/app/assets/stylesheets
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets/stylesheets')
-rw-r--r--app/assets/stylesheets/main/entries.scss79
-rw-r--r--app/assets/stylesheets/main/layout.scss151
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 @@
1body#main-body { 1body#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
108blockquote.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
155cite.bubble {
156 font-style: normal;
157 position: relative;
158 margin: 0;
159 padding: 7px 0px 0px 15px;
160}
161
162blockquote.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" */
172blockquote.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