tynanpurdy.com
[READ-ONLY] Mirror of https://github.com/tynanpurdy/real-font-size. Tiny calculator that tells you the real dimensions of text, not its bounding box
tynanpurdy.github.io/real-font-size/
3.5 kB
177 lines
1:root {
2 --background-color-light: #ffffff;
3 --text-color-light: #000000;
4 --background-color-dark: #333333;
5 --text-color-dark: #ffffff;
6
7 /** CSS DARK THEME PRIMARY COLORS */
8 --color-primary-100: #89cc74;
9 --color-primary-200: #97d283;
10 --color-primary-300: #a4d893;
11 --color-primary-400: #b2dda2;
12 --color-primary-500: #bfe3b1;
13 --color-primary-600: #cce9c0;
14
15 /** CSS DARK THEME SURFACE COLORS */
16 --color-surface-100: #121212;
17 --color-surface-200: #282828;
18 --color-surface-300: #3f3f3f;
19 --color-surface-400: #575757;
20 --color-surface-500: #717171;
21 --color-surface-600: #8b8b8b;
22
23 /** CSS DARK THEME MIXED SURFACE COLORS */
24 --color-surface-mixed-100: #1d221b;
25 --color-surface-mixed-200: #323730;
26 --color-surface-mixed-300: #484c46;
27 --color-surface-mixed-400: #60635e;
28 --color-surface-mixed-500: #787b77;
29 --color-surface-mixed-600: #929490;
30 }
31
32 * {
33 box-sizing: border-box;
34 }
35
36 body {
37 font-size: 120%;
38 min-height: 100vh;
39 padding: 0% 5%;
40 margin: 0%;
41 display: grid;
42 justify-content: center;
43 grid-template-rows: auto auto 1fr;
44 grid-auto-rows: min-content;
45 overflow-y: auto;
46
47 background-color: var(--color-surface-100);
48 color: var(--color-surface-600);
49 font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
50 Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
51 sans-serif;
52 }
53
54 main {
55 grid-row: 2;
56 display: grid;
57 /* width: 100vw; */
58 grid-template-rows: auto auto auto;
59 grid-auto-rows: min-content;
60 /* grid-template-columns: repeat(2, minmax(384px, 1fr)); */
61 gap: 1rem;
62 }
63
64 footer {
65 grid-row: 3;
66 padding: 2% 0%;
67 }
68
69 .flex {
70 display: flex;
71 flex-wrap: wrap;
72 column-gap: 1rem;
73 row-gap: 0.5rem;
74 align-items: baseline;
75 }
76
77 .row {
78 flex-direction: row;
79 }
80
81 .col {
82 flex-direction: column;
83 }
84
85
86 .group-row {
87 display: flex;
88 flex-direction: row;
89 flex-wrap: nowrap;
90 gap: 1rem;
91 align-items: baseline;
92 }
93
94 .responsiveGrid {
95 display: grid;
96 grid-template-rows: auto auto;
97 grid-auto-rows: min-content;
98 gap: 1rem;
99 }
100
101 h1 {
102 font-size: 250%;
103 }
104
105 select,
106 textarea,
107 input,
108 button {
109 font: inherit;
110 }
111
112 input,
113 select {
114 padding: 0.2rem;
115 margin: 0.2rem 0%;
116 border: none;
117 border-bottom: 2px solid var(--color-surface-500);
118 background-color: var(--color-surface-100);
119 color: white;
120 }
121 input:focus,
122 select:focus {
123 outline: none;
124 border: none;
125 border-bottom: 2px solid var(--color-primary-100);
126 }
127
128 button {
129 background-color: transparent;
130 border-radius: 0.7rem;
131 border: none;
132 padding: 0.4rem 0.8rem;
133 }
134 button:hover {
135 background-color: var(--color-surface-200);
136 }
137
138 #diagram {
139 width: 100%;
140 }
141
142 #launchFonts {
143 color: inherit;
144 border-radius: 0%;
145 outline: none;
146 border: none;
147 border-bottom: 1px solid;
148 padding: 0.1rem 0%;
149 }
150
151 #launchFonts:hover {
152 color: white;
153 border-bottom: 1px solid white;
154 }
155
156 /* Tablet */
157 @media (min-width: 481px) and (max-width: 768px) {
158 /* styles for tablets */
159 }
160
161 /* Desktop 769-1024px */
162 @media (min-width: 769px) {
163 /* styles for desktop computers */
164 main {
165 max-width: 80rem;
166 }
167
168 h1 {
169 font-size: 400%;
170 text-align: center;
171 }
172
173 .responsiveGrid {
174 grid-template-columns: 2fr 3fr;
175 grid-auto-flow: row;
176 }
177 }