From baa5befc99fffd4c35e38489581fd519d621d08b Mon Sep 17 00:00:00 2001 From: Jacek Pyziak Date: Mon, 16 Dec 2024 18:44:40 +0100 Subject: [PATCH] Add initial HTML and CSS files for responsive design --- ocelio.pl/index.html | 0 ocelio.pl/style.css | 1 + ocelio.pl/style.css.map | 1 + ocelio.pl/style.scss | 168 ++++++++++++++++++++++++++++++++++++++++ 4 files changed, 170 insertions(+) create mode 100644 ocelio.pl/index.html create mode 100644 ocelio.pl/style.css create mode 100644 ocelio.pl/style.css.map create mode 100644 ocelio.pl/style.scss diff --git a/ocelio.pl/index.html b/ocelio.pl/index.html new file mode 100644 index 0000000..e69de29 diff --git a/ocelio.pl/style.css b/ocelio.pl/style.css new file mode 100644 index 0000000..acdfbc3 --- /dev/null +++ b/ocelio.pl/style.css @@ -0,0 +1 @@ +@media(max-width: 767px){#box_mainproducts .product{padding:0 !important}#box_mainproducts .product .product-inner-wrap{padding:15px !important}#box_mainproducts .product .product-inner-wrap .price{padding-top:0 !important;margin-top:0 !important}.logo-bar{display:none}.menu{display:grid;grid-template-columns:150px 1fr}.menu:before{display:none !important}.menu .link-logo{display:block;padding:0 10px}.menu .innermenu{border:0 !important}}#box_mainproducts .product{padding:15px !important;margin:0 !important;height:auto !important}#box_mainproducts .product .prodname{margin:0 !important}#box_mainproducts .product .productname{font-size:15px !important;font-weight:600 !important;padding-top:0 !important}#box_mainproducts .product .price em{font-size:20px !important}#box_specialoffer .product>a,#box_lastadded .product>a{display:block;padding:15px 15px 0 15px}#box_specialoffer .product>a .productnamewrap,#box_lastadded .product>a .productnamewrap{margin-bottom:0;height:auto !important;padding-bottom:10px}#box_specialoffer .product>a .productnamewrap .productname,#box_lastadded .product>a .productnamewrap .productname{font-size:15px !important;font-weight:600 !important}#box_specialoffer .product .price,#box_lastadded .product .price{padding:0 15px;margin:0}#box_specialoffer .product .price p em,#box_lastadded .product .price p em{font-size:20px !important}#box_specialoffer .product .price .price__inactive,#box_lastadded .product .price .price__inactive{font-size:13px !important}#box_specialoffer .product form,#box_lastadded .product form{padding:15px 15px 0}#box_newsletter:before{background:rgba(0,0,0,.6);width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;display:block}#box_newsletter .boxhead{z-index:2;position:relative}#box_newsletter .boxhead span{color:#fff !important}#box_newsletter .innerbox{z-index:2;position:relative}#box_newsletter .innerbox h5{color:#fff;font-weight:400 !important;letter-spacing:0 !important}#box_newsletter .innerbox form input{border:0 !important}#box_newsletter .innerbox form fieldset{color:#fff;font-weight:400 !important}#box_custom40{padding:0 25px}#box_custom40 a.read-more{font-weight:600;color:#f59e01}#box_custom40 .more{display:none}#box_custom40 .more.open{display:block}#box_custom40 p{font-size:13px;line-height:1.25 !important}/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/ocelio.pl/style.css.map b/ocelio.pl/style.css.map new file mode 100644 index 0000000..48baf36 --- /dev/null +++ b/ocelio.pl/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss"],"names":[],"mappings":"AAAA,yBAEI,2BACE,oBAAA,CAEA,+CACE,uBAAA,CAEA,sDACE,wBAAA,CACA,uBAAA,CAMR,UACE,YAAA,CAGF,MACE,YAAA,CACA,+BAAA,CAEA,aACE,uBAAA,CAGF,iBACE,aAAA,CACA,cAAA,CAGF,iBACE,mBAAA,CAAA,CAMJ,2BACE,uBAAA,CACA,mBAAA,CACA,sBAAA,CAEA,qCACE,mBAAA,CAGF,wCACE,yBAAA,CACA,0BAAA,CACA,wBAAA,CAIA,qCACE,yBAAA,CASJ,uDACE,aAAA,CACA,wBAAA,CAEA,yFACE,eAAA,CACA,sBAAA,CACA,mBAAA,CAEA,mHACE,yBAAA,CACA,0BAAA,CAKN,iEACE,cAAA,CACA,QAAA,CAGE,2EACE,yBAAA,CAIJ,mGACE,yBAAA,CAIJ,6DACE,mBAAA,CAMJ,uBACE,yBAAA,CACA,UAAA,CACA,WAAA,CACA,iBAAA,CACA,KAAA,CACA,MAAA,CACA,SAAA,CACA,aAAA,CAGF,yBACE,SAAA,CACA,iBAAA,CAEA,8BACE,qBAAA,CAIJ,0BACE,SAAA,CACA,iBAAA,CAEA,6BACE,UAAA,CACA,0BAAA,CACA,2BAAA,CAIA,qCACE,mBAAA,CAGF,wCACE,UAAA,CACA,0BAAA,CAMR,cACE,cAAA,CAEA,0BACE,eAAA,CACA,aAAA,CAGF,oBACE,YAAA,CAEA,yBACE,aAAA,CAIJ,gBACE,cAAA,CACA,2BAAA","file":"style.css","sourcesContent":["@media(max-width: 767px) {\r\n #box_mainproducts {\r\n .product {\r\n padding: 0 !important;\r\n\r\n .product-inner-wrap {\r\n padding: 15px !important;\r\n\r\n .price {\r\n padding-top: 0 !important;\r\n margin-top: 0 !important;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .logo-bar {\r\n display: none;\r\n }\r\n\r\n .menu {\r\n display: grid;\r\n grid-template-columns: 150px 1fr;\r\n\r\n &:before {\r\n display: none !important;\r\n }\r\n\r\n .link-logo {\r\n display: block;\r\n padding: 0 10px;\r\n }\r\n\r\n .innermenu {\r\n border: 0 !important;\r\n }\r\n }\r\n}\r\n\r\n#box_mainproducts {\r\n .product {\r\n padding: 15px !important;\r\n margin: 0 !important;\r\n height: auto !important;\r\n\r\n .prodname {\r\n margin: 0 !important;\r\n }\r\n\r\n .productname {\r\n font-size: 15px !important;\r\n font-weight: 600 !important;\r\n padding-top: 0 !important;\r\n }\r\n\r\n .price {\r\n em {\r\n font-size: 20px !important;\r\n }\r\n }\r\n }\r\n}\r\n\r\n#box_specialoffer,\r\n#box_lastadded {\r\n .product {\r\n >a {\r\n display: block;\r\n padding: 15px 15px 0 15px;\r\n\r\n .productnamewrap {\r\n margin-bottom: 0;\r\n height: auto !important;\r\n padding-bottom: 10px;\r\n\r\n .productname {\r\n font-size: 15px !important;\r\n font-weight: 600 !important;\r\n }\r\n }\r\n }\r\n\r\n .price {\r\n padding: 0 15px;\r\n margin: 0;\r\n\r\n p {\r\n em {\r\n font-size: 20px !important;\r\n }\r\n }\r\n\r\n .price__inactive {\r\n font-size: 13px !important;\r\n }\r\n }\r\n\r\n form {\r\n padding: 15px 15px 0;\r\n }\r\n }\r\n}\r\n\r\n#box_newsletter {\r\n &:before {\r\n background: rgba(0, 0, 0, 0.6);\r\n width: 100%;\r\n height: 100%;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n z-index: 1;\r\n display: block;\r\n }\r\n\r\n .boxhead {\r\n z-index: 2;\r\n position: relative;\r\n\r\n span {\r\n color: #FFF !important;\r\n }\r\n }\r\n\r\n .innerbox {\r\n z-index: 2;\r\n position: relative;\r\n\r\n h5 {\r\n color: #FFF;\r\n font-weight: 400 !important;\r\n letter-spacing: 0 !important;\r\n }\r\n\r\n form {\r\n input {\r\n border: 0 !important;\r\n }\r\n\r\n fieldset {\r\n color: #FFF;\r\n font-weight: 400 !important;\r\n }\r\n }\r\n }\r\n}\r\n\r\n#box_custom40 {\r\n padding: 0 25px;\r\n\r\n a.read-more {\r\n font-weight: 600;\r\n color: #f59e01;\r\n }\r\n\r\n .more {\r\n display: none;\r\n\r\n &.open {\r\n display: block;\r\n }\r\n }\r\n\r\n p {\r\n font-size: 13px;\r\n line-height: 1.25 !important;\r\n }\r\n}"]} \ No newline at end of file diff --git a/ocelio.pl/style.scss b/ocelio.pl/style.scss new file mode 100644 index 0000000..37de8f1 --- /dev/null +++ b/ocelio.pl/style.scss @@ -0,0 +1,168 @@ +@media(max-width: 767px) { + #box_mainproducts { + .product { + padding: 0 !important; + + .product-inner-wrap { + padding: 15px !important; + + .price { + padding-top: 0 !important; + margin-top: 0 !important; + } + } + } + } + + .logo-bar { + display: none; + } + + .menu { + display: grid; + grid-template-columns: 150px 1fr; + + &:before { + display: none !important; + } + + .link-logo { + display: block; + padding: 0 10px; + } + + .innermenu { + border: 0 !important; + } + } +} + +#box_mainproducts { + .product { + padding: 15px !important; + margin: 0 !important; + height: auto !important; + + .prodname { + margin: 0 !important; + } + + .productname { + font-size: 15px !important; + font-weight: 600 !important; + padding-top: 0 !important; + } + + .price { + em { + font-size: 20px !important; + } + } + } +} + +#box_specialoffer, +#box_lastadded { + .product { + >a { + display: block; + padding: 15px 15px 0 15px; + + .productnamewrap { + margin-bottom: 0; + height: auto !important; + padding-bottom: 10px; + + .productname { + font-size: 15px !important; + font-weight: 600 !important; + } + } + } + + .price { + padding: 0 15px; + margin: 0; + + p { + em { + font-size: 20px !important; + } + } + + .price__inactive { + font-size: 13px !important; + } + } + + form { + padding: 15px 15px 0; + } + } +} + +#box_newsletter { + &:before { + background: rgba(0, 0, 0, 0.6); + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 1; + display: block; + } + + .boxhead { + z-index: 2; + position: relative; + + span { + color: #FFF !important; + } + } + + .innerbox { + z-index: 2; + position: relative; + + h5 { + color: #FFF; + font-weight: 400 !important; + letter-spacing: 0 !important; + } + + form { + input { + border: 0 !important; + } + + fieldset { + color: #FFF; + font-weight: 400 !important; + } + } + } +} + +#box_custom40 { + padding: 0 25px; + + a.read-more { + font-weight: 600; + color: #f59e01; + } + + .more { + display: none; + + &.open { + display: block; + } + } + + p { + font-size: 13px; + line-height: 1.25 !important; + } +} \ No newline at end of file