Lokasi ngalangkungan proxy:   [ UP ]  
[Ngawartoskeun bug]   [Panyetelan cookie]                
Skip to content

Commit 3fb1e73

Browse files
authored
[feature] add options to hide bookmarks
1 parent 4694fce commit 3fb1e73

30 files changed

Lines changed: 895 additions & 214 deletions

background/abstract.jpg

167 KB
Loading

background/gray-steps.jpg

775 KB
Loading

background/tallneck.png

1.95 MB
Loading

css/background.css

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
.background {
2+
position: fixed;
3+
top: 0;
4+
left: 0;
5+
width: 100vw;
6+
height: 100vh;
7+
pointer-events: none;
8+
z-index: var(--z-index-background);
9+
}
10+
11+
.background-image {
12+
background-image: var(--background-image);
13+
background-attachment: fixed;
14+
background-size: cover;
15+
background-position: center;
16+
position: absolute;
17+
top: 0;
18+
left: 0;
19+
width: 100%;
20+
height: 100%;
21+
pointer-events: none;
22+
display: block;
23+
opacity: var(--background-opacity);
24+
/* filter: blur(var(--background-blur)) grayscale(var(--background-grayscale)); */
25+
}
26+
27+
.background-accent {
28+
background-color: rgba(var(--accent), var(--background-accent-opacity));
29+
position: absolute;
30+
top: 0;
31+
left: 0;
32+
width: 100%;
33+
height: 100%;
34+
pointer-events: none;
35+
display: block;
36+
}

css/base.css

Lines changed: 61 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,57 @@
11
:root {
2-
--black: #222222;
3-
--white: #ffffff;
4-
--gray-01: #262831;
5-
--gray-02: #2f333e;
6-
--gray-03: #393e4b;
7-
--gray-04: #434958;
8-
--gray-05: #4d5465;
9-
--gray-06: #575f72;
10-
--gray-07: #616a7f;
11-
--gray-08: #6b758c;
12-
--gray-09: #758099;
13-
--gray-10: #7f8ba6;
14-
--gray-11: #8997b4;
15-
--gray-12: #95a2bb;
16-
--gray-13: #a2adc3;
17-
--gray-14: #aeb8cb;
18-
--gray-15: #bbc3d3;
19-
--gray-16: #c7ceda;
20-
--gray-17: #d4d9e2;
21-
--gray-18: #e0e4ea;
22-
--gray-19: #edeff2;
23-
--gray-20: #fafafa;
24-
--root-font-size: 14px;
25-
--radius: 2px;
2+
--black: 0, 0, 0;
3+
--white: 255, 255, 255;
4+
--gray-01: 38, 40, 49;
5+
--gray-02: 47, 51, 62;
6+
--gray-03: 57, 62, 75;
7+
--gray-04: 67, 73, 88;
8+
--gray-05: 77, 84, 101;
9+
--gray-06: 87, 95, 114;
10+
--gray-07: 97, 106, 127;
11+
--gray-08: 107, 117, 140;
12+
--gray-09: 117, 128, 153;
13+
--gray-10: 127, 139, 166;
14+
--gray-11: 137, 151, 180;
15+
--gray-12: 149, 162, 187;
16+
--gray-13: 162, 173, 195;
17+
--gray-14: 174, 184, 203;
18+
--gray-15: 187, 195, 211;
19+
--gray-16: 199, 206, 218;
20+
--gray-17: 212, 217, 226;
21+
--gray-18: 224, 228, 234;
22+
--gray-19: 237, 239, 242;
23+
--gray-20: 250, 250, 250;
2624
--accent: 0, 255, 0;
27-
--line-width: 3px;
28-
--background: var(--gray-01);
25+
--root-font-size: 14px;
26+
--radius: 0.2em;
27+
--line-width: 0.2em;
28+
--background: rgb(var(--gray-01));
2929
--gutter: 0.5em;
3030
--animation-speed-fast: 0.2s;
31-
--animation-speed-medium: 0.3s;
32-
--animation-speed-slow: 0.4s;
31+
--animation-speed-medium: 0.4s;
32+
--animation-speed-slow: 0.6s;
3333
--font-regular: "Open Sans Regular", sans-serif;
3434
--font-bold: "Open Sans Bold", sans-serif;
3535
--font-light: "Open Sans Light", sans-serif;
3636
--font-fjalla: "Fjalla One Regular", sans-serif;
37+
--z-index-background: 1000;
38+
--z-index-link: 2000;
39+
--z-index-header: 3000;
40+
--z-index-tip: 4000;
41+
--z-index-shade: 5000;
42+
--z-index-modal: 6000;
43+
--z-index-menu: 7000;
44+
--background-image: none;
45+
--background-opacity: 1;
46+
--background-accent-opacity: 0;
47+
--background-blur: 0;
3748
/* breakpoint reference */
3849
/* can not be used in @media as of yet */
3950
--breakpoint-sm: 550px;
4051
--breakpoint-md: 700px;
4152
--breakpoint-lg: 900px;
4253
--breakpoint-xl: 1100px;
4354
--breakpoint-xxl: 1600px;
44-
--z-index-link: 1000;
45-
--z-index-header: 2000;
46-
--z-index-tip: 3000;
47-
--z-index-shade: 4000;
48-
--z-index-modal: 5000;
49-
--z-index-menu: 6000;
5055
}
5156

