Skip to content

Commit bdfbf20

Browse files
proxyeriumproxyerium
committed
update: styles changed (3)
- refactor main layouts' from class selector to id selector - improve breadcrumb - improve home, add icons for links
1 parent d1617d0 commit bdfbf20

File tree

11 files changed

+162
-129
lines changed

11 files changed

+162
-129
lines changed

‎assets/css/layouts/_default/baseof.css

+4-4
Original file line numberDiff line numberDiff line change
@@ -17,21 +17,21 @@
1717
margin: 0;
1818
padding: 0;
1919
box-sizing: border-box;
20+
list-style: none;
2021

2122
font-family: var(--font-regular);
2223
}
2324

2425
html,
2526
body {
27+
max-width: 100vw;
2628
height: 100dvh;
2729
background-color: var(--color-bg);
28-
29-
display: grid;
30-
grid-template-rows: auto 1fr;
3130
}
3231

33-
main {
32+
body {
3433
display: grid;
34+
grid-template-rows: auto 1fr;
3535
}
3636

3737
a {

‎assets/css/layouts/_default/home.css

+18-6
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,9 @@
22
padding: 0 20dvw;
33

44
display: grid;
5-
grid-template-columns: auto auto;
6-
column-gap: 2rem;
5+
grid-template-columns: 2fr 1fr;
6+
column-gap: 5vw;
77
align-content: center;
8-
9-
> * {
10-
padding: 2rem;
11-
}
128
}
139

1410
#home_dashboard {
@@ -22,7 +18,9 @@
2218
}
2319
#home_dashboard_links {
2420
display: flex;
21+
justify-content: center;
2522
align-items: center;
23+
gap: 0.5rem;
2624
}
2725

2826
#home_category {
@@ -44,3 +42,17 @@
4442
}
4543
}
4644
}
45+
46+
svg {
47+
width: 32px;
48+
height: 32px;
49+
stroke-width: 1.75;
50+
stroke: var(--color-major);
51+
52+
/* padding: 1rem; */
53+
54+
&:hover {
55+
background-color: var(--color-minor);
56+
transition: background-color 0.2s ease-in-out;
57+
}
58+
}

‎assets/css/layouts/_default/section.css

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
.section {
2-
grid-template-rows: auto 1fr auto;
3-
align-content: start;
4-
justify-items: center;
1+
#section {
2+
display: grid;
3+
grid-template-rows: 1fr;
54
}

‎assets/css/layouts/_default/single.css

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1-
.single {
2-
grid-template-rows: min-content auto;
1+
#single {
2+
display: grid;
3+
justify-content: center;
34
}

‎assets/css/layouts/partials/article.css

+47-56
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
section.article {
2-
padding: 0 15vw;
1+
#article {
2+
max-width: 100vw;
3+
padding: 2rem 15vw;
34

45
display: flex;
56
flex-direction: column;
67
}
78

