NH_Gooi/nhgooi.nl
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Home page and news page are finished

Browse Source
This commit is contained in:
Jorit Tijsen
2024-03-13 12:37:09 +01:00
parent 55aa88c0f6
commit 2895ba283b
58 changed files with 3713 additions and 31764 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
resources/assets/sass/components/_blog.scss vendored Normal file
View File

@@ -0,0 +1,36 @@
@use "../abstracts/mixin" as *;
.blog {
@include reset-list;
.post {
margin-bottom: 27px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
h2 {
margin: 0;
a {
font-family: Montserrat, serif;
font-size: 14px;
font-weight: 600;
line-height: 1.43;
color: #1a1a1a;
text-decoration: none;
display: inline-block;
}
}
.col-8 {
padding: 0;
}
.post_date {
@include post_date;
}
}
}

58
resources/assets/sass/components/_box.scss vendored Normal file
View File

@@ -0,0 +1,58 @@
.box_header {
span {
font-family: Nunito, serif;
font-size: 20px;
font-weight: bold;
color: #0f259d;
border-bottom: 3px solid #0f259d;
display: inline-block;
text-transform: uppercase;
height: 30px;
}
border-bottom: 1px solid #efefef;
}
.box {
display: inline-block;
width: auto;
padding: 30px 23px 30px 30px;
border-radius: 3px;
box-shadow: 0 0 15px 0 rgba(35, 31, 32, 0.1);
background-color: #fff;
margin-bottom: 50px;
&.full-width {
width: CALC(100% - 60px);
}
}
.tabs {
display: flex;
justify-content: space-between;
.box_header {
span {
color: #999;
border-bottom: none;
cursor: pointer;
}
&.small span {
font-size: 13px;
}
&.medium span {
font-size: 18px;
}
&.active, &:hover {
span {
color: #0f259d;
border-bottom: 3px solid #0f259d;
}
}
}
}
.tab_content {
display: none;
&.active {
display: block;
}
}

21
resources/assets/sass/components/_button.scss vendored Normal file
View File

