11.changelog {
22 display : grid ;
3+ align-content : space-between ;
34 gap : 1rem ;
45 position : relative ;
5-
6- ul {
7- list-style-type : none ;
8- padding : 0.5rem ;
9- padding-left : 1.5rem ;
10- margin-bottom : 1rem ;
11-
12- li {
13- padding : 0.2rem 0 ;
14- position : relative ;
15-
16- // Add custom bullets using pseudo-elements
17- & ::before {
18- content : ' •' ; // Bullet character
19- position : absolute ;
20- color : $accent ; // Your custom color
21- font-size : 1.2em ; // Adjust size if needed
22- line-height : 1 ;
23- left : -0.8em ; // Adjust position to align bullets
24- }
25- }
26-
27- code {
28- color : $accent ;
29- font-weight : 500 ;
30- padding : .1rem .3rem ;
31- border-radius : .4rem ;
32- background-color : rgba ($accent , 0.2 );
33- }
34- }
6+ min-height : 100% ;
357
368 h2 ,
379 strong {
3810 color : $accent ;
3911 }
4012
41-
42-
4313 & __header ,
4414 & __footer {
4515 position : sticky ;
4616 z-index : 10 ;
4717 padding : 1rem 0 0.5rem 0 ;
48-
18+ height : fit-content ;
4919 }
5020
5121 & __header {
5222 top : 0 ;
53- // background-color: rgba($bg, 0.1);
54- // backdrop-filter: blur(1rem);
55-
56- background : linear-gradient (180deg , rgba ($bg , 1 ) 70% , rgba ($bg , 0.6 ));
57- box-shadow : 0 10px 20px 20px rgba ($bg , 0.6 );
23+ background : linear-gradient (180deg , rgba ($bg , 1 ) 0% , rgba ($bg , 0 ) 100% ) no-repeat ;
5824
5925 h1 {
6026 display : flex ;
6430 }
6531 }
6632
67- & __logo {
68- --img-size : 2.8rem ;
69- display : flex ;
70- align-items : center ;
71- gap : 1rem ;
72- font-weight : 500 ;
73- background-image : linear-gradient (135deg , $accent 30% , rgba ($accent , 0.5 ));
74- -webkit-background-clip : text ;
75- -webkit-text-fill-color : transparent ;
76- background-clip : text ;
77- text-fill-color : transparent ;
78- transition : all 0.25s ease-in-out ;
79-
80- img {
81- width : var (--img-size );
82- aspect-ratio : 1 / 1 ;
83- }
33+ & __footer {
34+ bottom : 0 ;
35+ text-align : center ;
36+ background : linear-gradient (to bottom , rgba ($bg , 0 ) 0% , rgba ($bg , 1 ) 100% ) no-repeat ;
8437
85- & :hover {
86- gap : 0.8rem ;
38+ a {
39+ // background-image: $bg-gradient;
40+ background-color : $accent ;
41+ color : $on-accent ;
42+ border-radius : 0.5rem ;
43+ padding : 0.2rem 0.5rem ;
44+ font-weight : bold ;
45+ transition : .3s ease-in-out ;
46+
47+ & :hover {
48+ background-color : rgba ($accent , .2 );
49+ color : $accent ;
50+ }
8751 }
8852 }
8953
10266 }
10367 }
10468
105- & __changes {
106- padding : 1rem ;
69+ // ul {
70+ // list-style-type: none;
71+ // padding: 0.5rem;
72+ // padding-left: 1.5rem;
73+ // margin-bottom: 1rem;
74+
75+ // li {
76+ // padding: 0.2rem 0;
77+ // position: relative;
78+
79+ // // Add custom bullets using pseudo-elements
80+ // &::before {
81+ // content: '•'; // Bullet character
82+ // position: absolute;
83+ // color: $accent; // Your custom color
84+ // font-size: 1.2em; // Adjust size if needed
85+ // line-height: 1;
86+ // left: -0.8em; // Adjust position to align bullets
87+ // }
88+ // }
89+
90+ // code {
91+ // color: $accent;
92+ // font-weight: 500;
93+ // padding: .1rem .3rem;
94+ // border-radius: .4rem;
95+ // background-color: rgba($accent, 0.2);
96+ // }
97+ // }
98+
99+
100+ // &__logo {
101+ // --img-size: 2.8rem;
102+ // display: flex;
103+ // align-items: center;
104+ // gap: 1rem;
105+ // font-weight: 500;
106+ // background-image: linear-gradient(135deg, $accent 30%, rgba($accent, 0.5));
107+ // -webkit-background-clip: text;
108+ // -webkit-text-fill-color: transparent;
109+ // background-clip: text;
110+ // text-fill-color: transparent;
111+ // transition: all 0.25s ease-in-out;
112+
113+ // img {
114+ // width: var(--img-size);
115+ // aspect-ratio: 1/1;
116+ // }
117+
118+ // &:hover {
119+ // gap: 0.8rem;
120+ // }
121+ // }
122+
123+
124+
125+ // &__changes {
126+ // padding: 1rem;
127+
128+ // h2 {
129+ // margin-bottom: 1.5rem;
130+ // }
131+
132+ // h3 {
133+ // font-size: 1.5em;
134+ // margin-bottom: 0.2rem;
135+ // }
136+
137+ // p {
138+ // text-align: center
139+ // }
140+
141+ // a {
142+ // @extend %link_hover_underlined;
143+ // color: $accent !important;
144+ // }
145+ // }
146+
147+ // &__seefullchangelog {
148+ // display: inline-block;
149+ // text-transform: uppercase;
150+ // }
151+
152+ // p:has(>.changelog__seefullchangelog) {
153+ // &:not(&:last-child) {
154+ // margin-bottom: 4rem;
155+ // }
156+ // }
107157
108- h2 {
109- margin-bottom : 1.5rem ;
110- }
111-
112- h3 {
113- font-size : 1.5em ;
114- margin-bottom : 0.2rem ;
115- }
116158
117- p {
118- text-align : center
119- }
120-
121- a {
122- @extend %link_hover_underlined ;
123- color : $accent !important ;
124- }
125- }
126-
127- & __seefullchangelog {
128- display : inline-block ;
129- text-transform : uppercase ;
130- }
131-
132- p :has (> .changelog__seefullchangelog ) {
133- & :not (&:last-child ) {
134- margin-bottom : 4rem ;
135- }
136- }
137-
138- & __footer {
139- bottom : 0 ;
140- text-align : center ;
141- background : linear-gradient (to bottom , rgba ($bg , 0.1 ), rgba ($bg , 1 ) 75% );
142-
143- a {
144- // background-image: $bg-gradient;
145- background-color : $accent ;
146- color : $on-accent ;
147- border-radius : 0.5rem ;
148- padding : 0.2rem 0.5rem ;
149- font-weight : bold ;
150- transition : .3s ease-in-out ;
151-
152- & :hover {
153- background-color : rgba ($accent , .2 );
154- color : $accent ;
155- }
156- }
157- }
158159}
0 commit comments