diff options
author | Kelly Rauchenberger <fefferburbia@gmail.com> | 2017-06-30 18:23:20 -0400 |
---|---|---|
committer | Kelly Rauchenberger <fefferburbia@gmail.com> | 2017-06-30 18:23:20 -0400 |
commit | 1fb650f48213117fb3ad3eedc6c041d7269adf05 (patch) | |
tree | bc9f561ce8446bc98cec42d104e522b63b8617f7 /app/assets/stylesheets/main | |
parent | 4fe8ef40ee70bee9d4ad897b51f602231e81bfc3 (diff) | |
download | thoughts-1fb650f48213117fb3ad3eedc6c041d7269adf05.tar.gz thoughts-1fb650f48213117fb3ad3eedc6c041d7269adf05.tar.bz2 thoughts-1fb650f48213117fb3ad3eedc6c041d7269adf05.zip |
Split up stylesheets for each layout
Diffstat (limited to 'app/assets/stylesheets/main')
-rw-r--r-- | app/assets/stylesheets/main/entries.scss | 60 | ||||
-rw-r--r-- | app/assets/stylesheets/main/layout.scss | 136 | ||||
-rw-r--r-- | app/assets/stylesheets/main/records.scss | 63 |
3 files changed, 259 insertions, 0 deletions
diff --git a/app/assets/stylesheets/main/entries.scss b/app/assets/stylesheets/main/entries.scss new file mode 100644 index 0000000..038273d --- /dev/null +++ b/app/assets/stylesheets/main/entries.scss | |||
@@ -0,0 +1,60 @@ | |||
1 | // Place all the styles related to the Entries controller here. | ||
2 | // They will automatically be included in application.css. | ||
3 | // You can use Sass (SCSS) here: http://sass-lang.com/ | ||
4 | |||
5 | @import url('https://fonts.googleapis.com/css?family=Slabo+27px'); | ||
6 | @import url('https://fonts.googleapis.com/css?family=Roboto:400,700'); | ||
7 | |||
8 | #blog-post { | ||
9 | font-size: 16px; | ||
10 | line-height: 24px; | ||
11 | margin: 0 3em; | ||
12 | |||
13 | h2 { | ||
14 | font-size: 45px; | ||
15 | line-height: 48px; | ||
16 | margin-top: .5em; | ||
17 | } | ||
18 | |||
19 | h3 { | ||
20 | font-size: 37px; | ||
21 | line-height: 42px; | ||
22 | } | ||
23 | |||
24 | h2, h3 { | ||
25 | font-family: 'Slabo 27px', serif; | ||
26 | margin-bottom: 0; | ||
27 | font-weight: normal; | ||
28 | } | ||
29 | |||
30 | #blog-content { | ||
31 | hyphens: auto; | ||
32 | word-wrap: break-word; | ||
33 | font-family: 'Roboto', sans-serif; | ||
34 | text-align: justify; | ||
35 | |||
36 | a { | ||
37 | text-decoration: none; | ||
38 | font-weight: bold; | ||
39 | |||
40 | &, &:visited { | ||
41 | color: #ee2c2c; | ||
42 | } | ||
43 | |||
44 | &:hover { | ||
45 | text-decoration: underline; | ||
46 | color: #9ea1ad; | ||
47 | } | ||
48 | } | ||
49 | |||
50 | li { | ||
51 | & + li { | ||
52 | margin-top: 1em; | ||
53 | } | ||
54 | } | ||
55 | |||
56 | img { | ||
57 | max-width: 100%; | ||
58 | } | ||
59 | } | ||
60 | } | ||
diff --git a/app/assets/stylesheets/main/layout.scss b/app/assets/stylesheets/main/layout.scss new file mode 100644 index 0000000..ebd4c87 --- /dev/null +++ b/app/assets/stylesheets/main/layout.scss | |||
@@ -0,0 +1,136 @@ | |||
1 | body#main-body { | ||
2 | background-color: #bfefff; | ||
3 | height: 100%; | ||
4 | } | ||
5 | |||
6 | #container { | ||
7 | height: 100%; | ||
8 | margin: 7em auto 0; | ||
9 | width: 75%; /* 66% */ | ||
10 | box-sizing: border-box; | ||
11 | min-width: 890px; | ||
12 | display: flex; | ||
13 | flex-direction: row-reverse; | ||
14 | } | ||
15 | |||
16 | @keyframes trottingPonies { | ||
17 | from { background-position-x: 0px; } | ||
18 | to { background-position-x: -1280px; } | ||
19 | } | ||
20 | |||
21 | #banner { | ||
22 | background-image: image-url("walk_cycle.png"); | ||
23 | background-repeat: repeat-x; | ||
24 | animation: trottingPonies 1s steps(16) infinite; | ||
25 | width: 100%; | ||
26 | padding: 1em; | ||
27 | box-sizing: border-box; | ||
28 | text-indent: -9999px; | ||
29 | height: 80px; | ||
30 | margin-bottom: -80px; | ||
31 | position: relative; | ||
32 | top: -70px; | ||
33 | |||
34 | a { | ||
35 | display: block; | ||
36 | width: 100%; | ||
37 | height: 55px; | ||
38 | } | ||
39 | } | ||
40 | |||
41 | #main { | ||
42 | background-color: white; | ||
43 | -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); | ||
44 | -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); | ||
45 | box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); | ||
46 | width: 75%; | ||
47 | min-width: 720px | ||
48 | } | ||
49 | |||
50 | #content { | ||
51 | box-sizing: border-box; | ||
52 | padding-top: 1em; | ||
53 | } | ||
54 | |||
55 | #flash { | ||
56 | width: 100%; | ||
57 | text-align: center; | ||
58 | padding: .25em; | ||
59 | font-weight: bold | ||
60 | } | ||
61 | |||
62 | .flash-notice { | ||
63 | background-color: #fffde8; | ||
64 | } | ||
65 | |||
66 | .flash-alert { | ||
67 | background-color: #ff6a6a; | ||
68 | } | ||
69 | |||
70 | #sidebar { | ||
71 | box-sizing: border-box; | ||
72 | width: 25%; | ||
73 | font-size: .75em; | ||
74 | color: black; | ||
75 | border-left: 1px solid #eee; | ||
76 | margin-top: 1em; | ||
77 | margin-bottom: 2em; | ||
78 | } | ||
79 | |||
80 | #sidebar h2 { | ||
81 | font-size: 1em; | ||
82 | margin: 0; | ||
83 | } | ||
84 | |||
85 | .sidebar-module { | ||
86 | padding: 1em; | ||
87 | margin-top: 1em; | ||
88 | box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.75); | ||
89 | } | ||
90 | |||
91 | .sidebar-module:nth-child(2n+1) { | ||
92 | background-color: #feff8f; | ||
93 | } | ||
94 | |||
95 | .sidebar-module:nth-child(2n+2) { | ||
96 | background-color: #8fefab; | ||
97 | } | ||
98 | |||
99 | .sidebar-module p { | ||
100 | margin-bottom: 0; | ||
101 | } | ||
102 | |||
103 | .sidebar-module ul { | ||
104 | padding-left: 0; | ||
105 | margin-bottom: 0; | ||
106 | } | ||
107 | |||
108 | .sidebar-module li { | ||
109 | list-style-type: none; | ||
110 | } | ||
111 | |||
112 | .sidebar-module a { | ||
113 | text-decoration: none; | ||
114 | } | ||
115 | |||
116 | .sidebar-module a:hover { | ||
117 | text-decoration: underline; | ||
118 | } | ||
119 | |||
120 | .sidebar-module a:visited { | ||
121 | color: #352712; | ||
122 | } | ||
123 | |||
124 | .breadcrumb { | ||
125 | margin-left: 1em; | ||
126 | |||
127 | a, a:visited { | ||
128 | color: #555d66; | ||
129 | text-decoration: none; | ||
130 | font-size: .75em; | ||
131 | } | ||
132 | |||
133 | a:hover { | ||
134 | text-decoration: underline; | ||
135 | } | ||
136 | } | ||
diff --git a/app/assets/stylesheets/main/records.scss b/app/assets/stylesheets/main/records.scss new file mode 100644 index 0000000..dd4eac1 --- /dev/null +++ b/app/assets/stylesheets/main/records.scss | |||
@@ -0,0 +1,63 @@ | |||
1 | // Place all the styles related to the Records controller here. | ||
2 | // They will automatically be included in application.css. | ||
3 | // You can use Sass (SCSS) here: http://sass-lang.com/ | ||
4 | |||
5 | @import url('https://fonts.googleapis.com/css?family=Inconsolata'); | ||
6 | |||
7 | #records { | ||
8 | padding: 0; | ||
9 | margin: 0 1em; | ||
10 | |||
11 | & > li { | ||
12 | display: block; | ||
13 | padding: .25em 0; | ||
14 | |||
15 | .description { | ||
16 | a { | ||
17 | text-decoration: none; | ||
18 | color: #352712; | ||
19 | font-family: 'Inconsolata', monospace; | ||
20 | |||
21 | &:hover { | ||
22 | text-decoration: underline; | ||
23 | } | ||
24 | |||
25 | &:visited { | ||
26 | color: #352712; | ||
27 | } | ||
28 | } | ||
29 | } | ||
30 | |||
31 | .tags { | ||
32 | margin: .25em; | ||
33 | display: flex; | ||
34 | padding-left: 0; | ||
35 | |||
36 | li { | ||
37 | display: inline; | ||
38 | font-size: .75em; | ||
39 | font-family: 'Inconsolata', monospace; | ||
40 | padding: .25em; | ||
41 | -webkit-border-radius: 5px; | ||
42 | -moz-border-radius: 5px; | ||
43 | border-radius: 5px; | ||
44 | |||
45 | &.record-date { | ||
46 | background-color: #fef1bf; | ||
47 | } | ||
48 | |||
49 | &.entry-type { | ||
50 | text-transform: uppercase; | ||
51 | |||
52 | &.entry-type-blog { | ||
53 | background-color: #90fefb; | ||
54 | } | ||
55 | } | ||
56 | |||
57 | & + li { | ||
58 | margin-left: 1em; | ||
59 | } | ||
60 | } | ||
61 | } | ||
62 | } | ||
63 | } | ||