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

214
news.html
View File

@@ -164,12 +164,15 @@
<div class="breadcrumb-item-about" aria-current="page">News</div>
</div>
<section>
<section class="d-flex flex-column flex-lg-row">
<div class="left-side">
<!-- First part -->
<div class="news-first-part mx-3">
<div class="news-card">
<div class="news-first-part clearfix d-flex flex-column justify-content-center">
<div class="news-card clearfix d-flex flex-column flex-lg-row ">
<div class="news-img-container">
<img class="news-img" src="assets/images/image42-640x506.jpg" alt="">
<i id="star" class="fa-regular fa-star"></i>
<div class="img-text-container">
<a class="news-img-text" href="#">Business plan consulting</a>
</div>
@@ -182,35 +185,39 @@
</div>
<h4 class="news-card-text">
Is it viable now for IT companies to file an IPO?</h4>
<p class="news-card-p d-none d-md-flex d-lg-flex">It’s no dotcom-bubble burst today as it was at the verge of the centuries. But still, with so many different trends receiving investment funding, is it wise for a company to file an IPO at this time in the stock’s history.</p>
</div>
<div class="news-card-date">
<input type="submit" class="view-more d-none d-md-flex d-lg-flex" value="read-more">
<div class="news-card-date mt-md-3">
<a class="date-a" href="">16.06.2016</a>
<a class="by-admin" href="">by admin</a>
</div>
</div>
</div>
<div class="news-card">
<div class="news-card d-flex flex-column flex-lg-row">
<div class="news-img-container">
<img class="news-img" src="assets/images/image41-640x506.jpg" alt="">
<div class="img-text-container">
<a class="news-img-text" href="#">Conflict managment</a>
<a class="news-img-text" href="#">Exit planning</a>
<a class="news-img-text" href="#">Human resource planning</a>
<a class="news-img-text" href="#">Market research</a>
<a class="news-img-text d-md-none" href="#">Human resource planning</a>
<a class="news-img-text d-md-none" href="#">Market research</a>
</div>
</div>
<div class="news-card-description">
<div class="news-card-description-header">
<h4 class="news-card-text">
How long before the exit you must be planning it?</h4>
<p class="news-card-p d-none d-md-flex d-lg-flex">The ideal timing for planning an exit strategy is at least 5-10 years beforehand. But unfortunately, that kind of diligent approach is not always applicable. So how does a CEO or an owner can perform a quicker exit?</p>
</div>
<div class="news-card-date">
<input type="submit" class="view-more d-none d-md-flex d-lg-flex" value="read-more">
<div class="news-card-date mt-md-3">
<a class="date-a" href="">16.07.2016</a>
<a class="by-admin" href="">by admin</a>
</div>
</div>
</div>
<div class="news-card">
<div class="news-card d-flex flex-column flex-lg-row">
<div class="news-img-container">
<img class="news-img" src="assets/images/image43-640x506.jpg" alt="">
<div class="img-text-container">
@@ -222,14 +229,16 @@
<div class="news-card-description-header">
<h4 class="news-card-text">
Bringing a new CFO at the time of crisis?</h4>
<p class="news-card-p d-none d-md-flex d-lg-flex">There are many different approaches for saving a company during a period of a financial meltdown. Hiring a new Chief Financial Officer may seem like an obvious managerial solution from that list. But actually, is it the best decision?</p>
</div>
<div class="news-card-date">
<input type="submit" class="view-more d-none d-md-flex d-lg-flex" value="read-more">
<div class="news-card-date mt-md-3">
<a class="date-a" href="">17.05.2016</a>
<a class="by-admin" href="">by admin</a>
</div>
</div>
</div>
<div class="news-card">
<div class="news-card d-flex flex-column flex-lg-row">
<div class="news-img-container">
<img class="news-img" src="assets/images/image5-640x506.jpg" alt="">
<div class="img-text-container">
@@ -240,14 +249,16 @@
<div class="news-card-description-header">
<h4 class="news-card-text">
Image Format</h4>
<p class="news-card-p d-none d-md-flex d-lg-flex">When you need your company to have a new website or if you venture on updating your old webpage with a new look and functionality, the choices are versatile… Assuming that you will go the easy way and choose a theme for your WordPress website,…</p>
</div>
<div class="news-card-date">
<input type="submit" class="view-more d-none d-md-flex d-lg-flex" value="read-more">
<div class="news-card-date mt-md-3">
<a class="date-a" href="">17.05.2016</a>
<a class="by-admin" href="">by admin</a>
</div>
</div>
</div>
<div class="news-card">
<div class="news-card d-flex flex-column flex-lg-row">
<div class="news-img-container">
<img class="news-img" src="assets/images/image6-640x506.jpg" alt="">
<div class="img-text-container">
@@ -258,14 +269,16 @@
<div class="news-card-description-header">
<h4 class="news-card-text">
IT: using visual "hotzones" for market research among customers</h4>
<p class="news-card-p d-none d-md-flex d-lg-flex">There are many practical and experimental ways nowadays to get the customer’s mind analyzed. This “hotzones” trend lets us all see a much wider scope on how people react and interact with the web and hardware these days. So let’s try to analyze, which marketing…</p>
</div>
<div class="news-card-date">
<input type="submit" class="view-more d-none d-md-flex d-lg-flex" value="read-more">
<div class="news-card-date mt-md-3">
<a class="date-a" href="">17.05.2016</a>
<a class="by-admin" href="">by admin</a>
</div>
</div>
</div>
<div class="news-card">
<div class="news-card d-flex flex-column flex-lg-row">
<div class="news-img-container">
<img class="news-img" src="assets/images/image2-640x506.jpg" alt="">
<div class="img-text-container">
@@ -281,29 +294,33 @@
</div>
<h4 class="news-card-text">
Gallery Format</h4>
<p class="news-card-p d-none d-md-flex d-lg-flex">When you need your company to have a new website or if you venture on updating your old webpage with a new look and functionality, the choices are versatile… Assuming that you will go the easy way and choose a theme for your WordPress website,…</p>
</div>
<div class="news-card-date">
<input type="submit" class="view-more d-none d-md-flex d-lg-flex" value="read-more">
<div class="news-card-date mt-md-3">
<a class="date-a" href="">17.05.2016</a>
<a class="by-admin" href="">by admin</a>
</div>
</div>
</div>
<div class="news-card">
<div class="news-card d-flex flex-column flex-lg-row">
<div class="news-img-container">
<img class="news-img" src="assets/images/image7-640x506.jpg" alt="">
<div class="img-text-container">
<a class="news-img-text" href="#">Business plan consulting</a>
</div>
<div class="link-on-image">
<a class="link-a" href="#">https://www.templatemonster.com</a>
<a class="link-a" href="#">https://www.templatemonster.com/</a>
</div>
</div>
<div class="news-card-description">
<div class="news-card-description-header">
<h4 class="news-card-text">
Link Format</h4>
<p class="news-card-p d-none d-md-flex d-lg-flex">When you need your company to have a new website or if you venture on updating your old webpage with a new look and functionality, the choices are versatile… Assuming that you will go the easy way and choose a theme for your WordPress website,…</p>
</div>
<div class="news-card-date">
<input type="submit" class="view-more d-none d-md-flex d-lg-flex" value="read-more">
<div class="news-card-date mt-md-3">
<a class="date-a" href="">17.05.2016</a>
<a class="by-admin" href="">by admin</a>
</div>
@@ -323,8 +340,12 @@
</div>
</div>
</div>
<div class="side-bar d-flex flex-column ">
<!-- search -->
<div class="search-news mx-3">
<div class="search-news ">
<div class="search-news-form d-flex">
<input class="search-news-input" type="text" placeholder="Search...">
<div class="search-news-icon"><i class="fa-solid fa-magnifying-glass"></i></div>
@@ -333,15 +354,15 @@
<!-- Recent posts -->
<div class="recent-posts mt-3 mx-3 pt-5">
<div class="recent-posts mt-3 pt-5">
<h5 class="recent-title">Recent Posts</h5>
<div class="custom-post-container d-flex ">
<div class="custom-post ">
<img src="assets/images/image41-130x136.jpg" alt="">
<h4 class="recent-subtitle" >How long before the exit you must be planning it?</h4>
<h4 class="recent-subtitle" >How long before the <br> exit you must be<br> planning it?</h4>
<a class="date-a" href="#"> 26.06.2016</a>
</div>
<div class="custom-post" >
<div class="custom-post" style="margin-left: 35px;" >
<img src="assets/images/fakeimg.png" alt="">
<h4 class="recent-subtitle" >Gallery Format</h4>
<a class="date-a" href="#"> 17.05.2016</a>
@@ -351,12 +372,155 @@
<!-- Quotes -->
<div class="recent-posts mt-3 mx-3 pt-5">
<div class="recent-posts mt-3 pt-5">
<h5 class="recent-title">Quotes on Science</h5>
<blockquote></blockquote>
<blockquote>
<div class="quotes-text">An investment in knowledge pays the best interest. </div>
</blockquote>
</div>
<!-- Categories -->
<div class="categories-news mt-4 pt-5">
<h5 class="categories-title ">Categories</h5>
<ul class="categories-ul">
<li class="categories-li"><a href="#">Business plan consulting</a></li>
<li class="categories-li" ><a href="#">Conflict menagment</a></li>
<li class="categories-li"><a href="#">Exit planning</a></li>
<li class="categories-li"><a href="#">Governance</a></li>
<li class="categories-li"><a href="#">Human resources planning</a></li>
<li class="categories-li"><a href="#">Market research</a></li>
</ul>
</div>
<!-- Recent coments -->
<div class="categories-news mt-4 pt-5">
<h5 class="categories-title">Recent coments</h5>
<ul class="recent-com-ul">
<li class="recent-com-li">
<span class="admin-on">admin on</span>
<a href="#">Image Format</a>
</li>
<li class="recent-com-li">
<span class="admin-on">admin on</span>
<a href="#">Bringing a new CFO at the time of crisis?</a>
</li>
<li class="recent-com-li">
<span class="admin-on">admin on</span>
<a href="#">Image Format</a>
</li>
<li class="recent-com-li">
<span class="admin-on">admin on</span>
<a href="#">Is it viable now for IT companies to file an IPO?</a>
</li>
<li class="recent-com-li">
<span class="admin-on">admin on</span>
<a href="#">Is it viable now for IT companies to file an IPO?</a>
</li>
</ul>
</div>
<!-- Tags -->
<div class="categories-news mt-4 pt-5">
<h5 class="categories-title">Tags</h5>
<div class="tag-container">
<a href="#">Advice</a>
<a href="#">Finances</a>
<a href="#">Insight</a>
<a href="#">Investments</a>
<a href="#">Money</a>
<a href="#">Stock</a>
</div>
</div>
<!-- Archives -->
<div class="categories-news mt-4 pt-5">
<h5 class="categories-title">Archives</h5>
<div class="archives-container">
<select name="" id="archives-select">
<option value="">Select Month</option>
<option value="">April 2016</option>
<option value="">May 2016</option>
<option value="">June 2016</option>
<option value="">July 2016</option>
</select>
</div>
</div>
<div class="categories-news mt-4 pt-5 mb-3">
<h5 class="categories-title">Calendar</h5>
<div class="calendar calendar-table d-flex justify-content-center flex-column ">
<div class="caption">May 2024</div>
<table class="">
<thead>
<tr>
<th>M</th>
<th>T</th>
<th>W</th>
<th>T</th>
<th>F</th>
<th>S</th>
<th>S</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2" class="pad">&nbsp;</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td class="last-row">27</td>
<td class="last-row">28</td>
<td class="last-row">29</td>
<td class="last-row">30</td>
<td class="last-row">31</td>
</tr>
</tbody>
<tfoot>
<tr>
<td id="month-name-table">« Jul</td>
<td class="pad">&nbsp;</td>
<td colspan="3" class="pad">&nbsp;</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>

