Skip to content

Commit 232731e

Browse files
undefinedCatundefinedCat
committed
Add library
1 parent bf76094 commit 232731e

File tree

4 files changed

+230
-0
lines changed

4 files changed

+230
-0
lines changed

‎get_microcss.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<link rel="stylesheet" href="micro.css">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>micro.css</title>
8+
</head>
9+
<body>
10+
<main>
11+
<nav>
12+
<b><a href="/">micro.css</a></b>
13+
<a href="/get_microcss.html">get micro.css</a>
14+
<a href="#">how to credit</a>
15+
</nav>
16+
<h2>micro.css features!</h2>
17+
<p>micro.css is ✨lightweight✨ so it's easy to publish a sub-5KB site now!</p>
18+
<p>micro.css also has all the bells and whistles in one CSS file such as:</p>
19+
<ul>
20+
<li>A Navbar</li>
21+
<li>Forms for all kind of purposes</li>
22+
<li>SCSS variables for customization</li>
23+
<li>Simplicity of the code (the SCSS file is &gt;200 lines long)</li>
24+
<li>Detection of dark mode to be easy on eyes</li>
25+
<li>Mobile optimization (lightweight + looks great on vertical screens)</li>
26+
</ul>
27+
So, what are you waiting for and make your site with micro.css! Just click the "get micro.css" button!
28+
</main>
29+
</body>
30+
</html>

‎index.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<link rel="stylesheet" href="micro.css">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>micro.css</title>
8+
</head>
9+
<body>
10+
<main>
11+
<nav>
12+
<b><a href="/">micro.css</a></b>
13+
<a href="/get_microcss.html">get micro.css</a>
14+
<a href="#">how to credit</a>
15+
</nav>
16+
<h2>micro.css features!</h2>
17+
<p>micro.css is ✨lightweight✨ so it's easy to publish a sub-5KB site now!</p>
18+
<p>micro.css also has all the bells and whistles in one CSS file such as:</p>
19+
<ul>
20+
<li>A Navbar</li>
21+
<li>Forms for all kind of purposes</li>
22+
<li>SCSS variables for customization</li>
23+
<li>Simplicity of the code (the SCSS file is <200 lines long)</li>
24+
<li>Detection of dark mode to be easy on eyes</li>
25+
</ul>
26+
So, what are you waiting for and make your site with micro.css!
27+
</main>
28+
</body>
29+
</html>

‎micro.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎micro.scss‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
$primary-color: #6b3;
2+
$secondary-color: #8c5;
3+
$light-color: #be9;
4+
$dark-color: #473;
5+
$font: sans-serif;
6+
7+
body {
8+
font-family: $font;
9+
font-size: 16px;
10+
margin: 0;
11+
padding: 0;
12+
}
13+
14+
nav {
15+
padding-left: 1%;
16+
padding-right: 1%;
17+
background: $light-color;
18+
margin-left: -20px;
19+
margin-right: -20px;
20+
height: 36px;
21+
display: flex;
22+
align-items: center;
23+
white-space: nowrap;
24+
overflow-x: auto;
25+
}
26+
27+
li::marker {
28+
color: $secondary-color;
29+
}
30+
31+
nav a {
32+
color: #fff;
33+
font-weight: bold;
34+
display: flex;
35+
align-items: center;
36+
justify-content: center;
37+
margin-right: 2%;
38+
height: 100%;
39+
padding: 0 10px;
40+
white-space: nowrap;
41+
}
42+
43+
44+
nav a:hover {
45+
color: $secondary-color;
46+
background-color: #fff;
47+
}
48+
49+
main {
50+
max-width: 50rem;
51+
margin-left: auto;
52+
margin-right: auto;
53+
filter: drop-shadow(0px 20px 16px #999);
54+
background: #fff;
55+
padding: 20px;
56+
:not(form) {
57+
text-align: justify;
58+
}
59+
}
60+
61+
code, kbd {
62+
background: #0001;
63+
display: inline-block;
64+
padding: 4px;
65+
font-size: 16px;
66+
}
67+
68+
table, th, td {
69+
background: #eee;
70+
border: 1px solid #000;
71+
border-collapse: collapse;
72+
th {
73+
background: #ddd;
74+
}
75+
padding: 8px;
76+
font-size: 16px;
77+
}
78+
79+
blockquote {
80+
background: #f8f8f8;
81+
font-style: italic;
82+
font-family: serif;
83+
padding: 16px;
84+
display: inline-block;
85+
}
86+
87+
input {
88+
accent-color: $secondary-color;
89+
}
90+
91+
button, input[type="submit"] {
92+
background: $primary-color;
93+
border: none;
94+
cursor: pointer;
95+
padding: 8px;
96+
color: #fff;
97+
margin-top: 4px;
98+
margin-bottom: 4px;
99+
}
100+
101+
input:not([type="submit"]), textarea {
102+
border: 1px solid $primary-color;
103+
background: #f8f8f8;
104+
padding: 8px;
105+
color: #000;
106+
}
107+
108+
button:hover {
109+
background: $secondary-color;
110+
}
111+
112+
input[type="submit"]:hover {
113+
background: $secondary-color;
114+
}
115+
116+
a {
117+
text-decoration: none;
118+
color: $primary-color;
119+
}
120+
121+
a:hover {
122+
text-decoration: underline;
123+
color: $secondary-color;
124+
}
125+
126+
a:visited {
127+
color:$light-color;
128+
}
129+
130+
hr {
131+
color: $primary-color;
132+
}
133+
134+
@media (prefers-color-scheme: dark) {
135+
136+
input:not([type="submit"]), textarea {
137+
border: 1px solid $dark-color;
138+
background: #333;
139+
padding: 8px;
140+
color: #fff;
141+
}
142+
nav{
143+
background: $dark-color;
144+
}
145+
body {
146+
background: #000;
147+
}
148+
main {
149+
background: #333;
150+
filter: drop-shadow(0px 20px 16px #555);
151+
color: #fff;
152+
}
153+
blockquote {
154+
background: #282828;
155+
}
156+
table {
157+
color: #fff;
158+
th {
159+
background: #555;
160+
border: 1px solid #fff;
161+
}
162+
td {
163+
background: #444;
164+
border: 1px solid #fff;
165+
}
166+
nav {
167+
background: $dark-color;
168+
}
169+
}
170+
}

0 commit comments

Comments
 (0)