From 0a46139d7f74a106a70689ff630d05e575d31765 Mon Sep 17 00:00:00 2001 From: Gerardo Montivero Date: Wed, 14 Jun 2023 13:25:04 -0300 Subject: [PATCH] :ambulance: Cap 30 Creando css para mail. --- assets/css/account.scss | 90 ++++++++++++++++++++++++++++ assets/css/algolia-autocomplete.scss | 26 ++++++++ assets/css/app.scss | 12 ++++ assets/css/article_show.scss | 73 ++++++++++++++++++++++ assets/css/email.scss | 38 ++++++++++++ assets/css/login.scss | 39 ++++++++++++ package.json | 1 + templates/email/emailBase.html.twig | 31 ++++++++++ webpack.config.js | 1 + yarn.lock | 5 ++ 10 files changed, 316 insertions(+) create mode 100644 assets/css/account.scss create mode 100644 assets/css/algolia-autocomplete.scss create mode 100644 assets/css/app.scss create mode 100644 assets/css/article_show.scss create mode 100644 assets/css/email.scss create mode 100644 assets/css/login.scss create mode 100644 templates/email/emailBase.html.twig diff --git a/assets/css/account.scss b/assets/css/account.scss new file mode 100644 index 00000000..5d7500ef --- /dev/null +++ b/assets/css/account.scss @@ -0,0 +1,90 @@ +.square, .btn { + border-radius: 0px!important; +} + +/* -- color classes -- */ +.spacepurplebg { + background-color: #5b4f69; +} + +.white { + color: #fff!important; +} + +div.user-menu-container { + z-index: 10; + background-color: #fff; + margin-top: 20px; + background-clip: padding-box; + opacity: 0.97; + filter: alpha(opacity=97); + -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); + box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); +} + +div.user-menu-container h4 { + font-weight: 300; + color: #8b8b8b; +} + +div.user-menu-container a, div.user-menu-container .btn { + transition: 1s ease; +} + +div.user-menu-container .thumbnail { + width:100%; + min-height:200px; + border: 0px!important; + padding: 0px; + border-radius: 0; + border: 0px!important; +} + +/* -- The btn stylings for the btn icons -- */ +.btn-label {position: relative;left: -12px;display: inline-block;padding: 6px 12px;background: rgba(0,0,0,0.15);border-radius: 3px 0 0 3px;} +.btn-labeled {padding-top: 0;padding-bottom: 0;} + +/* -- Custom classes for the snippet, won't effect any existing bootstrap classes of your site, but can be reused. -- */ + +.user-pad { + padding: 20px 25px; +} + +.no-pad { + padding-right: 0; + padding-left: 0; + padding-bottom: 0; +} + +.user-details { + background: #eee; + min-height: 333px; +} + +.user-image { + max-height:200px; + overflow:hidden; +} + +.overview h3 { + font-weight: 300; + margin-top: 15px; + margin: 10px 0 0 0; +} + +.overview h4 { + font-weight: bold!important; + font-size: 40px; + margin-top: 0; +} + +.square, .btn { + border-radius: 0px!important; +} + +/* -- media query for user profile image -- */ +@media (max-width: 767px) { + .user-image { + max-height: 400px; + } +} \ No newline at end of file diff --git a/assets/css/algolia-autocomplete.scss b/assets/css/algolia-autocomplete.scss new file mode 100644 index 00000000..8093cda1 --- /dev/null +++ b/assets/css/algolia-autocomplete.scss @@ -0,0 +1,26 @@ +.algolia-autocomplete { + width: 100%; +} +.algolia-autocomplete .aa-input, .algolia-autocomplete .aa-hint { + width: 100%; +} +.algolia-autocomplete .aa-hint { + color: #999; +} +.algolia-autocomplete .aa-dropdown-menu { + width: 100%; + background-color: #fff; + border: 1px solid #999; + border-top: none; +} +.algolia-autocomplete .aa-dropdown-menu .aa-suggestion { + cursor: pointer; + padding: 5px 4px; +} +.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor { + background-color: #B2D7FF; +} +.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em { + font-weight: bold; + font-style: normal; +} diff --git a/assets/css/app.scss b/assets/css/app.scss new file mode 100644 index 00000000..7e8eff9d --- /dev/null +++ b/assets/css/app.scss @@ -0,0 +1,12 @@ +@import './helper/variables'; + +@import '~bootstrap'; +@import '~font-awesome'; + +@import './layout/header'; +@import './layout/footer'; + +@import './components/ad'; +@import './components/articles'; +@import './components/profile'; +@import './components/sortable'; diff --git a/assets/css/article_show.scss b/assets/css/article_show.scss new file mode 100644 index 00000000..ebf11eaf --- /dev/null +++ b/assets/css/article_show.scss @@ -0,0 +1,73 @@ +@import './helper/variables'; + +/* ARTICLE SHOW PAGE */ + +.show-article-container { + width: 100%; + background-color: #fff; +} + +.show-article-container.show-article-container-border-green { + border-top: 3px solid green; + border-radius: 3px; +} + +.show-article-img { + width: 250px; + height: auto; + border-radius: 5px; +} + +.show-article-title { + font-size: 2em; +} + +.like-article, .like-article:hover { + color: red; + text-decoration: none; +} + +@media (max-width: 991px) { + .show-article-title { + font-size: 1.5em; + } + + .show-article-title-container { + max-width: 220px; + } +} + +.article-text { + margin-top: 20px; +} + +.share-icons i { + font-size: 1.5em; +} + +.comment-container { + max-width: 600px; +} + +.comment-img { + width: 50px; + height: auto; + border: 1px solid darkgray; +} + +.commenter-name { + font-weight: bold; +} + +.comment-form { + min-width: 500px; +} + +@media (max-width: 767px) { + .comment-form { + min-width: 260px; + } + .comment-container { + max-width: 280px; + } +} diff --git a/assets/css/email.scss b/assets/css/email.scss new file mode 100644 index 00000000..313fefdd --- /dev/null +++ b/assets/css/email.scss @@ -0,0 +1,38 @@ +@import "~foundation-emails/dist/foundation-emails.css"; + +body { + margin: 0; + padding: 0; + background-color: #f3f3f3; + font-family: Helvetica, Arial, sans-serif; +} +h1 { + background-color: #264459; + color: #ffffff; + /*padding: 30px 0 50px 0;*/ + font-weight: normal; +} +hr { + border: none; + border-top: 3px solid #264459; + margin: 20px; +} +.welcome { + background-color: #264459; +} +.bottom { + background-color: #efefee; +} +.logo { + width: 100%; +} +.text-center { + text-align: center; +} +table.button a { + background-color: #264459; +} +table.button table td { + background-color: #264459; + border: 2px solid #264459; +} diff --git a/assets/css/login.scss b/assets/css/login.scss new file mode 100644 index 00000000..8ac8f6fe --- /dev/null +++ b/assets/css/login.scss @@ -0,0 +1,39 @@ +body { + background-color: #fff; +} + +.form-signin { + width: 100%; + max-width: 330px; + padding: 15px; + margin: auto; + margin-top: 50px; +} + +.form-signin .checkbox { + font-weight: 400; +} + +.form-signin .form-control { + position: relative; + box-sizing: border-box; + height: auto; + padding: 10px; + font-size: 16px; +} + +.form-signin .form-control:focus { + z-index: 2; +} + +.form-signin input[type="email"] { + margin-bottom: -1px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} + +.form-signin input[type="password"] { + margin-bottom: 10px; + border-top-left-radius: 0; + border-top-right-radius: 0; +} \ No newline at end of file diff --git a/package.json b/package.json index d673521c..b32d69c6 100755 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "autoprefixer": "^10.1.0", "bootstrap": "^4.4.1", "core-js": "^3.0.0", + "foundation-emails": "^2.4.0", "glob-all": "^3.2.1", "node-sass": "^4.14.0", "path": "^0.12.7", diff --git a/templates/email/emailBase.html.twig b/templates/email/emailBase.html.twig new file mode 100644 index 00000000..401ac018 --- /dev/null +++ b/templates/email/emailBase.html.twig @@ -0,0 +1,31 @@ +{% apply inky_to_html|inline_css(encore_entry_css_source('email')) %} + + + + + + + + + + {% block content %} + {% endblock %} + + + +

Cheers,

+

Your friendly Space Bar Team

+ + + + +
+ +
+ Sent with ❤️ from the friendly folks at The Space Bar +
+
+ + + +{% endapply %} diff --git a/webpack.config.js b/webpack.config.js index 3ee7ce96..42b77e88 100755 --- a/webpack.config.js +++ b/webpack.config.js @@ -40,6 +40,7 @@ Encore //.addEntry('page1', './assets/js/page1.js') .addStyleEntry('loginStyle', './assets/css/styles.css') .addStyleEntry('perfilStyle', './assets/css/account.css') + .addStyleEntry('email', './assets/css/email.scss') //.addEntry('page2', './assets/js/page2.js') diff --git a/yarn.lock b/yarn.lock index 1c3d4b3a..8e0c4468 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4202,6 +4202,11 @@ forwarded@~0.1.2: resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84" integrity sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ= +foundation-emails@^2.4.0: + version "2.4.0" + resolved "https://registry.yarnpkg.com/foundation-emails/-/foundation-emails-2.4.0.tgz#5020b44c6a1ee366ad53dd9ba29368d351aef8dd" + integrity sha512-aLma02P+OafCQtcEkZzVAhX1E3LiB4RYCxUu73BRma+YMrq2QOBUr6K8Cw37taL0jehQn4T8yfuWBQ8xv3Mvug== + fraction.js@^4.0.12: version "4.0.13" resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.0.13.tgz#3c1c315fa16b35c85fffa95725a36fa729c69dfe"