blazed-past-us 0.7.2 → 0.7.3

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.
Binary file
@@ -7,21 +7,31 @@
7
7
  <link rel="icon" type="image/svg+xml" href="./src/assets/favicon.svg" />
8
8
  </head>
9
9
  <body>
10
- <header>
11
- <div class="logo">
12
- <div class="bolt-wrapper" id="bolt">
13
- <div class="top"></div>
14
- <div class="bottom"></div>
15
- </div>
16
- </div>
17
- <div>
18
- <div class="top">
19
- <a class="title" href="#/"></a>
20
- <div class="subtitle"></div>
21
- </div>
22
- </div>
23
- </header>
24
- <div id="root"></div>
10
+ <div class="col-flexbox">
11
+ <section>
12
+ <header>
13
+ <div class="logo">
14
+ <div class="bolt-wrapper" id="bolt">
15
+ <div class="top"></div>
16
+ <div class="bottom"></div>
17
+ </div>
18
+ </div>
19
+ <div>
20
+ <div class="top">
21
+ <a class="title" href="#/"></a>
22
+ <div class="subtitle"></div>
23
+ </div>
24
+ </div>
25
+ </header>
26
+ <main>
27
+ <div id="root"></div>
28
+ </main>
29
+ </section>
30
+ <footer>
31
+ <span>Powered by </span><span>⚡</span>
32
+ <a href="https://github.com/gass-git/blazed-past-us"> blazed-past-us </a>
33
+ </footer>
34
+ </div>
25
35
  <script type="module" src="./src/main.js"></script>
26
36
  <script type="module" src="./src/stars.js"></script>
27
37
  </body>
@@ -0,0 +1,25 @@
1
+ footer {
2
+ margin-top: 5rem;
3
+ width: 100%;
4
+ display: flex;
5
+ align-items: center;
6
+ justify-content: center;
7
+ color: white;
8
+ font-family: "Merriweather Sans Light";
9
+ font-size: 0.8rem;
10
+ background-color: black;
11
+ height: 2rem;
12
+ }
13
+
14
+ footer > * {
15
+ opacity: 0.8;
16
+ }
17
+
18
+ footer a {
19
+ color: var(--light-yellow);
20
+ text-decoration: none;
21
+ }
22
+
23
+ footer a:hover {
24
+ opacity: 1;
25
+ }
@@ -1,37 +1,45 @@
1
1
  header {
2
+ z-index: 2;
2
3
  display: flex;
4
+ align-self: flex-start;
3
5
  flex-direction: row;
4
6
  align-items: center;
5
- margin: 4.5rem 0 3.5rem 1rem;
7
+ padding: 5rem 0 3rem 1rem;
8
+ width: clamp(55rem, 55rem, 55rem);
6
9
  }
7
10
 
8
11
  header .top {
9
12
  display: flex;
10
13
  flex-direction: column;
11
- letter-spacing: 0.15rem;
12
14
  }
13
15
 
14
16
  header .top .title {
15
- font-family: 'Bangers Regular';
17
+ font-family: "Bangers Regular";
16
18
  font-size: 3.1rem;
17
19
  color: var(--light-blue-09);
20
+ letter-spacing: 0.15rem;
18
21
  }
19
22
 
20
23
  header .top .subtitle {
21
- padding-left: 0.3rem;
22
24
  font-size: 0.85rem;
23
- font-family: 'Inter Extra Bold';
24
- text-transform: uppercase;
25
+ padding-left: 0.3rem;
26
+ font-family: "Inter Extra Bold";
25
27
  color: var(--light-yellow);
28
+ text-transform: uppercase;
29
+ letter-spacing: 0.15rem;
30
+ opacity: 1;
26
31
  animation: flicker 4s infinite;
27
32
  }
28
33
 
29
34
  header .logo {
30
- height: 3.75rem;
31
- width: 3.75rem;
32
- margin-right: 1.25rem;
35
+ border: 1px solid white;
36
+ height: 6.25rem;
33
37
  border: 0.25rem solid var(--light-blue-09);
34
38
  border-radius: 50%;
39
+ width: 6.25rem;
40
+ max-width: 3.75rem;
41
+ max-height: 3.75rem;
42
+ margin-right: 1.25rem;
35
43
  }
36
44
 
37
45
  .logo.rotate {
@@ -40,31 +48,34 @@ header .logo {
40
48
  }
41
49
 
42
50
  .logo #bolt {
43
- animation: flicker 4s infinite;
51
+ animation: flicker 5s infinite;
44
52
  }
45
53
 