198
style/news/_categories-news.scss Normal file
View File

@@ -0,0 +1,198 @@
.categories-news{
border-top: 1px solid #e0e0e8;
margin: auto 15px;
.categories-title{
font-size: 18px;
line-height: 1.2;
font-family: Merriweather, serif;
color: #15c1c6;
font-weight: 700;
margin-bottom: 18px;
}
.categories-ul{
font-family: Merriweather, serif;
font-style: italic;
font-weight: 400;
list-style: none;
padding: 0;
font-size: 16px;
line-height: 1.4375;
letter-spacing: 0px;
text-align: left;
}
.categories-li{
margin-top: 12.8px;
a{
text-decoration: none;
color: #15c1c6;
}
a:hover{
color: #333333;
transition: 0.3s;
}
}
// Recent com
.recent-com-ul{
list-style: none;
padding: 0;
.recent-com-li{
display: flex;
flex-direction: column;
margin-top: 35.2px;
.admin-on{
color: #777777;
font-family: Merriweather, serif;
font-style: italic;
font-weight: 400;
text-transform: lowercase;
font-size: 16px;
line-height: 1.4375;
letter-spacing: 0px;
}
a{
text-decoration: none;
color: #333333;
font-size: 1.125rem;
line-height: 1.333;
font-style: normal;
font-weight: 500;
font-family: Merriweather, serif;
}
a:hover{
color: #15c1c6;
transition: 0.3s;
}
}
}
// Tags
.tag-container{
display: block;
a{
margin:0 18px 12px 0;
text-decoration: none;
font-size: 16px;
line-height: 1.4375;
font-family: Merriweather, serif;
font-style: italic;
font-weight: 400;
letter-spacing: 0px;
text-align: left;
color: #777777;
}
a:hover{
color: #15c1c6;
transition: 0.3s;
}
}
//Archives
.archives-container{
#archives-select{
background-color: #f6f6f6;
font-family: Merriweather, serif;
font-style: italic;
font-weight: 400;
border: 0px;
color: #777777;
width: 100%;
padding: 17px 56px 16px 20px;
cursor: pointer;
}
#archives-select:hover{
background-color: rgb(237, 237, 237);
transition: 0.3s;
}
}
// Calendar
.calendar{
text-align: center;
border-left: 1px solid #e0e0e8;
border-right: 1px solid #e0e0e8;
border-bottom: 1px solid #e0e0e8;
padding-left: 19px;
padding-right: 19px;
.caption{
text-align: center;
color: #ffffff;
background-color: #15c1c6;
margin-bottom: .9em;
margin-left: -20px;
margin-right: -20px;
padding: .7em .5em;
text-transform: uppercase;
letter-spacing: .05em;
font-size: 1rem;
font-style: normal;
font-weight: 700;
font-family: Merriweather, serif;
}
thead{
text-align: center;
th{
color: #233457;
font-size: .75rem;
width: 14.22%;
padding: 7px 2px;
text-align: center;
font-weight: 500;
font-family: Merriweather, serif;
}
}
tfoot{
border-top: 1px solid #e0e0e8;
#month-name-table{
font-size: .8125rem;
text-transform: uppercase;
font-family: Merriweather, serif;
cursor: pointer;
font-weight: 700;
color: #777777;
padding: 10px 0 15px 0;
}
#month-name-table:hover {
transition: 0.3s;
color: black;
}
}
tr{
padding-left: 19px;
padding-right: 19px;
}
.last-row{
padding-bottom: 20px;
}
td{
font-size: .80rem;
padding: 7px 2px;
width: 14.22%;
font-family: MerriweatherSans, sans-serif;
}
}
}
@media only screen and (min-width:768px) {
.categories-news{
margin-right: 60px;
margin-left: 60px;
}
}

