Commit 00193c9 Update site with new template

5 files Authored and Committed by bex 5 days ago
Update site with new template

https://pagure.io/design/issue/597

    
 1 @@ -10,16 +10,18 @@
 2   
 3     <body class="home" data-spy="scroll" data-target="#flocknav">
 4       <xi:include href="../templates/head.html" />
 5 -     <div id="welcome" class="non-jumbo text-center">
 6 -   »         <div class="container">
 7 + 
 8 +     <div class="bg">
 9 +       <div class="container">
10           <div class="row">
11             <div class="col-xs-12 col-md-8 col-md-offset-2">
12 -             <br/>
13 -             <p>
14 -             <img src="${path}/static/images/flock-dresden-816x345.jpg" />
15 -             </p>
16 +           <div id="welcome" class="non-jumbo text-center">
17 +               <img src="${path}/static/images/flocklogo2.png" alt="Flock"/>
18 +             <h1>Dresden</h1>
19 +             <h2>2018</h2>
20             </div>
21 -   »         </div>
22 +           </div>
23 +         </div>
24         </div>
25       </div>
26   
  1 @@ -1,20 +1,50 @@
  2 - body{
  3 -   position:relative;
  4 -   margin-top:50px;
  5 + body {
  6 +   margin: -0px !important;
  7 +   padding: 0px !important;
  8   }
  9   
 10 - #welcome2 {
 11 - //  background-image: url('/static/images/capecod-landscape.png');
 12 -   background-position: center bottom;
 13 -   background-repeat: no-repeat;
 14 -   padding-bottom: 15em !important;
 15 + .container {
 16 +   padding: 3em 6em;
 17 + }
 18 + 
 19 + .bg {
 20 +   background: #1a3c6d url('https://i.imgur.com/XGOrohP.png') no-repeat center center;
 21 +   width: 100%;
 22 +   height: 350px; /*same height as jumbotron */
 23 +   top:0;
 24 +   left:0;
 25 +   z-index: -1;
 26 +   background-size: cover;
 27 +   margin: 0px;
 28   }
 29   
 30   #welcome {
 31 -   background: linear-gradient(to bottom, #3c6eb4 0%,#e2faf5 100%);
 32 -   padding-bottom: 0px;
 33 +   height: 350px;
 34 +   color: white;
 35 +   text-shadow: #444 0 1px 1px;
 36 +   background:transparent;
 37 +   font-family: "Montserrat", sans-serif !important;
 38 +   text-align: center;
 39 +   text-transform: uppercase;
 40   }
 41   
 42 + #welcome h1 {
 43 +   font-weight: 900;
 44 +   font-size: 5em;
 45 +   margin: 0px;
 46 + }
 47 + 
 48 + #welcome h2 {
 49 +   margin-top: -10px;
 50 +   font-weight: 300;
 51 +   font-size: 3em;
 52 +   }
 53 +   
 54 + #welcome img {
 55 +   margin-top: 4em;
 56 +   margin-bottom: 0px;
 57 +   }
 58 + 
 59   .flock-navbar {
 60       font-family: "Montserrat";
 61       text-transform: uppercase;
 62 @@ -39,7 +69,7 @@
 63   .nav-pills > li.active > a:hover,
 64   .nav-pills > li.active  {
 65     background-color: #eee; */
 66 -   color: #3c6eb4;
 67 +   color: #1a3c6d;
 68   }
 69   
 70   .navbar-brand{
 71 @@ -66,10 +96,6 @@
 72     font-weight: bold;
 73   }
 74   
 75 - h2 {
 76 -   color: #294172;
 77 - }
 78 - 
 79   h1, h2, h3, h4, h5, h6
 80   {
 81     font-family: Montserrat;
 82 @@ -111,16 +137,6 @@
 83   }
 84   
 85   
 86 - .non-jumbo.light-blue{
 87 -   background-color: #cceaec;
 88 -   color:#3c6eb4;
 89 - }
 90 - 
 91 - .non-jumbo.blue{
 92 -   background-color: #3c6eb4;
 93 -   color: white;
 94 - }
 95 - 
 96   .non-jumbo.blue a {
 97     color: white !important;
 98     text-decoration: underline !important;
 99 @@ -139,10 +155,6 @@
100   .blue hr, .light-blue hr { border-top: 3px white solid; }
101   
102   
103 - #welcome
104 - {
105 -   padding-top: 1em;
106 - }
107   
108   /* calendar for schedule area */
109   .calendar th,
  1 @@ -0,0 +1,188 @@
  2 + body{
  3 +   position:relative;
  4 +   margin-top:50px;
  5 + }
  6 + 
  7 + #welcome2 {
  8 + //  background-image: url('/static/images/capecod-landscape.png');
  9 +   background-position: center bottom;
 10 +   background-repeat: no-repeat;
 11 +   padding-bottom: 15em !important;
 12 + }
 13 + 
 14 + #welcome {
 15 +   background: linear-gradient(to bottom, #3c6eb4 0%,#e2faf5 100%);
 16 +   padding-bottom: 0px;
 17 + }
 18 + 
 19 + .flock-navbar {
 20 +     font-family: "Montserrat";
 21 +     text-transform: uppercase;
 22 +     background-color: white;
 23 + }
 24 + 
 25 + .flock-navbar ul.nav {
 26 +     margin-top:0.6em;
 27 + }
 28 + 
 29 + .navbar {
 30 +   margin-bottom: 0 !important;
 31 + }
 32 + 
 33 + .nav > li > a {
 34 +   padding: 5px 10px;
 35 +   color: #294172;
 36 +   font-weight: 100;
 37 + }
 38 + 
 39 + .nav-pills > li.active > a,
 40 + .nav-pills > li.active > a:hover,
 41 + .nav-pills > li.active  {
 42 +   background-color: #eee; */
 43 +   color: #3c6eb4;
 44 + }
 45 + 
 46 + .navbar-brand{
 47 +   padding: 10px 15px;
 48 + }
 49 + 
 50 + #comms, #transport, #venue {
 51 +   text-align: left;
 52 + }
 53 + #telegram {
 54 +   padding-top: 2em;
 55 +   text-align: center;
 56 + }
 57 + 
 58 + .flock-info-item {
 59 +   text-align: center;
 60 + }
 61 + .flock-info-item .fa {
 62 +   font-size: 40px;
 63 + }
 64 + 
 65 + a {
 66 +   color: #3c6eb4 !important;
 67 +   font-weight: bold;
 68 + }
 69 + 
 70 + h2 {
 71 +   color: #294172;
 72 + }
 73 + 
 74 + h1, h2, h3, h4, h5, h6
 75 + {
 76 +   font-family: Montserrat;
 77 + }
 78 + 
 79 + h1, h2, h3 {
 80 +   text-transform: uppercase;
 81 + }
 82 + 
 83 + h3 {
 84 +   color: #8bbcbf;
 85 + }
 86 + 
 87 + .jumbotron
 88 + {
 89 +   margin-bottom:0;
 90 + }
 91 + 
 92 + 
 93 + .large-icon{
 94 +   color: white;
 95 + background: #326b63 none repeat scroll 0% 0%;
 96 + width: 100px;
 97 + margin-left: auto;
 98 + margin-right: auto;
 99 + border-radius: 100px;
100 + height: 100px;
101 + line-height: 100px;
102 + font-size: 50px;
103 + }
104 + 
105 + .non-jumbo{
106 +   padding-top: 3em;
107 +   padding-bottom: 3em;
108 + }
109 + 
110 + .non-jumbo p{
111 +   font-size: 1.1em;
112 + }
113 + 
114 + 
115 + .non-jumbo.light-blue{
116 +   background-color: #cceaec;
117 +   color:#3c6eb4;
118 + }
119 + 
120 + .non-jumbo.blue{
121 +   background-color: #3c6eb4;
122 +   color: white;
123 + }
124 + 
125 + .non-jumbo.blue a {
126 +   color: white !important;
127 +   text-decoration: underline !important;
128 + }
129 + 
130 + .non-jumbo.blue h2 { color: #cceaec; }
131 + .non-jumbo.blue h3 { color: white; }
132 + .non-jumbo.light-blue h3 { color: #5483be; }
133 + 
134 + .non-jumbo.blue .large-icon{
135 +   background: #326b63 none repeat scroll 0% 0%;
136 +   color: white;
137 + }
138 + 
139 + hr { margin: 3em; border-top: 3px #dee1dd solid; }
140 + .blue hr, .light-blue hr { border-top: 3px white solid; }
141 + 
142 + 
143 + #welcome
144 + {
145 +   padding-top: 1em;
146 + }
147 + 
148 + /* calendar for schedule area */
149 + .calendar th,
150 + .calendar td {
151 +   border-collapse: collapse;
152 +   border: 1px solid black;
153 + }
154 + 
155 + .calendar tr.flock td { 
156 +    border-bottom: 1px solid white;
157 + }
158 + .calendar tr.flock td.flock { 
159 +    border-bottom: 1px solid black; 
160 +    background-color: #3c6eb4;
161 +    color: white;
162 +    font-weight: 700;
163 +    font-size: xx-small;
164 + }
165 + .calendar tr + tr + tr td {
166 +   padding: 2px 12px;
167 + }
168 + .calendar tr + tr + tr td.flock {
169 +   background-color: #cceaec;
170 + }
171 + .calendar span {
172 +   font-size: x-large;
173 +   font-weight: 700;
174 +   display: block;
175 +   margin-top: -.3em;
176 + }
177 + .calendar th { 
178 +   text-align: center; 
179 +   background-color: #c2c2c2;
180 +   color: white;
181 +   font-weight: 700;
182 + 
183 + }
184 + .calendar { text-transform: uppercase; }
185 + 
186 + table.calendar {
187 +   margin-left: auto;
188 +   margin-right: auto;
189 + }