diff --git a/Makefile b/Makefile index dffc530..e63ec93 100644 --- a/Makefile +++ b/Makefile @@ -32,7 +32,7 @@ $(VIRTUAL_ENV): .PHONY: run run: env - $(LOCAL_PYTHON) -m gunicorn -w 4 wsgi:app + $(LOCAL_PYTHON) -m gunicorn -w 4 wsgi:app .PHONY: install install: env diff --git a/flask_blueprint_tutorial/home/static/less/home.less b/flask_blueprint_tutorial/home/static/less/home.less index bdf930a..6d4e1c3 100644 --- a/flask_blueprint_tutorial/home/static/less/home.less +++ b/flask_blueprint_tutorial/home/static/less/home.less @@ -34,6 +34,7 @@ margin-bottom: 20px; display: block; text-align: center; + overflow: hidden; transition: @transition; &:hover { @@ -47,8 +48,8 @@ } .product-image { - height: 110px; - margin: 0 auto 20px; + height: 95px; + margin: 0 auto 15px; display: block; @media (max-width: 600px) { width: 90%; @@ -66,8 +67,9 @@ overflow: hidden; text-overflow: ellipsis; font-weight: 500; - font-size: .9em; - height: 42px; + font-size: 1em; + line-height: 1.3; + height: 60px; } .price { diff --git a/flask_blueprint_tutorial/static/dist/css/home.css b/flask_blueprint_tutorial/static/dist/css/home.css index e6daf97..a2dd46d 100644 --- a/flask_blueprint_tutorial/static/dist/css/home.css +++ b/flask_blueprint_tutorial/static/dist/css/home.css @@ -1 +1 @@ -.home-template.page .products{display:none!important}.home-template .container .resource-links{margin-top:10px}.home-template .container .resource-links .resource-link{margin:4px 0;color:#8a91a7;line-height:1}.home-template .container .products{display:flex;justify-content:space-between;flex-wrap:wrap;margin-top:30px}.home-template .container .products .product-preview{padding:2%;box-shadow:0 0 5px rgba(65,67,144,0.15);max-width:28%;width:30%;background:white;margin-bottom:20px;display:block;text-align:center;transition:all .2s ease-out}.home-template .container .products .product-preview:hover{background:#5dbad7;color:white!important;opacity:1}.home-template .container .products .product-preview:hover *{color:white!important}.home-template .container .products .product-preview .product-image{height:110px;margin:0 auto 20px;display:block}@media(max-width:600px){.home-template .container .products .product-preview .product-image{width:90%;height:unset}}.home-template .container .products .product-preview .name{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;width:-webkit-fill-available;width:-moz-available;width:stretch;overflow:hidden;text-overflow:ellipsis;font-weight:500;font-size:.9em;height:42px}.home-template .container .products .product-preview .price{color:#5f6988;margin-top:5px;font-size:1.1em;font-weight:600}.home-template h2{margin-bottom:0!important} \ No newline at end of file +.home-template.page .products{display:none!important}.home-template .container .resource-links{margin-top:10px}.home-template .container .resource-links .resource-link{margin:4px 0;color:#8a91a7;line-height:1}.home-template .container .products{display:flex;justify-content:space-between;flex-wrap:wrap;margin-top:30px}.home-template .container .products .product-preview{padding:2%;box-shadow:0 0 5px rgba(65,67,144,0.15);max-width:28%;width:30%;background:white;margin-bottom:20px;display:block;text-align:center;overflow:hidden;transition:all .2s ease-out}.home-template .container .products .product-preview:hover{background:#5dbad7;color:white!important;opacity:1}.home-template .container .products .product-preview:hover *{color:white!important}.home-template .container .products .product-preview .product-image{height:95px;margin:0 auto 15px;display:block}@media(max-width:600px){.home-template .container .products .product-preview .product-image{width:90%;height:unset}}.home-template .container .products .product-preview .name{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;width:-webkit-fill-available;width:-moz-available;width:stretch;overflow:hidden;text-overflow:ellipsis;font-weight:500;font-size:1em;line-height:1.3;height:60px}.home-template .container .products .product-preview .price{color:#5f6988;margin-top:5px;font-size:1.1em;font-weight:600}.home-template h2{margin-bottom:0!important} \ No newline at end of file diff --git a/flask_blueprint_tutorial/static/dist/css/style.css b/flask_blueprint_tutorial/static/dist/css/style.css index 762d392..b69f7ac 100644 --- a/flask_blueprint_tutorial/static/dist/css/style.css +++ b/flask_blueprint_tutorial/static/dist/css/style.css @@ -1 +1 @@ -nav{background:#fff;padding:20px 0;margin-bottom:40px;box-shadow:0 0 5px #bec6cf}nav .nav-wrapper{width:985px!important;max-width:88%!important;display:flex;justify-content:space-between;align-items:center;margin:0!important}nav .nav-wrapper .left-nav{display:flex;justify-content:space-between;align-items:center}nav .nav-wrapper .left-nav a{margin-right:40px}@media(max-width:600px){nav .nav-wrapper .left-nav a{margin-right:25px!important}}nav .nav-wrapper .left-nav img{width:50px;margin-right:0}nav .nav-wrapper a{font-weight:600;color:#7d849a}@media(max-width:600px){nav .nav-wrapper a{font-size:.95em}}nav a{color:#4d545d;transition:all .2s ease-out;text-decoration:none;font-size:1.1em}nav a:hover{cursor:pointer;opacity:.7}nav{background:#fff;padding:30px;width:auto;margin-bottom:40px;box-shadow:0 0 5px #bec6cf}nav .nav-wrapper{max-width:1014px!important;display:flex;justify-content:space-between;align-items:center;width:auto;margin:0 auto}nav .nav-wrapper .left-nav{display:flex;justify-content:space-between;align-items:center}nav .nav-wrapper .left-nav a{margin-right:40px}@media(max-width:600px){nav .nav-wrapper .left-nav a{margin-right:25px!important}}nav .nav-wrapper .left-nav img{width:50px;margin-right:0}nav .nav-wrapper a{font-weight:600;color:#7d849a}@media(max-width:600px){nav .nav-wrapper a{font-size:.95em}}nav a{color:#4d545d;transition:all .2s ease-out;text-decoration:none;font-size:1.1em}nav a:hover{cursor:pointer;opacity:.7}body,html{font-family:'Poppins',sans-serif;margin:0;padding:0;background:#f0f0f0;height:100%;color:#5f6988}body .container,html .container{width:948px;max-width:88%;margin:0 auto;height:fit-content;background:white;padding:30px 40px;box-shadow:0 0 5px rgba(65,67,144,0.15)}@media(max-width:800px){body .container,html .container{width:82%;margin:0 auto 20px;padding:30px 6%}}body .container h1,html .container h1{line-height:1.5;margin:0 0 5px}body .container h2,html .container h2{margin:0;font-weight:400;font-size:1.2em;line-height:1}body .container a,html .container a{color:#5dbad7;transition:all .2s ease-out;text-decoration:none}body .container a:hover,html .container a:hover{cursor:pointer;opacity:.7}body .blueprint-info,html .blueprint-info{height:fit-content;margin:20px auto 0;width:968px;max-width:88%;background:white;padding:20px 30px;box-shadow:0 0 5px rgba(65,67,144,0.15)}@media(max-width:800px){body .blueprint-info,html .blueprint-info{width:82%;margin:0 auto;padding:30px 6%}}body .blueprint-info h3,html .blueprint-info h3{margin:0;font-size:1.4em;font-weight:500}body .blueprint-info ul,html .blueprint-info ul{list-style:none;border:1px solid #e6e6e6;padding:10px}body .blueprint-info ul li,html .blueprint-info ul li{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ececec;padding-bottom:10px;margin-bottom:10px;font-size:1.1em}body .blueprint-info ul li:last-of-type,html .blueprint-info ul li:last-of-type{border-bottom:none;margin-bottom:0;padding-bottom:0}body .blueprint-info ul li span,html .blueprint-info ul li span{font-weight:500;font-size:.9em}body .blueprint-info ul .attribute-value,html .blueprint-info ul .attribute-value{font-weight:300;font-size:.9em} \ No newline at end of file +nav{background:#fff;padding:20px 0;margin-bottom:40px;box-shadow:0 0 5px #bec6cf}nav .nav-wrapper{width:985px!important;max-width:88%!important;display:flex;justify-content:space-between;align-items:center;margin:0 auto!important}nav .nav-wrapper .left-nav{display:flex;justify-content:space-between;align-items:center}nav .nav-wrapper .left-nav a{margin-right:40px}@media(max-width:600px){nav .nav-wrapper .left-nav a{margin-right:25px!important}}nav .nav-wrapper .left-nav img{width:50px;margin-right:0}nav .nav-wrapper a{font-weight:600;color:#7d849a}@media(max-width:600px){nav .nav-wrapper a{font-size:.95em}}nav a{color:#4d545d;transition:all .2s ease-out;text-decoration:none;font-size:1.1em}nav a:hover{cursor:pointer;opacity:.7}nav{background:#fff;padding:30px;width:auto;margin-bottom:40px;box-shadow:0 0 5px #bec6cf}nav .nav-wrapper{max-width:1014px!important;display:flex;justify-content:space-between;align-items:center;width:auto;margin:0 auto}nav .nav-wrapper .left-nav{display:flex;justify-content:space-between;align-items:center}nav .nav-wrapper .left-nav a{margin-right:40px}@media(max-width:600px){nav .nav-wrapper .left-nav a{margin-right:25px!important}}nav .nav-wrapper .left-nav img{width:50px;margin-right:0}nav .nav-wrapper a{font-weight:600;color:#7d849a}@media(max-width:600px){nav .nav-wrapper a{font-size:.95em}}nav a{color:#4d545d;transition:all .2s ease-out;text-decoration:none;font-size:1.1em}nav a:hover{cursor:pointer;opacity:.7}body,html{font-family:'Poppins',sans-serif;margin:0;padding:0;background:#f0f0f0;height:100%;color:#5f6988}body .container,html .container{width:948px;max-width:88%;margin:0 auto;height:fit-content;background:white;padding:30px 40px;box-shadow:0 0 5px rgba(65,67,144,0.15)}@media(max-width:800px){body .container,html .container{width:82%;margin:0 auto 20px;padding:30px 6%}}body .container h1,html .container h1{line-height:1.5;margin:0 0 5px}body .container h2,html .container h2{margin:0;font-weight:400;font-size:1.2em;line-height:1}body .container a,html .container a{color:#5dbad7;transition:all .2s ease-out;text-decoration:none}body .container a:hover,html .container a:hover{cursor:pointer;opacity:.7}body .blueprint-info,html .blueprint-info{height:fit-content;margin:20px auto 0;width:968px;max-width:88%;background:white;padding:20px 30px;box-shadow:0 0 5px rgba(65,67,144,0.15)}@media(max-width:800px){body .blueprint-info,html .blueprint-info{width:82%;margin:0 auto;padding:30px 6%}}body .blueprint-info h3,html .blueprint-info h3{margin:0;font-size:1.4em;font-weight:500}body .blueprint-info ul,html .blueprint-info ul{list-style:none;border:1px solid #e6e6e6;padding:10px}body .blueprint-info ul li,html .blueprint-info ul li{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ececec;padding-bottom:10px;margin-bottom:10px;font-size:1.1em}body .blueprint-info ul li:last-of-type,html .blueprint-info ul li:last-of-type{border-bottom:none;margin-bottom:0;padding-bottom:0}body .blueprint-info ul li span,html .blueprint-info ul li span{font-weight:500;font-size:.9em}body .blueprint-info ul .attribute-value,html .blueprint-info ul .attribute-value{font-weight:300;font-size:.9em} \ No newline at end of file