@@ -0,0 +1,21 @@
.btn {
display: block;
width: CALC(100% - 78px);
padding: 10px 39px 10px 39px;
border-radius: 3px;
background-image: linear-gradient(to right, #0f259d, #5ba8f4);
font-family: Nunito, serif;
font-size: 14px;
font-weight: bold;
line-height: 0.93;
text-align: center;
color: #fff;
margin-bottom: 10px;
text-decoration: none;
text-transform: uppercase;
&.auto_width {
width: fit-content;
margin: 0 auto;
}
}

32
resources/assets/sass/components/_contact_box.scss vendored Normal file
View File

@@ -0,0 +1,32 @@
@use "../abstracts/mixin" as *;
.contact_box {
position: relative;
.logo-whatsapp {
position: absolute;
right: 0;
top: 0;
}
h2 {
font-family: Montserrat, serif;
font-size: 24px;
font-weight: 600;
line-height: 1.17;
color: #282828;
margin-top: 0;
padding-right: 60px;
}
p {
font-family: Nunito, serif;
font-size: 14px;
font-weight: 500;
line-height: 1.57;
color: #666;
}
.read_more {
@include read_more_link;
}
}

33
resources/assets/sass/components/_featured.scss vendored Normal file
View File

@@ -0,0 +1,33 @@
@use "../abstracts/mixin" as *;
.featured {
img {
width: 100%;
}
h2 {
margin: 0;
a {
font-family: Montserrat, serif;
font-size: 20px;
font-weight: 600;
line-height: 1.35;
text-align: left;
color: #1a1a1a;
text-decoration: none;
}
}
.sub_title {
@include sub_title;
}
p {
font-family: Nunito, serif;
font-size: 14px;
font-weight: 500;
line-height: 1.57;
text-align: left;
color: #666;
margin: 10px 0;
}
}

105
resources/assets/sass/components/_footer.scss vendored Normal file
View File

@@ -0,0 +1,105 @@
@use "../abstracts/mixin" as *;
.footer_container {
font-family: Montserrat, serif;
font-size: 14px;
font-weight: 600;
line-height: 1.71;
text-align: left;
color: #fff;
.footer_menu {
padding: 61px 135px 38px 134px;
background-image: linear-gradient(to right, #0102b0, #4090e3);
.row:first-child {
padding-bottom: 70px;
margin-bottom: 34px;
border-bottom: 1px solid #fff;
}
a {
color: #fff;
text-decoration: none;
display: block;
width: 100%;
}
.buttons a {
text-transform: uppercase;
margin-bottom: 10px;
}
.box_header {
border-bottom: 1px solid #fff;
span {
border-bottom: 3px solid #fff;
color: #fff;
font-size: 14px;
}
}
}
.copyright {
padding: 20px;
background-color: #0f259d;
text-align: center;
position: relative;
.scroll_top {
position: absolute;
right: 30px;
top: -19px;
width: 38px;
height: 38px;
background-color: #5ba8f4;
color: #fff;
text-decoration: none;
line-height: 40px;
border-radius: 5px;
}
}
.footer_menu2 {
@include reset-list;
li {
float: left;
margin-right: 40px;
a {
text-decoration: underline;
}
}
}
.footer_social_media {
float: right;
@include reset-list;
li {
float: left;
margin: 4px;
a {
display: block;
width: 34px;
height: 34px;
border-radius: 5px;
text-align: center;
line-height: 37px;
&.facebook {
background-color: #0f259d;
}
&.twitter-x {
background-color: #5ba8f4;
}
&.youtube {
background-color: #e73323;
}
}
}
}
}

1
resources/assets/sass/components/_header.scss vendored
View File

@@ -3,6 +3,7 @@
}
.header .logo {
margin-left: 135px;
float: left;
}
.header .logo img {
height: 75px;

70
resources/assets/sass/components/_main_news.scss vendored
View File

@@ -1,9 +1,73 @@
@use "../abstracts/mixin" as *;
@use "../abstracts/variables" as *;
.blog_grid {
img {
max-width: 100%;
}
.row, .row > * {
padding: 0;
margin: 0;
}
.row {
height: 100%;
}
.post {
position: relative;
height: 100%;
img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(50%);
}
&.small {
height: 50%;
}
.slider_content_box {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 15px;
.post_details {
@include reset-list;
.category a {
padding: 6px 11px 7px;
border-radius: 3px;
background-image: linear-gradient(to right, #0d1ca3, #45aaf8);
font-family: Nunito, serif;
font-size: 10px;
font-weight: bold;
text-align: center;
color: $news-banner-text-color;
text-decoration: none;
text-transform: uppercase;
}
}
h2, h5 {
margin: 15px 0 0 0;
}
h2 a, h5 a {
font-family: Montserrat, serif;
font-size: 30px;
font-weight: 600;
line-height: 1;
color: $news-banner-text-color;
text-decoration: none;
}
h5 a {
font-size: 16px;
line-height: 1.17;
}
.post_date {
@include post_date;
color: $news-banner-text-color;
}
}
}
}

127
resources/assets/sass/components/_menu.scss vendored
View File

@@ -1,4 +1,5 @@
@use "../abstracts/variables" as *;
@use "../abstracts/mixin" as *;
.menu_container {
height: 75px;
@@ -6,15 +7,19 @@
background-image: linear-gradient(to right, #0102b0, #4090e3);
.menu {
list-style-type: none;
padding: 0;
margin: 0;
@include reset-list;
overflow: hidden;
position: relative;
z-index: 0;
margin: 0px -1px;
li {
> li {
float: left;
margin: 0px -1px;
&.has_submenu {
position: relative;
}
ul {
display: none;
@@ -32,7 +37,7 @@
background: white;
}
&.selected a, &:hover a {
&.selected a, &:hover a, &.hover a {
color: white;
background: transparent;
position: relative;
@@ -52,8 +57,8 @@
&:after {
content: '';
display: block;
width: 10px;
height: 12px;
width: 12px;
height: 15px;
background-image: URL('/images/menu-corner-2.svg');
position: absolute;
bottom: 0;
@@ -66,7 +71,7 @@
width: 135px;
display: block;
background: white;
height: 25px;
height: 29px;
}
&:last-child {
@@ -88,4 +93,110 @@
}
.top_menu_container {
height: 50px;
ul {
float: right;
@include reset-list;
li {
float: left;
padding: 6px 19px;
margin: 8px;
border-right: 1px solid #fff;
&:last-child {
border: none;
}
a {
float: left;
font-family: Nunito, serif;
font-size: 14px;
font-weight: bold;
text-align: right;
color: #fff;
text-decoration: none;
text-transform: uppercase;
i {
font-size: 18px;
position: relative;
top: 2px;
margin-left: 5px;
}
}
.search_form {
float: left;
overflow: hidden;
height: 21px;
margin-right: 10px;
}
}
}
}
.menu-submenu {
position: absolute;
> a {
display: block;
height: 30px;
}
ul {
@include reset-list;
a {
display: block;
font-family: Nunito, serif;
font-size: 14px;
font-weight: bold;
color: #1a1a1a;
text-decoration: none;
padding: 15px 0;
border-bottom: 1px solid #f8f8f8;
}
}
> ul {
padding: 20px;
border-radius: 3px;
box-shadow: 0 0 15px 0 rgba(35, 31, 32, 0.1);
background-color: #fff;
margin-left: 20px;
width: max-content;
display: none;
li {
ul {
display: none;
li {
padding-left: 10px;
}
}
}
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);
}
}
}
}

0
resources/assets/sass/components/_news_post.scss vendored Normal file
View File

28
resources/assets/sass/components/_now-playing.scss vendored
View File

@@ -33,17 +33,25 @@
padding: 3px;
width: 100%;
li {
display: inline-block;
ul {
margin: 0;
a {
line-height: 120%;
font-size: 80%;
color: #ABABAB;
display: block;
padding: 4px;
margin-left: 5px;
margin-right: 5px;
li {
display: inline-block;
a {
line-height: 120%;
font-size: 80%;
color: #ABABAB;
display: block;
padding: 4px;
margin-left: 5px;
margin-right: 5px;
label {
cursor: pointer;
}
}
}
}
}

28
resources/assets/sass/components/_podcast_items.scss vendored Normal file
View File

@@ -0,0 +1,28 @@
@use "../abstracts/mixin" as *;
.podcast_items {
ul {
@include reset-list;
li {
margin-bottom: 25px;
h2 {
margin: 0;
a {
font-family: Montserrat, serif;
font-size: 14px;
font-weight: 600;
line-height: 1.43;
text-align: left;
color: #1a1a1a;
text-decoration: none;
}
}
.sub_title {
@include sub_title;
}
}
}
}

162
resources/assets/sass/components/_post.scss vendored Normal file
View File

@@ -0,0 +1,162 @@
@use "../abstracts/mixin" as *;
.post_container {
padding: 40px 135px;
background-color: #f9f9f9;
margin: 0;
> .col-8 {
width: CALC(66.66666667% - 50px);
margin-right: 50px;
}
.bread_crumb {
height: 38px;
@include reset-list;
border-bottom: 1px solid #efefef;
padding-bottom: 18px;
li {
float: left;
font-family: Nunito, serif;
font-size: 12px;
font-weight: 500;
line-height: 3.17;
text-align: left;
color: #666;
margin-right: 5px;
a {
color: #666;
text-decoration: none;
}
i {
font-size: 8px;
}
}
}
.post_tags {
@include reset-list;
height: 31px;
margin-top: 20px;
li {
float: left;
margin-right: 10px;
a {
display: block;
padding: 6px 15px 7px;
border-radius: 3px;
background-image: linear-gradient(to left, #0d1ca3, #45aaf8);
font-family: Nunito, serif;
font-size: 10px;
font-weight: bold;
text-align: center;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
}
}
h1 {
margin: 17px 0;
font-family: Montserrat, serif;
font-size: 40px;
font-weight: 600;
line-height: 1.15;
text-align: left;
color: #282828;
}
.post_body {
width: 100%;
font-family: Nunito, serif;
font-size: 15px;
line-height: 1.6;
color: #282828;
h3 {
font-size: 15px;
}
.sentence {
font-size: 12px;
font-style: italic;
line-height: 3.17;
text-align: right;
color: #585858;
display: block;
width: 100%;
span {
padding: 0 5px;
}
}
blockquote {
border-left: 3px solid #5ba8f4;
margin-left: 0;
padding-left: 20px;
font-family: Lato, serif;
font-size: 30px;
font-style: italic;
line-height: 1.27;
color: #5ba8f4;
.author {
font-family: Nunito, serif;
font-size: 12px;
font-style: normal;
line-height: 3.17;
color: #585858;
}
}
.post_details {
@include reset-list;
li {
float: left;
margin-right: 10px;
font-family: Nunito, serif;
font-size: 12px;
font-weight: 500;
line-height: 3.17;
color: #666;
a {
color: #666;
text-decoration: none;
}
i {
margin-right: 4px;
}
}
}
.post_image img, video, .mejs__video {
width: CALC(100% + 53px);
margin: 0 -23px 0 -30px;
}
.mejs__video, video {
width: CALC(100% + 53px) !important;
}
}
.info {
padding: 1em;
color: #3E3E3E;
line-height: 150%;
border-radius: 10px;
margin: 1em;
h2 {
text-overflow: ellipsis;
overflow: hidden;
margin-top: 3px;
clear: both;
}
a {
color: #ED1C24;
}
}
}

28
resources/assets/sass/components/_radio_box.scss vendored Normal file
View File

@@ -0,0 +1,28 @@
@use "../abstracts/mixin" as *;
.radio_box {
padding: 15px 23px 15px 15px;
width: CALC(100% - 38px);
h2 {
font-family: Montserrat, serif;
font-size: 20px;
font-weight: 600;
line-height: 1.35;
color: #1a1a1a;
}
.post_date {
@include post_date;
}
p {
font-family: Nunito, serif;
font-size: 14px;
font-weight: 500;
line-height: 1.57;
text-align: left;
color: #666;
}
}

3
resources/assets/sass/components/_sidebar.scss vendored Normal file
View File

@@ -0,0 +1,3 @@
.sidebar .box {
width: CALC(100% - 38px);
}