Prvotna verzija spletne strani
This commit is contained in:
Mark Poljanšek committed
1 parent
9d09f04023
commit
79150b21d2
58 files changed
+8507
No files matched your search
@@ -0,0 +1,122 @@
|
||||
/* ==========================================================================
|
||||
Buttons Styles
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Ta datoteka vsebuje stile za vse ponovno uporabljive gumbe na spletni strani.
|
||||
*
|
||||
* 1. Osnovni stil za gumbe (.btn)
|
||||
* 2. Različice gumbov (.btn-primary, .btn-primary-orange, .btn-secondary)
|
||||
* 3. Gumbi z ikonami (.social-icon-btn)
|
||||
* 4. Posebni gumbi (.play-button)
|
||||
* 5. Stili za gumbe na mobilnih napravah
|
||||
*/
|
||||
|
||||
/* 1. Osnovni stil za gumbe */
|
||||
|
||||
.btn {
|
||||
padding: 10px 18px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 2. Različice gumbov */
|
||||
|
||||
.btn-primary {
|
||||
background-color: #2D738C;
|
||||
color: #FFFFFF;
|
||||
border-color: #2D738C;
|
||||
}
|
||||
|
||||
.btn-primary-orange {
|
||||
background: #FA7850;
|
||||
color: #FFFFFF;
|
||||
padding: 16px 28px;
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: #FFFFFF;
|
||||
color: #344054;
|
||||
border: 1px solid #D0D5DD;
|
||||
}
|
||||
|
||||
/* 3. Gumbi z ikonami */
|
||||
|
||||
.social-icon-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 1px solid #D0D5DD;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
|
||||
color: #98A2B3;
|
||||
font-size: 18px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* 4. Posebni gumbi */
|
||||
|
||||
.play-button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: rgba(255, 255, 255, 0.56);
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.play-button::after {
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 24px solid white;
|
||||
border-top: 14px solid transparent;
|
||||
border-bottom: 14px solid transparent;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
Mobile Buttons Styles
|
||||
========================================================================== */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
.btn-primary-orange {
|
||||
width: auto;
|
||||
padding: 16px 28px;
|
||||
border-radius: 12px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.play-button {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
.play-button::after {
|
||||
border-left-width: 14px;
|
||||
border-top-width: 8px;
|
||||
border-bottom-width: 8px;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,179 @@
|
||||
/* ==========================================================================
|
||||
Cards Styles
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Ta datoteka vsebuje stile za vse ponovno uporabljive komponente v obliki kartic.
|
||||
*
|
||||
* 1. Kartice z novicami (.news-card)
|
||||
* 2. Kartice s pričevanji (.testimonial-card)
|
||||
* 3. Kartice s projekti/objavami (.post-card)
|
||||
* 4. Stili za kartice na mobilnih napravah
|
||||
*/
|
||||
|
||||
/* 1. Kartice z novicami (.news-card) */
|
||||
|
||||
.news-card {
|
||||
width: 405.33px;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.news-card img {
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.news-card .card-content {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.news-card .author {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.news-card h3 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
line-height: 32px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.news-card p {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
/* 2. Kartice s pričevanji (.testimonial-card) */
|
||||
|
||||
.testimonial-card {
|
||||
padding: 24px 24px 40px;
|
||||
border: 1px solid #D0D5DD;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.testimonial-column .testimonial-card:nth-child(even) {
|
||||
background: #F9FAFB;
|
||||
}
|
||||
|
||||
.testimonial-card h3 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
color: #000000;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.testimonial-card p {
|
||||
font-size: 16px;
|
||||
line-height: 1.2;
|
||||
color: #646E82;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.author-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.author-info img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.author-info h4 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 6px 0;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.author-info p {
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
color: #2D738C;
|
||||
}
|
||||
|
||||
/* Specifična pravila za barve znotraj pričevanj */
|
||||
.testimonial-card:nth-child(3) .author-info h4,
|
||||
.testimonial-card:nth-child(3) .author-info p {
|
||||
color: #2D738C;
|
||||
}
|
||||
|
||||
.testimonial-column:nth-child(1) .testimonial-card:nth-child(2) .author-info h4,
|
||||
.testimonial-column:nth-child(2) .testimonial-card:nth-child(2) .author-info h4,
|
||||
.testimonial-column:nth-child(1) .testimonial-card:nth-child(2) .author-info p,
|
||||
.testimonial-column:nth-child(2) .testimonial-card:nth-child(2) .author-info p {
|
||||
color: #646E82;
|
||||
}
|
||||
|
||||
/* 3. Kartice s projekti/objavami (.post-card) */
|
||||
|
||||
.post-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.post-link {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.post-image {
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #FA7850;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
line-height: 32px;
|
||||
color: #101828;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.post-excerpt {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #667085;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
Mobile Cards Styles
|
||||
========================================================================== */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
/* Kartice z novicami */
|
||||
.news-card {
|
||||
width: 100%;
|
||||
max-width: 321px;
|
||||
}
|
||||
|
||||
/* Kartice s pričevanji */
|
||||
.testimonial-card {
|
||||
flex: 0 0 291px;
|
||||
scroll-snap-align: start;
|
||||
margin-right: 24px;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user