Skip to content

Commit d85b03c

Browse files
fuzzzerdfuzzzerd
committed
initial working sample
1 parent a47dfcc commit d85b03c

6 files changed

Lines changed: 344 additions & 0 deletions

File tree

‎.editorconfig‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# editorconfig.org
2+
root = true
3+
4+
[*]
5+
indent_style = space
6+
indent_size = 2
7+
end_of_line = lf
8+
charset = utf-8
9+
trim_trailing_whitespace = true
10+
insert_final_newline = true

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
# tinycss
2+
23
A very tiny CSS starter kit.

‎index.html‎

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
<!DOCTYPE html>
2+
3+
<html lang="en">
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
8+
<title>Tiny CSS Test Page</title>
9+
10+
<link rel="stylesheet" href="tinycss.min.css" />
11+
</head>
12+
13+
<body>
14+
<header>
15+
<nav>
16+
<a href="/">a link.</a>
17+
<a href="/">a link.</a>
18+
<a href="/">a link.</a>
19+
<a href="/">a link.</a>
20+
</nav>
21+
</header>
22+
<main>
23+
<h1>Header 1</h1>
24+
<p>
25+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a mauris
26+
eleifend, posuere ipsum sit amet, mattis elit. Integer nec tortor augue.
27+
Quisque dignissim odio id urna tempor efficitur. Vivamus tincidunt
28+
consectetur magna, sit amet rutrum sapien fermentum eget. Integer
29+
consectetur ac massa ac consectetur. Vestibulum sed quam vitae sem
30+
lacinia sodales sed ut turpis. Sed pharetra volutpat mattis. Sed
31+
interdum dui in rhoncus faucibus. Aenean nec maximus nisi. Duis justo
32+
libero, dictum id consequat vel, rhoncus sit amet justo. Nam dapibus
33+
ligula at metus pellentesque, in facilisis nunc lacinia. Suspendisse nec
34+
arcu a ante ultrices lacinia ac quis dui. Sed efficitur at nisi in
35+
pellentesque. Pellentesque dapibus, felis eget faucibus ullamcorper, sem
36+
risus aliquet eros, a lacinia sem massa quis erat.
37+
</p>
38+
<a href="/">a link.</a> <a href="/not-visited.link">unvisited link.</a>
39+
<p>
40+
Curabitur id nisi quis dolor rhoncus euismod a id massa. Sed at cursus
41+
arcu, rutrum ultricies lorem. In ultrices arcu sit amet ipsum suscipit
42+
consequat. Fusce ornare, diam ac mollis sodales, tortor lorem
43+
scelerisque tellus, sit amet facilisis arcu sem ac dolor. Mauris ut
44+
tellus ac massa consequat euismod et et justo. Nulla at porttitor massa.
45+
Duis congue viverra condimentum. Suspendisse ornare massa leo, sed
46+
finibus lorem ultrices in. Suspendisse convallis metus eget scelerisque
47+
tempus. Quisque vitae ullamcorper eros. Etiam vel enim vel ipsum
48+
vestibulum placerat. Phasellus posuere ex augue, sed vulputate massa
49+
imperdiet at. Suspendisse vulputate tempus nisi, non vehicula lorem
50+
venenatis eu. Donec at luctus urna.
51+
</p>
52+
53+
<h2>Table Of Data</h2>
54+
<table>
55+
<thead>
56+
<tr>
57+
<th>Entry Header 1</th>
58+
<th>Entry Header 2</th>
59+
<th>Entry Header 3</th>
60+
<th>Entry Header 4</th>
61+
</tr>
62+
</thead>
63+
<tbody>
64+
<tr>
65+
<td>Entry First Line 1</td>
66+
<td>Entry First Line 2</td>
67+
<td>Entry First Line 3</td>
68+
<td>Entry First Line 4</td>
69+
</tr>
70+
<tr>
71+
<td>Entry Line 1</td>
72+
<td>Entry Line 2</td>
73+
<td>Entry Line 3</td>
74+
<td>Entry Line 4</td>
75+
</tr>
76+
<tr>
77+
<td>Entry Last Line 1</td>
78+
<td>Entry Last Line 2</td>
79+
<td>Entry Last Line 3</td>
80+
<td>Entry Last Line 4</td>
81+
</tr>
82+
<tr>
83+
<td>Entry Line 1</td>
84+
<td>Entry Line 2</td>
85+
<td>Entry Line 3</td>
86+
<td>Entry Line 4</td>
87+
</tr>
88+
<tr>
89+
<td>Entry Last Line 1</td>
90+
<td>Entry Last Line 2</td>
91+
<td>Entry Last Line 3</td>
92+
<td>Entry Last Line 4</td>
93+
</tr>
94+
</tbody>
95+
<tfoot>
96+
<tr>
97+
<th>Entry Footer 1</th>
98+
<th>Entry Footer 2</th>
99+
<th>Entry Footer 3</th>
100+
<th>Entry Footer 4</th>
101+
</tr>
102+
</tfoot>
103+
</table>
104+
<h2>Form</h2>
105+
<form action="#" method="post">
106+
<fieldset>
107+
<label for="name">Name:</label>
108+
<input type="text" id="name" placeholder="Enter your full name" />
109+
110+
<label for="email">Email:</label>
111+
<input
112+
type="email"
113+
id="email"
114+
placeholder="Enter your email address"
115+
/>
116+
117+
<label for="hours">Hours:</label>
118+
<input type="number" id="hours" placeholder="Enter your hours" />
119+
120+
<label for="cust">Customer:</label>
121+
<select id="cust">
122+
<option>Customer 1</option>
123+
<option>Customer 2</option>
124+
</select>
125+
126+
<label for="message">Message:</label>
127+
<textarea id="message" placeholder="What's on your mind?"></textarea>
128+
129+
<label for="billable">Billable:</label>
130+
<input type="radio" id="billable" name="hours-type" />
131+
132+
<label for="nobill">Non-billable:</label>
133+
<input type="radio" id="nobill" name="hours-type" />
134+
135+
<input type="submit" value="Send message" />
136+
</fieldset>
137+
</form>
138+
139+
<h2>Theme Switcher</h2>
140+
<input
141+
type="radio"
142+
id="light"
143+
name="theme-name"
144+
value="light"
145+
onclick="setTheme('light')"
146+
/>
147+
<label for="light">light</label><br />
148+
<input
149+
type="radio"
150+
id="dark"
151+
name="theme-name"
152+
value="dark"
153+
onclick="setTheme('dark')"
154+
/>
155+
<label for="dark">dark</label><br />
156+
157+
<input
158+
type="radio"
159+
id="high-contrast"
160+
name="theme-name"
161+
value="high-contrast"
162+
onclick="setTheme('high-contrast')"
163+
/>
164+
<label for="high-contrast">high-contrast</label><br />
165+
</main>
166+
<footer>author, (c), etc</footer>
167+
<script>
168+
// let dark = window.matchMedia("(prefers-color-scheme: dark)").matches;
169+
170+
// if (dark) setTheme("dark");
171+
172+
function setTheme(theme) {
173+
document.documentElement.classList.add("theme-switch");
174+
document.documentElement.setAttribute("data-theme", theme);
175+
window.setTimeout(function () {
176+
document.documentElement.classList.remove("theme-switch");
177+
}, 1000);
178+
}
179+
</script>
180+
</body>
181+
</html>

