Template Services Update.

Overview

This document describes all CSS/SCSS changes applied to the Demoweb template_services update. Each section corresponds to a specific UI component and includes the relevant SCSS snippet to apply.

1. Contact Box — Hours Display

Adds styling to the working hours text inside the contact card, ensuring it appears in a lighter gray color on its own line.

File: styles/components/_contact-card.scss

.contact-card__hours {
font-size: 13px;
color: $color__gray-lighter;
display: block;
}

2. Mobile Menu — Item Button

Adjusts padding on the menu item button for xlarge breakpoints and controls visibility based on screen size. On large screens and above the button is hidden; on smaller screens it displays as inline-flex.

File: styles/components/_menu.scss

.menu__item-button {
@include media($xlarge) {
padding-left: 33px;
}

.header__menu & {
display: inline-flex;

@include media($large) {
display: none;
}
}
}

3. Blog Page — Author Role

Styles the author role label on blog detail pages so it renders as a block-level element with appropriate text color and font size.

File: styles/components/_author.scss

.author__role {
color: $color__text;
display: block;
font-size: 13px;
}

4. Blog Author Component

Defines the layout of the author component used in blog listings. Uses flex-row layout with gap, highlights the author name on hover, and adds a top margin on mobile.

File: styles/components/_author.scss

.author {
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
gap: 10px;

&:hover,
&:focus {
.author__name {
color: $color__primary;
}
}

@media (max-width: $small) {
margin-top: 15px;
}
}

5. Category Box — Standard Version

Styles the category box card including hover effects for the figure and title. The image variant uses min-height and aspect ratio while also stretching to full height.

File: styles/components/_category.scss

.category__box {
position: relative;
align-items: center;
width: 100%;
z-index: 1;
padding: 15px 20px;
background: $color__bg-dark;
transition: $ease;
height: 100%;

&:hover,
&:focus {
.category__figure {
opacity: 0.5;
}

.category__title {
color: $color__primary;
}
}

.category__item--image & {
min-height: 190px;
aspect-ratio: 16/9;
}
}

6. Category Box — Image Variant with Banner

Extended category box definition that includes banner content alignment and spec component gap styles. This variant aligns image items to the bottom and applies a 16:9 aspect ratio.

File: styles/components/_category.scss + _banner.scss + _spec.scss

.category__box {
position: relative;
align-items: center;
width: 100%;
z-index: 1;
padding: 15px 20px;
background: $color__bg-dark;
transition: $ease;

&:hover,
&:focus {
.category__figure {
opacity: 0.5;
}

.category__title {
color: $color__primary;
}
}

.category__item--image & {
min-height: 190px;
aspect-ratio: 16/9;
height: 100%;
align-items: end;
}
}

.banner__content {
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

@include media($medium) {
flex-direction: row;
justify-content: space-between;
align-items: end;
}
}

.spec {
margin: 0 0 15px 0;
gap: 10px;

@include media($medium) {
gap: 10px 20px;
}
}

7. Poptávka Form — Mobile Checkbox

Styles the form checkbox wrapper for the inquiry (poptávka) form. Includes the checkmark indicator using a pseudo element and adds vertical margins on mobile breakpoints.

File: styles/components/_message-form.scss

.message-form__checkbox-wrapper {
display: flex;
justify-content: flex-start;
align-items: center;

input:checked + .message-form__checkbox::before {
@include pseudo();
width: 0.8rem;
height: 1.4rem;
border-right: 2px solid $color__text;
border-bottom: 2px solid $color__text;
transform: rotate(45deg);
top: 3px;
bottom: 8px;
left: 5px;
right: 5px;
margin: auto;
}

@media (max-width: $small) {
margin-top: 10px;
margin-bottom: 10px;
}
}

8. Contact Card — No-Photo Design

Per the task description: if there is no photo available for a contact person, no placeholder icon should be shown. The card should display only the contact details (name, phone, email) without any image element. A recolored icon is not an acceptable fallback.

Expected result (right card in reference image):
• Contact name rendered as bold heading
• Phone number with icon
• Working hours in lighter gray text (13px, block)
• Email address with icon
• No avatar/photo element rendered in the DOM when no image is set

Summary of Files Modified

_contact-card.scss — .contact-card__hours: font, color, display.
_menu.scss — .menu__item-button: padding & visibility per breakpoint.
_author.scss — .author__role, .author: layout, hover, mobile margin.
_category.scss — .category__box: two variants (standard & image with banner).
_message-form.scss — .message-form__checkbox-wrapper: flex & mobile margins.
_banner.scss — .banner__content: flex layout & responsive alignment.
_spec.scss — .spec: gap values for medium breakpoint.