23
style/news/_custom-post.scss
View File

@@ -1,5 +1,7 @@
.recent-posts{
border-top: 1px solid #e0e0e8;
margin-right: 15px;
margin-left: 15px;
.date-a{
text-decoration: none;
color: #15c1c6;
@@ -31,27 +33,38 @@
letter-spacing: 0px;
}
blockquote{
blockquote::before{
content: '\201c';
font-family: serif;
font-size: 4em;
font-family: 'Times New Roman', serif;
font-size: 6em;
line-height: 1;
margin-left: -12px;
font-style: italic;
font-weight: 700;
quotes: none;
color: #15c1c6;
}
blockquote{
padding: 0 39px 0 44px;
}
.quotes-text{
font-style: italic;
font-weight: 700;
font-size: 22px;
font-size: 25px;
line-height: 1.33333;
font-family: MerriweatherSans, sans-serif;
letter-spacing: 0;
color: #333333;
text-align: center;
padding: 0 60px;
}
}
@media only screen and (min-width:768px) {
.recent-posts{
margin-right: 60px;
margin-left: 60px;
}
}

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

@@ -1,7 +1,7 @@
.news-first-part {
.news-card {
border: 1px solid #ebebeb;
margin-top: 16px;
margin: 16px 15px 0 15px;
position: relative;
.news-card-description {
@@ -9,6 +9,7 @@
.post-tags {
margin: 8px 0 12px 0;
.post-tags-a {
text-decoration: none;
color: #15c1c6;
@@ -38,10 +39,22 @@
cursor: pointer;
}
.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 {
text-decoration: none;
@@ -51,10 +64,12 @@
font-style: italic;
font-weight: 400;
}
.date-a:hover {
color: #31353d;
transition: 0.3s;
}
.by-admin {
text-decoration: none;
color: #777777;
@@ -62,6 +77,7 @@
font-style: italic;
font-weight: 400;
}
.by-admin:hover {
color: #15c1c6;
transition: 0.3s;
@@ -70,6 +86,21 @@
}
.news-img-container {
#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%;
@@ -87,10 +118,12 @@
font-weight: 400;
}
}
.link-on-image:hover {
background-color: rgba(21, 193, 198, 0.78);
transition: 0.3s;
}
.news-img {
max-width: 100%;
height: auto;
@@ -116,18 +149,96 @@
padding: 4px 12px;
margin-bottom: 6px;
display: inline-block;
}
.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;
}
}
}
}
}

