@angelscmf/front 1.0.14 → 1.0.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/sass/_AngelsHTMLElements.scss +38 -6
  3. package/sass/_AngelsPageLayout.scss +66 -5
  4. package/sass/_AngelsTheme.scss +2 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@angelscmf/front",
3
- "version": "1.0.14",
3
+ "version": "1.0.16",
4
4
  "description": "",
5
5
  "license": "ISC",
6
6
  "author": "",
package/sass/_AngelsHTMLElements.scss CHANGED
@@ -17,6 +17,8 @@
17
17
  * * Adds `textarea` styles.
18
18
  */
19
19
 
20
+ @use "AngelsVariables";
21
+
20
22
  * {
21
23
  box-sizing: border-box;
22
24
  }
@@ -92,52 +94,82 @@ button[type=submit] {
92
94
  }
93
95
  }
94
96
 
97
+ :root {
98
+ --a-header1-margin: 0;
99
+ --a-header1-size: #{AngelsVariables.$a-font-size + 6};
100
+ }
101
+
95
102
  h1,
96
103
  h1.a-h1 {
97
104
  color: var(--a-header-color);
98
105
  font-size: var(--a-header1-size);
99
- margin: 0 0 12px 0;
106
+ margin: var(--a-header1-margin);
100
107
  padding: 0;
101
108
  }
102
109
 
110
+ :root {
111
+ --a-header2-margin: 0;
112
+ --a-header2-size: #{AngelsVariables.$a-font-size + 5};
113
+ }
114
+
103
115
  h2,
104
116
  h2.a-h2 {
105
117
  color: var(--a-header-color);
106
118
  font-size: var(--a-header2-size);
107
119
  font-weight: normal;
108
120
  letter-spacing: 2px;
109
- margin: 0 0 12px 0;
121
+ margin: var(--a-header2-margin);
110
122
  padding: 0;
111
123
  }
112
124
 
125
+ :root {
126
+ --a-header3-margin: 0;
127
+ --a-header3-size: #{AngelsVariables.$a-font-size + 4};
128
+ }
129
+
113
130
  h3,
114
131
  h3.a-h3 {
115
132
  color: var(--a-header-color);
116
133
  font-size: var(--a-header3-size);
117
134
  font-weight: normal;
118
135
  letter-spacing: 2px;
119
- margin: 0 0 8px 0;
136
+ margin: var(--a-header3-margin);
120
137
  padding: 0;
121
138
  }
122
139
 
140
+ :root {
141
+ --a-header4-margin: 0;
142
+ --a-header4-size: #{AngelsVariables.$a-font-size + 3};
143
+ }
144
+
123
145
  h4,
124
146
  h4.a-h4 {
125
147
  font-size: var(--a-header4-size);
126
- margin: 0 0 8px 0;
148
+ margin: var(--a-header4-margin);
127
149
  padding: 0;
128
150
  }
129
151
 
152
+ :root {
153
+ --a-header5-margin: 0;
154
+ --a-header5-size: #{AngelsVariables.$a-font-size + 2};
155
+ }
156
+
130
157
  h5,
131
158
  h5.a-h5 {
132
159
  font-size: var(--a-header5-size);
133
- margin: 0 0 4px 0;
160
+ margin: var(--a-header5-margin);
134
161
  padding: 0;
135
162
  }
136
163
 
164
+ :root {
165
+ --a-header6-margin: 0;
166
+ --a-header6-size: #{AngelsVariables.$a-font-size + 1};
167
+ }
168
+
137
169
  h6,
138
170
  h6.a-h6 {
139
171
  font-size: var(--a-header6-size);
140
- margin: 0 0 4px 0;
172
+ margin: var(--a-header6-margin);
141
173
  padding: 0;
142
174
  }
143
175
 
package/sass/_AngelsPageLayout.scss CHANGED
@@ -63,25 +63,32 @@ a-page-header {
63
63
  }