‎tinycss.min.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.

‎tinycss.min.css.map‎

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

‎tinycss.scss‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
// tiny reset
2+
3+
// todo: high-contrast: https://mwichary.medium.com/dark-theme-in-a-day-3518dde2955a
4+
* {
5+
box-sizing: border-box;
6+
}
7+
8+
:root {
9+
--sans-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
10+
11+
--background: #fff;
12+
--accent-background: #dfe1e9;
13+
--text: #252525;
14+
--text-light: #585858;
15+
--border: #cecfd4;
16+
--accent: #fa986b;
17+
}
18+
19+
html {
20+
font-family: var(--sans-font);
21+
scroll-behavior: smooth;
22+
font-size: 16pt;
23+
color: var(--text);
24+
background: var(--background);
25+
}
26+
27+
html[data-theme="dark"] {
28+
--background: rgb(52, 51, 58);
29+
--accent-background: rgb(81, 79, 90);
30+
--text: #d8d8d8;
31+
--text-light: #ffffff;
32+
}
33+
34+
html.theme-switch,
35+
html.theme-switch *,
36+
html.theme-switch *:before,
37+
html.theme-switch *:after {
38+
transition: all 650ms !important;
39+
transition-delay: 0 !important;
40+
}
41+
42+
header {
43+
color: var(--text);
44+
}
45+
46+
footer {
47+
color: var(--text-light);
48+
}
49+
50+
body {
51+
padding: 0 1rem;
52+
}
53+
54+
a {
55+
color: #b44512;
56+
text-decoration: underline;
57+
&:visited {
58+
color: var(--text);
59+
text-decoration: dotted;
60+
}
61+
&:hover {
62+
color: var(--accent);
63+
text-decoration: none;
64+
}
65+
}
66+
67+
nav {
68+
font-size: 1rem;
69+
line-height: 2;
70+
padding: 1rem 0 0 0;
71+
72+
align-content: space-around;
73+
align-items: baseline;
74+
display: flex;
75+
flex-direction: row;
76+
flex-wrap: wrap;
77+
justify-content: space-evenly;
78+
list-style-type: none;
79+
80+
a,
81+
a:visited {
82+
margin: 0 1rem 1rem 0;
83+
border: 1px solid var(--border);
84+
border-radius: 5px;
85+
color: var(--text);
86+
display: inline-block;
87+
padding: 0.1rem 1rem;
88+
text-decoration: none;
89+
&:hover {
90+
color: var(--accent);
91+
border-color: var(--accent);
92+
}
93+
}
94+
}
95+
96+
// table style
97+
table {
98+
border-collapse: collapse;
99+
border-spacing: 0;
100+
margin: 1rem 0 1rem 0;
101+
width: 100%;
102+
th {
103+
color: var(--accent);
104+
font-weight: 600;
105+
text-align: left;
106+
}
107+
108+
td,
109+
th {
110+
padding: 0.75rem 0.75rem;
111+
}
112+
113+
thead {
114+
border-bottom: solid 2px var(--border);
115+
}
116+
117+
tbody {
118+
tr:nth-child(2n + 1) {
119+
background-color: var(--accent-background);
120+
}
121+
tr {
122+
border: solid 1px var(--border);
123+
border-left: 0;
124+
border-right: 0;
125+
}
126+
}
127+
128+
tfoot {
129+
border-top: solid 2px var(--border);
130+
}
131+
}
132+
133+
input,
134+
select,
135+
textarea {
136+
font-size: inherit;
137+
font-family: inherit;
138+
padding: 0.5rem;
139+
margin-bottom: 0.5rem;
140+
color: var(--text);
141+
background-color: var(--background);
142+
width: 100%;
143+
display: inline-block;
144+
border: 1px solid var(--border);
145+
}
146+
147+
input[type="checkbox"],
148+
input[type="radio"] {
149+
width: auto;
150+
}

0 commit comments

Comments
 (0)