shrink main logo on smaller displays (xs)
[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 @media screen and (max-width: 767px) {
11 .logo img { width: 150px; }
12 }
13
14 .navbar-default {
15 background: #000;
16 color: #FFF;
17 border: none;
18 border-radius: 0px;
19 box-sizing: content-box;
20 display: flex;
21 flex-direction: column-reverse;
22 align-items: center;
23 margin-bottom: 100px;
24 min-height: 100px;
25 }
26
27 .navbar-header, #navbar-collapse {
28 width: 95%;
29 max-width: 1150px;
30 padding: 0;
31 margin: 0 auto;
32 border: none;
33 overflow: hidden;
34 }
35
36 .navbar-default .navbar-toggle { z-index: 999; }
37
38 .navbar-header {
39 position: absolute;
40 top: 5px;
41 }
42
43 .navbar-brand { text-indent: -1000px; }
44
45 #block-ryf-main-menu .navbar-nav { margin-left: 180px; }
46
47 .navbar-default .navbar-nav > .active > a:hover,
48 .navbar-default .navbar-nav>li>a {
49 color: #FFF;
50 border-bottom: 2px solid transparent;
51 }
52
53 .navbar-default .navbar-nav > .active > a:hover,
54 .navbar-default .navbar-nav > .active > a,
55 .navbar-default .navbar-nav>li>a:hover {
56 color: #edd400;
57 border-bottom: 2px solid #edd400;
58 padding-bottom: 5px;
59 background: #000;
60 margin-bottom: 5px;
61 }
62
63 #block-bootstrap-main-menu {
64 margin-left: 200px;
65 width: 100%;
66 }
67
68 .page-header {
69 border-bottom: 2px solid #000;
70 font-size: 2em;
71 }
72
73 .region-header .search-block-form {
74 width: 300px;
75 float: right;
76 }
77
78 /* RYF List */
79
80 .ryf-list {
81 float: left;
82 margin: 0;
83 padding: 0.5em;
84 position:relative;
85 list-style: none;
86 }
87
88 .ryf-list article {
89 border: 1px solid #ececec;
90 border-radius: 5px;
91 padding: 1em;
92 box-shadow: 2px 2px 5px #ddd;
93 transition: 0.3s;
94 }
95
96 .ryf-list article:hover {
97 box-shadow: 0px 0px 5px #aaa;
98 }
99
100 .ryf-list .field--type-image {
101 width: 100%;
102 background: #fff;
103 border-radius: 10px;
104 display: flex;
105 justify-content: center;
106 }
107
108 .ryf-list img {
109 max-width: 150px;
110 min-height: 150px;
111 overflow: hidden;
112 }
113
114 .ryf-list img:hover {
115 border-radius: 0;
116 }
117
118 .ryf-list h2 {
119 text-align: left;
120 font-size: 1.5em;
121 font-weight: 500;
122 line-height: 1.2em;
123 margin: 0;
124 padding: 0;
125 padding-bottom: 1em;
126 }
127
128 .ryf-list a {
129 color: #118991;
130 text-decoration: none;
131 }
132
133 .ryf-list a:hover {
134 color: #000;
135 }
136
137 .ryf-list .node-readmore,
138 .ryf-list .tags,
139 .ryf-list .supplier {
140 width: 100%;
141 float: left;
142 font-size: 0.9em;
143 border-top: 1px solid #ccc4c4;
144 margin-top: 5px;
145 padding-top: 5px;
146 color: #afadad;
147 }
148
149 .ryf-list .node-readmore {
150 text-align: right;
151 }
152
153
154 /* Footer */
155
156 .footer {
157 background: #333;
158 color: #FFF;
159 }
160
161 .footer a { color: #edd400; }
162
163 .footer a:hover { color: #FFF; }
164
165 .footer h4 { font-weight: bold; }
166
167 .footer .copyright { font-size: 0.9em; text-align: center; width: 80%; margin-top: 1em; border-top: 1px solid #111; padding: 1em; }
168
169 #fsf-logo-footer { margin-bottom: 10px; }
170