'fields' => [
[
- 'name' => 'title',
- 'label' => __('Title', 'cube'),
+ 'name' => 'year',
+ 'label' => __('Year', 'cube'),
'type' => Controls_Manager::TEXT,
'label_block' => true,
'default' => '',
],
[
- 'name' => 'subtitle',
- 'label' => __('subtitle', 'cube'),
+ 'name' => 'title',
+ 'label' => __('Title', 'cube'),
'type' => Controls_Manager::TEXT,
'label_block' => true,
'default' => '',
],
],
- 'title_field' => '{{{ title }}}',
+ 'title_field' => '{{{ year }}}',
]
);
$res .= '<nav id="timeline-nav">';
foreach ($items as $index => $item) {
- $arr = explode(' ', trim($item['title'])); // select the first word
+ $arr = explode(' ', trim($item['year'])); // select the first word
$res .= '<a class="year-item" href="#year-' . $index . '">' . $arr[0] . '</a>';
}
foreach ($items as $index => $item) {
$res .= '<div id="year-'.$index.'" class="timeline-item" data-timeline="' . $index . '">';
- $res .= '<h2 class="timeline-item-title">' . $item['title'] . '</h2>';
- $res .= '<h3 class="timeline-item-subtitle">' . $item['subtitle'] . '</h3>';
+ $res .= '<h2 class="timeline-item-year">' . $item['year'] . '</h2>';
+ $res .= '<h3 class="timeline-item-title">' . $item['title'] . '</h3>';
$res .= wp_get_attachment_image($item['image']['id'], 'large', false, ['class' => 'timeline-item-img']);
$res .= '<div class="timeline-item-body">' . $item['body'] . '</div>';
$res .= '</div>'; // .timeline-item
border: none
border-radius: 0
padding: 0.5em 0
- border-bottom: 2px solid $border-color
+ border-bottom: 1px solid $border-color
width: 100%
font-smoothing()
background-size: 1em auto
textarea
- border: 2px solid $border-color
+ border: 1px solid $border-color
+ border-radius: 4px
width: 100%
min-height: 200px
padding: 1em
appearance: none
cursor: pointer
border: none
- background-color: $colors.orange
+ background-color: $colors.purple
color: #fff
font-weight: 500
- padding: 0.75em 3em
- border-radius: 100px
+ padding: 1.25em 6.6875em
+ border-radius: 4px
&:hover
opacity: 0.85
-
+.message-label
+ text-align left
// Common form styling
.form-two-cols
display: flex
justify-content: space-between
> *
flex-basis: 47%
-
+ @media (max-width: 425px)
+ flex-basis: 100%
+ input
+ max-width: 480px
+below(500px)
flex-basis: 100%
-
// HTML Forms Plugin styling
.hf-message
margin: 2em 0
.year
position: sticky
align-self flex-start
- padding: 0 5.375rem
top: 149px
+ width: 144px
@media (max-width: 425px)
display: none
&-item
display: block
- margin-bottom: 24px
- text-align: right
+ margin-bottom: 1.5em
&.active
font-size: $font-size-small
color: $colors.orange
.timeline
- display: flex
- flex-direction: column
- justify-content: center
- align-items: center
+ padding-right: 144px
+ @media (max-width: 1080px)
+ padding-right 0
&-item
- margin-bottom: 4em
+ margin-bottom: 96px
+ max-width: 960px
+ &-year
+ margin-bottom: 0.8888em
&-title
- margin-top: 15px
- margin-bottom: 0,8888em
- &-subtitle
font-size: $font-size-medium
margin-bottom: 1.333em
&-img
margin-bottom: 48px
&-body
p
- max-width: 960px
margin-bottom: 3em
h4
font-size: $font-size-small
font-weight: lighter
margin-bottom: 1em
- max-width: 960px
+ margin-top: 2em
+ h3
+ font-size: $font-size-medium
+ font-weight: lighter
+ margin-bottom 1.33em
ul
list-style none
margin-left: 0.35em
li
- margin-bottom: 1.8em
+ margin-bottom: 1.5em
max-width: 960px
position: relative
&::before