n.kolosnaj/Globaly-CSS-Practice
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

commit jun 6

Browse Source
This commit is contained in:
nkolosnjaj
2024-06-07 16:54:29 +02:00
parent 11271513ea
commit 11af19a797
9 changed files with 888 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
style/news/_news-first.scss
View File

@@ -1,15 +1,16 @@
.news-first-part {
.news-card {
border: 1px solid #ebebeb;
margin-top: 16px;
margin: 16px 15px 0 15px;
position: relative;
.news-card-description{
.news-card-description {
padding: 15px;
.post-tags{
.post-tags {
margin: 8px 0 12px 0;
.post-tags-a{
.post-tags-a {
text-decoration: none;
color: #15c1c6;
margin-right: 12px;
@@ -20,13 +21,13 @@
line-height: 1.4375;
}
.post-tags-a:hover{
color:#31353d;
.post-tags-a:hover {
color: #31353d;
transition: 0.3s;
}
}
.news-card-text{
.news-card-text {
font-style: normal;
font-weight: 500;
font-size: 24px;
@@ -35,15 +36,27 @@
letter-spacing: 0px;
text-align: inherit;
color: #31353d;
cursor:pointer;
cursor: pointer;
}
.news-card-text:hover{
.news-card-p {
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 1.4375;
font-family: MerriweatherSans, sans-serif;
letter-spacing: 0px;
text-align: left;
color: #777777;
}
.news-card-text:hover {
color: #15c1c6;
transition: 0.3s;
}
.news-card-date{
.date-a{
.news-card-date {
.date-a {
text-decoration: none;
color: #15c1c6;
margin-right: 15px;
@@ -51,35 +64,53 @@
font-style: italic;
font-weight: 400;
}
.date-a:hover{
.date-a:hover {
color: #31353d;
transition:0.3s;
transition: 0.3s;
}
.by-admin{
.by-admin {
text-decoration: none;
color: #777777;
font-family: Merriweather, serif;
font-style: italic;
font-weight: 400;
}
.by-admin:hover{
color:#15c1c6;
.by-admin:hover {
color: #15c1c6;
transition: 0.3s;
}
}
}
.news-img-container {
.link-on-image{
#star{
text-align: center;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
left: 15px;
top: 15px;
background-color: #15c1c6;
color: white;
border-radius: 50%;
font-size: 17px;
height: 58px;
width: 58px;
}
.link-on-image {
position: absolute;
bottom: 55%;
left: 10%;
text-align: center;
padding: 10px 20px 10px 15px;
color: #ffffff;
background-color: rgba(51,51,51,0.78);
.link-a{
background-color: rgba(51, 51, 51, 0.78);
.link-a {
text-decoration: none;
color: #ffffff;
font-family: Merriweather, serif;
@@ -87,16 +118,18 @@
font-weight: 400;
}
}
.link-on-image:hover{
background-color: rgba(21,193,198,0.78);
.link-on-image:hover {
background-color: rgba(21, 193, 198, 0.78);
transition: 0.3s;
}
.news-img {
max-width: 100%;
height: auto;
}
.img-text-container{
.img-text-container {
padding: 15px 0 0 15px;
word-wrap: break-word;
word-break: break-word;
@@ -116,18 +149,96 @@
padding: 4px 12px;
margin-bottom: 6px;
display: inline-block;
}
.news-img-text:hover{
.news-img-text:hover {
background-color: #31353d;
transition: 0.3s;
}
}
}
}
@media only screen and (min-width:768px) {
.news-first-part {
margin: 0 60px !important;
.news-card {
.news-img-container {
.link-on-image {
position: absolute;
bottom: 63%;
left: 25%;
text-align: center;
}
.img-text-container {
position: absolute;
top: 30px;
right: 30px;
overflow: hidden;
width: auto;
max-width: 80%;
text-align: right;
z-index: 1;
left: auto;
}
.news-img {
width: 688px;
}
}
}
}
}
@media only screen and (min-width:992px) {
.news-first-part {
margin-top: 34px !important;
.news-card {
margin-bottom: 25px !important;
.news-card-description{
padding: 45px 50px 0 59px;
.news-card-text{
font-size: 29px;
}
.news-card-date {
margin-top: 50px !important;
}
.post-tags{
margin-bottom: 40px;
}
}
.news-img-container {
#star{
left: 30px;
top: 30px;
}
.img-text-container {
position: absolute;
top: 30px;
right: 55%;
}
.news-img {
min-width: 629px;
height: 497px;
}
.link-on-image {
position: absolute;
bottom: 47%;
left: 12%;
text-align: center;
}
}
}
}
}