5257
:root.is-link-block {
@@ -73,7 +78,7 @@
7378

7479
::selection {
7580
background-color: rgb(var(--accent));
76-
color: var(--white);
81+
color: rgb(var(--white));
7782
}
7883

7984
html {
@@ -82,8 +87,28 @@ html {
8287

8388
body {
8489
background-color: var(--background);
85-
color: var(--white);
90+
color: rgb(var(--white));
8691
font-size: 1rem;
8792
line-height: 1.6;
8893
font-family: var(--font-regular);
94+
display: flex;
95+
flex-direction: column;
96+
height: 100vh;
97+
}
98+
99+
.is-alignment-vertical-top body {
100+
justify-content: flex-start;
101+
}
102+
103+
.is-alignment-vertical-center body {
104+
justify-content: center;
105+
}
106+
107+
.is-alignment-vertical-bottom body {
108+
justify-content: flex-end;
109+
}
110+
111+
.is-link body {
112+
display: inherit;
113+
height: inherit;
89114
}

css/button.css

Lines changed: 39 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ button,
33
input[type="button"],
44
input[type="reset"],
55
input[type="submit"] {
6-
background-color: var(--gray-02);
6+
background-color: rgb(var(--gray-02));
77
padding: 0.125em 1em;
88
margin: 0 0 1em 0;
9-
color: var(--gray-12);
9+
color: rgb(var(--gray-12));
1010
font-size: 1em;
1111
font-family: var(--font-regular);
1212
min-height: 2.5em;
@@ -39,20 +39,20 @@ input[type="reset"]:hover,
3939
input[type="reset"]:focus,
4040
input[type="submit"]:hover,
4141
input[type="submit"]:focus {
42-
background-color: var(--gray-03);
43-
border-bottom-color: var(--gray-08);
44-
color: var(--white);
45-
outline: 0;
42+
background-color: rgb(var(--gray-03));
43+
border-bottom-color: rgb(var(--gray-08));
44+
color: rgb(var(--white));
45+
outline: none;
4646
}
4747

4848
button:active,
4949
.button:active,
5050
input[type="button"]:active,
5151
input[type="reset"]:active,
5252
input[type="submit"]:active {
53-
background-color: var(--gray-04);
53+
background-color: rgb(var(--gray-04));
5454
border-bottom-color: rgb(var(--accent));
55-
color: var(--white);
55+
color: rgb(var(--white));
5656
transition: none;
5757
}
5858

@@ -64,9 +64,9 @@ button[disabled]:focus,
6464
.button[disabled]:focus,
6565
button[disabled]:active,
6666
.button[disabled]:active {
67-
background-color: var(--gray-02);
67+
background-color: rgb(var(--gray-02));
6868
border-color: transparent;
69-
color: var(--gray-04);
69+
color: rgb(var(--gray-04));
7070
cursor: default;
7171
}
7272

@@ -84,7 +84,7 @@ button [class*=" icon-"],
8484

8585
.button.active {
8686
border-bottom-color: rgb(var(--accent));
87-
color: var(--white);
87+
color: rgb(var(--white));
8888
}
8989

9090
.button-small {
@@ -148,3 +148,31 @@ button [class*=" button-"]:last-child,
148148
.button [class*=" button-"]:last-child {
149149
margin-right: 0;
150150
}
151+
152+
.button-link {
153+
background-color: transparent;
154+
border: 0;
155+
color: rgb(var(--gray-10));
156+
}
157+
158+
.button-link[disabled] {
159+
background-color: transparent;
160+
color: transparent;
161+
}
162+
163+
.button-link:hover[disabled],
164+
.button-link:focus[disabled] {
165+
background-color: transparent;
166+
color: transparent;
167+
}
168+
169+
.button-link:hover,
170+
.button-link:focus {
171+
background-color: transparent;
172+
color: rgb(var(--gray-14));
173+
}
174+
175+
.button-link:active {
176+
background-color: transparent;
177+
color: rgb(var(--gray-18));
178+
}

css/clock.css

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
border-radius: var(--radius);
55
font-size: 1em;
66
font-family: var(--font-fjalla);
7-
color: var(--white);
7+
color: rgb(var(--white));
88
width: 100%;
99
min-height: 2.5em;
1010
display: flex;
@@ -47,17 +47,11 @@
4747
}
4848

4949
.clock-hours {
50-
color: var(--white);
51-
}
52-
53-
.clock-minutes {
54-
color: var(--gray-16);
55-
}
56-
57-
.clock-seconds {
58-
color: var(--gray-12);
50+
color: rgb(var(--white));
5951
}
6052

53+
.clock-minutes,
54+
.clock-seconds,
6155
.clock-meridiem {
62-
color: var(--gray-10);
56+
color: rgb(var(--gray-19));
6357
}

css/date.css

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
border-radius: var(--radius);
55
font-size: 1em;
66
font-family: var(--font-fjalla);
7-
color: var(--white);
7+
color: rgb(var(--white));
88
width: 100%;
99
min-height: 2.5em;
1010
display: flex;
@@ -46,18 +46,12 @@
4646
margin-right: 0.125em;
4747
}
4848

49-
.date-date {
50-
color: var(--white);
51-
}
52-
5349
.date-day {
54-
color: var(--gray-16);
55-
}
56-
57-
.date-month {
58-
color: var(--gray-12);
50+
color: rgb(var(--white));
5951
}
6052

53+
.date-date,
54+
.date-month,
6155
.date-year {
62-
color: var(--gray-10);
56+
color: rgb(var(--gray-19));
6357
}

0 commit comments

Comments
 (0)