From d0f490bbdc910fa99671cb90d700d57fa1cdb331 Mon Sep 17 00:00:00 2001 From: JC Brand Date: Tue, 15 May 2018 09:38:20 +0200 Subject: [PATCH] Start using Sass for the website CSS and rename --- Makefile | 7 +- css/website.css | 322 ++++++++++++++++++++++++++++ index.html | 2 +- mockup/index.html | 2 +- css/theme.css => sass/_website.scss | 138 +++++------- tests/index.html | 2 +- tests/transpiled.html | 2 +- 7 files changed, 388 insertions(+), 87 deletions(-) create mode 100644 css/website.css rename css/theme.css => sass/_website.scss (79%) diff --git a/Makefile b/Makefile index c187d94f3..4073eeb25 100644 --- a/Makefile +++ b/Makefile @@ -123,7 +123,7 @@ stamp-bundler: Gemfile clean: rm -rf node_modules .bundle stamp-npm rm dist/*.min.js - rm css/theme.min.css + rm css/website.min.css rm css/converse.min.css rm css/*.map @@ -134,7 +134,7 @@ dev: stamp-bundler stamp-npm ## Builds .PHONY: css -css: dev sass/*.scss css/converse.css css/converse.min.css css/theme.min.css css/inverse.css css/inverse.min.css css/fonts.css +css: dev sass/*.scss css/converse.css css/converse.min.css css/website.css css/website.min.css css/inverse.css css/inverse.min.css css/fonts.css css/inverse.css:: dev sass sass $(SASS) -I $(BOURBON) -I $(BOOTSTRAP) sass/inverse.scss css/inverse.css @@ -145,6 +145,9 @@ css/converse.css:: dev sass css/fonts.css:: dev sass $(SASS) -I $(BOURBON) -I $(BOOTSTRAP) sass/font-awesome.scss $@ +css/website.css:: dev sass + $(SASS) -I $(BOURBON) -I $(BOOTSTRAP) sass/_website.scss $@ + css/%.min.css:: css/%.css make dev $(CLEANCSS) $< > $@ diff --git a/css/website.css b/css/website.css new file mode 100644 index 000000000..8c6eafa50 --- /dev/null +++ b/css/website.css @@ -0,0 +1,322 @@ +html { + width: 100%; + height: 100%; } + +body { + width: 100%; + height: 100%; + font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #ffffff; + background-color: #211018; } + +h1, h2, h3, h4, h5, h6 { + margin: 0 0 35px; + font-family: Futura,Helvetica,Trebuchet MS,Arial,sans-serif; + font-weight: normal; + letter-spacing: 1px; } + +p { + margin: 0 0 25px; + font-size: 18px; + line-height: 1.5; } + +@media (min-width: 767px) { + p { + margin: 0 0 35px; + font-size: 20px; + line-height: 1.6; } } +a { + color: #82B397; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; } + +a:hover, a:focus { + text-decoration: none; + color: #00aaff; } + +.light { + font-weight: 400; } + +.navbar { + font-family: Futura,Helvetica,Trebuchet MS,Arial,sans-serif; + margin-bottom: 0; + border-bottom: 1px solid rgba(255, 255, 255, 0.3); + text-transform: uppercase; + background-color: #211018; } + +.navbar-brand { + font-weight: 700; } + .navbar-brand:focus { + outline: none; } + +.navbar-custom a { + color: #ffffff; } + +.navbar-custom .nav li a { + -webkit-transition: background 0.3s ease-in-out; + -moz-transition: background 0.3s ease-in-out; + transition: background 0.3s ease-in-out; } + +.navbar-custom .nav li a:hover, +.navbar-custom .nav li a:focus, +.navbar-custom .nav li.active { + outline: none; + background-color: rgba(255, 255, 255, 0.2); } + +.navbar-toggle { + padding: 4px 6px; + font-size: 16px; + color: #ffffff; } + +.navbar-toggle:focus, +.navbar-toggle:active { + outline: none; } + +@media (min-width: 767px) { + .navbar { + padding: 20px 0; + border-bottom: none; + letter-spacing: 1px; + background: transparent; + -webkit-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out; + -moz-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out; + transition: background 0.5s ease-in-out, padding 0.5s ease-in-out; } + + .top-nav-collapse { + padding: 0; + background-color: #211018; } + + .navbar-custom.top-nav-collapse { + border-bottom: 1px solid rgba(255, 255, 255, 0.3); } } +@media (max-width: 480px) { + .navbar { + display: none; } } +.features-section, +.outro, +.intro { + width: 100%; + padding: 100px 0; + text-align: center; + color: #fff; } + +.intro { + background: url(images/header.jpg) no-repeat bottom center scroll; + background-color: #211018; + -webkit-background-size: cover; + -moz-background-size: cover; + background-size: cover; + -o-background-size: cover; } + +.features-section { + background: url("images/bgtr.svg") top right no-repeat, url("images/bgbl.svg") bottom left no-repeat, url("images/bgbl.svg") bottom left no-repeat, url("images/overlay.png"), linear-gradient(45deg, #85505f, #384955, #655361); } + +.features-section a { + color: #82B397; } + +.outro { + background: url("images/bgtr.svg") top right no-repeat, url("images/bgbl.svg") bottom left no-repeat, url("images/overlay.png"), linear-gradient(45deg, #384955, #655361, #85505f); } + +.brand-heading { + font-family: Futura,Helvetica,Trebuchet MS,Arial,sans-serif; + font-weight: normal; + font-size: 2em; + text-align: center; + margin-top: 2.5em; } + +.brand-heading .icon-conversejs { + font-size: 60%; } + +.brand-heading-embedded { + margin-top: 1.5em; } + +.intro-text { + font-family: Futura,Helvetica,Trebuchet MS,Arial,sans-serif; + font-size: 18px; } + +@media (min-width: 767px) { + .intro { + height: 100%; + padding: 0; } + + .brand-heading { + font-size: 80px; } + + .intro-text { + font-size: 25px; } } +.btn-circle { + width: 70px; + height: 70px; + margin-top: 15px; + padding: 7px 16px; + border: 2px solid #ffffff; + border-radius: 35px; + font-size: 40px; + color: #ffffff; + background: transparent; + -webkit-transition: background 0.3s ease-in-out; + -moz-transition: background 0.3s ease-in-out; + transition: background 0.3s ease-in-out; } + +.btn-circle:hover, +.btn-circle:focus { + outline: none; + color: #ffffff; + background: rgba(255, 255, 255, 0.1); } + +.page-scroll .btn-circle i.animated { + -webkit-transition-property: -webkit-transform; + -webkit-transition-duration: 1s; + -moz-transition-property: -moz-transform; + -moz-transition-duration: 1s; } + +.page-scroll .btn-circle:hover i.animated { + -webkit-animation-name: pulse; + -moz-animation-name: pulse; + -webkit-animation-duration: 1.5s; + -moz-animation-duration: 1.5s; + -webkit-animation-iteration-count: infinite; + -moz-animation-iteration-count: infinite; + -webkit-animation-timing-function: linear; + -moz-animation-timing-function: linear; } + +.content-section { + padding-top: 100px; } + +.donate-section { + width: 100%; + padding: 50px 0; + color: #ffffff; + background-color: #211018; } + +.donate-section p.bitcoin-header { + margin: 0 0 5px; } + +@media (min-width: 767px) { + .content-section { + padding-top: 150px; + padding-bottom: 50px; } + + .donate-section { + padding: 100px 0; } } +.btn { + font-family: Futura,Helvetica,Trebuchet MS,Arial,sans-serif; + font-weight: 400; + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; } + +.btn-default { + border: 1px solid #82B397; + color: #82B397; + background-color: transparent; } + +.btn-default:hover, +.btn-default:focus { + border: 1px solid #82B397; + outline: none; + color: #211018; + background-color: #82B397; } + +.btn-huge { + padding: 25px; + font-size: 26px; } + +.banner-social-buttons { + padding-top: 3em; } + +::-moz-selection { + text-shadow: none; + background: #fcfcfc; + background: rgba(255, 255, 255, 0.2); } + +::selection { + text-shadow: none; + background: #fcfcfc; + background: rgba(255, 255, 255, 0.2); } + +img::selection { + background: transparent; } + +img::-moz-selection { + background: transparent; } + +body { + webkit-tap-highlight-color: rgba(255, 255, 255, 0.2); } + +ul.contact, +ul.integration, +ul.screencasts, +ul.features { + text-align: left; + font-size: 19px; } + +.feature-icon { + display: inline-block; + position: relative; + padding-bottom: 5em; + margin-bottom: 2.75em; + cursor: default; + color: #fff; } + +.feature-icon .fa { + display: inline-block; + width: 2em; + height: 2em; + font-size: 4em; + border-radius: 100%; + box-shadow: inset 0 0 0 1px white; + color: white; + line-height: 2.1em; } + +.feature-icon:before { + content: ''; + background: white; + position: absolute; + bottom: 0; + left: 50%; + margin-left: -0.325em; + width: 0.65em; + height: 0.65em; + display: block; + border-radius: 100%; } + +.feature-icon:after { + content: ''; + position: absolute; + left: 50%; + bottom: 0.65em; + width: 1px; + height: 4.35em; + background: white; + margin-left: -0.5px; } + +.row { + margin-left: 0; + margin-right: 0; } + +.mastodon { + width: 4em; + height: 4em; + margin-top: 0.9em; } + +.sponsors { + clear: both; + font-size: 1.4em; + padding: 2em 0 6em 0; } + +.sponsors h2 { + text-align: center; } + +.sponsors ul { + margin: 0 0 1em 0; } + +.sponsors ul li { + margin: 1em 0; + list-style: none; } + +.sponsors-text { + text-align: left; + padding: 0 0 2em 0; } + +/*# sourceMappingURL=website.css.map */ diff --git a/index.html b/index.html index fc3dc971c..307609ab1 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@ - + diff --git a/mockup/index.html b/mockup/index.html index 4858c377e..3c2fda6bf 100644 --- a/mockup/index.html +++ b/mockup/index.html @@ -4,7 +4,7 @@ Converse.js Live Mockup - + diff --git a/css/theme.css b/sass/_website.scss similarity index 79% rename from css/theme.css rename to sass/_website.scss index 9d262ca91..756370b3d 100644 --- a/css/theme.css +++ b/sass/_website.scss @@ -1,67 +1,71 @@ -body { - width: 100%; - height: 100%; - font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #ffffff; - background-color: #211018; -} html { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } -h1, -h2, -h3, -h4, -h5, -h6 { - margin: 0 0 35px; - font-family: Futura,Trebuchet MS,Arial,sans-serif; - font-weight: normal; - letter-spacing: 1px; +body { + width: 100%; + height: 100%; + font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #ffffff; + background-color: #211018; } -p { - margin: 0 0 25px; - font-size: 18px; - line-height: 1.5; -} -@media (min-width: 767px) { - p { + +h1, h2, h3, h4, h5, h6 { margin: 0 0 35px; - font-size: 20px; - line-height: 1.6; - } + font-family: Futura,Helvetica,Trebuchet MS,Arial,sans-serif; + font-weight: normal; + letter-spacing: 1px; } + +p { + margin: 0 0 25px; + font-size: 18px; + line-height: 1.5; +} + +@media (min-width: 767px) { + p { + margin: 0 0 35px; + font-size: 20px; + line-height: 1.6; + } +} + a { - color: #82B397; - -webkit-transition: all 0.2s ease-in-out; - -moz-transition: all 0.2s ease-in-out; - transition: all 0.2s ease-in-out; + color: #82B397; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; } -a:hover, -a:focus { - text-decoration: none; - color: #00aaff; +a:hover, a:focus { + text-decoration: none; + color: #00aaff; } + .light { - font-weight: 400; + font-weight: 400; } + .navbar { - margin-bottom: 0; - border-bottom: 1px solid rgba(255, 255, 255, 0.3); - text-transform: uppercase; - font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; - background-color: #211018; + font-family: Futura,Helvetica,Trebuchet MS,Arial,sans-serif; + margin-bottom: 0; + border-bottom: 1px solid rgba(255, 255, 255, 0.3); + text-transform: uppercase; + background-color: #211018; } + .navbar-brand { - font-weight: 700; + font-weight: 700; + &:focus { + outline: none; + } } -.navbar-brand:focus { - outline: none; -} -.navbar-custom a { - color: #ffffff; +.navbar-custom { + a { + color: #ffffff; + } } + .navbar-custom .nav li a { -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; @@ -134,7 +138,7 @@ a:focus { .brand-heading { - font-family: Futura,Trebuchet MS,Arial,sans-serif; + font-family: Futura,Helvetica,Trebuchet MS,Arial,sans-serif; font-weight: normal; font-size: 2em; text-align: center; @@ -148,6 +152,7 @@ a:focus { margin-top: 1.5em; } .intro-text { + font-family: Futura,Helvetica,Trebuchet MS,Arial,sans-serif; font-size: 18px; } @media (min-width: 767px) { @@ -198,36 +203,7 @@ a:focus { -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; } -/* -@-webkit-keyframes pulse { - 0 { - -webkit-transform: scale(1); - transform: scale(1); - } - 50% { - -webkit-transform: scale(1.2); - transform: scale(1.2); - } - 100% { - -webkit-transform: scale(1); - transform: scale(1); - } -} -@-moz-keyframes pulse { - 0 { - -moz-transform: scale(1); - transform: scale(1); - } - 50% { - -moz-transform: scale(1.2); - transform: scale(1.2); - } - 100% { - -moz-transform: scale(1); - transform: scale(1); - } -} -*/ + .content-section { padding-top: 100px; } @@ -250,7 +226,7 @@ a:focus { } } .btn { - font-family: Futura,Trebuchet MS,Arial,sans-serif; + font-family: Futura,Helvetica,Trebuchet MS,Arial,sans-serif; font-weight: 400; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; diff --git a/tests/index.html b/tests/index.html index d3260eb07..59cfda45a 100644 --- a/tests/index.html +++ b/tests/index.html @@ -9,7 +9,7 @@ - + diff --git a/tests/transpiled.html b/tests/transpiled.html index 117cb58dd..c88cd5444 100644 --- a/tests/transpiled.html +++ b/tests/transpiled.html @@ -9,7 +9,7 @@ - +