github.com/aclaygray/packer@v1.3.2/website/source/assets/stylesheets/_home.scss (about) 1 #page-home { 2 // Override the main header 3 #header { 4 background: $home-header-background-color; 5 6 .navbar-toggle { 7 .icon-bar { 8 border: 1px solid $home-header-link-color; 9 } 10 } 11 12 .navbar-brand { 13 a { 14 svg.logo { 15 @extend svg.logo.color; 16 } 17 } 18 } 19 20 ul.nav { 21 li { 22 a { 23 color: $home-header-link-color; 24 25 &:hover, &:focus, &:active { 26 background-color: transparent; 27 color: $home-header-link-color-hover; 28 29 svg { 30 fill: $home-header-link-color-hover; 31 } 32 } 33 34 svg { 35 fill: $home-header-link-color; 36 } 37 } 38 } 39 } 40 } 41 42 header { 43 .hero { 44 margin: 140px auto 160px auto; 45 text-align: center; 46 47 .button { 48 margin: 5px; 49 50 @media (max-width: 768px) { 51 display: block; 52 margin-top: 10px; 53 text-align: center; 54 } 55 } 56 57 svg { 58 max-width: 90%; 59 } 60 } 61 } 62 63 section { 64 background: $white; 65 padding: 100px 0; 66 } 67 68 section.marketing { 69 h2 { 70 font-family: $font-family-klavika; 71 font-size: 36px; 72 font-weight: $font-weight-bold; 73 line-height: 1.25; 74 letter-spacing: -0.02em; 75 margin: 20px 0 10px 0; 76 padding: 0; 77 color: $black; 78 } 79 80 p { 81 font-family: $font-family-open-sans; 82 font-size: 16px; 83 letter-spacing: 0.01em; 84 line-height: 1.8; 85 margin: 0 0 10px; 86 } 87 88 span.callout { 89 background: $black; 90 color: $white; 91 display: inline-block; 92 font-family: $font-family-klavika; 93 font-size: 18px; 94 font-weight: $font-weight-bold; 95 line-height: 1; 96 margin: 0; 97 padding: 7px 5px 5px 5px; 98 letter-spacing: 0.05em; 99 text-transform: uppercase; 100 } 101 102 &.invert { 103 background: $packer-blue; 104 105 h2 { 106 color: $white; 107 } 108 109 p { 110 color: $white; 111 font-weight: $font-weight-bold; 112 } 113 } 114 115 &#automated { 116 img { 117 @media (min-width: 1024px) { 118 padding-right: 40px; 119 } 120 121 @media (max-width: 992px) { 122 padding-bottom: 40px; 123 } 124 } 125 } 126 127 &#integrations { 128 .integrations-list { 129 display: flex; 130 flex-flow: row wrap; 131 justify-content: space-between; 132 margin-top: 30px; 133 134 @media (min-width: 1024px) { 135 padding-left: 40px; 136 } 137 138 .integration { 139 display: flex; 140 align-items: center; 141 justify-content: center; 142 border: 5px solid $packer-blue; 143 height: 100px; 144 width: 33.3%; 145 background-color: $white; 146 padding: 5px; 147 148 img { 149 max-width: 100%; 150 } 151 } 152 } 153 } 154 } 155 156 .terminal { 157 border: 1px solid $white; 158 background-color: $black; 159 box-sizing: border-box; 160 color: $white; 161 font-family: $font-family-monospace; 162 font-size: 15px; 163 line-height: 1.8; 164 margin: 20px auto; 165 padding: 10px 20px 20px 20px; 166 167 .terminal-content { 168 margin-top: 5px; 169 overflow-x: scroll; 170 width: 100%; 171 white-space: nowrap; 172 173 span { 174 display: block; 175 white-space: pre; 176 } 177 } 178 179 span.circle { 180 &:before { 181 content: '\25CF'; 182 color: $white; 183 font-family: $font-family-monospace; 184 font-size: 30px; 185 line-height: 1; 186 margin: 0 0 0 -4px; 187 padding: 0; 188 height: 100%; 189 } 190 } 191 192 span.vbox { 193 color: rgb(91, 251, 90); 194 } 195 196 span.vmware { 197 color: rgb(83, 255, 255); 198 } 199 } 200 }