From 5dfc8377a72138d25881a968c6415002a990f3bc Mon Sep 17 00:00:00 2001 From: 728 Date: Thu, 11 Aug 2022 15:58:11 +0800 Subject: [PATCH] style --- ismism.ts/ui/index.html | 130 ++++++++++++++++++++++++++++------------ 1 file changed, 92 insertions(+), 38 deletions(-) diff --git a/ismism.ts/ui/index.html b/ismism.ts/ui/index.html index 43cbfde..6b923f0 100644 --- a/ismism.ts/ui/index.html +++ b/ismism.ts/ui/index.html @@ -20,6 +20,7 @@ --color-gray: hsl(0, 0%, 90%); --color-white: hsl(0, 0%, 95%); --interval: 20px; + --shadow: 6px; } body { @@ -33,10 +34,12 @@ padding: 30px; text-align: center; background: var(--color-black); + box-shadow: var(--color-black) 1px 0 var(--shadow); } .header h1 { font-size: 50px; + text-shadow: var(--color-red) 1px 0 var(--shadow); } .left { @@ -56,19 +59,49 @@ padding: var(--interval); } - .card { + a, + a:visited { + text-decoration: none; + color: inherit; + } + + article { background: var(--color-black); padding: var(--interval); margin-top: var(--interval); + border-radius: 6px; + box-shadow: var(--color-black) 1px 0 var(--shadow); } - .card .title { + header { color: var(--color-gray); } - .card .tag { - list-style-type: none; + header h1, + header h2, + header h3 { + display: inline-block; + } + + header code { + font-family: consolas, "Courier New", Courier, monospace; + font-size: 20px; + background: var(--color-purple); + border-radius: 6px; + color: var(--color-black); + padding: 0.5ch; + margin-right: 0.5ch; + } + + .tag { + list-style: none; + padding: 0; color: var(--color-yellow); + font-size: 15px; + } + + .tag li { + display: inline-block; } .row:after { @@ -77,8 +110,9 @@ clear: both; } - .footer { + footer { background: var(--color-black); + box-shadow: var(--color-black) 1px 0 var(--shadow); text-align: center; padding: var(--interval); margin-top: var(--interval); @@ -97,55 +131,75 @@
-

主义主义 活动公示

-

This is a test.

+

主义主义 活动公示

+

This is a slogan.

-
-

TITLE HEADING

-
Title description, Dec 7, 2017
-
Image
-

Some text..

-

Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do - eiusmod - tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud - exercitation - ullamco.

-
-
-

TITLE HEADING

-
Title description, Sep 2, 2017
-
Image
-

Some text..

-

Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do - eiusmod - tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud - exercitation - ullamco.

-
+
+
+ + +
+
+
Image
+

Some text..

+

Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do + eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation + ullamco.

+
+
+
+
+ + +
+
+
Image
+

Some text..

+

Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do + eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation + ullamco.

+
+
-
+
-
+ +

相关链接

Some text..

-
+
-
+

联系方式

-
+