jekyll-theme-pirati 8.0.0.pre.alpha6 → 8.2.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (100) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +139 -3
  3. data/_data/parties.yml +7 -0
  4. data/_includes/article-box/article-box.html +15 -18
  5. data/_includes/article-box/list.html +11 -0
  6. data/_includes/candidate-badge.html +17 -11
  7. data/_includes/contact-line.html +1 -1
  8. data/_includes/header.html +2 -2
  9. data/_includes/hero/simple.html +1 -1
  10. data/_includes/page-header.html +1 -1
  11. data/_includes/party.html +15 -0
  12. data/_includes/people/profile-badge.html +11 -5
  13. data/_includes/program/list.html +9 -9
  14. data/_includes/right-bar/bar_board.html +19 -29
  15. data/_includes/right-bar/bar_fb.html +9 -19
  16. data/_includes/right-bar/bar_garant.html +2 -2
  17. data/_includes/right-bar/bar_kodo.html +11 -18
  18. data/_includes/right-bar/bar_map.html +25 -24
  19. data/_includes/right-bar/bar_page_contact.html +2 -12
  20. data/_includes/right-bar/bar_people.html +13 -11
  21. data/_includes/right-bar/bar_person_articles.html +1 -1
  22. data/_includes/right-bar/bar_profile.html +17 -13
  23. data/_includes/right-bar/bar_program.html +1 -1
  24. data/_includes/right-bar/bar_textbox.html +4 -12
  25. data/_includes/right-bar/bar_tw.html +2 -12
  26. data/_includes/right-bar/bar_video.html +12 -38
  27. data/_includes/right-bar/rbar.html +5 -4
  28. data/_includes/right-bar/rbar_profiles.html +1 -8
  29. data/_includes/social-icons.html +8 -0
  30. data/_layouts/blank-article.html +1 -1
  31. data/_layouts/communal-elections.html +5 -10
  32. data/_layouts/person.html +11 -4
  33. metadata +8 -71
  34. data/_includes/article-box/three-in-row.html +0 -22
  35. data/_includes/right-bar/bar_cal.html +0 -22
  36. data/_sass/_base.scss +0 -23
  37. data/_sass/_fonts.scss +0 -42
  38. data/_sass/_settings.scss +0 -688
  39. data/_sass/_sprites.scss +0 -0
  40. data/_sass/components/Slider.scss +0 -0
  41. data/_sass/components/academic-title.scss +0 -7
  42. data/_sass/components/article-card.scss +0 -41
  43. data/_sass/components/article-infobox.scss +0 -9
  44. data/_sass/components/article-listing.scss +0 -95
  45. data/_sass/components/banner.scss +0 -75
  46. data/_sass/components/blockquote.scss +0 -83
  47. data/_sass/components/card.scss +0 -154
  48. data/_sass/components/contact-bar.scss +0 -93
  49. data/_sass/components/content-block.scss +0 -24
  50. data/_sass/components/content-card.scss +0 -31
  51. data/_sass/components/corner-ribbon.scss +0 -25
  52. data/_sass/components/cta-button.scss +0 -54
  53. data/_sass/components/footer.scss +0 -5
  54. data/_sass/components/header-bar.scss +0 -118
  55. data/_sass/components/headline-media.scss +0 -42
  56. data/_sass/components/hero.scss +0 -164
  57. data/_sass/components/highlight.scss +0 -60
  58. data/_sass/components/hp-banner.scss +0 -21
  59. data/_sass/components/icon.scss +0 -33
  60. data/_sass/components/intention-map.scss +0 -23
  61. data/_sass/components/member-list.scss +0 -7
  62. data/_sass/components/metadata-block.scss +0 -29
  63. data/_sass/components/multicolumn.scss +0 -25
  64. data/_sass/components/pagination.scss +0 -44
  65. data/_sass/components/person.scss +0 -9
  66. data/_sass/components/profile-badge.scss +0 -74
  67. data/_sass/components/program.scss +0 -150
  68. data/_sass/components/region.scss +0 -83
  69. data/_sass/components/simple-accordion.scss +0 -80
  70. data/_sass/components/suggest-improvement.scss +0 -10
  71. data/_sass/components/tag.scss +0 -29
  72. data/_sass/components/tile.scss +0 -20
  73. data/_sass/components/top-bar.scss +0 -202
  74. data/_sass/components/top-sub-nav.scss +0 -81
  75. data/_sass/components/typography.scss +0 -85
  76. data/_sass/components/vertical-navigation.scss +0 -67
  77. data/_sass/components/widget-accordion.scss +0 -109
  78. data/_sass/components/widget-share-box.scss +0 -117
  79. data/_sass/components/widget-simple-text.scss +0 -15
  80. data/_sass/layouts/_cast.scss +0 -262
  81. data/_sass/layouts/_kandidatka.scss +0 -78
  82. data/_sass/objects/media.scss +0 -35
  83. data/_sass/objects/section.scss +0 -211
  84. data/_sass/objects/space.scss +0 -7
  85. data/_sass/pirati.scss +0 -58
  86. data/_sass/utilities/header-styles.scss +0 -16
  87. data/_sass/utilities/utilities.scss +0 -139
  88. data/assets/css/main.scss +0 -3
  89. data/assets/fonts/BebasNeue-Thin.ttf +0 -0
  90. data/assets/fonts/BebasNeue-Thin.woff +0 -0
  91. data/assets/fonts/BebasNeueBold.ttf +0 -0
  92. data/assets/fonts/BebasNeueBold.woff +0 -0
  93. data/assets/fonts/BebasNeueBook.ttf +0 -0
  94. data/assets/fonts/BebasNeueBook.woff +0 -0
  95. data/assets/fonts/BebasNeueLight.ttf +0 -0
  96. data/assets/fonts/BebasNeueLight.woff +0 -0
  97. data/assets/fonts/BebasNeueRegular.ttf +0 -0
  98. data/assets/fonts/BebasNeueRegular.woff +0 -0
  99. data/assets/fonts/demo.html +0 -311
  100. data/assets/fonts/stylesheet.css +0 -40
