about summary refs log tree commit diff stats
path: root/app/assets/stylesheets/main/layout.scss
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets/stylesheets/main/layout.scss')
-rw-r--r--app/assets/stylesheets/main/layout.scss136
1 files changed, 136 insertions, 0 deletions
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}