64
64
  }
65
65
 
66
+ :root {
67
+ --a-page-body-gap: var(--a-4x-size);
68
+ --a-page-body-padding: var(--a-4x-size) var(--a-size);
69
+ }
70
+
66
71
  a-page-body {
67
72
  display: flex;
68
73
  flex-direction: column;
69
74
  flex-grow: 1;
70
- gap: 1em;
71
- padding: 1em;
75
+ gap: var(--a-page-body-gap);
76
+ padding: var(--a-page-body-padding);
72
77
  }
73
78
 
74
79
  :root {
75
80
  --a-page-footer-background-color: #{AngelsVariables.$a-second-background-color};
81
+ --a-page-footer-padding: var(--a-size);
82
+ --a-page-footer-gap: var(--a-double-size);
76
83
  --a-page-footer-text-color: #{AngelsVariables.$a-second-text-color};
77
- --a-page-footer-padding: 1rem;
78
84
  }
79
85
 
80
86
  a-page-footer {
81
87
  background-color: var(--a-page-footer-background-color);
82
88
  color: var(--a-page-footer-text-color);
83
- display: flex;
89
+ display: grid;
84
90
  font-family: monospace;
91
+ gap: var(--a-page-footer-gap);
85
92
  padding: var(--a-page-footer-padding);
86
93
 
87
94
  &:empty {
@@ -101,4 +108,58 @@ a-block-body {
101
108
  gap: var(--a-double-size);
102
109
  }
103
110
 
104
- a-block-footer {}
111
+ a-block-footer {}
112
+
113
+ a-infra {
114
+ color: steelblue;
115
+ display: flex;
116
+ gap: var(--a-double-size);
117
+ flex-wrap: wrap;
118
+ align-items: flex-start;
119
+ justify-content: center;
120
+
121
+ address {
122
+ font-style: normal;
123
+ }
124
+ }
125
+
126
+ a-infral {
127
+ display: grid;
128
+ gap: var(--a-size);
129
+ min-width: 200px;
130
+
131
+ >header {}
132
+
133
+ >nav {
134
+ display: grid;
135
+
136
+ >a {
137
+ width: fit-content;
138
+ }
139
+ }
140
+ }
141
+
142
+ a-law {
143
+ font-family: monospace;
144
+
145
+ display: grid;
146
+ gap: var(--a-size);
147
+ }
148
+
149
+
150
+ a-properties {
151
+ display: grid;
152
+ }
153
+
154
+ a-property {
155
+
156
+ &strong {
157
+
158
+ &::after {
159
+ content: ':';
160
+ display: inline-block;
161
+ }
162
+ }
163
+
164
+ &span {}
165
+ }
package/sass/_AngelsTheme.scss CHANGED
@@ -19,6 +19,8 @@
19
19
  --a-size: 16px;
20
20
  // 2em = 32px;
21
21
  --a-double-size: 32px;
22
+ // 4em = 64px;
23
+ --a-4x-size: 64px;
22
24
  }
23
25
 
24
26
  :root {
@@ -27,12 +29,6 @@
27
29
  --a-font-family: Verdana, Arial, Helvetica, sans-serif;
28
30
  --a-font-size: 16px;
29
31
  --a-header-color: orangered;
30
- --a-header1-size: #{AngelsVariables.$a-font-size + 6};
31
- --a-header2-size: #{AngelsVariables.$a-font-size + 5};
32
- --a-header3-size: #{AngelsVariables.$a-font-size + 4};
33
- --a-header4-size: #{AngelsVariables.$a-font-size + 3};
34
- --a-header5-size: #{AngelsVariables.$a-font-size + 2};
35
- --a-header6-size: #{AngelsVariables.$a-font-size + 1};
36
32
  --a-line-height: 24px;
37
33
  --a-note-color: palevioletred;
38
34
  --a-text-color: #4B2E2E;