13
style/news/_page-nav.scss
View File

@@ -44,3 +44,16 @@
}
}
}
@media only screen and (min-width:768px) {
.page-navigation{
margin-left: 60px !important;
margin-right: 60px !important;
padding: 52px 0 45px 0;
.next-icon{
margin-left: 100px !important;
}
}
}

21
style/news/_search-news.scss
View File

@@ -1,6 +1,7 @@
.search-news{
padding-top: 48px;
margin-top: 24px;
margin: 24px 15px 0 15px;
border-top: 1px solid #e0e0e8;
.search-news-form{
.search-news-input{
@@ -27,7 +28,27 @@
border-radius: 29px;
font-size: large;
height: 57px;
cursor:pointer;
}
.search-news-icon:hover{
background-color: #333333;
transition: 0.3s;
}
}
}
@media only screen and (min-width:768px) {
.search-news{
margin-top: 48px;
margin-left: 60px ;
margin-right: 60px;
.search-news-input{
width: 90% !important;
}
}
}

310
style/style.css
View File

@@ -1713,7 +1713,7 @@ footer .footer-copyright a:hover {
}
.news-first-part .news-card {
border: 1px solid #ebebeb;
margin-top: 16px;
margin: 16px 15px 0 15px;
position: relative;
}
.news-first-part .news-card .news-card-description {
@@ -1747,6 +1747,16 @@ footer .footer-copyright a:hover {
color: #31353d;
cursor: pointer;
}
.news-first-part .news-card .news-card-description .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-first-part .news-card .news-card-description .news-card-text:hover {
color: #15c1c6;
transition: 0.3s;
@@ -1774,6 +1784,21 @@ footer .footer-copyright a:hover {
color: #15c1c6;
transition: 0.3s;
}
.news-first-part .news-card .news-img-container #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;
}
.news-first-part .news-card .news-img-container .link-on-image {
position: absolute;
bottom: 55%;
@@ -1823,6 +1848,70 @@ footer .footer-copyright a:hover {
transition: 0.3s;
}
@media only screen and (min-width: 768px) {
.news-first-part {
margin: 0 60px !important;
}
.news-first-part .news-card .news-img-container .link-on-image {
position: absolute;
bottom: 63%;
left: 25%;
text-align: center;
}
.news-first-part .news-card .news-img-container .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-first-part .news-card .news-img-container .news-img {
width: 688px;
}
}
@media only screen and (min-width: 992px) {
.news-first-part {
margin-top: 34px !important;
}
.news-first-part .news-card {
margin-bottom: 25px !important;
}
.news-first-part .news-card .news-card-description {
padding: 45px 50px 0 59px;
}
.news-first-part .news-card .news-card-description .news-card-text {
font-size: 29px;
}
.news-first-part .news-card .news-card-description .news-card-date {
margin-top: 50px !important;
}
.news-first-part .news-card .news-card-description .post-tags {
margin-bottom: 40px;
}
.news-first-part .news-card .news-img-container #star {
left: 30px;
top: 30px;
}
.news-first-part .news-card .news-img-container .img-text-container {
position: absolute;
top: 30px;
right: 55%;
}
.news-first-part .news-card .news-img-container .news-img {
min-width: 629px;
height: 497px;
}
.news-first-part .news-card .news-img-container .link-on-image {
position: absolute;
bottom: 47%;
left: 12%;
text-align: center;
}
}
.page-navigation {
padding: 30px 0 23px;
margin: 57.6px 0;
@@ -1864,9 +1953,20 @@ footer .footer-copyright a:hover {
padding: 16px 22px;
}
@media only screen and (min-width: 768px) {
.page-navigation {
margin-left: 60px !important;
margin-right: 60px !important;
padding: 52px 0 45px 0;
}
.page-navigation .next-icon {
margin-left: 100px !important;
}
}
.search-news {
padding-top: 48px;
margin-top: 24px;
margin: 24px 15px 0 15px;
border-top: 1px solid #e0e0e8;
}
.search-news .search-news-form .search-news-input {
@@ -1896,10 +1996,27 @@ footer .footer-copyright a:hover {
border-radius: 29px;
font-size: large;
height: 57px;
cursor: pointer;
}
.search-news .search-news-form .search-news-icon:hover {
background-color: #333333;
transition: 0.3s;
}
@media only screen and (min-width: 768px) {
.search-news {
margin-top: 48px;
margin-left: 60px;
margin-right: 60px;
}
.search-news .search-news-input {
width: 90% !important;
}
}
.recent-posts {
border-top: 1px solid #e0e0e8;
margin-right: 15px;
margin-left: 15px;
}
.recent-posts .date-a {
text-decoration: none;
@@ -1931,24 +2048,205 @@ footer .footer-copyright a:hover {
line-height: 1.38462;
letter-spacing: 0px;
}
.recent-posts blockquote {
.recent-posts blockquote::before {
content: "“";
font-family: serif;
font-size: 4em;
font-family: "Times New Roman", serif;
font-size: 6em;
line-height: 1;
margin-left: -12px;
font-style: italic;
font-weight: 700;
quotes: none;
color: #15c1c6;
}
.recent-posts blockquote {
padding: 0 39px 0 44px;
}
.recent-posts .quotes-text {
font-style: italic;
font-weight: 700;
font-size: 22px;
font-size: 25px;
line-height: 1.33333;
font-family: MerriweatherSans, sans-serif;
letter-spacing: 0;
color: #333333;
text-align: center;
padding: 0 60px;
}
@media only screen and (min-width: 768px) {
.recent-posts {
margin-right: 60px;
margin-left: 60px;
}
}
.categories-news {
border-top: 1px solid #e0e0e8;
margin: auto 15px;
}
.categories-news .categories-title {
font-size: 18px;
line-height: 1.2;
font-family: Merriweather, serif;
color: #15c1c6;
font-weight: 700;
margin-bottom: 18px;
}
.categories-news .categories-ul {
font-family: Merriweather, serif;
font-style: italic;
font-weight: 400;
list-style: none;
padding: 0;
font-size: 16px;
line-height: 1.4375;
letter-spacing: 0px;
text-align: left;
}
.categories-news .categories-li {
margin-top: 12.8px;
}
.categories-news .categories-li a {
text-decoration: none;
color: #15c1c6;
}
.categories-news .categories-li a:hover {
color: #333333;
transition: 0.3s;
}
.categories-news .recent-com-ul {
list-style: none;
padding: 0;
}
.categories-news .recent-com-ul .recent-com-li {
display: flex;
flex-direction: column;
margin-top: 35.2px;
}
.categories-news .recent-com-ul .recent-com-li .admin-on {
color: #777777;
font-family: Merriweather, serif;
font-style: italic;
font-weight: 400;
text-transform: lowercase;
font-size: 16px;
line-height: 1.4375;
letter-spacing: 0px;
}
.categories-news .recent-com-ul .recent-com-li a {
text-decoration: none;
color: #333333;
font-size: 1.125rem;
line-height: 1.333;
font-style: normal;
font-weight: 500;
font-family: Merriweather, serif;
}
.categories-news .recent-com-ul .recent-com-li a:hover {
color: #15c1c6;
transition: 0.3s;
}
.categories-news .tag-container {
display: block;
}
.categories-news .tag-container a {
margin: 0 18px 12px 0;
text-decoration: none;
font-size: 16px;
line-height: 1.4375;
font-family: Merriweather, serif;
font-style: italic;
font-weight: 400;
letter-spacing: 0px;
text-align: left;
color: #777777;
}
.categories-news .tag-container a:hover {
color: #15c1c6;
transition: 0.3s;
}
.categories-news .archives-container #archives-select {
background-color: #f6f6f6;
font-family: Merriweather, serif;
font-style: italic;
font-weight: 400;
border: 0px;
color: #777777;
width: 100%;
padding: 17px 56px 16px 20px;
cursor: pointer;
}
.categories-news .archives-container #archives-select:hover {
background-color: rgb(237, 237, 237);
transition: 0.3s;
}
.categories-news .calendar {
text-align: center;
border-left: 1px solid #e0e0e8;
border-right: 1px solid #e0e0e8;
border-bottom: 1px solid #e0e0e8;
padding-left: 19px;
padding-right: 19px;
}
.categories-news .calendar .caption {
text-align: center;
color: #ffffff;
background-color: #15c1c6;
margin-bottom: 0.9em;
margin-left: -20px;
margin-right: -20px;
padding: 0.7em 0.5em;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 1rem;
font-style: normal;
font-weight: 700;
font-family: Merriweather, serif;
}
.categories-news .calendar thead {
text-align: center;
}
.categories-news .calendar thead th {
color: #233457;
font-size: 0.75rem;
width: 14.22%;
padding: 7px 2px;
text-align: center;
font-weight: 500;
font-family: Merriweather, serif;
}
.categories-news .calendar tfoot {
border-top: 1px solid #e0e0e8;
}
.categories-news .calendar tfoot #month-name-table {
font-size: 0.8125rem;
text-transform: uppercase;
font-family: Merriweather, serif;
cursor: pointer;
font-weight: 700;
color: #777777;
padding: 10px 0 15px 0;
}
.categories-news .calendar tfoot #month-name-table:hover {
transition: 0.3s;
color: black;
}
.categories-news .calendar tr {
padding-left: 19px;
padding-right: 19px;
}
.categories-news .calendar .last-row {
padding-bottom: 20px;
}
.categories-news .calendar td {
font-size: 0.8rem;
padding: 7px 2px;
width: 14.22%;
font-family: MerriweatherSans, sans-serif;
}
@media only screen and (min-width: 768px) {
.categories-news {
margin-right: 60px;
margin-left: 60px;
}
}/*# sourceMappingURL=style.css.map */

2
style/style.css.map
View File

File diff suppressed because one or more lines are too long

1
style/style.scss
View File

@@ -40,6 +40,7 @@
@import 'news/_page-nav';
@import 'news/_search-news';
@import 'news/_custom-post';
@import 'news/_categories-news';