pages_core 3.12.1 → 3.12.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (121) hide show
  1. checksums.yaml +4 -4
  2. data/VERSION +1 -1
  3. data/app/assets/builds/pages_core/admin-dist.js +135 -50
  4. data/app/assets/builds/pages_core/admin-dist.js.map +7 -0
  5. data/app/assets/builds/pages_core/admin.css +72 -20
  6. data/app/assets/stylesheets/pages_core/admin/components/attachments.css +1 -1
  7. data/app/assets/stylesheets/pages_core/admin/components/image_editor.css +2 -2
  8. data/app/assets/stylesheets/pages_core/admin/components/image_grid.css +8 -8
  9. data/app/assets/stylesheets/pages_core/admin/components/image_uploader.css +2 -2
  10. data/app/assets/stylesheets/pages_core/admin/components/layout.css +2 -2
  11. data/app/assets/stylesheets/pages_core/admin/components/modal.css +2 -2
  12. data/app/assets/stylesheets/pages_core/admin/components/search.css +27 -0
  13. data/app/assets/stylesheets/pages_core/admin/controllers/pages.css +6 -0
  14. data/app/controllers/admin/pages_controller.rb +12 -11
  15. data/app/controllers/concerns/pages_core/rss_controller.rb +17 -1
  16. data/app/controllers/pages_core/admin_controller.rb +6 -0
  17. data/app/controllers/pages_core/frontend/pages_controller.rb +9 -5
  18. data/app/controllers/pages_core/sitemaps_controller.rb +3 -5
  19. data/app/helpers/admin/pages_helper.rb +32 -0
  20. data/app/helpers/pages_core/images_helper.rb +28 -7
  21. data/app/javascript/admin-dist.ts +2 -0
  22. data/app/javascript/components/Attachments/{Attachment.jsx → Attachment.tsx} +42 -33
  23. data/app/javascript/components/Attachments/{AttachmentEditor.jsx → AttachmentEditor.tsx} +23 -23
  24. data/app/javascript/components/{EditableImage.jsx → EditableImage.tsx} +27 -24
  25. data/app/javascript/components/{FileUploadButton.jsx → FileUploadButton.tsx} +15 -16
  26. data/app/javascript/components/ImageCropper/FocalPoint.tsx +94 -0
  27. data/app/javascript/components/ImageCropper/{Image.jsx → Image.tsx} +13 -14
  28. data/app/javascript/components/ImageCropper/{Toolbar.jsx → Toolbar.tsx} +16 -12
  29. data/app/javascript/components/ImageCropper/{useCrop.js → useCrop.ts} +80 -37
  30. data/app/javascript/components/{ImageCropper.jsx → ImageCropper.tsx} +17 -15
  31. data/app/javascript/components/ImageEditor/{Form.jsx → Form.tsx} +24 -23
  32. data/app/javascript/components/{ImageEditor.jsx → ImageEditor.tsx} +17 -15
  33. data/app/javascript/components/ImageGrid/{DragElement.jsx → DragElement.tsx} +12 -10
  34. data/app/javascript/components/ImageGrid/{GridImage.jsx → GridImage.tsx} +40 -30
  35. data/app/javascript/components/ImageGrid/{Placeholder.jsx → Placeholder.tsx} +5 -6
  36. data/app/javascript/components/ImageGrid.jsx +3 -4
  37. data/app/javascript/components/{ImageUploader.jsx → ImageUploader.tsx} +46 -41
  38. data/app/javascript/components/Modal.tsx +48 -0
  39. data/app/javascript/components/PageImages.tsx +28 -0
  40. data/app/javascript/components/{PageTreeDraggable.jsx → PageTree/Draggable.tsx} +79 -57
  41. data/app/javascript/components/{PageTreeNode.jsx → PageTree/Node.tsx} +79 -70
  42. data/app/javascript/components/PageTree/types.ts +15 -0
  43. data/app/javascript/components/PageTree.tsx +206 -0
  44. data/app/javascript/components/RichTextToolbarButton.tsx +17 -0
  45. data/app/javascript/components/TagEditor/{AddTagForm.jsx → AddTagForm.tsx} +9 -10
  46. data/app/javascript/components/TagEditor/{Tag.jsx → Tag.tsx} +8 -9
  47. data/app/javascript/components/{TagEditor.jsx → TagEditor.tsx} +12 -13
  48. data/app/javascript/components/Toast.tsx +61 -0
  49. data/app/javascript/components/drag/{draggedOrder.js → draggedOrder.ts} +22 -12
  50. data/app/javascript/components/drag/types.ts +28 -0
  51. data/app/javascript/components/drag/{useDragCollection.js → useDragCollection.ts} +40 -22
  52. data/app/javascript/components/drag/{useDragUploader.js → useDragUploader.ts} +34 -25
  53. data/app/javascript/components/drag/useDraggable.ts +21 -0
  54. data/app/javascript/components/{drag.js → drag.ts} +1 -0
  55. data/app/javascript/controllers/{EditPageController.js → EditPageController.ts} +3 -1
  56. data/app/javascript/controllers/{LoginController.js → LoginController.ts} +7 -3
  57. data/app/javascript/controllers/{MainController.js → MainController.ts} +19 -14
  58. data/app/javascript/features/{RichText.jsx → RichText.tsx} +3 -3
  59. data/app/javascript/{index.js → index.ts} +8 -7
  60. data/app/javascript/lib/{Tree.js → Tree.ts} +106 -85
  61. data/app/javascript/lib/{copyToClipboard.js → copyToClipboard.ts} +1 -1
  62. data/app/javascript/lib/{readyHandler.js → readyHandler.ts} +4 -2
  63. data/app/javascript/lib/{request.js → request.ts} +11 -5
  64. data/app/javascript/stores/useModalStore.ts +15 -0
  65. data/app/javascript/stores/useToastStore.ts +26 -0
  66. data/app/javascript/stores.ts +2 -0
  67. data/app/javascript/types.ts +30 -0
  68. data/app/policies/page_policy.rb +4 -0
  69. data/app/views/admin/calendars/_sidebar.html.erb +3 -0
  70. data/app/views/admin/news/_sidebar.html.erb +3 -0
  71. data/app/views/admin/pages/_list_item.html.erb +4 -22
  72. data/app/views/admin/pages/_search_bar.html.erb +12 -0
  73. data/app/views/admin/pages/index.html.erb +3 -0
  74. data/app/views/admin/pages/search.html.erb +54 -0
  75. data/app/views/feeds/pages.rss.builder +3 -9
  76. data/config/routes.rb +1 -0
  77. data/lib/pages_core/configuration/pages.rb +0 -1
  78. data/lib/rails/generators/pages_core/frontend/frontend_generator.rb +33 -17
  79. data/lib/rails/generators/pages_core/frontend/templates/application.html.erb +0 -1
  80. data/lib/rails/generators/pages_core/frontend/templates/javascript/lib/gridOverlay.ts +40 -0
  81. data/lib/rails/generators/pages_core/frontend/templates/javascript/lib/responsiveEmbeds.ts +68 -0
  82. data/lib/rails/generators/pages_core/frontend/templates/postcss.config.js +17 -0
  83. data/lib/rails/generators/pages_core/frontend/templates/stylesheets/application.postcss.css +4 -0
  84. data/lib/rails/generators/pages_core/frontend/templates/stylesheets/components/base.css +24 -0
  85. data/lib/rails/generators/pages_core/frontend/templates/stylesheets/components/layout.css +21 -0
  86. data/lib/rails/generators/pages_core/frontend/templates/stylesheets/config.css +5 -0
  87. data/lib/rails/generators/pages_core/frontend/templates/stylesheets/global/animation.css +5 -0
  88. data/lib/rails/generators/pages_core/frontend/templates/stylesheets/global/colors.css +18 -0
  89. data/lib/rails/generators/pages_core/frontend/templates/stylesheets/global/fonts.css +6 -0
  90. data/lib/rails/generators/pages_core/frontend/templates/stylesheets/global/grid.css +65 -0
  91. data/lib/rails/generators/pages_core/frontend/templates/stylesheets/global/typography.css +131 -0
  92. data/lib/rails/generators/pages_core/install/templates/pages_initializer.rb +0 -3
  93. metadata +69 -63
  94. data/app/javascript/admin-dist.js +0 -2
  95. data/app/javascript/components/ImageCropper/FocalPoint.jsx +0 -93
  96. data/app/javascript/components/Modal.jsx +0 -59
  97. data/app/javascript/components/PageImages.jsx +0 -25
  98. data/app/javascript/components/PageTree.jsx +0 -196
  99. data/app/javascript/components/RichTextToolbarButton.jsx +0 -20
  100. data/app/javascript/components/Toast.jsx +0 -72
  101. data/app/javascript/components/drag/useDraggable.js +0 -17
  102. data/app/javascript/stores/ModalStore.jsx +0 -12
  103. data/app/javascript/stores/ToastStore.jsx +0 -14
  104. data/app/javascript/stores.js +0 -2
  105. data/lib/rails/generators/pages_core/frontend/templates/javascript/lib/GridOverlay.js +0 -66
  106. data/lib/rails/generators/pages_core/frontend/templates/javascript/lib/ResponsiveEmbeds.js +0 -72
  107. data/lib/rails/generators/pages_core/frontend/templates/stylesheets/application.sass.scss +0 -15
  108. data/lib/rails/generators/pages_core/frontend/templates/stylesheets/components/base.scss +0 -12
  109. data/lib/rails/generators/pages_core/frontend/templates/stylesheets/config.scss +0 -26
  110. data/lib/rails/generators/pages_core/frontend/templates/stylesheets/framework/breakpoints.scss +0 -42
  111. data/lib/rails/generators/pages_core/frontend/templates/stylesheets/framework/clearfix.scss +0 -7
  112. data/lib/rails/generators/pages_core/frontend/templates/stylesheets/framework/fonts.scss +0 -32
  113. data/lib/rails/generators/pages_core/frontend/templates/stylesheets/framework/grid.scss +0 -168
  114. data/lib/rails/generators/pages_core/frontend/templates/stylesheets/framework/grid_overlay.scss +0 -44
  115. data/lib/rails/generators/pages_core/frontend/templates/stylesheets/global/colors.scss +0 -8
  116. data/lib/rails/generators/pages_core/frontend/templates/stylesheets/global/typography.scss +0 -90
  117. data/lib/rails/generators/pages_core/frontend/templates/stylesheets/vendor/normalize.css +0 -349
  118. /data/app/javascript/components/Attachments/{Placeholder.jsx → Placeholder.tsx} +0 -0
  119. /data/app/javascript/components/ImageGrid/{FilePlaceholder.jsx → FilePlaceholder.tsx} +0 -0
  120. /data/app/javascript/{components.js → components.ts} +0 -0
  121. /data/app/javascript/{hooks.js → hooks.ts} +0 -0
