diff --git a/public/css/style.css b/public/css/style.css index 5cd0a489..27aebf3a 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -19,6 +19,11 @@ body { padding: 67px 0; background-color: #f9f9f9; } +@media (max-width: 768px) { + .body_container { + padding: 50px 0; + } +} .header_container { max-width: 1170px; @@ -37,6 +42,14 @@ body { width: calc(300px + var(--bs-gutter-x)); } +@media (max-width: 768px) { + .content_container { + padding-right: calc(var(--bs-gutter-x) * 0.5); + } + .site_container { + overflow: hidden; + } +} .btn { display: block; width: calc(100% - 78px); @@ -127,20 +140,46 @@ div.pp_default .pp_close:hover { .header { height: 110px; } - .header .logo { float: left; margin-top: 18px; } - .header .logo img { height: 75px; } +.header .advertisement { + float: right; + width: 728px; + height: 90px; +} -.menu_container { - height: 75px; - margin-bottom: 20px; - background-image: linear-gradient(to right, #0102b0, #4090e3); +@media (max-width: 1170px) { + .header { + padding: 0 20px; + } +} +@media (max-width: 980px) { + .header { + height: 212px; + } + .header .logo { + float: none; + } + .header .advertisement { + float: none; + } +} +@media (max-width: 768px) { + .header_container { + display: none; + } +} +@media (min-width: 767px) { + .menu_container { + height: 75px; + margin-bottom: 20px; + background-image: linear-gradient(to right, #0102b0, #4090e3); + } } .menu_container nav { display: flex; @@ -225,30 +264,30 @@ div.pp_default .pp_close:hover { margin-left: -10px; } -.top_menu_container { +.top_menu_container, .menu_mobile_container { height: 50px; max-width: 1170px; margin: 0 auto; } -.top_menu_container ul { +.top_menu_container ul.right_menu, .menu_mobile_container ul.right_menu { float: right; margin: 0; padding: 0; list-style: none; } -.top_menu_container ul li { +.top_menu_container ul.right_menu li, .menu_mobile_container ul.right_menu li { float: left; padding: 6px 19px; margin: 8px; border-right: 1px solid #fff; } -.top_menu_container ul li:last-child { +.top_menu_container ul.right_menu li:last-child, .menu_mobile_container ul.right_menu li:last-child { border: none; } -.top_menu_container ul li:nth-child(2) { +.top_menu_container ul.right_menu li:nth-child(2), .menu_mobile_container ul.right_menu li:nth-child(2) { padding: 0 19px; } -.top_menu_container ul li a { +.top_menu_container ul.right_menu li a, .menu_mobile_container ul.right_menu li a { float: left; font-family: Nunito, serif; font-size: 14px; @@ -258,21 +297,21 @@ div.pp_default .pp_close:hover { text-decoration: none; text-transform: uppercase; } -.top_menu_container ul li a i { +.top_menu_container ul.right_menu li a i, .menu_mobile_container ul.right_menu li a i { font-size: 18px; position: relative; top: 2px; margin-left: 5px; } -.top_menu_container ul li .search_form { +.top_menu_container ul.right_menu li .search_form, .menu_mobile_container ul.right_menu li .search_form { float: left; overflow: hidden; height: 34px; margin-right: 10px; } -.top_menu_container ul li .search_form .search_input { +.top_menu_container ul.right_menu li .search_form .search_input, .menu_mobile_container ul.right_menu li .search_form .search_input { border: 1px solid #efefef; - border-radius: 5px; + border-radius: 3px; background-color: #fff; height: 29px; font-family: Montserrat, serif; @@ -280,27 +319,76 @@ div.pp_default .pp_close:hover { line-height: 1.25; color: #1a1a1a; } -.top_menu_container ul li .search_form .search_submit { +.top_menu_container ul.right_menu li .search_form .search_submit, .menu_mobile_container ul.right_menu li .search_form .search_submit { float: right; margin: 6px; } -.top_menu_container ul li .search_button { +.top_menu_container ul.right_menu li .search_button, .menu_mobile_container ul.right_menu li .search_button { margin-top: 6px; } -.menu-submenu { +.menu_mobile_container { + height: 30px; + padding: 12px 0; +} +.menu_mobile_container .mobile_menu_button a { + display: block; + width: 20px; + height: 21px; + padding: 4px 10px 4px 11px; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + background-color: #10229c; + margin-right: 12px; +} +.menu_mobile_container .mobile_menu_button a i { + color: white; + font-size: 19px; +} +.menu_mobile_container .logo_mobile { + height: 100%; +} +.menu_mobile_container .logo_mobile img { + height: 100%; +} +.menu_mobile_container .right_menu_container { + background-color: #10229c; + margin-left: 12px; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + flex-grow: 1; +} +.menu_mobile_container .right_menu_container ul.right_menu li { + padding: 5px 19px; + margin: 0; +} +.menu_mobile_container .right_menu_container ul.right_menu li .search_form { + height: 25px; +} +.menu_mobile_container .right_menu_container ul.right_menu li .search_form .search_input { + height: 18px; + width: 80px; +} +.menu_mobile_container .right_menu_container ul.right_menu li .search_form .search_submit { + margin: 0 6px; +} +.menu_mobile_container .right_menu_container ul.right_menu li .search_button { + margin: 0; +} + +.menu-submenu, .mobile_menu_container { position: absolute; } -.menu-submenu > a { +.menu-submenu > a, .mobile_menu_container > a { display: block; height: 30px; } -.menu-submenu ul { +.menu-submenu ul, .mobile_menu_container ul { margin: 0; padding: 0; list-style: none; } -.menu-submenu ul a { +.menu-submenu ul a, .mobile_menu_container ul a { display: block; font-family: Nunito, serif; font-size: 14px; @@ -311,7 +399,7 @@ div.pp_default .pp_close:hover { border-bottom: 1px solid #f8f8f8; text-transform: uppercase; } -.menu-submenu > ul { +.menu-submenu > ul, .mobile_menu_container > ul { padding: 20px; border-radius: 3px; box-shadow: 0 0 15px 0 rgba(35, 31, 32, 0.1); @@ -320,16 +408,70 @@ div.pp_default .pp_close:hover { width: max-content; display: none; } -.menu-submenu > ul li ul { +.menu-submenu > ul li ul, .mobile_menu_container > ul li ul { display: none; } -.menu-submenu > ul li ul li { +.menu-submenu > ul li ul li, .mobile_menu_container > ul li ul li { padding-left: 10px; } -.menu-submenu > ul li.has_submenu { +.menu-submenu > ul li.has_submenu, .mobile_menu_container > ul li.has_submenu { position: relative; } -.menu-submenu > ul li.has_submenu:after { +.menu-submenu > ul li.has_submenu:after, .mobile_menu_container > ul li.has_submenu:after { + -webkit-font-smoothing: antialiased; + display: var(--fa-display, inline-block); + font-style: normal; + font-variant: normal; + line-height: 1; + text-rendering: auto; + font-family: "Font Awesome 6 Free"; + font-weight: 900; + content: "\f0d7"; + position: absolute; + right: 0; + top: 15px; + -webkit-transform: rotate(270deg); + transform: rotate(270deg); + transition: 0.6s ease; +} +.menu-submenu > ul li.has_submenu.opened:after, .mobile_menu_container > ul li.has_submenu.opened:after { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); +} + +.mobile_menu_container { + display: none; + position: fixed; + z-index: 15; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.8); +} +.mobile_menu_container nav { + background: white; + width: fit-content; + height: 100vh; + padding: 20px; + min-width: 70vw; + max-width: 100vw; + overflow: hidden; +} +.mobile_menu_container nav ul, .mobile_menu_container nav li, .mobile_menu_container nav li a { + width: 100%; +} +.mobile_menu_container nav ul > li > ul > li { + padding-left: 20px; + width: calc(100% - 20px); +} +.mobile_menu_container nav .submenu { + display: none; +} +.mobile_menu_container nav li.has_submenu { + position: relative; +} +.mobile_menu_container nav li.has_submenu:after { -webkit-font-smoothing: antialiased; display: var(--fa-display, inline-block); font-style: normal; @@ -345,11 +487,51 @@ div.pp_default .pp_close:hover { -webkit-transform: rotate(270deg); transform: rotate(270deg); } -.menu-submenu > ul li.has_submenu.opened:after { +.mobile_menu_container nav li.has_submenu.opened:after { -webkit-transform: rotate(0deg); transform: rotate(0deg); } +.logo_close_button { + display: flex; + height: 42px; + margin-bottom: 37px; +} +.logo_close_button .logo { + flex-grow: 1; + height: 42px; +} +.logo_close_button .logo a { + height: 100%; + padding: 0; + border-bottom: none; +} +.logo_close_button .logo a img { + height: 100%; +} +.logo_close_button .mobile_close_menu_button { + height: 30px; + width: 22.5px; + padding: 4px; +} +.logo_close_button .mobile_close_menu_button a { + font-size: 30px; + color: #1d2bb2; + padding: 0; + border-bottom: none; +} + +.mobile_menu_container nav li.has_submenu:after { + content: "\f054"; + -webkit-transform: rotate(0); + transform: rotate(0); + transition: 0.6s ease; +} +.mobile_menu_container nav li.has_submenu.opened:after { + -webkit-transform: rotate(90deg); + transform: rotate(90deg); +} + .header .now-playing-header { float: right; } @@ -402,6 +584,28 @@ div.pp_default .pp_close:hover { cursor: pointer; } +@media (max-width: 768px) { + .blog_grid { + overflow-x: auto; + overflow-y: hidden; + /* Track */ + /* Handle */ + } + .blog_grid::-webkit-scrollbar { + height: 8px; + } + .blog_grid::-webkit-scrollbar-track { + border-radius: 100vw; + background: #eee; + } + .blog_grid::-webkit-scrollbar-thumb { + border-radius: 4px; + background: linear-gradient(to right, #10229c, #64a9f2); + } + .blog_grid .grid_view { + width: 300%; + } +} .blog_grid .row, .blog_grid .row > * { padding: 0; margin: 0; @@ -413,6 +617,11 @@ div.pp_default .pp_close:hover { position: relative; height: 100%; } +@media (max-width: 768px) { + .blog_grid .post { + height: 50%; + } +} .blog_grid .post img { width: 100%; height: 100%; @@ -461,6 +670,12 @@ div.pp_default .pp_close:hover { font-size: 16px; line-height: 1.17; } +@media (max-width: 768px) { + .blog_grid .post .slider_content_box h2 a, .blog_grid .post .slider_content_box h5 a { + font-size: 16px; + line-height: 1.17; + } +} .blog_grid .post .slider_content_box .post_date { display: block; height: 30px; @@ -517,6 +732,7 @@ div.pp_default .pp_close:hover { .tabs { display: flex; justify-content: space-between; + flex-wrap: wrap; } .tabs.fit_content { width: fit-content; @@ -614,6 +830,11 @@ div.pp_default .pp_close:hover { width: calc(100% - 38px); } +@media (max-width: 768px) { + .sidebar { + width: 100%; + } +} .radio_box { padding: 15px 23px 15px 15px; width: calc(100% - 38px); @@ -650,6 +871,7 @@ div.pp_default .pp_close:hover { .contact_box { position: relative; + padding: 15px 23px 15px 15px; } .contact_box .logo-whatsapp { position: absolute; @@ -681,6 +903,11 @@ div.pp_default .pp_close:hover { text-transform: uppercase; } +@media (max-width: 768px) and (min-width: 423px) { + .contact_box p { + width: calc(100% - 81px); + } +} .featured img { width: 100%; object-fit: cover; @@ -992,8 +1219,13 @@ div.pp_default .pp_close:hover { max-width: 1170px; margin: 0 auto; background-color: #fff; - width: calc(100% - 270px); - padding: 32px 135px; + padding: 20px; +} +@media (min-width: 768px) { + .page_container { + width: calc(100% - 270px); + padding: 32px 135px; + } } .page_body { @@ -1060,6 +1292,11 @@ div.pp_default .pp_close:hover { .footer_container .footer_menu { background-image: linear-gradient(to right, #0102b0, #4090e3); } +@media (max-width: 768px) { + .footer_container .footer_menu { + padding: 60px 30px 30px 30px; + } +} .footer_container .footer_menu .row { max-width: 1170px; margin: 0 auto; diff --git a/public/css/style.css.map b/public/css/style.css.map index 5cbaa180..8a842a48 100644 --- a/public/css/style.css.map +++ b/public/css/style.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../../resources/assets/sass/abstracts/_fonts.scss","../../resources/assets/sass/base/_clearfix.scss","../../resources/assets/sass/base/_container.scss","../../resources/assets/sass/abstracts/_mixin.scss","../../resources/assets/sass/components/_button.scss","../../resources/assets/sass/components/pretty_photo.scss","../../resources/assets/sass/components/_cookie.scss","../../resources/assets/sass/components/_header.scss","../../resources/assets/sass/components/_menu.scss","../../resources/assets/sass/abstracts/_variables.scss","../../resources/assets/sass/components/_now-playing.scss","../../resources/assets/sass/components/_main_news.scss","../../resources/assets/sass/components/_box.scss","../../resources/assets/sass/components/_blog.scss","../../resources/assets/sass/components/_sidebar.scss","../../resources/assets/sass/components/_radio_box.scss","../../resources/assets/sass/components/_contact_box.scss","../../resources/assets/sass/components/_featured.scss","../../resources/assets/sass/components/_podcast_items.scss","../../resources/assets/sass/components/_bread_crumb.scss","../../resources/assets/sass/components/_page_title.scss","../../resources/assets/sass/components/_post.scss","../../resources/assets/sass/components/_schedule.scss","../../resources/assets/sass/components/_page.scss","../../resources/assets/sass/components/_input.scss","../../resources/assets/sass/components/_podcast_item.scss","../../resources/assets/sass/components/_footer.scss","../../resources/assets/sass/base/_base.scss"],"names":[],"mappings":";AAAQ;AACA;AACA;ACFR;EACE;EACA;EACA;;;ACDF;EACE;EACA;;;AAKF;ECNE;EACA;EDOA;EACA;;;AAEF;ECXE;EACA;;;ADaF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AExBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AClBJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASE;EACA;;;AAEF;EAEE;;;AAEF;EAEE;EACA;EACA;EACA;EACA;;;AAEF;EAEE;EACA;;;AAEF;EAEE;EACA;;;AChCF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AC1BF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;;;ACLF;EACE;EACA;EACA;;AAEA;EACE;;AACA;EACE;EACA;EACA;EACA;;AAIJ;ELXA;EACA;EACA;EKWE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA,OCFS;EDGT,aCFU;EDGV,WCFQ;EDGR;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMV;EACE;ELjGA;EACA;;AKmGA;EACE;ELjGF;EACA;EACA;;AKkGE;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AAGJ;EACE;;;AAMR;EACE;;AAEA;EACE;EACA;;AAGF;ELxKA;EACA;EACA;;AKwKE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;;AACA;EACE;;AAIN;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;;AEnOR;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AC9CV;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EAEA;;AAEA;ER3BJ;EACA;EACA;;AQ4BM;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA,OFdiB;EEejB;;AAEF;EACE;EACA;;AAEF;ERtDJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EQ6CM,OFvBiB;;;AG7CzB;EAsBE;EACA;;AAtBA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAGJ;EACE;EACA;;AACA;EACE;;AAEF;EACE;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAIA;EACE;EACA;EACA;;;AAKR;EACE;EACA;;AACA;EACE;;;AC/EJ;EVKE;EACA;EACA;;AUJA;EACE;;AAEA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;;AAGF;EVpBF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AUaE;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AC7CN;EACE;;;ACCF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EZFA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AYJA;EACE;EACA;EACA;EACA;EACA;EACA;;;ACvBJ;EACE;;AACA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EbDA;EACA;EACA;EACA;EACA;EACA;;;Ac7BA;EACE;EACA;EACA;;AAEF;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;Ed6BA;EACA;;AACA;EAhBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AASA;EA3CA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AcEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AC7BF;EfIA;EACA;EACA;;AeJE;EACE;EACA;EACA;;AAGF;EACE;;AACA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EfuBJ;EACA;;AACA;EAhBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AASA;EA3CA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AgBrBF;EACE;EhBIA;EACA;EACA;;AgBHA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;ACtBN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;ACLF;ElBCE;EACA;EkBAA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;ElBTA;EACA;EACA;EkBSE;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIN;EACE;EAEA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAIJ;ElB9EF;EACA;EACA;;AkB+EI;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AAKN;EACE;EACA;;AAEF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;;;AC7HJ;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EnBDA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AmBPA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;;ACvBN;EpBCE;EACA;EoBAA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;;AAEA;EACE;;;ACnBJ;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;;;ACxBJ;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;ACRF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EvBVF;EACA;;AuBaE;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EvB3DA;EACA;EACA;;AuB4DE;EACE;EACA;;AAEA;EACE;;AAKN;EACE;EvBzEF;EACA;EACA;;AuB0EE;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;;;AC7FV;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGA;EACE,oBAFS;;;AACX;EACE,oBAFS;;;AACX;EACE,oBAFS;;;AACX;EACE,oBAFS;;;AACX;EACE,oBAFS;;;AACX;EACE,oBAFS;;;AACX;EACE,oBAFS;;;AACX;EACE,oBAFS;;;AACX;EACE,oBAFS;;;AACX;EACE,oBAFS","file":"style.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../../resources/assets/sass/abstracts/_fonts.scss","../../resources/assets/sass/base/_clearfix.scss","../../resources/assets/sass/base/_container.scss","../../resources/assets/sass/abstracts/_mixin.scss","../../resources/assets/sass/components/_button.scss","../../resources/assets/sass/components/pretty_photo.scss","../../resources/assets/sass/components/_cookie.scss","../../resources/assets/sass/components/_header.scss","../../resources/assets/sass/components/_menu.scss","../../resources/assets/sass/abstracts/_variables.scss","../../resources/assets/sass/components/_now-playing.scss","../../resources/assets/sass/components/_main_news.scss","../../resources/assets/sass/components/_box.scss","../../resources/assets/sass/components/_blog.scss","../../resources/assets/sass/components/_sidebar.scss","../../resources/assets/sass/components/_radio_box.scss","../../resources/assets/sass/components/_contact_box.scss","../../resources/assets/sass/components/_featured.scss","../../resources/assets/sass/components/_podcast_items.scss","../../resources/assets/sass/components/_bread_crumb.scss","../../resources/assets/sass/components/_page_title.scss","../../resources/assets/sass/components/_post.scss","../../resources/assets/sass/components/_schedule.scss","../../resources/assets/sass/components/_page.scss","../../resources/assets/sass/components/_input.scss","../../resources/assets/sass/components/_podcast_item.scss","../../resources/assets/sass/components/_footer.scss","../../resources/assets/sass/base/_base.scss"],"names":[],"mappings":";AAAQ;AACA;AACA;ACFR;EACE;EACA;EACA;;;ACDF;EACE;EACA;;;AAKF;ECNE;EACA;EDOA;EAIA;;AAHA;EAHF;IAII;;;;AAIJ;ECdE;EACA;;;ADgBF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;IACE;;EAEF;IACE;;;AElCJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AClBJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASE;EACA;;;AAEF;EAEE;;;AAEF;EAEE;EACA;EACA;EACA;EACA;;;AAEF;EAEE;EACA;;;AAEF;EAEE;EACA;;;AChCF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AC1BF;EACE;;AACA;EACE;EACA;;AACA;EACE;;AAGJ;EACE;EACA;EACA;;;AAIJ;EACE;IACE;;;AAGJ;EACE;IACE;;EACA;IACE;;EAEF;IACE;;;AAIN;EACE;IACE;;;AC9BF;EADF;IAEI;IACA;IACA;;;AAGF;EACE;;AACA;EACE;EACA;EACA;EACA;;AAIJ;ELbA;EACA;EACA;EKaE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA,OCJS;EDKT,aCJU;EDKV,WCJQ;EDKR;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMV;EACE;ELnGA;EACA;;AKqGA;EACE;ELnGF;EACA;EACA;;AKoGE;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AAGJ;EACE;;;AAKR;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAGJ;EACE;;AACA;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AAEE;EACE;EACA;;AAEA;EACE;;AACA;EACE;EACA;;AAEF;EACE;;AAIJ;EACE;;;AAOV;EACE;;AAEA;EACE;EACA;;AAGF;EL9NA;EACA;EACA;;AK8NE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;;AACA;EACE;;AAIN;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;;AAMR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;;AAKR;EACE;EACA;EACA;;AACA;EACE;EACA;;AACA;EACE;EACA;EACA;;AACA;EACE;;AAIN;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AE7XJ;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AC9CV;EADF;IAEI;IACA;AAKA;AAMA;;EAVA;IACE;;EAIF;IACE;IACA;;EAIF;IACE;IACA;;EAEF;IACE;;;AAGJ;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AACA;EAHF;IAII;;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EAEA;;AAEA;ERpDJ;EACA;EACA;;AQqDM;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OFzBe;EE0Bf;EACA;;AAIJ;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA,OFvCiB;EEwCjB;;AAEF;EACE;EACA;;AAEF;EACE;IACE;IACA;;;AAGJ;ERrFJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EQ4EM,OFtDiB;;;AG7CzB;EAsBE;EACA;;AAtBA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAGJ;EACE;EACA;EACA;;AACA;EACE;;AAEF;EACE;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAIA;EACE;EACA;EACA;;;AAKR;EACE;EACA;;AACA;EACE;;;AChFJ;EVKE;EACA;EACA;;AUJA;EACE;;AAEA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;;AAGF;EVpBF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AUaE;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AC7CN;EACE;;;AAEF;EACE;IACE;;;ACHJ;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EZFA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AYJA;EACE;EACA;EACA;EACA;EACA;EACA;;;ACvBJ;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EbHA;EACA;EACA;EACA;EACA;EACA;;;AaEF;EACE;IACE;;;ACjCF;EACE;EACA;EACA;;AAEF;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;Ed6BA;EACA;;AACA;EAhBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AASA;EA3CA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AcEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AC7BF;EfIA;EACA;EACA;;AeJE;EACE;EACA;EACA;;AAGF;EACE;;AACA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EfuBJ;EACA;;AACA;EAhBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AASA;EA3CA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AgBrBF;EACE;EhBIA;EACA;EACA;;AgBHA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;ACtBN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;ACLF;ElBCE;EACA;EkBAA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;ElBTA;EACA;EACA;EkBSE;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIN;EACE;EAEA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAIJ;ElB9EF;EACA;EACA;;AkB+EI;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AAKN;EACE;EACA;;AAEF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;;;AC7HJ;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EnBDA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AmBPA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;;ACvBN;EpBCE;EACA;EoBAA;EACA;;AACA;EAJF;IAKI;IACA;;;;AAGJ;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;;AAEA;EACE;;;ACtBJ;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;;;ACxBJ;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;ACRF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AACA;EAFF;IAGI;;;AAGF;EvBbF;EACA;;AuBgBE;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EvB9DA;EACA;EACA;;AuB+DE;EACE;EACA;;AAEA;EACE;;AAKN;EACE;EvB5EF;EACA;EACA;;AuB6EE;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;;;AC9FV;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGA;EACE,oBAFS;;;AACX;EACE,oBAFS;;;AACX;EACE,oBAFS;;;AACX;EACE,oBAFS;;;AACX;EACE,oBAFS;;;AACX;EACE,oBAFS;;;AACX;EACE,oBAFS;;;AACX;EACE,oBAFS;;;AACX;EACE,oBAFS;;;AACX;EACE,oBAFS","file":"style.css"} \ No newline at end of file diff --git a/public/js/functions.js b/public/js/functions.js index 0d374bb0..b904e2e7 100644 --- a/public/js/functions.js +++ b/public/js/functions.js @@ -80,29 +80,57 @@ $(function () { var submenu = $('
').append($menuItem.children('ul.submenu').clone()); var pos = $menuItem.offset(); submenu.addClass('menu-submenu').css({top: pos.top, left: pos.left}); - submenu.on( "mouseleave", function(){ + submenu.on( "mouseleave", function() { $('.menu-submenu > ul.submenu').slideUp(400, function(){$(this).closest('.menu-submenu').remove()}); $menuItem.removeClass('hover'); } ); $('body').append(submenu); submenu.children('ul.submenu').slideDown(); - submenu.find('ul.submenu li.has_submenu').click(function(){ - $(this).find('ul.submenu').slideToggle(); - $(this).toggleClass('opened'); - }); + submenu.find('ul.submenu').subMenu({}); openPlayerInNewScreen(); }); }; + /** + * @param {object} _options + */ + $.fn.subMenu = function (_options) { + var options = { + menuSubmenuClass: 'has_submenu' + }; + $.extend(options, _options); + var $container = $(this); + + $container.find('li.' + options.menuSubmenuClass + ' > a').click(function(e) { + e.preventDefault(); + var $li = $(this).closest('li'); + $li.children('ul.submenu').slideToggle(); + $li.toggleClass('opened'); + }); + }; + }(jQuery)); $(function () { - $('.menu, .mobile-menu').menu({}); + $('.menu').menu({}); + $('.mobile-menu').subMenu({}); + $('.mobile_menu_button a').click(function() { + $('.mobile_menu_container').show(); + }); + $('.mobile_close_menu_button a').click(function() { + $('.mobile_menu_container').hide(); + }); + $('.mobile_menu_container').click(function(e){ + var $target = $(e.target); + if(!$target.closest('#mobile_menu_nav').length && + $('.mobile_menu_container').is(":visible")) { + $('.mobile_menu_container').hide(); + } + }); }); $(function () { - console.log($(".prettyPhoto[rel^='prettyPhoto']")); $(".prettyPhoto[rel^='prettyPhoto']").prettyPhoto({ show_title: false, slideshow: 3000, @@ -111,6 +139,61 @@ $(function () { }); }); +(function ($) { + + /** + * @param {object} _options + */ + $.fn.snapTo = function (_options) { + var options = { + elementClass: 'post' + }; + $.extend(options, _options); + var $container = $(this); + var $elements = $container.find('.' + options.elementClass + ':visible'); + var stopSnapTo = false; + + var snapTimeout = null; + var snapHandler = function() { + if (!stopSnapTo) { + stopSnapTo = true; + var y = $container.scrollLeft(); + $elements.each(function () { + var offset = $(this).offset(); + if (offset.left > -(window.screen.width / 2) && offset.left < window.screen.width / 2) { + $container.animate({ + scrollLeft: Math.round(y + offset.left) + 'px' + }, 300); + return false; + } + }); + if (snapTimeout) { + clearTimeout(snapTimeout); + } + snapTimeout = setTimeout(function () { + stopSnapTo = false; + }, 500); + } + } + var snapToHandlerTimer = null; + var scrollHandler = function() { + if (snapToHandlerTimer) { + clearTimeout(snapToHandlerTimer); + } + snapToHandlerTimer = setTimeout(snapHandler, 300); + }; + + $container.on( "scroll", scrollHandler); + }; + +}(jQuery)); + +$(function () { + $('[data-snapto]').each(function () { + $(this).snapTo($(this).data('snapto')); + }); +}); + (function ($) { /** diff --git a/public/js/functions.min.js b/public/js/functions.min.js index 0cc73c40..f150af74 100644 --- a/public/js/functions.min.js +++ b/public/js/functions.min.js @@ -1,2 +1,2 @@ -/*! 2024-03-18 */ -!function(l){l.fn.loadMoreNews=function(e){var a=2,n=!1,i={loadingElementId:"#loading",container:"",url:document.location.pathname},o=(l.extend(i,e),l(i.loadingElementId,this));o.hide(),this.click(function(e){var t,s;e.preventDefault(),n||(n=1,o.show(),t=l(this).attr("disabled","disabled"),s=l(i.container),l.ajax({url:i.url+(0<=i.url.indexOf("?")?"&":"?")+"pagina="+a}).always(function(){n=0,o.hide(),t.removeAttr("disabled")}).done(function(n){n?(s.each(function(){var e=this.toString();l(e).append(l("
"+n+"
").find(e).length?l("
"+n+"
").find(e).children():l(n))}),++a):t.attr("disabled","disabled").text("Geen nieuws meer.")}))})}}(jQuery),$(function(){$("[data-loadmorenews]").each(function(){$(this).loadMoreNews($(this).data("loadmorenews"))})}),function(a){a.fn.menu=function(e){var n={menuSubmenuClass:"has_submenu"},e=(a.extend(n,e),a(this).children("."+n.menuSubmenuClass)),s=a(this);e.on("mouseenter",function(){var e=a(this),n=(a(".menu-submenu > ul.submenu").slideUp(400,function(){a(this).closest(".menu-submenu").remove()}),a(".hover",s).removeClass("hover"),e.addClass("hover"),a('
').append(e.children("ul.submenu").clone())),t=e.offset();n.addClass("menu-submenu").css({top:t.top,left:t.left}),n.on("mouseleave",function(){a(".menu-submenu > ul.submenu").slideUp(400,function(){a(this).closest(".menu-submenu").remove()}),e.removeClass("hover")}),a("body").append(n),n.children("ul.submenu").slideDown(),n.find("ul.submenu li.has_submenu").click(function(){a(this).find("ul.submenu").slideToggle(),a(this).toggleClass("opened")}),openPlayerInNewScreen()})}}(jQuery),$(function(){$(".menu, .mobile-menu").menu({})}),$(function(){console.log($(".prettyPhoto[rel^='prettyPhoto']")),$(".prettyPhoto[rel^='prettyPhoto']").prettyPhoto({show_title:!1,slideshow:3e3,overlay_gallery:!0,social_tools:""})}),function(a){a.fn.tabs=function(e){var n={tabClass:"box_header",activeClass:"active",contentClass:"tab_content"},t=(a.extend(n,e),a(this).find("."+n.tabClass)),s=a(this);t.click(function(e){e.preventDefault(),t.removeClass(n.activeClass),s.find("."+n.contentClass).removeClass(n.activeClass),s.find("#"+a(this).data("tab-content-id")).addClass(n.activeClass),a(this).addClass(n.activeClass)})}}(jQuery),$(function(){$("[data-tabs]").each(function(){$(this).tabs($(this).data("tabs")??{})})}); \ No newline at end of file +/*! 2024-03-20 */ +!function(u){u.fn.loadMoreNews=function(e){var s=2,n=!1,o={loadingElementId:"#loading",container:"",url:document.location.pathname},a=(u.extend(o,e),u(o.loadingElementId,this));a.hide(),this.click(function(e){var t,i;e.preventDefault(),n||(n=1,a.show(),t=u(this).attr("disabled","disabled"),i=u(o.container),u.ajax({url:o.url+(0<=o.url.indexOf("?")?"&":"?")+"pagina="+s}).always(function(){n=0,a.hide(),t.removeAttr("disabled")}).done(function(n){n?(i.each(function(){var e=this.toString();u(e).append(u("
"+n+"
").find(e).length?u("
"+n+"
").find(e).children():u(n))}),++s):t.attr("disabled","disabled").text("Geen nieuws meer.")}))})}}(jQuery),$(function(){$("[data-loadmorenews]").each(function(){$(this).loadMoreNews($(this).data("loadmorenews"))})}),function(s){s.fn.menu=function(e){var n={menuSubmenuClass:"has_submenu"},e=(s.extend(n,e),s(this).children("."+n.menuSubmenuClass)),i=s(this);e.on("mouseenter",function(){var e=s(this),n=(s(".menu-submenu > ul.submenu").slideUp(400,function(){s(this).closest(".menu-submenu").remove()}),s(".hover",i).removeClass("hover"),e.addClass("hover"),s('
').append(e.children("ul.submenu").clone())),t=e.offset();n.addClass("menu-submenu").css({top:t.top,left:t.left}),n.on("mouseleave",function(){s(".menu-submenu > ul.submenu").slideUp(400,function(){s(this).closest(".menu-submenu").remove()}),e.removeClass("hover")}),s("body").append(n),n.children("ul.submenu").slideDown(),n.find("ul.submenu").subMenu({}),openPlayerInNewScreen()})},s.fn.subMenu=function(e){var n={menuSubmenuClass:"has_submenu"};s.extend(n,e),s(this).find("li."+n.menuSubmenuClass+" > a").click(function(e){e.preventDefault();e=s(this).closest("li");e.children("ul.submenu").slideToggle(),e.toggleClass("opened")})}}(jQuery),$(function(){$(".menu").menu({}),$(".mobile-menu").subMenu({}),$(".mobile_menu_button a").click(function(){$(".mobile_menu_container").show()}),$(".mobile_close_menu_button a").click(function(){$(".mobile_menu_container").hide()}),$(".mobile_menu_container").click(function(e){!$(e.target).closest("#mobile_menu_nav").length&&$(".mobile_menu_container").is(":visible")&&$(".mobile_menu_container").hide()})}),$(function(){$(".prettyPhoto[rel^='prettyPhoto']").prettyPhoto({show_title:!1,slideshow:3e3,overlay_gallery:!0,social_tools:""})}),function(l){l.fn.snapTo=function(e){var n={elementClass:"post"},t=(l.extend(n,e),l(this)),i=t.find("."+n.elementClass+":visible"),s=!1,o=null,a=function(){var n;s||(s=!0,n=t.scrollLeft(),i.each(function(){var e=l(this).offset();if(e.left>-window.screen.width/2&&e.left').append($menuItem.children('ul.submenu').clone()); var pos = $menuItem.offset(); submenu.addClass('menu-submenu').css({top: pos.top, left: pos.left}); - submenu.on( "mouseleave", function(){ + submenu.on( "mouseleave", function() { $('.menu-submenu > ul.submenu').slideUp(400, function(){$(this).closest('.menu-submenu').remove()}); $menuItem.removeClass('hover'); } ); $('body').append(submenu); submenu.children('ul.submenu').slideDown(); - submenu.find('ul.submenu li.has_submenu').click(function(){ - $(this).find('ul.submenu').slideToggle(); - $(this).toggleClass('opened'); - }); + submenu.find('ul.submenu').subMenu({}); openPlayerInNewScreen(); }); }; + /** + * @param {object} _options + */ + $.fn.subMenu = function (_options) { + var options = { + menuSubmenuClass: 'has_submenu' + }; + $.extend(options, _options); + var $container = $(this); + + $container.find('li.' + options.menuSubmenuClass + ' > a').click(function(e) { + e.preventDefault(); + var $li = $(this).closest('li'); + $li.children('ul.submenu').slideToggle(); + $li.toggleClass('opened'); + }); + }; + }(jQuery)); $(function () { - $('.menu, .mobile-menu').menu({}); + $('.menu').menu({}); + $('.mobile-menu').subMenu({}); + $('.mobile_menu_button a').click(function() { + $('.mobile_menu_container').show(); + }); + $('.mobile_close_menu_button a').click(function() { + $('.mobile_menu_container').hide(); + }); + $('.mobile_menu_container').click(function(e){ + var $target = $(e.target); + if(!$target.closest('#mobile_menu_nav').length && + $('.mobile_menu_container').is(":visible")) { + $('.mobile_menu_container').hide(); + } + }); }); diff --git a/resources/assets/js/functions/prettyPhoto.js b/resources/assets/js/functions/prettyPhoto.js index f0522e0f..479bc058 100644 --- a/resources/assets/js/functions/prettyPhoto.js +++ b/resources/assets/js/functions/prettyPhoto.js @@ -1,5 +1,4 @@ $(function () { - console.log($(".prettyPhoto[rel^='prettyPhoto']")); $(".prettyPhoto[rel^='prettyPhoto']").prettyPhoto({ show_title: false, slideshow: 3000, diff --git a/resources/assets/js/functions/snapTo.js b/resources/assets/js/functions/snapTo.js new file mode 100644 index 00000000..5c67ce91 --- /dev/null +++ b/resources/assets/js/functions/snapTo.js @@ -0,0 +1,54 @@ +(function ($) { + + /** + * @param {object} _options + */ + $.fn.snapTo = function (_options) { + var options = { + elementClass: 'post' + }; + $.extend(options, _options); + var $container = $(this); + var $elements = $container.find('.' + options.elementClass + ':visible'); + var stopSnapTo = false; + + var snapTimeout = null; + var snapHandler = function() { + if (!stopSnapTo) { + stopSnapTo = true; + var y = $container.scrollLeft(); + $elements.each(function () { + var offset = $(this).offset(); + if (offset.left > -(window.screen.width / 2) && offset.left < window.screen.width / 2) { + $container.animate({ + scrollLeft: Math.round(y + offset.left) + 'px' + }, 300); + return false; + } + }); + if (snapTimeout) { + clearTimeout(snapTimeout); + } + snapTimeout = setTimeout(function () { + stopSnapTo = false; + }, 500); + } + } + var snapToHandlerTimer = null; + var scrollHandler = function() { + if (snapToHandlerTimer) { + clearTimeout(snapToHandlerTimer); + } + snapToHandlerTimer = setTimeout(snapHandler, 300); + }; + + $container.on( "scroll", scrollHandler); + }; + +}(jQuery)); + +$(function () { + $('[data-snapto]').each(function () { + $(this).snapTo($(this).data('snapto')); + }); +}); diff --git a/resources/assets/sass/base/_base.scss b/resources/assets/sass/base/_base.scss index 43174c75..8263e482 100644 --- a/resources/assets/sass/base/_base.scss +++ b/resources/assets/sass/base/_base.scss @@ -7,6 +7,8 @@ @use "../layout"; +@use "mobile"; + .mejs__overlay-button { border: none; } diff --git a/resources/assets/sass/base/_container.scss b/resources/assets/sass/base/_container.scss index b40c5e3d..cb92ad5f 100644 --- a/resources/assets/sass/base/_container.scss +++ b/resources/assets/sass/base/_container.scss @@ -10,6 +10,9 @@ body { .body_container { @include container; padding: 67px 0; + @media (max-width: 768px) { + padding: 50px 0; + } background-color: #f9f9f9; } .header_container { @@ -24,3 +27,11 @@ body { .sidebar { width: CALC(300px + var(--bs-gutter-x)); } +@media (max-width: 768px) { + .content_container { + padding-right: calc(var(--bs-gutter-x)* .5); + } + .site_container { + overflow: hidden; + } +} diff --git a/resources/assets/sass/base/_mobile.scss b/resources/assets/sass/base/_mobile.scss new file mode 100644 index 00000000..e69de29b diff --git a/resources/assets/sass/components/_box.scss b/resources/assets/sass/components/_box.scss index a19c3dd3..5a18fa0c 100644 --- a/resources/assets/sass/components/_box.scss +++ b/resources/assets/sass/components/_box.scss @@ -39,6 +39,7 @@ .tabs { display: flex; justify-content: space-between; + flex-wrap: wrap; &.fit_content { width: fit-content; } diff --git a/resources/assets/sass/components/_contact_box.scss b/resources/assets/sass/components/_contact_box.scss index 879c26fb..c5792929 100644 --- a/resources/assets/sass/components/_contact_box.scss +++ b/resources/assets/sass/components/_contact_box.scss @@ -2,6 +2,8 @@ .contact_box { position: relative; + padding: 15px 23px 15px 15px; + .logo-whatsapp { position: absolute; right: 0; @@ -29,4 +31,9 @@ .read_more { @include read_more_link; } -} \ No newline at end of file +} +@media (max-width: 768px) and (min-width: 423px) { + .contact_box p { + width: CALC(100% - 81px); + } +} diff --git a/resources/assets/sass/components/_footer.scss b/resources/assets/sass/components/_footer.scss index f732c6ec..ee6c6e43 100644 --- a/resources/assets/sass/components/_footer.scss +++ b/resources/assets/sass/components/_footer.scss @@ -10,6 +10,9 @@ .footer_menu { background-image: linear-gradient(to right, #0102b0, #4090e3); + @media (max-width: 768px) { + padding: 60px 30px 30px 30px; + } .row { @include container; diff --git a/resources/assets/sass/components/_header.scss b/resources/assets/sass/components/_header.scss index ffbfa55b..22c2f1c4 100644 --- a/resources/assets/sass/components/_header.scss +++ b/resources/assets/sass/components/_header.scss @@ -1,10 +1,37 @@ .header { height: 110px; + .logo { + float: left; + margin-top: 18px; + img { + height: 75px; + } + } + .advertisement { + float: right; + width: 728px; + height: 90px; + } } -.header .logo { - float: left; - margin-top: 18px; + +@media (max-width: 1170px) { + .header { + padding: 0 20px; + } } -.header .logo img { - height: 75px; +@media (max-width: 980px) { + .header { + height: 212px; + .logo { + float: none; + } + .advertisement { + float: none; + } + } +} +@media (max-width: 768px) { + .header_container { + display: none; + } } diff --git a/resources/assets/sass/components/_main_news.scss b/resources/assets/sass/components/_main_news.scss index 18b504b3..6236b5b7 100644 --- a/resources/assets/sass/components/_main_news.scss +++ b/resources/assets/sass/components/_main_news.scss @@ -2,6 +2,28 @@ @use "../abstracts/variables" as *; .blog_grid { + @media (max-width: 768px) { + overflow-x: auto; + overflow-y: hidden; + &::-webkit-scrollbar { + height: 8px; + } + + /* Track */ + &::-webkit-scrollbar-track { + border-radius: 100vw; + background: #eee; + } + + /* Handle */ + &::-webkit-scrollbar-thumb { + border-radius: 4px; + background: linear-gradient(to right, #10229c, #64a9f2); + } + .grid_view { + width: 300%; + } + } .row, .row > * { padding: 0; margin: 0; @@ -12,6 +34,9 @@ .post { position: relative; height: 100%; + @media (max-width: 768px) { + height: 50%; + } img { width: 100%; @@ -64,6 +89,12 @@ font-size: 16px; line-height: 1.17; } + @media (max-width: 768px) { + h2 a, h5 a { + font-size: 16px; + line-height: 1.17; + } + } .post_date { @include post_date; color: $news-banner-text-color; diff --git a/resources/assets/sass/components/_menu.scss b/resources/assets/sass/components/_menu.scss index cf2c5b7f..e31549a4 100644 --- a/resources/assets/sass/components/_menu.scss +++ b/resources/assets/sass/components/_menu.scss @@ -2,9 +2,11 @@ @use "../abstracts/mixin" as *; .menu_container { - height: 75px; - margin-bottom: 20px; - background-image: linear-gradient(to right, #0102b0, #4090e3); + @media (min-width: 767px) { + height: 75px; + margin-bottom: 20px; + background-image: linear-gradient(to right, #0102b0, #4090e3); + } nav { display: flex; @@ -97,11 +99,11 @@ } } } -.top_menu_container { +.top_menu_container, .menu_mobile_container { height: 50px; @include container; - ul { + ul.right_menu { float: right; @include reset-list; @@ -145,7 +147,7 @@ .search_input { border: 1px solid #efefef; - border-radius: 5px; + border-radius: 3px; background-color: #fff; height: 29px; font-family: Montserrat, serif; @@ -164,8 +166,60 @@ } } } +.menu_mobile_container { + height: 30px; + padding: 12px 0; + .mobile_menu_button a { + display: block; + width: 20px; + height: 21px; + padding: 4px 10px 4px 11px; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + background-color: #10229c; + margin-right: 12px; + i { + color: white; + font-size: 19px; + } + } + .logo_mobile { + height: 100%; + img { + height: 100%; + } + } + .right_menu_container { + background-color: #10229c; + margin-left: 12px; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + flex-grow: 1; + ul.right_menu { + li { + padding: 5px 19px; + margin: 0; -.menu-submenu { + .search_form { + height: 25px; + .search_input { + height: 18px; + width: 80px; + } + .search_submit { + margin: 0 6px; + } + } + + .search_button { + margin: 0; + } + } + } + } +} + +.menu-submenu, .mobile_menu_container { position: absolute; > a { @@ -222,6 +276,7 @@ top: 15px; -webkit-transform: rotate(270deg); transform: rotate(270deg); + transition: 0.6s ease; } &.opened:after { -webkit-transform: rotate(0deg); @@ -230,3 +285,100 @@ } } } + +.mobile_menu_container { + display: none; + position: fixed; + z-index: 15; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.8); + nav { + background: white; + width: fit-content; + height: 100vh; + padding: 20px; + min-width: 70vw; + max-width: 100vw; + overflow: hidden; + + ul, li, li a { + width: 100%; + } + ul > li > ul > li { + padding-left: 20px; + width: CALC(100% - 20px); + } + + .submenu { + display: none; + } + + li.has_submenu { + position: relative; + &:after { + -webkit-font-smoothing: antialiased; + display: var(--fa-display, inline-block); + font-style: normal; + font-variant: normal; + line-height: 1; + text-rendering: auto; + font-family: "Font Awesome 6 Free"; + font-weight: 900; + content: "\f0d7"; + position: absolute; + right: 0; + top: 15px; + -webkit-transform: rotate(270deg); + transform: rotate(270deg); + } + &.opened:after { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + } + } +} +.logo_close_button { + display: flex; + height: 42px; + margin-bottom: 37px; + .logo { + flex-grow: 1; + height: 42px; + a { + height: 100%; + padding: 0; + border-bottom: none; + img { + height: 100%; + } + } + } + .mobile_close_menu_button { + height: 30px; + width: 22.5px; + padding: 4px; + a { + font-size: 30px; + color: #1d2bb2; + padding: 0; + border-bottom: none; + } + } +} +.mobile_menu_container nav li.has_submenu { + &:after { + content: "\f054"; + -webkit-transform: rotate(0); + transform: rotate(0); + transition: 0.6s ease; + } + + &.opened:after { + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + } +} diff --git a/resources/assets/sass/components/_page.scss b/resources/assets/sass/components/_page.scss index 4772e165..b211c9cd 100644 --- a/resources/assets/sass/components/_page.scss +++ b/resources/assets/sass/components/_page.scss @@ -3,8 +3,11 @@ .page_container { @include container; background-color: #fff; - width: CALC(100% - 270px); - padding: 32px 135px; + padding: 20px; + @media (min-width: 768px) { + width: CALC(100% - 270px); + padding: 32px 135px; + } } .page_body { font-family: Nunito, serif; diff --git a/resources/assets/sass/components/_sidebar.scss b/resources/assets/sass/components/_sidebar.scss index 59528173..d4d6ea89 100644 --- a/resources/assets/sass/components/_sidebar.scss +++ b/resources/assets/sass/components/_sidebar.scss @@ -1,3 +1,8 @@ .sidebar .box { width: CALC(100% - 38px); } +@media (max-width: 768px) { + .sidebar { + width: 100%; + } +} diff --git a/resources/views/contact.blade.php b/resources/views/contact.blade.php index cf610662..8faac20b 100644 --- a/resources/views/contact.blade.php +++ b/resources/views/contact.blade.php @@ -18,7 +18,7 @@
-
+

Contactinformatie

Neem contact op met NH Gooi, de streekomroep voor Hilversum, Huizen, Blaricum, Eemnes en Laren.

@@ -54,7 +54,7 @@

-
+

WhatsApp de redactie / Nieuwsupdate

Elke dag het nieuws uit 't Gooi in een appje op je telefoon: dat kan met onze nieuwsdienst via WhatsApp.

diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php index ac353f15..91f85d57 100644 --- a/resources/views/home.blade.php +++ b/resources/views/home.blade.php @@ -7,11 +7,11 @@ @section('content')
-
+
{{-- Desktop --}}
-
+
@if($item = current($news))
@@ -49,11 +49,49 @@
@endif + @if($item = next($news)) +
+ + @if($item->video) + + @elseif($item->images && count($item->images) > 1) + + @endif + img + +
+ +

{!!$item->title!!}

+ published) . ' om ' . $item->published->format('H:i'); + if ($item->edited && ($item->edited->format('d m H i') != $item->published->format('d m H i'))) { + $time .= ' | bijgewerkt: ' + . ($item->edited->format('d m') != $item->published->format('d m') ? strtolower(Formatter::relativeDate($item->edited)) : '') + . ' ' . $item->edited->format('H:i') . ' uur'; + } + ?> + + {{$time}} + +
+
+ @endif
-
+
- @for($i = 0; ($i < 4) && ($item = next($news)); ++$i) -
+ @php(prev($news)) + @for($i = 0; ($i < 5) && ($item = next($news)); ++$i) +
@if($item->video) @@ -99,10 +137,10 @@
-
+
- Advertentie -
-
+
@@ -135,12 +173,12 @@

Uitgelicht

-
+
-
+

{!!$podcast->title!!}

@if ($podcast->program) diff --git a/resources/views/layouts/_head.blade.php b/resources/views/layouts/_head.blade.php index d63f8761..ed0ba09a 100644 --- a/resources/views/layouts/_head.blade.php +++ b/resources/views/layouts/_head.blade.php @@ -38,22 +38,4 @@ - diff --git a/resources/views/layouts/master.blade.php b/resources/views/layouts/master.blade.php index a1512f0e..02051d7a 100644 --- a/resources/views/layouts/master.blade.php +++ b/resources/views/layouts/master.blade.php @@ -5,7 +5,6 @@ @include('layouts._head') -