46
54
  .logo .bolt-wrapper {
47
- width: 3.75rem;
48
- height: 3.75rem;
49
- filter: drop-shadow(0 0 0.5rem #00edfa41) drop-shadow(0 0 0.4rem #00edfa6b)
50
- drop-shadow(0 0 0.4em #00edfa69) drop-shadow(0 0 0.6rem #00edfa70);
55
+ min-width: 3.75rem;
56
+ min-height: 3.75rem;
57
+ filter: drop-shadow(0 0 0.2rem #00edfa6e) drop-shadow(0 0 0.345rem #00edfa6b)
58
+ drop-shadow(0 0 0.4275rem #00edfa69) drop-shadow(0 0 0.55rem #00edfa70);
51
59
  }
52
60
 
53
- .logo .bolt-wrapper > * {
61
+ .logo .bolt-wrapper .top {
54
62
  position: absolute;
55
63
  transform-origin: center;
56
- }
57
-
58
- .logo .bolt-wrapper .top {
59
64
  top: 19%;
60
65
  left: 33%;
66
+ width: 0;
67
+ height: 0;
61
68
  border-left: 0.9375rem solid transparent;
62
69
  border-bottom: 1.384375rem solid #ffff90;
63
70
  }
64
71
 
65
72
  .logo .bolt-wrapper .bottom {
66
- top: 45%;
73
+ position: absolute;
74
+ transform-origin: center;
75
+ top: 46%;
67
76
  right: 30%;
77
+ width: 0;
78
+ height: 0;
68
79
  border-right: 0.9375rem solid transparent;
69
80
  border-top: 1.40625rem solid #ffffb4;
70
81
  }
@@ -1,5 +1,5 @@
1
1
  .post-card {
2
- padding: 1.5625rem 2.1875rem 1.5625rem 1.25rem;
2
+ padding: 1.6rem 2.2rem 1.6rem 1.25rem;
3
3
  margin-top: 1.2rem;
4
4
  border-radius: var(--border-radius);
5
5
  opacity: 0.9;
@@ -0,0 +1,29 @@
1
+ #loader {
2
+ position: fixed;
3
+ inset: 0;
4
+ background: var(--background);
5
+ display: flex;
6
+ align-items: center;
7
+ justify-content: center;
8
+ z-index: 10;
9
+ }
10
+
11
+ #loader .spinner {
12
+ width: 5rem;
13
+ height: 5rem;
14
+ border-radius: 50%;
15
+ display: inline-block;
16
+ border-top: 0.3rem solid var(--light-blue-05);
17
+ border-right: 0.3rem solid transparent;
18
+ box-sizing: border-box;
19
+ animation: rotation 800ms linear infinite;
20
+ }
21
+
22
+ @keyframes rotation {
23
+ 0% {
24
+ transform: rotate(0deg);
25
+ }
26
+ 100% {
27
+ transform: rotate(360deg);
28
+ }
29
+ }
@@ -1,23 +1,25 @@
1
1
  @import 'fonts.css';
2
+ @import 'media.css';
2
3
  @import 'animations.css';
4
+ @import 'loader.css';
3
5
  @import 'post.css';
6
+ @import 'footer.css';
4
7
  @import 'header.css';
5
8
  @import 'home.css';
6
9
 
7
10
  :root {
8
- --background: linear-gradient(#0f0f23, #1d1d43);
11
+ --background: #0f0f23;
9
12
  --max-width: 55rem;
10
13
  --neon: #82f9ff;
11
- --post-title-color: rgb(241, 241, 241);
12
- --body-text-color: #ececec;
13
14
  --light-blue-09: rgba(129, 213, 255, 0.9);
14
15
  --light-blue-05: rgba(129, 213, 255, 0.5);
15
- --light-grey-06: rgba(255, 255, 255, 0.6);
16
16
  --light-yellow: #ffffb4;
17
17
  --body-font-family: 'Merriweather Sans Light';
18
18
  --body-font-size: 1.1rem;
19
19
  --border-radius: 0.5rem;
20
20
  --primary-box-shadow: inset 0 0 0 0.1rem var(--light-blue-05);
21
+ --h1-color: rgb(241, 241, 241);
22
+ --date-color: rgba(255, 255, 255, 0.6);
21
23
  }
22
24
 
23
25
  a,
@@ -27,21 +29,38 @@ a:visited {
27
29
  -webkit-tap-highlight-color: transparent;
28
30
  }
29
31
 
30
- html {
32
+ html,
33
+ body {
34
+ height: 100%;
31
35
  margin: 0;
32
36
  padding: 0;
37
+ }
38
+
39
+ html {
33
40
  background: var(--background);
34
- min-height: 100vh;
35
41
  }
36
42
 
37
- body {
38
- max-width: var(--max-width);
43
+ h1 {
44
+ color: var(--h1-color);
45
+ }
46
+
47
+ section {
39
48
  margin: 0 auto 0 auto;
40
- padding: 0;
41
49
  }
42
50
 
43
- h1 {
44
- color: rgb(241, 241, 241);
51
+ main {
52
+ align-items: stretch;
53
+ flex-grow: 1;
54
+ max-width: 55rem;
55
+ display: flex;
56
+ flex-direction: column;
57
+ }
58
+
59
+ .col-flexbox {
60
+ display: flex;
61
+ flex-direction: column;
62
+ justify-content: space-between;
63
+ min-height: 100%;
45
64
  }
46
65
 
47
66
  canvas {
@@ -59,8 +78,8 @@ canvas {
59
78
 
60
79
  .date {
61
80
  font-family: 'Inter Regular';
62
- font-size: 0.85rem;
63
- color: var(--light-grey-06);
81
+ color: var(--date-color);
64
82
  margin-top: 0.1rem;
83
+ font-size: 0.85rem;
65
84
  text-transform: uppercase;
66
85
  }
@@ -0,0 +1,5 @@
1
+ @media (max-width: 60rem) {
2
+ header {
3
+ width: clamp(100%, 100%, 100%);
4
+ }
5
+ }
@@ -1,5 +1,5 @@
1
1
  .post {
2
- padding: 1.56rem 2.2rem 1.55rem 1.25rem;
2
+ padding: 1.6rem 2.2rem 1.6rem 1.25rem;
3
3
  margin-top: 1.25rem;
4
4
  }
5
5
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "blazed-past-us",
3
- "version": "0.7.2",
3
+ "version": "0.7.3",
4
4
  "description": "A static blog framework made for developers that allows content to be written in Markdown directly from the IDE.",
5
5
  "license": "MIT",
6
6
  "author": "gass-git",
Binary file