about summary refs log tree commit diff stats
path: root/app/assets/stylesheets/main
diff options
context:
space:
mode:
authorKelly Rauchenberger <fefferburbia@gmail.com>2017-06-30 18:23:20 -0400
committerKelly Rauchenberger <fefferburbia@gmail.com>2017-06-30 18:23:20 -0400
commit1fb650f48213117fb3ad3eedc6c041d7269adf05 (patch)
treebc9f561ce8446bc98cec42d104e522b63b8617f7 /app/assets/stylesheets/main
parent4fe8ef40ee70bee9d4ad897b51f602231e81bfc3 (diff)
downloadthoughts-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.scss60
-rw-r--r--app/assets/stylesheets/main/layout.scss136
-rw-r--r--app/assets/stylesheets/main/records.scss63
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 @@
1body#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}