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

fix: move new styling into scss files

Browse Source
This commit is contained in:
Eric Bus
2024-11-25 20:47:18 +01:00
parent 22292e10ed
commit 52df85716b
10 changed files with 319 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

301
public/css/style.css vendored
View File

@@ -162,6 +162,16 @@ div.pp_default .pp_close:hover {
list-style: none;
}
.ad-prefix {
width: 100%;
font-family: Nunito, serif;
font-size: 12px;
font-weight: 500;
line-height: 3.17;
text-align: center;
color: #666;
}
.header {
height: 111px;
}
@@ -172,7 +182,7 @@ div.pp_default .pp_close:hover {
.header .logo img {
height: 95px;
}
.header .advertisement {
.header ins[data-revive-zoneid] {
float: right;
width: 728px;
height: 90px;
@@ -190,7 +200,7 @@ div.pp_default .pp_close:hover {
.header .logo {
float: none;
}
.header .advertisement {
.header ins[data-revive-zoneid] {
float: none;
}
}
@@ -778,6 +788,11 @@ div.pp_default .pp_close:hover {
color: #fff;
}
.article-iframe {
width: 100%;
aspect-ratio: 1;
}
.box_header {
border-bottom: 1px solid #efefef;
padding-right: 20px;
@@ -942,6 +957,13 @@ div.pp_default .pp_close:hover {
color: #282828;
}
ins[data-revive-zoneid="2"] {
width: 100%;
height: 275px;
margin: 11px auto 50px auto;
background-color: #efefef;
}
@media (max-width: 768px) {
.sidebar {
width: 100%;
@@ -1204,6 +1226,19 @@ div.pp_default .pp_close:hover {
font-size: 30px;
}
.box.featured .sentence, .post_container .post_body .sentence {
font-size: 12px;
font-style: italic;
line-height: 1.3;
text-align: right;
color: #585858;
display: block;
width: 100%;
}
.box.featured .sentence span, .post_container .post_body .sentence span {
padding: 0 5px;
}
.post_container {
max-width: 1170px;
margin: 0 auto;
@@ -1231,20 +1266,6 @@ div.pp_default .pp_close:hover {
.post_container .post_body h3 {
font-size: 15px;
}
.post_container .post_body .sentence,
.box.featured .sentence {
font-size: 12px;
font-style: italic;
line-height: 1.3;
text-align: right;
color: #585858;
display: block;
width: 100%;
}
.post_container .post_body .sentence span,
.box.featured .sentence span {
padding: 0 5px;
}
.post_container .post_body blockquote {
border-left: 3px solid #5ba8f4;
margin-left: 0;
@@ -1309,19 +1330,7 @@ div.pp_default .pp_close:hover {
color: #ED1C24;
}
.post_tags {
margin: 0;
padding: 0;
list-style: none;
height: 31px;
margin: 20px 0;
}
.post_tags li {
float: left;
margin-right: 10px;
}
.post_tags li a,
#schedule .onair {
#schedule .onair, .post_tags li a {
display: block;
width: 4rem;
padding: 6px 15px 7px;
@@ -1336,18 +1345,36 @@ div.pp_default .pp_close:hover {
text-transform: uppercase;
}
#schedule a {
text-decoration: none;
.post_tags {
margin: 0;
padding: 0;
list-style: none;
height: 31px;
margin: 20px 0;
}
.post_tags li {
float: left;
margin-right: 10px;
}
@keyframes tilt-shaking {
0% { transform: rotate(0deg); }
25% { transform: rotate(5deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(5deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0deg);
}
}
.onair {
animation: tilt-shaking 1s linear infinite;
#schedule a {
text-decoration: none;
}
#schedule .program-title {
font-family: Montserrat, serif;
@@ -1387,6 +1414,9 @@ div.pp_default .pp_close:hover {
#schedule .no-results span, #schedule .loading span {
margin-right: 10px;
}
#schedule .onair {
animation: tilt-shaking 1s linear infinite;
}
.page_container {
max-width: 1170px;
@@ -1476,6 +1506,90 @@ div.pp_default .pp_close:hover {
margin: 10px 20px 0 0;
}
.podcast-player .content {
border: solid 1px #333;
border-radius: 5px;
padding: 0.4rem;
}
.audioplayer .waveform {
cursor: pointer;
position: relative;
}
.audioplayer .hover {
position: absolute;
left: 0;
top: 0;
z-index: 10;
pointer-events: none;
height: 100%;
width: 0;
mix-blend-mode: overlay;
background: rgba(255, 255, 255, 0.5);
opacity: 0;
transition: opacity 0.2s ease;
}
.audioplayer .waveform:hover .hover {
opacity: 1;
}
.audioplayer .time,
.audioplayer .duration {
position: absolute;
z-index: 11;
top: 50%;
margin-top: -1px;
transform: translateY(-50%);
font-size: 11px;
background: rgba(0, 0, 0, 0.75);
padding: 2px;
color: #ddd;
}
.audioplayer .time {
left: 0;
}
.audioplayer .duration {
right: 0;
}
.audioplayer .audio-controls {
width: 100%;
justify-content: center;
display: flex;
}
.audioplayer .audio-controls .btn {
padding-left: 0;
padding-right: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-transform: none;
}
@media (max-width: 720px) {
.audioplayer .audio-controls .btn label {
display: none;
}
}
.audioplayer .audio-controls .btn.btn-play {
flex: 50% 1 0;
}
.audioplayer .volume-controls {
display: flex;
}
.audioplayer .volume-controls .volume-slider {
flex: 100% 1 1;
}
.audioplayer .audio-controls .btn,
.audioplayer .volume-controls .btn-toggle-mute {
flex: 100px 1 1;
padding: 10px 0 10px 0;
background: #5ba8f4;
border-radius: 5px;
border-color: solid 1px #0f259d;
color: white;
font-family: Nunito, serif;
text-align: center;
text-decoration: none;
}
.footer_container {
font-family: Montserrat, serif;
font-size: 14px;
@@ -1663,115 +1777,4 @@ a, a:hover, a:active {
}
}
.podcast-player .content {
border: solid 1px #333;
border-radius: 5px;
padding: 0.4rem;
}
.article-iframe {
width: 100%;
aspect-ratio: 1;
}
/*# sourceMappingURL=style.css.map */
.audioplayer .waveform {
cursor: pointer;
position: relative;
}
.audioplayer .hover {
position: absolute;
left: 0;
top: 0;
z-index: 10;
pointer-events: none;
height: 100%;
width: 0;
mix-blend-mode: overlay;
background: rgba(255, 255, 255, 0.5);
opacity: 0;
transition: opacity 0.2s ease;
}
.audioplayer .waveform:hover .hover {
opacity: 1;
}
.audioplayer .time,
.audioplayer .duration {
position: absolute;
z-index: 11;
top: 50%;
margin-top: -1px;
transform: translateY(-50%);
font-size: 11px;
background: rgba(0, 0, 0, 0.75);
padding: 2px;
color: #ddd;
}
.audioplayer .time {
left: 0;
}
.audioplayer .duration {
right: 0;
}
.audioplayer .audio-controls {
width: 100%;
justify-content: center;
display: flex;
}
.audioplayer .audio-controls .btn {
padding-left: 0;
padding-right: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-transform: none;
}
@media(max-width:720px) {
.audioplayer .audio-controls .btn label {
display: none;
}
}
.audioplayer .audio-controls .btn.btn-play {
flex: 50% 1 0;
}
.audioplayer .volume-controls {
display: flex;
}
.audioplayer .volume-controls .volume-slider {
flex: 100% 1 1;
}
.audioplayer .audio-controls .btn,
.audioplayer .volume-controls .btn-toggle-mute {
flex: 100px 1 1;
padding: 10px 0px 10px 0px;
background: #5ba8f4;
border-radius: 5px;
border-color: solid 1px #0f259d;
color: white;
font-family: Nunito, serif;
text-align: center;
text-decoration: none;
}
.ad-prefix {
width: 100%;
font-family: Nunito, serif;
font-size: 12px;
font-weight: 500;
line-height: 3.17;
text-align: center;
color: #666;
}

2
public/css/style.css.map
View File

File diff suppressed because one or more lines are too long

1
resources/assets/sass/base/_base.scss vendored
View File

@@ -5,6 +5,7 @@
@use "../components/pretty_photo";
@use "../components/cookie";
@use "../components/list";
@use "../components/banners";
@use "../layout";

9
resources/assets/sass/components/_banners.scss vendored Normal file
View File

@@ -0,0 +1,9 @@
.ad-prefix {
width: 100%;
font-family: Nunito, serif;
font-size: 12px;
font-weight: 500;
line-height: 3.17;
text-align: center;
color: #666;
}

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

@@ -61,7 +61,8 @@
.post_details {
@include reset-list;
display: flex;
gap: 3px;
.category a {
padding: 6px 11px 7px;
border-radius: 3px;
@@ -105,3 +106,8 @@
}
}
}
.article-iframe {
width: 100%;
aspect-ratio: 1;
}

91
resources/assets/sass/components/_media.scss vendored Normal file
View File

@@ -0,0 +1,91 @@
.audioplayer {
.waveform {
cursor: pointer;
position: relative;
}
.hover {
position: absolute;
left: 0;
top: 0;
z-index: 10;
pointer-events: none;
height: 100%;
width: 0;
mix-blend-mode: overlay;
background: rgba(255, 255, 255, 0.5);
opacity: 0;
transition: opacity 0.2s ease;
}
.waveform:hover .hover {
opacity: 1;
}
.time,
.duration {
position: absolute;
z-index: 11;
top: 50%;
margin-top: -1px;
transform: translateY(-50%);
font-size: 11px;
background: rgba(0, 0, 0, 0.75);
padding: 2px;
color: #ddd;
}
.time {
left: 0;
}
.duration {
right: 0;
}
.audio-controls {
width: 100%;
justify-content: center;
display: flex;
}
.audio-controls .btn {
padding-left: 0;
padding-right: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-transform: none;
}
@media(max-width: 720px) {
.audio-controls .btn label {
display: none;
}
}
.audio-controls .btn.btn-play {
flex: 50% 1 0;
}
.volume-controls {
display: flex;
}
.volume-controls .volume-slider {
flex: 100% 1 1;
}
.audio-controls .btn,
.volume-controls .btn-toggle-mute {
flex: 100px 1 1;
padding: 10px 0 10px 0;
background: #5ba8f4;
border-radius: 5px;
border-color: solid 1px #0f259d;
color: white;
font-family: Nunito, serif;
text-align: center;
text-decoration: none;
}
}

6
resources/assets/sass/components/_podcast_item.scss vendored
View File

@@ -12,3 +12,9 @@
float: left;
margin: 10px 20px 0 0;
}
.podcast-player .content {
border: solid 1px #333;
border-radius: 5px;
padding: 0.4rem;
}

56
resources/assets/sass/components/_post.scss vendored
View File

@@ -1,6 +1,20 @@
@use "../abstracts/mixin" as *;
@use "../abstracts/variables" as *;
%sentence {
font-size: 12px;
font-style: italic;
line-height: 1.3;
text-align: right;
color: $text-description-color;
display: block;
width: 100%;
span {
padding: 0 5px;
}
}
.post_container {
@include container;
@media (min-width: 768px) {
@@ -30,17 +44,11 @@
}
.sentence {
font-size: 12px;
font-style: italic;
line-height: 1.3;
text-align: right;
color: $text-description-color;
display: block;
width: 100%;
span {
padding: 0 5px;
@extend %sentence
}
@at-root .box.featured .sentence {
@extend %sentence
}
blockquote {
@@ -106,17 +114,10 @@
}
}
}
.post_tags {
@include reset-list;
height: 31px;
margin: 20px 0;
li {
float: left;
margin-right: 10px;
a {
%post-tags-link {
display: block;
width: 4rem;
padding: 6px 15px 7px;
border-radius: 3px;
background-image: linear-gradient(to left, #0d1ca3, #45aaf8);
@@ -127,6 +128,23 @@
color: $text-inverted-color;
text-decoration: none;
text-transform: uppercase;
}
.post_tags {
@include reset-list;
height: 31px;
margin: 20px 0;
li {
float: left;
margin-right: 10px;
a {
@extend %post-tags-link
}
@at-root #schedule .onair {
@extend %post-tags-link
}
}
}

12
resources/assets/sass/components/_schedule.scss vendored
View File

@@ -1,6 +1,14 @@
@use "../abstracts/mixin" as *;
@use "../abstracts/variables" as *;
@keyframes tilt-shaking {
0% { transform: rotate(0deg); }
25% { transform: rotate(5deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}
#schedule {
a {
text-decoration: none;
@@ -32,4 +40,8 @@
margin-right: 10px;
}
}
.onair {
animation: tilt-shaking 1s linear infinite;
}
}

1
resources/assets/sass/layout/_podcast.scss vendored
View File

@@ -1 +1,2 @@
@use "../components/podcast_item";
@use "../components/media";