@@ -1,85 +0,0 @@
1
- @mixin emphasizedAnchor {
2
- text-decoration: underline;
3
-
4
- &.active {
5
- font-weight: bold;
6
- }
7
- }
8
-
9
- @mixin headlineAnchor {
10
- // &:hover {
11
- // text-decoration: underline;
12
- // }
13
- }
14
-
15
- @mixin headerStyle($header, $type: main) {
16
- $settings: map-get($headers, $type);
17
-
18
- @each $breakpointSize, $headers in map-get($settings, sizes) {
19
- @include breakpoint($breakpointSize) {
20
- font-family: #{map-get($settings, family)};
21
- font-size: rem-calc(map-get($headers, $header));
22
- font-weight: map-get($settings, weight);
23
-
24
- $letter-spacing: map-get($settings, letter-spacing);
25
-
26
- @if ($letter-spacing) {
27
- letter-spacing: $letter-spacing;
28
- }
29
- }
30
- }
31
- }
32
-
33
- @function getHeaderSettings($prop, $type: main) {
34
- $settings: map-get($headers, $type);
35
- @return map-get($settings, $prop);
36
- }
37
-
38
- @mixin fontFeatures() {
39
- font-feature-settings: "kern", "onum", "liga";
40
- font-kerning: auto;
41
- text-rendering: optimizeLegibility;
42
- }
43
-
44
- .t-subheader {
45
- font-weight: normal;
46
- color: $dark-gray;
47
- }
48
-
49
- // Special page title header
50
- .c-page-title {
51
- margin-bottom: 0;
52
-
53
- @include headerStyle('h2', super);
54
- }
55
-
56
- // Page header section with provided whitespace for clean separation from the content
57
- .c-page-header {
58
- padding-top: 2rem;
59
- padding-bottom: 2rem;
60
- }
61
-
62
- .c-top-sub-nav + .page-content .o-section,
63
- .c-top-sub-nav + .page-content .c-page-header {
64
- @include breakpoint(medium) {
65
- padding-top: 0;
66
- }
67
- }
68
-
69
- // The block will have larger text for better readability. Often used with
70
- // conjuction to .c-content-block
71
- .c-emphasized-text {
72
- font-size: 1.15rem;
73
- }
74
-
75
- .c-emphasized-anchor {
76
- @include emphasizedAnchor();
77
- }
78
-
79
- .c-headline-anchor {
80
- @include headlineAnchor();
81
- }
82
-
83
- .t-font-features {
84
- @include fontFeatures();
85
- }
@@ -1,67 +0,0 @@
1
- $vn-ns: '';
2
-
3
- .#{$vn-ns}c-vertical-navigation {
4
- @include breakpoint(medium down) {
5
- padding: 5px;
6
- }
7
-
8
- @include breakpoint(small down) {
9
- margin-top: 0;
10
- }
11
- }
12
-
13
- .#{$vn-ns}c-vertical-navigation .#{$vn-ns}c-vertical-navigation__title {
14
- text-transform: uppercase;
15
-
16
- @include headerStyle('h5', sub);
17
- }
18
-
19
- .#{$vn-ns}c-vertical-navigation .#{$vn-ns}c-vertical-navigation-items {
20
- list-style-type: none;
21
- margin: 0;
22
- margin-top: 22px;
23
- }
24
-
25
- .#{$vn-ns}c-vertical-navigation .#{$vn-ns}c-vertical-navigation-items {
26
-
27
- .#{$vn-ns}c-vertical-navigation__item a:hover {
28
- text-decoration: underline;
29
- }
30
-
31
- &.#{$vn-ns}c-vertical-navigation-items--horizontal {
32
-
33
- .#{$vn-ns}c-vertical-navigation__item +
34
- .#{$vn-ns}c-vertical-navigation__item {
35
- margin-left: 13px;
36
- }
37
-
38
- }
39
-
40
- @include breakpoint(medium down) {
41
-
42
- &.#{$vn-ns}c-vertical-navigation-items--horizontal {
43
-
44
- .#{$vn-ns}c-vertical-navigation__item +
45
- .#{$vn-ns}c-vertical-navigation__item {
46
- margin-left: 10px;
47
- }
48
-
49
- }
50
-
51
- }
52
-
53
- &.#{$vn-ns}c-vertical-navigation-items--horizontal
54
- .#{$vn-ns}c-vertical-navigation__item {
55
- display: inline-block;
56
- }
57
-
58
- .#{$vn-ns}c-vertical-navigation__item + .#{$vn-ns}c-vertical-navigation__item {
59
- margin-top: 3px;
60
-
61
- @include breakpoint(medium down) {
62
- margin-top: 5px;
63
- }
64
-
65
- }
66
-
67
- }
@@ -1,109 +0,0 @@
1
- .c-widget-accordion {
2
- @include accordion-container;
3
- background: $light-gray;
4
- }
5
-
6
- .c-widget-accordion + .c-widget-accordion {
7
- margin-top: 1rem;
8
- }
9
-
10
- .c-widget-accordion-link {
11
- display: block;
12
- width: 100%;
13
- padding: .5rem 1rem;
14
- background-color: $medium-gray;
15
- overflow: hidden;
16
- @include headerStyle('h3', alt);
17
-
18
- &:before {
19
- display: none;
20
- }
21
-
22
- &--nofill {
23
- background: $body-background;
24
- padding-left: 0;
25
-
26
- @include headerStyle('h2', alt);
27
- }
28
- }
29
-
30
- .c-widget-accordion .c-widget-accordion-item {
31
- &.is-active .c-widget-accordion-link:before {
32
- content: '\f147';
33
- }
34
-
35
- .c-widget-accordion-link.c-widget-accordion-link--fb {
36
- background: $facebook-color;
37
-
38
- .c-widget-accordion__title {
39
- color: $white;
40
- }
41
- }
42
-
43
- .c-widget-accordion-link.c-widget-accordion-link--cal {
44
- background: #df3a3f;
45
-
46
- .c-widget-accordion__title {
47
- color: $white;
48
- }
49
- }
50
-
51
- .c-widget-accordion-link.c-widget-accordion-link--yt {
52
- background: #cc181e;
53
-
54
- .c-widget-accordion__title {
55
- color: $white;
56
- }
57
- }
58
- }
59
-
60
- .c-widget-accordion .c-widget-accordion__title {
61
- color: $primary-color;
62
- white-space: nowrap;
63
- }
64
-
65
- .c-widget-accordion span:last-child {
66
- white-space: nowrap;
67
- width: 100%;
68
- }
69
-
70
- .c-widget-accordion .c-widget-accordion-content {
71
- padding: 1rem;
72
-
73
- &.c-widget-accordion-content--nopad {
74
- padding: 0;
75
- }
76
- }
77
-
78
- .c-widget-accordion .c-widget-accordion-link {
79
- border: 0;
80
- border-bottom: 0;
81
- }
82
-
83
- .c-widget-accordion .c-widget-accordion-content__cta {
84
- margin-top: 1rem;
85
- }
86
-
87
- .c-widget-accordion .c-widget-accordion-list {
88
- margin-left: 0;
89
- margin-bottom: 1rem;
90
-
91
- &:last-child {
92
- margin-bottom: 0;
93
- }
94
- }
95
-
96
- // Colors
97
- .c-widget-accordion.c-widget-accordion--alert {
98
- background: $alert-color;
99
- }
100
-
101
- .c-widget-accordion.c-widget-accordion--alert
102
- .c-widget-accordion-link {
103
- background: $alert-color !important;
104
- }
105
-
106
- .c-widget-accordion.c-widget-accordion--dark
107
- .c-widget-accordion-link {
108
- background: $dark-gray !important;
109
- }
@@ -1,117 +0,0 @@
1
- .c-widget-share-box {
2
- position: relative;
3
- padding: 3.25rem 3.5rem 3.5rem 3.5rem;
4
- border: 1px solid #f3f3f3;
5
- border-radius: 2px;
6
- width: 100%;
7
- overflow: hidden;
8
-
9
- &:before {
10
- z-index: -1;
11
- content: '\f004';
12
- display: block;
13
- position: absolute;
14
- top: -35px;
15
- right: -35px;
16
- display: inline-block;
17
- font-family: 'FontAwesome';
18
- font-size: 11.5rem;
19
- transform: rotate(20deg);
20
- color: #f3f3f3;
21
- }
22
-
23
- @include breakpoint(large down) {
24
- &.c-widget-share-box--largestacked {
25
- margin-top: 2rem;
26
- }
27
- }
28
-
29
- @include breakpoint(medium down) {
30
- &:before {
31
- top: 50%;
32
- right: 30px;
33
- transform: translateY(-50%);
34
- }
35
-
36
- &.c-widget-share-box--mediumstacked {
37
- margin-top: 2rem;
38
- }
39
- }
40
- }
41
-
42
- .c-widget-share-box-headline {
43
- font-family: $header-font-family;
44
- color: $primary-color;
45
- font-size: 1.75rem;
46
- }
47
-
48
- .c-widget-share-box-content {
49
- margin-top: 2.75rem;
50
- }
51
-
52
- /* All buttons */
53
- .share-buttons {
54
- display: flex;
55
- flex-direction: column;
56
- }
57
-
58
- @mixin widgetShareButtonStyle($lead-color) {
59
- .share-buttons__button-icon {
60
- color: $lead-color;
61
- }
62
-
63
- &:hover {
64
- background: $lead-color;
65
- border-color: $lead-color;
66
-
67
- .share-buttons__button-icon {
68
- color: $white;
69
- }
70
- }
71
- }
72
-
73
- /* Each button */
74
- .share-buttons__button {
75
- margin: 0 0 1rem;
76
- margin-bottom: 10px;
77
- margin-right: 3px;
78
- border: 1px solid $medium-gray;
79
- padding: .5rem 1rem;
80
-
81
- &:hover {
82
- opacity: 1;
83
- color: $secondary-color;
84
- }
85
-
86
- &.share-buttons__button--facebook {
87
- @include widgetShareButtonStyle($facebook-color);
88
- }
89
-
90
- &.share-buttons__button--twitter {
91
- @include widgetShareButtonStyle($twitter-color);
92
- }
93
-
94
- &.share-buttons__button--gplus {
95
- @include widgetShareButtonStyle($gplus-color);
96
- }
97
-
98
- &.share-buttons__button--pinterest {
99
- @include widgetShareButtonStyle($pinterest-color);
100
- }
101
-
102
- &.share-buttons__button--tumblr {
103
- @include widgetShareButtonStyle($tumblr-color);
104
- }
105
-
106
- &.share-buttons__button--reddit {
107
- @include widgetShareButtonStyle($reddit-color);
108
- }
109
-
110
- &.share-buttons__button--linkedin {
111
- @include widgetShareButtonStyle($linkedin-color);
112
- }
113
-
114
- &.share-buttons__button--envelope {
115
- @include widgetShareButtonStyle($envelope-color);
116
- }
117
- }
@@ -1,15 +0,0 @@
1
- .c-widget-simple-text {
2
-
3
- a {
4
- color: #878787;
5
- text-decoration: none;
6
- }
7
-
8
- a:hover {
9
- text-decoration: underline;
10
- }
11
- }
12
-
13
- .c-widget-simple-text--stacked {
14
- margin-top: 1rem;
15
- }
@@ -1,262 +0,0 @@
1
- $dark: #343434;
2
- %before-util{
3
- content: '';
4
- display: block;
5
- position: absolute;
6
- z-index: -1;
7
- background: rgba($dark, .95);
8
- left: 0;
9
- top: 0;
10
- bottom: 0;
11
- right: 0;
12
- }
13
- %before-pattern{
14
- background: -webkit-linear-gradient(-90deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 20%, rgba(0,0,0,0.1) 20%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.2) 40%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.4) 80%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.5) 100%), -webkit-linear-gradient(0deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 20%, rgba(0,0,0,0.1) 20%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.2) 40%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.4) 80%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.5) 100%), rgba(0,0,0,0.5);
15
- background: -moz-linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 20%, rgba(0,0,0,0.1) 20%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.2) 40%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.4) 80%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.5) 100%), -moz-linear-gradient(90deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 20%, rgba(0,0,0,0.1) 20%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.2) 40%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.4) 80%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.5) 100%), rgba(0,0,0,0.5);
16
- background: linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 20%, rgba(0,0,0,0.1) 20%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.2) 40%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.4) 80%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.5) 100%), linear-gradient(90deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 20%, rgba(0,0,0,0.1) 20%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.2) 40%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.4) 80%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.5) 100%), rgba(0,0,0,0.5);
17
- -webkit-box-sizing: content-box;
18
- -moz-box-sizing: content-box;
19
- box-sizing: content-box;
20
- -o-text-overflow: clip;
21
- text-overflow: clip;
22
-
23
- background-position: auto auto;
24
- -webkit-background-origin: padding-box;
25
- background-origin: padding-box;
26
- -webkit-background-clip: border-box;
27
- background-clip: border-box;
28
- -webkit-background-size: 100% 100%;
29
- background-size: 100% 100%;
30
- }
31
- .l-cast{
32
- $unit: 1.125rem;
33
- $light: #fff;
34
- $accent: #f3c289;
35
- position: relative;
36
- &:before{
37
- @extend %before-util;
38
- background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Slune%C4%8Dn%C3%AD_n%C3%A1m%C4%9Bst%C3%AD_Praha_13_2010.jpg/1200px-Slune%C4%8Dn%C3%AD_n%C3%A1m%C4%9Bst%C3%AD_Praha_13_2010.jpg);
39
- background-size: contain;
40
- background-repeat: no-repeat;
41
- width: 1460px;
42
- filter: grayscale(100%);
43
- left: calc(50% - 730px);
44
- }
45
-
46
- &__top-bar{
47
- background-color: $dark;
48
- color: white;
49
- text-align: center;
50
- padding: 0;
51
- position: sticky;
52
- top: 0px;
53
- z-index: 10;
54
- &__list{
55
- background-color: transparent !important;
56
- &-item{
57
- padding: $unit;
58
- a{
59
- color: $light !important;
60
- font-size: 1rem !important;
61
- }
62
- }
63
- }
64
- }
65
- &__toggle{
66
- &--more{
67
- display: block;
68
- text-align: center;
69
- position: relative;
70
- margin: $unit 0;
71
- color: rgba($dark,.5);
72
- &:before{
73
- @extend %before-util;
74
- top: auto;
75
- height: 1px;
76
- opacity: .3;
77
- bottom: 50%;
78
- right: 75%;
79
- }
80
- &:after{
81
- @extend %before-util;
82
- top: auto;
83
- height: 1px;
84
- opacity: .3;
85
- bottom: 50%;
86
- left: 75%;
87
- }
88
- }
89
- }
90
- &__hero{
91
- padding: 8*$unit 0;
92
- overflow: hidden;
93
- position: relative;
94
- line-height: 1;
95
-
96
-
97
- small{
98
- font-size: 1.5rem;
99
- }
100
- &:before{
101
- @extend %before-util;
102
- @extend %before-pattern;
103
- transform: rotate(-45deg) translate(-5%, -55%);
104
- width: 60vw;
105
- height: 60vw;
106
- }
107
- &:after{
108
- @extend %before-util;
109
- @extend %before-pattern;
110
- transform: rotate(585deg) translate(-65%, 85%);
111
- opacity: 0.2;
112
- width: 80vh;
113
- height: 80vh;
114
- }
115
- &-subhead{
116
- line-height: 1.25;
117
- margin-bottom: $unit;
118
- }
119
- &-head{
120
- font-size: 6em;
121
- font-weight: bold;
122
- color: white;
123
- }
124
- &-text{
125
- position: relative;
126
- background: rgba(#ffffff,.85);
127
- padding: 2*$unit;
128
- }
129
- }
130
- &__heading{
131
- text-align: center;
132
- font-size: 2.5em;
133
- margin: 4*$unit 0;
134
- position: relative;
135
- color: white;
136
- position: sticky;
137
- top: 64px;
138
- z-index: 1;
139
- &:before{
140
- @extend %before-util;
141
- top: -$unit;
142
- bottom: -$unit;
143
- right: 20%;
144
- transform: skew(45deg);
145
- }
146
- &:after{
147
- @extend %before-util;
148
- top: -$unit;
149
- bottom: -$unit;
150
- left: 20%;
151
- transform: skew(-45deg);
152
- }
153
- }
154
- &__perex{
155
- font-size: 1.25em;
156
- .l-cast__kan ~ section &{
157
- margin-bottom: 3*$unit;
158
- }
159
- &-columns{
160
- $u: 1.25rem;
161
- column-count: 2;
162
- column-gap: 2*$u;
163
- padding: $u 0;
164
- margin-bottom: 2*$u;
165
- }
166
- }
167
- &__kan{
168
- margin-top: -5*$unit - .75rem;
169
- //overflow: hidden;
170
- .l-kan__item{
171
- border-top: none;
172
- }
173
- &-img{
174
- position: relative;
175
- &:before{
176
- @extend %before-util;
177
- background: rgba($dark,.1) !important;
178
- transform: rotate(45deg) translate(-0%, -62%);
179
- opacity: 0.5;
180
- width: 5*$unit;
181
- height: 80vh;
182
- }
183
- img{
184
- position: sticky;
185
- top: 120px;
186
- }
187
- }
188
- &-item:nth-of-type(even) &-img{
189
- &:before{
190
- @extend %before-util;
191
- transform: rotate(-45deg) translate(450%, -30%);
192
- }
193
- }
194
- }
195
- &__activity{
196
- $u: 1.25rem;
197
- &-perex{
198
- &-item{
199
- padding-top: $u;
200
- padding-bottom: $u;
201
- display: flex;
202
- }
203
- &-icon{
204
- font-size: 3rem;
205
- line-height: 5rem;
206
- vertical-align: middle;
207
- display: block;
208
- text-align: center;
209
- border-radius: 50%;
210
- background: $dark;
211
- color: white;
212
- width: 5rem;
213
- height: 5rem;
214
- flex-basis: 5rem;
215
- flex-shrink: 0;
216
- margin: 0 2*$u;
217
- }
218
- }
219
- }
220
- &__priority,&__connect{
221
- $u: 1.25rem;
222
- &-detail{
223
- background: rgba($dark,.05);
224
- &-title{
225
- margin: $u 0;
226
- padding: $u 0;
227
- position: relative;
228
- font-size: 1.75em;
229
- &:before{
230
- @extend %before-util;
231
- //right: -100%;
232
- //border-bottom: 1px solid $dark;
233
- top: auto;
234
- height: 1px;
235
- }
236
- p + &{
237
- margin-top: 2*$u;
238
- }
239
- }
240
- }
241
- &-row{
242
- //border-top: 1px solid rgba(black, .1);
243
- //padding-top: 4*$unit;
244
- }
245
- &-perex{
246
- position: sticky;
247
- top: 144px;
248
- &-item{
249
- padding: $u 2*$u 2*$u 0;
250
- & + &{
251
- border-top: 1px solid rgba(black, .1);
252
- padding-top: 2*$u;
253
- }
254
- }
255
- }
256
- }
257
- &__end{
258
- p+p{
259
-
260
- }
261
- }
262
- }