@@ -1,17 +0,0 @@
1
- import { useEffect, useRef } from "react";
2
-
3
- export default function useDraggable(draggable, startDrag) {
4
- const ref = useRef();
5
-
6
- const handleDrag = (evt) => {
7
- evt.preventDefault();
8
- evt.stopPropagation();
9
- startDrag(evt, draggable);
10
- };
11
-
12
- useEffect(() => {
13
- draggable.ref.current = ref.current;
14
- }, []);
15
-
16
- return { ref: ref, onDragStart: handleDrag, draggable: true };
17
- }
@@ -1,12 +0,0 @@
1
- import { createStore } from "redux";
2
-
3
- export default createStore((state = {}, action) => {
4
- switch(action.type) {
5
- case "OPEN":
6
- return {...state, component: action.payload };
7
- case "CLOSE":
8
- return {...state, component: null };
9
- default:
10
- return state;
11
- }
12
- });
@@ -1,14 +0,0 @@
1
- import { createStore } from "redux";
2
-
3
- export default createStore((state = [], action) => {
4
- switch(action.type) {
5
- case "ERROR":
6
- return [...state, { message: action.message, type: "error" }];
7
- case "NOTICE":
8
- return [...state, { message: action.message, type: "notice" }];
9
- case "NEXT":
10
- return state.slice(1);
11
- default:
12
- return state;
13
- }
14
- });
@@ -1,2 +0,0 @@
1
- export { default as ModalStore } from "./stores/ModalStore";
2
- export { default as ToastStore } from "./stores/ToastStore";
@@ -1,66 +0,0 @@
1
- class GridOverlay {
2
- constructor() {
3
- this.gridOverlay = null;
4
- this.showGrid = false;
5
- this.init = this.init.bind(this);
6
- }
7
-
8
- bindHotkey() {
9
- document.addEventListener("keyup", (evt) => {
10
- if (evt.ctrlKey && evt.which == 71) {
11
- this.toggle();
12
- }
13
- });
14
- }
15
-
16
- init() {
17
- this.gridOverlay = document.querySelector(".grid-overlay");
18
- if (this.gridOverlay) {
19
- this.restoreState();
20
- this.bindHotkey();
21
- this.updateDOM();
22
- }
23
- }
24
-
25
- ready(callback) {
26
- if (document.readyState === "complete" ||
27
- (document.readyState !== "loading" &&
28
- !document.documentElement.doScroll)) {
29
- callback();
30
- } else {
31
- document.addEventListener("DOMContentLoaded", callback);
32
- }
33
- }
34
-
35
- restoreState() {
36
- this.showGrid = window.localStorage.getItem("showGrid");
37
- }
38
-
39
- saveState() {
40
- if (this.showGrid) {
41
- window.localStorage.setItem("showGrid", "true");
42
- } else {
43
- window.localStorage.removeItem("showGrid");
44
- }
45
- }
46
-
47
- start() {
48
- this.ready(this.init);
49
- }
50
-
51
- toggle() {
52
- this.showGrid = !this.showGrid;
53
- this.saveState();
54
- this.updateDOM();
55
- }
56
-
57
- updateDOM() {
58
- if (this.showGrid) {
59
- this.gridOverlay.classList.add("grid-overlay--active");
60
- } else {
61
- this.gridOverlay.classList.remove("grid-overlay--active");
62
- }
63
- }
64
- }
65
-
66
- export default new GridOverlay();
@@ -1,72 +0,0 @@
1
- class ResponsiveEmbeds {
2
- readyHandler(fn) {
3
- if (document.readyState === "complete" || document.readyState === "interactive") {
4
- setTimeout(fn, 1);
5
- } else {
6
- document.addEventListener("DOMContentLoaded", fn);
7
- }
8
- }
9
-
10
- wrapEmbeds() {
11
- let selectors = [ "iframe[src*=\"bandcamp.com\"]",
12
- "iframe[src*=\"player.vimeo.com\"]",
13
- "iframe[src*=\"youtube.com\"]",
14
- "iframe[src*=\"youtube-nocookie.com\"]",
15
- "iframe[src*=\"spotify.com\"]",
16
- "iframe[src*=\"kickstarter.com\"][src*=\"video.html\"]" ];
17
-
18
- let embeds = Array.prototype.slice.call(
19
- document.querySelectorAll(selectors.join(","))
20
- );
21
-
22
- function wrapEmbed(embed) {
23
- const parent = embed.parentNode;
24
-
25
- // Recycle the existing container if the embed is already responsive.
26
- if (parent.tagName === "DIV" &&
27
- parent.childNodes.length === 1 &&
28
- parent.style.position === "relative") {
29
- return parent;
30
- }
31
-
32
- let wrapper = document.createElement("div");
33
- if (parent.tagName === "P") {
34
- parent.parentNode.replaceChild(wrapper, parent);
35
- } else {
36
- parent.replaceChild(wrapper, embed);
37
- }
38
- wrapper.appendChild(embed);
39
- return wrapper;
40
- }
41
-
42
- embeds.forEach(function (embed) {
43
- if (embed.parentNode &&
44
- embed.parentNode.classList.contains("responsive-embed")) {
45
- return;
46
- }
47
-
48
- let width = embed.offsetWidth;
49
- let height = embed.offsetHeight;
50
- let ratio = height / width;
51
- let wrapper = wrapEmbed(embed);
52
-
53
- wrapper.classList.add("responsive-embed");
54
- wrapper.style.position = "relative";
55
- wrapper.style.width = "100%";
56
- wrapper.style.paddingTop = 0;
57
- wrapper.style.paddingBottom = (ratio * 100) + "%";
58
-
59
- embed.style.position = "absolute";
60
- embed.style.width = "100%";
61
- embed.style.height = "100%";
62
- embed.style.top = "0";
63
- embed.style.left = "0";
64
- });
65
- }
66
-
67
- start() {
68
- this.readyHandler(() => this.wrapEmbeds());
69
- }
70
- }
71
-
72
- export default new ResponsiveEmbeds();
@@ -1,15 +0,0 @@
1
- // Entry point for your Sass build
2
- @import
3
- 'vendor/normalize',
4
- 'config',
5
-
6
- 'framework/breakpoints',
7
- 'framework/clearfix',
8
- 'framework/grid',
9
- 'framework/grid_overlay',
10
- 'framework/fonts',
11
-
12
- 'global/colors',
13
- 'global/typography',
14
-
15
- 'components/base';
@@ -1,12 +0,0 @@
1
- *, *:before, *:after {
2
- -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
3
- }
4
-
5
- figure {
6
- padding: 0px;
7
- margin: 0px;
8
- }
9
-
10
- img {
11
- display: block;
12
- }
@@ -1,26 +0,0 @@
1
- $breakpoints: (mobile: 900px,
2
- large: 1400px);
3
-
4
- $grids : (default: (column-count: 12,
5
- column: 94px,
6
- gutter: 24px,
7
- padding: 24px),
8
- mobile: (column-count: 4,
9
- column: 60px,
10
- gutter: 16px,
11
- padding: 16px));
12
-
13
- $spacings: (1: 8px,
14
- 2: 16px,
15
- 3: 24px,
16
- 4: 32px,
17
- 5: 40px,
18
- 6: 48px,
19
- 8: 64px,
20
- 9: 72px,
21
- 10: 80px,
22
- 16: 128px,
23
- 20: 160px);
24
-
25
- // Uncomment to limit full width
26
- // $limit-width: 1600px;
@@ -1,42 +0,0 @@
1
- // ---- Defaults --------------------------------------------------------------
2
-
3
- $breakpoints: (mobile: 900px,
4
- large: 1400px) !default;
5
-
6
-
7
- // ---- Mixins ----------------------------------------------------------------
8
-
9
- @function breakpoint-value($value) {
10
- @if type-of($value) == "string" {
11
- @return map-get($breakpoints, $value);
12
- }
13
- @else {
14
- @return $value;
15
- }
16
- }
17
-
18
- @mixin breakpoint($min: "", $max: "", $orientation: "") {
19
- $query: "screen";
20
-
21
- @if $min != "" {
22
- $query: $query + ' and (min-width: #{breakpoint-value($min)})';
23
- }
24
-
25
- @if $max != "" {
26
- $query: $query + ' and (max-width: #{breakpoint-value($max)})';
27
- }
28
-
29
- @if $orientation != "" {
30
- $query: $query + ' and (orientation: #{$orientation})';
31
- }
32
-
33
- @media #{$query} {
34
- @content;
35
- }
36
- }
37
-
38
- @mixin mobile {
39
- @include breakpoint($max: mobile) {
40
- @content
41
- }
42
- }
@@ -1,7 +0,0 @@
1
- %clearfix {
2
- &:after {
3
- content: "";
4
- display: table;
5
- clear: both;
6
- }
7
- }
@@ -1,32 +0,0 @@
1
- @use "sass:list";
2
-
3
- @function font-extension($format) {
4
- $font-extensions: (opentype: "otf", truetype: "ttf");
5
- $value: map-get($font-extensions, $format);
6
- @if $value {
7
- @return $value;
8
- }
9
- @else {
10
- @return $format;
11
- }
12
- }
13
-
14
- @function font-sources($filename, $formats: ()) {
15
- $urls: ();
16
- @each $f in list.join((woff2 woff), $formats) {
17
- $urls: list.append(
18
- $urls,
19
- url("#{$filename}.#{font-extension($f)}") format("#{$f}")
20
- );
21
- }
22
- @return list.join($urls, (), comma);
23
- }
24
-
25
- @mixin font-face($name, $filename, $weight: 400, $style: normal, $formats: ()) {
26
- @font-face {
27
- font-family: $name;
28
- font-style: $style;
29
- font-weight: $weight;
30
- src: font-sources($filename, $formats);
31
- }
32
- }
@@ -1,168 +0,0 @@
1
- @use "sass:math";
2
-
3
- // ---- Defaults --------------------------------------------------------------
4
-
5
- $base-font-size: 16px !default;
6
-
7
- $grids : (default: (column-count: 12,
8
- column: 94px,
9
- gutter: 24px,
10
- padding: 24px),
11
- mobile: (column-count: 4,
12
- column: 60px,
13
- gutter: 16px,
14
- padding: 16px)) !default;
15
-
16
- $spacings: (1: 12px,
17
- 2: 24px,
18
- 4: 40px,
19
- 8: 80px) !default;
20
-
21
- // Uncomment to limit full width
22
- // $limit-width: 1600px !default;
23
-
24
-
25
- // ---- Grid and sizing -------------------------------------------------------
26
-
27
- @function grid-value($grid, $name) {
28
- @return map-get(map-get($grids, $grid), $name);
29
- }
30
-
31
- // Inner width: Size of $grid in px, excluding outer padding
32
- @function inner-width($grid: default) {
33
- @return (grid-value($grid, column-count) * grid-value($grid, column)) +
34
- ((grid-value($grid, column-count) - 1) * grid-value($grid, gutter));
35
- }
36
-
37
- // Full width in px including padding
38
- @function full-width($grid: default) {
39
- @return inner-width($grid) + (grid-value($grid, padding) * 2);
40
- }
41
-
42
- @function px-to-percent($size, $grid: default) {
43
- @return percentage(math.div($size, full-width($grid)));
44
- }
45
-
46
- @function px-to-vw($size, $grid: default) {
47
- @return (math.div($size, full-width($grid)) * 100) * 1vw;
48
- }
49
-
50
- @function relative-size($size-px, $container: 100%, $grid: default) {
51
- @if unit($container) == '%' {
52
- $container: (inner-width($grid) * math.div($container, 100%));
53
- }
54
- @if (unit($container) != "px") {
55
- $container: columns-px($container, $grid: $grid);
56
- }
57
- @return percentage(math.div($size-px, $container));
58
- }
59
-
60
- @function rem-calc($value, $grid: default) {
61
- @if unit($value) == "rem" {
62
- @return $value;
63
- }
64
-
65
- // Assume px for values without units
66
- @if unit($value) == "" {
67
- $value: $value * 1px;
68
- }
69
-
70
- // Convert percentage to px
71
- @if unit($value) == "%" {
72
- $value: full-width($grid) * math.div($value, 100%);
73
- }
74
-
75
- @return math.div($value, $base-font-size) * 1rem;
76
- }
77
-
78
- @function spacing($key) {
79
- @return rem-calc(map-get($spacings, $key));
80
- }
81
-
82
- // Width of gutter in px
83
- @function gutter-px($grid: default) {
84
- @return grid-value($grid, gutter);
85
- }
86
-
87
- // Width of $n columns in px
88
- @function columns-px($n: 1, $grid: default) {
89
- @return grid-value($grid, column) * $n + ((ceil($n) - 1) * gutter-px($grid));
90
- }
91
-
92
- // Gutter width, optionally relative to size of $container
93
- @function gutter($container: 100%, $grid: default) {
94
- @return relative-size(gutter-px($grid: $grid), $container, $grid: $grid);
95
- }
96
-
97
- // Width of $n columns as a percentage of $container.
98
- @function columns($n: 1, $container: 100%, $grid: default) {
99
- @return relative-size(columns-px($n, $grid: $grid), $container, $grid: $grid);
100
- }
101
-
102
- // Equal to columns($n) + gutter()
103
- @function columns-and-gutter($n: 1, $container: 100%, $grid: default) {
104
- @return columns($n, $container, $grid) + gutter($container, $grid);
105
- }
106
-
107
- @function grid-adjust($size, $columns: $total-columns, $grid: default) {
108
- @return math.div($sizem math.div(columns($columns, $grid: $grid), 100%));
109
- }
110
-
111
- @function outer-padding($grid: default) {
112
- @return px-to-percent(grid-value($grid, padding), $grid: $grid);
113
- }
114
-
115
- @function limit-width-scale($value) {
116
- @return $value * math.div($limit-width, full-width());
117
- }
118
-
119
-
120
- // ---- Styles ----------------------------------------------------------------
121
-
122
- @mixin mobile-full {
123
- @include mobile {
124
- width: 100%;
125
- margin-left: 0px;
126
- margin-right: 0px;
127
- float: none;
128
- @content;
129
- }
130
- }
131
-
132
- @mixin mobile-offset {
133
- @include mobile {
134
- $offset: px-to-percent(grid-value(mobile, padding), $grid: mobile);
135
-
136
- width: 100% + $offset;
137
- margin-left: 0 - math.div($offset, 2);
138
- margin-right: 0 - math.div($offset, 2);
139
- }
140
- }
141
-
142
- @mixin grid-container-inner {
143
- margin: 0px auto;
144
- @if variable-exists(limit-width) {
145
- @include breakpoint($min: rem-calc($limit-width)) {
146
- max-width: rem-calc(limit-width-scale(inner-width()));
147
- }
148
- }
149
- }
150
-
151
- @mixin grid-container {
152
- padding-left: outer-padding();
153
- padding-right: outer-padding();
154
-
155
- @include mobile {
156
- padding-left: outer-padding(mobile);
157
- padding-right: outer-padding(mobile);
158
- }
159
-
160
- @media print {
161
- padding-left: 0px;
162
- padding-right: 0px;
163
- }
164
-
165
- .inner {
166
- @include grid-container-inner;
167
- }
168
- }
@@ -1,44 +0,0 @@
1
- $grid-overlay-color: rgba(255, 0, 255, 0.05) !default;
2
-
3
- @function grid-background($grid: default) {
4
- $gradient: ();
5
- @for $i from 1 to grid-value($grid, column-count) {
6
- $gradient: join($gradient,
7
- ($grid-overlay-color columns($i, $grid: $grid),
8
- transparent columns($i, $grid: $grid),
9
- transparent columns-and-gutter($i, $grid: $grid),
10
- $grid-overlay-color (columns-and-gutter($i, $grid: $grid))),
11
- comma);
12
- }
13
- @return linear-gradient(to right, #{$gradient});
14
- }
15
-
16
- .grid-overlay {
17
- position: fixed;
18
- z-index: 9000;
19
- top: 0px;
20
- left: 0px;
21
- width: 100%;
22
- height: 100%;
23
- background-image: grid-background(default);
24
- background-size: px-to-percent(inner-width(default)) 100%;
25
- background-repeat: no-repeat;
26
- background-position: 50% 50%;
27
- pointer-events: none;
28
- display: none;
29
-
30
- @if variable-exists(limit-width) {
31
- @include breakpoint($min: rem-calc($limit-width)) {
32
- background-size: rem-calc(limit-width-scale(inner-width())) 100%;
33
- }
34
- }
35
-
36
- @include mobile {
37
- background-image: grid-background(mobile);
38
- background-size: px-to-percent(inner-width(mobile), $grid: mobile) 100%;
39
- }
40
-
41
- &--active {
42
- display: block;
43
- }
44
- }
@@ -1,8 +0,0 @@
1
- $colors: (background: #ffffff,
2
- text: #000000,
3
- text-light: #a1a1a1,
4
- border: #e0e0e0);
5
-
6
- @function color($name) {
7
- @return map-get($colors, $name);
8
- }
@@ -1,90 +0,0 @@
1
- $font-sans: 'Helvetica', sans-serif;
2
-
3
- // ---- Mixins ----------------------------------------------------------------
4
-
5
- @mixin child-margins {
6
- &:first-child {
7
- margin-top: 0px;
8
- }
9
- &:last-child {
10
- margin-bottom: 0px;
11
- }
12
- }
13
-
14
-
15
- // ---- Definitions -----------------------------------------------------------
16
-
17
- %text-larger { font: normal 72px/1.00 $font-sans; }
18
- %text-large { font: normal 54px/1.04 $font-sans; }
19
- %text-medium { font: normal 24px/1.25 $font-sans; }
20
- %text-normal { font: normal 16px/1.50 $font-sans; }
21
- %text-small { font: normal 14px/1.5 $font-sans; }
22
-
23
- @include mobile {
24
- %text-large { font: normal 32px/1.13 $font-sans; }
25
- %text-medium { font: normal 22px/1.27 $font-sans; }
26
- %text-normal { font: normal 16px/1.31 $font-sans; }
27
- %text-small-mobile,
28
- %text-small { font: normal 13px/1.31 $font-sans; }
29
- }
30
-
31
-
32
- // ---- Rules -----------------------------------------------------------------
33
-
34
- body {
35
- @extend %text-normal;
36
- }
37
-
38
- h1, h2, h3, h4, h5, h6, ul, ol, p {
39
- margin: 0px 0px spacing(2) 0px;
40
- &:last-child {
41
- margin-bottom: 0px;
42
- }
43
- }
44
-
45
- h1 {
46
- @extend %text-larger;
47
- }
48
-
49
- h2 {
50
- @extend %text-large;
51
- margin-top: spacing(10);
52
- margin-bottom: spacing(10);
53
- @include mobile {
54
- margin-top: spacing(5);
55
- margin-bottom: spacing(5);
56
- }
57
- @include child-margins;
58
- }
59
-
60
- h3 {
61
- @extend %text-medium;
62
- margin-top: spacing(5);
63
- margin-bottom: spacing(5);
64
- @include child-margins;
65
- }
66
-
67
- h4 {
68
- font: inherit;
69
- margin-top: spacing(5);
70
- margin-bottom: 0px;
71
- @include child-margins;
72
- }
73
-
74
- a, a:visited {
75
- text-decoration: underline;
76
- }
77
-
78
- h1, h2, h3 {
79
- a, a:visited {
80
- text-decoration: none;
81
- }
82
- a:hover, a:focus {
83
- text-decoration: underline;
84
- }
85
- }
86
-
87
- figcaption {
88
- @extend %text-small;
89
- margin-top: spacing(2);
90
- }