8-
.article.header {
9+
#article_header {
910
height: fit-content;
1011
> h1 {
1112
text-align: center;
@@ -23,24 +24,17 @@ section.article {
2324
}
2425
}
2526
}
26-
.article.content {
27+
#article_content {
2728
margin-top: 1rem;
28-
flex-wrap: wrap;
2929
font-size: 1rem;
30-
31-
span {
32-
white-space: pre-wrap;
33-
}
34-
35-
/* headings */
30+
/* -- headings -- */
3631
h2,
3732
h3,
3833
h4,
3934
h5,
4035
h6 {
4136
color: light-dark(var(--light-minor), var(--dark-minor));
4237
margin: 1rem 0 0 0;
43-
width: fit-content;
4438

4539
&::after {
4640
margin-top: 0.4rem;
@@ -54,76 +48,73 @@ section.article {
5448
}
5549
}
5650

57-
/* normal text */
51+
/* -- normal text -- */
5852
> p {
5953
margin: 1rem 0;
54+
55+
/* -- inline code -- */
56+
& > code {
57+
margin: 0 0.2rem;
58+
background-color: rgb(35, 102, 102);
59+
}
6060
}
6161

62-
/* divider */
62+
/* -- divider -- */
6363
hr {
64-
margin: 2rem 8rem;
64+
margin: 2rem;
6565
}
6666

67-
/* blockquote */
67+
/* -- blockquote -- */
6868
blockquote {
69-
margin: 1rem 0;
70-
background: linear-gradient(
71-
to right,
72-
var(--dark-minor),
73-
var(--dark-bg) 60%
74-
);
69+
padding: 1rem;
70+
border: 2px solid #fff;
7571
}
7672

73+
/* -- block language -- */
74+
.highlight::before {
75+
display: block;
76+
/* get data-lang via js */
77+
content: attr(data-lang);
78+
font-family: var(--font-mono);
79+
font-weight: bold;
80+
81+
padding: 0.5rem 1rem;
82+
background-color: rgb(44, 85, 85);
83+
}
84+
/* -- block code -- */
7785
pre {
78-
/* override the default style of per that might be generated by Goldmark */
79-
background-color: rgb(51, 60, 60) !important;
86+
overflow-x: auto;
8087
* {
8188
font-family: var(--font-mono);
8289
}
8390

84-
code[data-lang] {
85-
&::before {
86-
display: block;
87-
88-
content: attr(data-lang);
89-
font-family: var(--font-mono);
90-
font-weight: bold;
91-
92-
padding: 1rem;
93-
background-color: rgb(44, 85, 85);
94-
}
95-
91+
> code[data-lang] {
9692
counter-reset: line;
93+
/* -- line content -- */
9794
> span {
98-
margin: 0.2rem auto;
99-
padding-left: 4rem;
100-
position: relative;
101-
/* === line numbers === */
95+
align-items: baseline;
96+
97+
/* -- line number -- */
10298
&:before {
103-
position: absolute;
99+
position: sticky;
104100
left: 0;
105-
content: counter(line);
106-
counter-increment: line;
107101

108-
width: 4rem;
109-
text-align: right;
110-
padding-right: 1.2rem;
111-
}
102+
counter-increment: line;
103+
content: counter(line);
112104

113-
> span {
114-
padding-left: 1rem;
115-
border-left: 2px solid #fff;
105+
background-color: #333;
106+
min-width: clamp(4rch, 8%, 8%);
107+
margin-right: 1rem;
108+
padding: 0.2rem 0;
109+
text-align: center;
116110
}
117111
}
118112
}
119113
}
120114

121-
/* inline code */
122-
code {
123-
background-color: rgb(35, 102, 102);
124-
}
125-
126115
img {
127-
width: 60%;
116+
display: block;
117+
margin: 1rem 0;
118+
width: 75%;
128119
}
129120
}

‎assets/css/layouts/partials/breadcrumb.css

+32-36
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,45 @@
1-
.breadcrumb {
2-
display: flex;
3-
flex-direction: row;
4-
align-items: center;
5-
6-
white-space: nowrap;
7-
1+
#breadcrumb {
82
background-color: #111111;
9-
padding: 1rem 2rem 1rem 1rem;
3+
padding: 1rem;
4+
5+
display: flex;
6+
align-items: baseline;
107

118
* {
129
font-family: var(--font-mono);
1310
font-size: 32px;
1411
}
12+
}
1513

16-
.location {
17-
display: inline-flex;
18-
font-weight: bold;
19-
20-
&::before {
21-
content: "";
22-
border-left: #fff solid 0.4rem;
23-
padding: 0.5rem;
24-
}
25-
& :first-child::before {
26-
content: "~";
27-
}
28-
& :not(:last-child):after {
29-
content: "/";
30-
}
31-
32-
a {
33-
text-decoration-line: none;
34-
color: magenta;
35-
}
14+
#breadcrumb_location {
15+
display: flex;
16+
align-items: baseline;
17+
18+
font-weight: bold;
19+
white-space: nowrap;
20+
21+
/* -- line-head border -- */
22+
border-left: #fff solid 0.3rem;
23+
padding: 0.5rem;
24+
25+
> :only-child::before,
26+
:first-child::before {
27+
content: "~";
28+
}
29+
> :not(:last-child, :only-child):after {
30+
content: "/";
3631
}
3732

38-
.signage {
39-
width: 100%;
40-
&::after {
41-
content: "_";
42-
animation: 0.5s blinking alternate infinite;
43-
}
33+
a {
34+
color: magenta;
4435
}
4536
}
4637

47-
#clock {
48-
font-size: 1rem;
38+
#breadcrumb_signage {
39+
color: #fff;
40+
width: 100%;
41+
&::after {
42+
content: "_";
43+
animation: 0.5s blinking alternate infinite;
44+
}
4945
}

‎layouts/_default/home.html

+37-10
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,48 @@
11
{{ define "main" }}
22

3-
<main class="home">
4-
{{ partial "breadcrumb" . }}
3+
<main id="home">
54

6-
<div class="home links">
7-
<nav>
8-
{{ range .Page.Params.links }}
9-
<a href="{{ .url }}">{{ .name }}</a>
10-
{{ end }}
11-
</nav>
5+
<div id="home_dashboard">
6+
<div id="home_dashboard_recently" class="card">recently</div>
7+
<div class="card">stats</div>
8+
<div id="home_dashboard_links">
9+
<a href="https://github.com/proxyerium">
10+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
11+
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
12+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
13+
<path
14+
d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" />
15+
</svg>
16+
</a>
17+
<a href="https://space.bilibili.com/24548578">
18+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
19+
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
20+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
21+
<path d="M3 10a4 4 0 0 1 4 -4h10a4 4 0 0 1 4 4v6a4 4 0 0 1 -4 4h-10a4 4 0 0 1 -4 -4v-6z" />
22+
<path d="M8 3l2 3" />
23+
<path d="M16 3l-2 3" />
24+
<path d="M9 13v-2" />
25+
<path d="M15 11v2" />
26+
</svg>
27+
</a>
28+
<a href="">
29+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
30+
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
31+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
32+
<path
33+
d="M16.5 5a4.5 4.5 0 1 1 -.653 8.953l-4.347 3.009l0 .038a3 3 0 0 1 -2.824 3l-.176 0a3 3 0 0 1 -2.94 -2.402l-2.56 -1.098v-3.5l3.51 1.755a2.989 2.989 0 0 1 2.834 -.635l2.727 -3.818a4.5 4.5 0 0 1 4.429 -5.302z" />
34+
<circle cx="16.5" cy="9.5" r="1" fill="currentColor" />
35+
</svg>
36+
</a>
37+
</div>
1238
</div>
1339

14-
<div class="home category">
40+
<div id="home_category">
1541
{{ range .Site.Sections.ByWeight }}
16-
<a href="{{ .RelPermalink }}">::{{ .Section }} -></a>
42+
<a href="{{ .RelPermalink }}">::{{ .Section }} -></a>
1743
{{ end }}
1844
</div>
45+
1946
</main>
2047

2148

‎layouts/_default/section.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{{ define "main" }}
2-
<main class="section">
2+
<main id="section">
33
{{ .Content }}
44
{{ partial "list" . }}
55
</main>

0 commit comments

Comments
 (0)