f498662fa82fe0f3610e4759e1c9dba714ecc7b8
[ryf-theme.git] / css / style.css
1 /**
2 * If using a CSS pre-processor, tell it to overwrite this file. If not, place
3 * your custom CSS modifications here.
4 */
5
6 body { margin: 0; min-width: 320px; }
7
8 a { transition: 0.3s; }
9
10 .navbar-default {
11 background: #000;
12 color: #FFF;
13 border: none;
14 border-radius: 0px;
15 box-sizing: content-box;
16 align-items: center;
17 margin-bottom: 100px;
18 min-height: 100px;
19 }
20
21 .navbar-header, #navbar-collapse {
22 max-width: 1150px;
23 padding: 0;
24 margin: 0 auto;
25 border: none;
26 overflow: hidden;
27 }
28
29 .navbar-default .navbar-toggle { display: none; }
30
31 .navbar-header {
32 position: absolute;
33 top: 5px;
34 }
35
36 .navbar-brand { display: none; }
37
38 #block-ryf-main-menu .navbar-nav { margin-left: 180px; }
39
40 .navbar-default .navbar-nav > .active > a,
41 .navbar-default .navbar-nav > .active > a:hover,
42 .navbar-default .navbar-nav > li > a {
43 color: #FFF;
44 background: #000;
45 border-bottom: 2px solid transparent;
46 padding-bottom: 10px;
47 margin-bottom: 5px;
48 }
49
50 .navbar-default .navbar-nav > .active > a,
51 .navbar-default .navbar-nav > .active > a:hover,
52 .navbar-default .navbar-nav > li > a:hover {
53 color: #edd400;
54 border-bottom: 2px solid #edd400;
55 padding-bottom: 5px;
56 margin-bottom: 10px;
57 }
58
59 .page-header {
60 border-bottom: 2px solid #000;
61 font-size: 2em;
62 }
63
64 .region-header .search-block-form {
65 width: 300px;
66 float: right;
67 }
68
69 @media screen and (min-width: 520px) and (max-width: 599px) {
70 .logo img { margin-left: 50px; }
71 #block-ryf-main-menu .navbar-nav { margin-left: 230px; }
72 }
73
74 @media screen and (min-width: 600px) and (max-width: 767px) {
75 .logo img { margin-left: 100px; }
76 #block-ryf-main-menu .navbar-nav { margin-left: 280px; }
77 }
78
79 @media screen and (max-width: 767px) {
80 .logo img { height: 150px; margin-top: 25px; }
81 .navbar-default { min-height: 230px; margin-bottom: 30px; }
82 #block-ryf-main-menu .navbar-nav { max-width: 130px; }
83 .search-block-form { margin-top: -50px; }
84 /* note that the following will not work if the breadcrumb is missing on a
85 * page, such as the main page */
86 .breadcrumb { margin-top: 50px; }
87 }
88
89 @media screen and (min-width: 768px) {
90 .navbar-nav { margin-top: 40px; }
91 .search-block-form { margin-top: -80px; }
92 }
93
94 /* Selectors */
95
96 @media screen and (min-width: 768px) {
97 .form-inline .form-item .select-wrapper {
98 display: block;
99 }
100 .form-inline .form-actions {
101 margin-top: 21px;
102 }
103 }
104
105 /* RYF List */
106
107 .ryf-list {
108 float: left;
109 margin: 0;
110 padding: 0.5em;
111 position:relative;
112 list-style: none;
113 }
114
115 .ryf-list article {
116 border: 1px solid #ececec;
117 border-radius: 5px;
118 padding: 1em;
119 box-shadow: 2px 2px 5px #ddd;
120 transition: 0.3s;
121 }
122
123 .ryf-list article:hover {
124 box-shadow: 0px 0px 5px #aaa;
125 }
126
127 .ryf-list .field--type-image {
128 width: 100%;
129 background: #fff;
130 border-radius: 10px;
131 display: flex;
132 justify-content: center;
133 }
134
135 .ryf-list img {
136 max-width: 150px;
137 min-height: 150px;
138 overflow: hidden;
139 }
140
141 .ryf-list img:hover {
142 border-radius: 0;
143 }
144
145 .ryf-list h2 {
146 text-align: left;
147 font-size: 1.5em;
148 font-weight: 500;
149 line-height: 1.2em;
150 margin: 0;
151 padding: 0;
152 padding-bottom: 1em;
153 }
154
155 .ryf-list a {
156 color: #118991;
157 text-decoration: none;
158 }
159
160 .ryf-list a:hover {
161 color: #000;
162 }
163
164 .ryf-list .node-readmore,
165 .ryf-list .tags,
166 .ryf-list .supplier {
167 width: 100%;
168 float: left;
169 font-size: 0.9em;
170 border-top: 1px solid #ccc4c4;
171 margin-top: 5px;
172 padding-top: 5px;
173 color: #afadad;
174 }
175
176 .ryf-list .node-readmore {
177 text-align: right;
178 }
179
180
181 /* Sidebars */
182
183
184 @media screen and (max-width: 767px) {
185 .path-products #block-views-block-categories-categories-block { display: none; }
186 }
187
188
189 /* Footer */
190
191 .footer {
192 background: #333;
193 color: #FFF;
194 }
195
196 /* full page width for footer */
197 .footer {
198 width: 100%;
199 }
200
201 .footer a { color: #edd400; }
202
203 .footer a:hover { color: #FFF; }
204
205 .footer h4 { font-weight: bold; }
206
207 .footer .copyright { font-size: 0.9em; text-align: center; width: 80%; margin-top: 1em; border-top: 1px solid #111; padding: 1em; }
208
209 #fsf-logo-footer { margin-bottom: 10px; }
210
211 @media print { #fsf-logo-footer { filter: invert(100%) } }
212