Skip to content

Commit b90caf5

Browse files
kevinmcconnellkevinmcconnell
committed
CSS reset & base styles
1 parent c4fb1bd commit b90caf5

File tree

4 files changed

+200
-3
lines changed

4 files changed

+200
-3
lines changed

‎app/assets/stylesheets/_reset.css‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
/*
2+
* Modern CSS Reset
3+
* @link https://github.com/hankchizljaw/modern-css-reset
4+
*/
5+
6+
/* Box sizing rules */
7+
*,
8+
*::before,
9+
*::after {
10+
box-sizing: border-box;
11+
}
12+
13+
/* Remove default margin */
14+
body,
15+
h1,
16+
h2,
17+
h3,
18+
h4,
19+
h5,
20+
h6 {
21+
margin: 0;
22+
}
23+
24+
p,
25+
li,
26+
h1,
27+
h2,
28+
h3,
29+
h4 {
30+
/* Help prevent overflow of long words/names/URLs */
31+
word-break: break-word;
32+
33+
/* Optional, not supported for all languages */
34+
/* hyphens: auto; */
35+
}
36+
37+
html,
38+
body {
39+
overflow-x: hidden;
40+
}
41+
42+
html {
43+
scroll-behavior: smooth;
44+
}
45+
46+
/* Set core body defaults */
47+
body {
48+
min-height: 100dvh;
49+
font-family: sans-serif;
50+
font-size: 100%;
51+
line-height: 1.5;
52+
text-rendering: optimizeSpeed;
53+
}
54+
55+
/* Make images easier to work with */
56+
img {
57+
display: block;
58+
max-inline-size: 100%;
59+
}
60+
61+
/* Inherit fonts for inputs and buttons */
62+
input,
63+
button,
64+
textarea,
65+
select {
66+
font: inherit;
67+
}
68+
69+
/* Remove all animations and transitions for people that prefer not to see them */
70+
@media (prefers-reduced-motion: reduce) {
71+
72+
*,
73+
*::before,
74+
*::after {
75+
animation-duration: 0.01ms !important;
76+
animation-iteration-count: 1 !important;
77+
transition-duration: 0.01ms !important;
78+
scroll-behavior: auto !important;
79+
}
80+
81+
html {
82+
scroll-behavior: initial;
83+
}
84+
}

‎app/assets/stylesheets/application.css‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎app/assets/stylesheets/base.css‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
html, body {
2+
--font-sans: system-ui;
3+
--font-serif: ui-serif, serif;
4+
--font-mono: ui-monospace, monospace;
5+
--hover-color: var(--color-subtle-dark);
6+
--hover-size: 0.15rem;
7+
--hover-filter: brightness(1);
8+
9+
-moz-osx-font-smoothing: grayscale;
10+
-webkit-font-smoothing: antialiased;
11+
-webkit-text-size-adjust: none;
12+
background: var(--color-bg);
13+
color: var(--color-ink);
14+
font-family: var(--font-sans);
15+
line-height: 1.4;
16+
overflow: unset;
17+
scroll-behavior: auto;
18+
text-rendering: optimizeLegibility;
19+
text-size-adjust: none;
20+
}
21+
22+
a:not([class]) {
23+
--hover-size: 0;
24+
25+
color: var(--color-link);
26+
text-decoration: underline;
27+
text-decoration-skip-ink: auto;
28+
}
29+
30+
:is(a, button, input, textarea, .switch, .toc, .toc__title) {
31+
--outline-size: max(2px, 0.08em);
32+
33+
caret-color: var(--color-link);
34+
text-decoration: none;
35+
touch-action: manipulation;
36+
transition: box-shadow 150ms ease, outline-offset 150ms ease, background-color 150ms ease, opacity 150ms ease, filter 150ms ease;
37+
38+
/* Hover */
39+
@media (any-hover: hover) {
40+
&:where(:not(:active):hover) {
41+
box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
42+
}
43+
}
44+
45+
/* Keyboard navigation */
46+
&:where(:not(:active)):focus-visible {
47+
outline-width: var(--outline-size);
48+
outline-color: var(--outline-color, currentColor);
49+
outline-offset: var(--outline-offset, calc(var(--outline-size) * 2));
50+
}
51+
52+
&:where(:focus-visible):active {
53+
outline: 0;
54+
}
55+
56+
/* Pressing */
57+
&:focus:not(:focus-visible) {
58+
--outline-offset: 0;
59+
}
60+
61+
/* Disabled */
62+
&:where([disabled]):not(:hover):not(:active) {
63+
cursor: not-allowed;
64+
filter: brightness(0.75);
65+
}
66+
}
67+
68+
::selection {
69+
background-color: var(--color-selected);
70+
}
71+
72+
:where(ul, ol):where([role="list"]) {
73+
margin: 0;
74+
padding: 0;
75+
list-style: none;
76+
}
77+
78+
/* Printing */
79+
@page {
80+
margin: 1in;
81+
}
82+
83+
@media print {
84+
.no-print {
85+
display: none;
86+
}
87+
}
88+
89+
/* Turbo */
90+
turbo-frame {
91+
display: contents;
92+
}
93+
94+
/* Nicer scrollbars on Chrome 29+. This is intended for Windows machines, but */
95+
/* there's not a way to target Windows using CSS, so Chrome on Mac will have */
96+
/* slightly thinner scrollbars than normal. #C1C1C1 is the default color on Macs. */
97+
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
98+
* {
99+
scrollbar-color: #C1C1C1 transparent;
100+
scrollbar-width: thin;
101+
}
102+
}

‎app/views/layouts/application.html.erb‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,23 @@
66
<%= csrf_meta_tags %>
77
<%= csp_meta_tag %>
88

9-
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
9+
<%= yield :head %>
10+
11+
<%= stylesheet_link_tag :all, "data-turbo-track": "reload" %>
1012
<%= javascript_importmap_tags %>
1113
</head>
1214

1315
<body>
14-
<%= yield %>
16+
<header id="header">
17+
<%= yield :header %>
18+
</header>
19+
20+
<main id="main">
21+
<%= yield %>
22+
</main>
23+
24+
<footer id="footer">
25+
<%= yield :footer %>
26+
</footer>
1527
</body>
1628
</html>

0 commit comments

Comments
 (0)