Sass dans le dockerfile
This commit is contained in:
parent
63e1244bf1
commit
2ed4a649f3
GPG Key ID:
F85D93686A3A9063
|
|
@ -1,4 +1,7 @@
|
|||
FROM nginx:alpine
|
||||
RUN sed -i 's/#gzip/gzip/g' /etc/nginx/nginx.conf && \
|
||||
sed -i '/gzip *on/ a gzip_types text/css application/javascript image/svg+xml;' /etc/nginx/nginx.conf
|
||||
COPY . /usr/share/nginx/html
|
||||
sed -i '/gzip *on/ a gzip_types text/css application/javascript image/svg+xml;' /etc/nginx/nginx.conf && \
|
||||
apk add --no-cache sassc
|
||||
COPY . /usr/share/nginx/html
|
||||
WORKDIR /usr/share/nginx/html
|
||||
RUN sassc -m -t compressed /usr/share/nginx/html/scss/creative.scss /usr/share/nginx/html/css/creative.css
|
||||
|
|
|
|||
379
css/creative.css
379
css/creative.css
|
|
@ -1,379 +0,0 @@
|
|||
@font-face {
|
||||
font-family: 'descuadrado';
|
||||
src: url("font/descuadrado-webfont.woff2") format("woff2"), url("font/descuadrado-webfont.woff") format("woff");
|
||||
font-weight: normal;
|
||||
font-style: normal; }
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
|
||||
body {
|
||||
font-family: 'Merriweather', 'Helvetica Neue', Arial, sans-serif; }
|
||||
|
||||
hr {
|
||||
max-width: 50px;
|
||||
border-width: 3px;
|
||||
border-color: #F04B12; }
|
||||
|
||||
hr.light {
|
||||
border-color: white; }
|
||||
|
||||
a {
|
||||
color: #F04B12;
|
||||
-webkit-transition: all .2s;
|
||||
-moz-transition: all .2s;
|
||||
transition: all .2s; }
|
||||
a:hover, a:focus {
|
||||
color: #f04b12; }
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; }
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 20px; }
|
||||
|
||||
.bg-primary {
|
||||
background-color: #F04B12 !important; }
|
||||
|
||||
.bg-dark {
|
||||
color: white;
|
||||
background-color: #222222 !important; }
|
||||
|
||||
.text-faded {
|
||||
color: rgba(255, 255, 255, 0.7); }
|
||||
|
||||
section {
|
||||
padding: 100px 0; }
|
||||
|
||||
.section-heading {
|
||||
margin-top: 0; }
|
||||
|
||||
.no-padding {
|
||||
padding: 0; }
|
||||
|
||||
::-moz-selection {
|
||||
color: white;
|
||||
background: #222222;
|
||||
text-shadow: none; }
|
||||
|
||||
::selection {
|
||||
color: white;
|
||||
background: #222222;
|
||||
text-shadow: none; }
|
||||
|
||||
img::selection {
|
||||
color: white;
|
||||
background: transparent; }
|
||||
|
||||
img::-moz-selection {
|
||||
color: white;
|
||||
background: transparent; }
|
||||
|
||||
body {
|
||||
-webkit-tap-highlight-color: #222222; }
|
||||
|
||||
#mainNav {
|
||||
border-color: rgba(34, 34, 34, 0.05);
|
||||
background-color: white;
|
||||
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
|
||||
-webkit-transition: all .2s;
|
||||
-moz-transition: all .2s;
|
||||
transition: all .2s; }
|
||||
#mainNav .navbar-brand {
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
color: #F04B12;
|
||||
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; }
|
||||
#mainNav .navbar-brand:hover, #mainNav .navbar-brand:focus {
|
||||
color: #f04b12; }
|
||||
#mainNav .navbar-toggle {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
color: #222222; }
|
||||
#mainNav .navbar-nav > li.nav-item > a.nav-link,
|
||||
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
color: #222222; }
|
||||
#mainNav .navbar-nav > li.nav-item > a.nav-link:hover,
|
||||
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus:hover {
|
||||
color: #F04B12; }
|
||||
#mainNav .navbar-nav > li.nav-item > a.nav-link.active,
|
||||
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus.active {
|
||||
color: #F04B12 !important;
|
||||
background-color: transparent; }
|
||||
#mainNav .navbar-nav > li.nav-item > a.nav-link.active:hover,
|
||||
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus.active:hover {
|
||||
background-color: transparent; }
|
||||
@media (min-width: 992px) {
|
||||
#mainNav {
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
background-color: transparent; }
|
||||
#mainNav .navbar-brand {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
-webkit-text-stroke: 1px rgba(0, 0, 0, 0.7);
|
||||
font-size: 1.5rem; }
|
||||
#mainNav .navbar-brand small {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700; }
|
||||
#mainNav .navbar-brand:hover, #mainNav .navbar-brand:focus {
|
||||
color: white; }
|
||||
#mainNav .navbar-nav > li.nav-item > a.nav-link,
|
||||
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
-webkit-text-stroke: 1px rgba(0, 0, 0, 0.7);
|
||||
font-size: 1.3rem; }
|
||||
#mainNav .navbar-nav > li.nav-item > a.nav-link:hover,
|
||||
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus:hover {
|
||||
color: white; }
|
||||
#mainNav.navbar-shrink {
|
||||
border-color: rgba(34, 34, 34, 0.05);
|
||||
background-color: white; }
|
||||
#mainNav.navbar-shrink .navbar-brand {
|
||||
font-size: 1.3rem;
|
||||
color: #F04B12;
|
||||
-webkit-text-stroke: 0px rgba(0, 0, 0, 0.7); }
|
||||
#mainNav.navbar-shrink .navbar-brand small {
|
||||
font-size: 1rem;
|
||||
font-weight: 700; }
|
||||
#mainNav.navbar-shrink .navbar-brand:hover, #mainNav.navbar-shrink .navbar-brand:focus {
|
||||
color: #f04b12; }
|
||||
#mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link,
|
||||
#mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:focus {
|
||||
color: #222222;
|
||||
-webkit-text-stroke: 0px rgba(0, 0, 0, 0.7);
|
||||
font-size: 1rem; }
|
||||
#mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:hover,
|
||||
#mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:focus:hover {
|
||||
color: #F04B12; } }
|
||||
|
||||
header.masthead {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
min-height: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center; }
|
||||
header.masthead video {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
z-index: -100;
|
||||
background-size: cover;
|
||||
overflow: hidden; }
|
||||
header.masthead .header-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 100px 15px 100px;
|
||||
text-align: center; }
|
||||
header.masthead .header-content .header-content-inner h1 {
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
text-transform: uppercase; }
|
||||
header.masthead .header-content .header-content-inner hr {
|
||||
margin: 30px auto; }
|
||||
header.masthead .header-content .header-content-inner p {
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
margin-bottom: 50px;
|
||||
color: rgba(255, 255, 255, 0.7); }
|
||||
header.masthead a {
|
||||
position: absolute;
|
||||
bottom: 2rem; }
|
||||
header.masthead #video-sound {
|
||||
right: 4rem; }
|
||||
header.masthead #youtube-link {
|
||||
right: 8.5rem; }
|
||||
@media (min-width: 768px) {
|
||||
header.masthead {
|
||||
height: 100%; }
|
||||
header.masthead .header-content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
padding: 0 50px;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%); }
|
||||
header.masthead .header-content .header-content-inner {
|
||||
max-width: 1000px;
|
||||
margin-right: auto;
|
||||
margin-left: auto; }
|
||||
header.masthead .header-content .header-content-inner h1 {
|
||||
font-size: 50px; }
|
||||
header.masthead .header-content .header-content-inner p {
|
||||
font-size: 18px;
|
||||
max-width: 80%;
|
||||
margin-right: auto;
|
||||
margin-left: auto; } }
|
||||
|
||||
.service-box {
|
||||
max-width: 400px;
|
||||
margin: 50px auto 0; }
|
||||
@media (min-width: 992px) {
|
||||
.service-box {
|
||||
margin: 20px auto 0; } }
|
||||
.service-box p {
|
||||
margin-bottom: 0; }
|
||||
|
||||
#portfolio {
|
||||
padding: 0; }
|
||||
#portfolio .video-portfolio {
|
||||
padding-right: 3px;
|
||||
padding-left: 3px; }
|
||||
#portfolio .video-portfolio video {
|
||||
width: 100%; }
|
||||
|
||||
.portfolio-box {
|
||||
position: relative;
|
||||
display: block;
|
||||
max-width: 650px;
|
||||
margin: 0 auto; }
|
||||
.portfolio-box .portfolio-box-caption {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
color: white;
|
||||
background: rgba(240, 75, 18, 0.9);
|
||||
-webkit-transition: all .2s;
|
||||
-moz-transition: all .2s;
|
||||
transition: all .2s; }
|
||||
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
transform: translateY(-50%);
|
||||
text-align: center; }
|
||||
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,
|
||||
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
|
||||
padding: 0 15px;
|
||||
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; }
|
||||
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase; }
|
||||
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
|
||||
font-size: 18px; }
|
||||
.portfolio-box:hover .portfolio-box-caption {
|
||||
opacity: 1; }
|
||||
.portfolio-box:focus {
|
||||
outline: none; }
|
||||
@media (min-width: 768px) {
|
||||
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
|
||||
font-size: 16px; }
|
||||
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
|
||||
font-size: 22px; } }
|
||||
|
||||
.call-to-action {
|
||||
padding: 50px 0; }
|
||||
.call-to-action h2 {
|
||||
margin: 0 auto 20px; }
|
||||
|
||||
.text-primary {
|
||||
color: #F04B12 !important; }
|
||||
|
||||
.no-gutter > [class*='col-'] {
|
||||
padding-right: 0;
|
||||
padding-left: 0; }
|
||||
|
||||
.btn-default {
|
||||
color: #222222;
|
||||
border-color: white;
|
||||
background-color: white; }
|
||||
.btn-default:focus, .btn-default.focus {
|
||||
color: #222222;
|
||||
border-color: #bfbfbf;
|
||||
background-color: #e6e6e6; }
|
||||
.btn-default:hover {
|
||||
color: #222222;
|
||||
border-color: #e0e0e0;
|
||||
background-color: #e6e6e6; }
|
||||
.btn-default:active, .btn-default.active, .open > .btn-default.dropdown-toggle {
|
||||
color: #222222;
|
||||
border-color: #e0e0e0;
|
||||
background-color: #e6e6e6; }
|
||||
.btn-default:active:hover, .btn-default:active:focus, .btn-default:active.focus, .btn-default.active:hover, .btn-default.active:focus, .btn-default.active.focus, .open > .btn-default.dropdown-toggle:hover, .open > .btn-default.dropdown-toggle:focus, .open > .btn-default.dropdown-toggle.focus {
|
||||
color: #222222;
|
||||
border-color: #bfbfbf;
|
||||
background-color: #d4d4d4; }
|
||||
.btn-default:active, .btn-default.active, .open > .btn-default.dropdown-toggle {
|
||||
background-image: none; }
|
||||
.btn-default.disabled:hover, .btn-default.disabled:focus, .btn-default.disabled.focus, .btn-default[disabled]:hover, .btn-default[disabled]:focus, .btn-default[disabled].focus, fieldset[disabled] .btn-default:hover, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default.focus {
|
||||
border-color: white;
|
||||
background-color: white; }
|
||||
.btn-default .badge {
|
||||
color: white;
|
||||
background-color: #222222; }
|
||||
|
||||
.btn-primary {
|
||||
color: white;
|
||||
border-color: #F04B12;
|
||||
background-color: #F04B12; }
|
||||
.btn-primary:focus, .btn-primary.focus {
|
||||
color: white;
|
||||
border-color: #7b2508;
|
||||
background-color: #c33b0c; }
|
||||
.btn-primary:hover {
|
||||
color: white;
|
||||
border-color: #b9380c;
|
||||
background-color: #c33b0c; }
|
||||
.btn-primary:active, .btn-primary.active, .open > .btn-primary.dropdown-toggle {
|
||||
color: white;
|
||||
border-color: #b9380c;
|
||||
background-color: #c33b0c; }
|
||||
.btn-primary:active:hover, .btn-primary:active:focus, .btn-primary:active.focus, .btn-primary.active:hover, .btn-primary.active:focus, .btn-primary.active.focus, .open > .btn-primary.dropdown-toggle:hover, .open > .btn-primary.dropdown-toggle:focus, .open > .btn-primary.dropdown-toggle.focus {
|
||||
color: white;
|
||||
border-color: #7b2508;
|
||||
background-color: #a1310a; }
|
||||
.btn-primary:active, .btn-primary.active, .open > .btn-primary.dropdown-toggle {
|
||||
background-image: none; }
|
||||
.btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled.focus, .btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary[disabled].focus, fieldset[disabled] .btn-primary:hover, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary.focus {
|
||||
border-color: #F04B12;
|
||||
background-color: #F04B12; }
|
||||
.btn-primary .badge {
|
||||
color: #F04B12;
|
||||
background-color: white; }
|
||||
|
||||
.btn {
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
border: none;
|
||||
border-radius: 300px;
|
||||
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; }
|
||||
|
||||
.btn-xl {
|
||||
padding: 15px 30px; }
|
||||
|
||||
#about {
|
||||
padding: 50px 0;
|
||||
position: relative;
|
||||
overflow: hidden; }
|
||||
#about h1 {
|
||||
font-family: descuadrado;
|
||||
font-size: 4rem; }
|
||||
#about img {
|
||||
position: absolute; }
|
||||
#about img.vecto1 {
|
||||
left: -70rem;
|
||||
top: -70rem; }
|
||||
#about img.vecto2 {
|
||||
right: -60rem;
|
||||
top: -20rem; }
|
||||
|
||||
/*# sourceMappingURL=creative.css.map */
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue