Skip to content

Commit 7110106

Browse files
digitartdigitart
authored
Update csskel.css
1 parent 8b5ab2a commit 7110106

File tree

1 file changed

+126
-104
lines changed

1 file changed

+126
-104
lines changed

‎css/csskel.css‎

Lines changed: 126 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* CSSkel v1
33
* (c)2019 by Aleks Vas
44
* A fork of Barebones V3 by Steve Cochran and Skeleton by Dave Gamache
5-
5+
*
66
* Free to use under the MIT license.
77
*/
88

@@ -27,58 +27,47 @@
2727

2828
/* ENV Variables
2929
–––––––––––––––––––––––––––––––––––––––––––––––––– */
30-
/* Media breakpoint variables for use in media queries
31-
* Note: this section is currently commented out pending release of
30+
/* Media breakpoint variables for use in media queries
31+
* Note: this section is currently commented out pending release of
3232
* final CSS env() spec
33-
* Breakpoints based on
34-
* https://medium.freecodecamp.org/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862
33+
* Breakpoints based on
34+
* https://medium.freecodecamp.org/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862
3535
*
3636
*/
3737

38-
38+
@import "normailze.css";
39+
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,600,900&display=swap');
3940

4041
/* CSS Variables
4142
–––––––––––––––––––––––––––––––––––––––––––––––––– */
4243
html {
43-
4444
/* default theme: light background, dark text, blue accent */
45-
--theme-hue: 0;
46-
/* white */
47-
--accent-hue: 194;
48-
/* blue */
49-
50-
--text-color-richer: hsl(var(--theme-hue),0%, 5%);
51-
/* #0d0d0d */
52-
--text-color-normal: hsl(var(--theme-hue),0%, 13%);
53-
/* #222222 text color; button:hover:focus color */
54-
--text-color-softer: hsl(var(--theme-hue),0%, 33%);
55-
/* #555555 button color; button:hover border */
56-
57-
--accent-color: hsl(var(--accent-hue),86%, 57%);
58-
/* #33C3F0 link; button-primary bg+border; textarea,select:focus border */
59-
--accent-color-hover: hsl(var(--accent-hue),76%, 49%);
60-
/* #1EAEDB link hover; button-primary:hover:focus bg+border */
61-
62-
--border-color: hsl(var(--theme-hue),0%, 73%);
63-
/* #bbbbbb button border */
64-
--border-color-softer: hsl(var(--theme-hue),0%, 82%);
65-
/* #d1d1d1 textarea,select,code,td,hr border */
66-
67-
--background-color: white;
68-
/* transparent body background; textarea,select background */
45+
--theme-hue: 0; /* white */
46+
--accent-hue: 194; /* blue */
47+
48+
--text-color-richer: hsl(var(--theme-hue),0%, 5%); /* #0d0d0d */
49+
--text-color-normal: hsl(var(--theme-hue),0%, 13%); /* #222222 text color; button:hover:focus color */
50+
--text-color-softer: hsl(var(--theme-hue),0%, 33%); /* #555555 button color; button:hover border */
51+
52+
--accent-color: hsl(var(--accent-hue),86%, 40%); /* #33C3F0 link; button-primary bg+border; textarea,select:focus border */
53+
--accent-color-hover: hsl(var(--accent-hue),76%, 29%); /* #1EAEDB link hover; button-primary:hover:focus bg+border */
54+
55+
--border-color: hsl(var(--theme-hue),0%, 73%); /* #bbbbbb button border */
56+
--border-color-softer: hsl(var(--theme-hue),0%, 82%); /* #d1d1d1 textarea,select,code,td,hr border */
57+
58+
--background-color: white; /* transparent body background; textarea,select background */
6959
--background-color-softer: hsl(var(--theme-hue),0%, 95%);
70-
--code-background: hsl(var(--theme-hue),0%, 95%);
71-
/* #f1f1f1 code background*/
60+
--code-background: hsl(var(--theme-hue),0%, 95%); /* #f1f1f1 code background*/
7261

7362
--button-primary-color: white;
7463

75-
7664
/* Note: Skeleton was based off a 10px font sizing for REM */
7765
/* 62.5% of typical 16px browser default = 10px */
7866
--base-font-size: 62.5%;
79-
80-
/* Grid Defaults - default to match orig skeleton settings */
81-
--grid-max-width: 960px;
67+
68+
--grid-gap: 5px 5px;
69+
70+
--mobile-padding: 10px;
8271
}
8372

8473
/* Dark Theme
@@ -88,97 +77,105 @@ html {
8877
@media (prefers-color-scheme: dark) {
8978
:html {
9079
/* dark theme: light background, dark text, blue accent */
91-
--theme-hue: 0;
92-
/* black */
93-
--accent-hue: 194;
94-
/* blue */
95-
96-
--text-color-richer: hsl(var(--theme-hue),0%, 95%);
97-
/* */
98-
--text-color-normal: hsl(var(--theme-hue),0%, 80%);
99-
/* text color; button:hover:focus color */
100-
--text-color-softer: hsl(var(--theme-hue),0%, 67%);
101-
/* button color; button:hover border */
102-
103-
--accent-color: hsl(var(--accent-hue),76%, 49%);
104-
/* link; button-primary bg+border; textarea,select:focus border */
105-
--accent-color-hover: hsl(var(--accent-hue),86%, 57%);
106-
/* link hover; button-primary:hover:focus bg+border */
107-
108-
--border-color: hsl(var(--theme-hue),0%, 27%);
109-
/* button border */
110-
--border-color-softer: hsl(var(--theme-hue),0%, 20%);
111-
/* textarea,select,code,td,hr border */
112-
113-
--background-color: hsl(var(--theme-hue),0%, 12%);
114-
/* body background; textarea,select background */
80+
--theme-hue: 0; /* black */
81+
--accent-hue: 194; /* blue */
82+
83+
--text-color-richer: hsl(var(--theme-hue),0%, 95%); /* */
84+
--text-color-normal: hsl(var(--theme-hue),0%, 80%); /* text color; button:hover:focus color */
85+
--text-color-softer: hsl(var(--theme-hue),0%, 67%); /* button color; button:hover border */
86+
87+
--accent-color: hsl(var(--accent-hue),76%, 49%); /* link; button-primary bg+border; textarea,select:focus border */
88+
--accent-color-hover: hsl(var(--accent-hue),86%, 57%); /* link hover; button-primary:hover:focus bg+border */
89+
90+
--border-color: hsl(var(--theme-hue),0%, 27%); /* button border */
91+
--border-color-softer: hsl(var(--theme-hue),0%, 20%); /* textarea,select,code,td,hr border */
92+
93+
--background-color: hsl(var(--theme-hue),0%, 12%); /* body background; textarea,select background */
11594
--background-color-softer: hsl(var(--theme-hue),0%, 18%);
116-
--code-background: hsl(var(--theme-hue),0%, 5%);
117-
/* code background*/
118-
95+
--code-background: hsl(var(--theme-hue),0%, 5%); /* code background*/
96+
11997
--button-primary-color: white;
12098
}
12199

122100
img.value-img {
123101
filter: invert(0.8);
124102
}
125103
/* TODO - test dialing back image intensity on dark background
126-
img {
127-
opacity: .80;
128-
transition: opacity .5s ease-in-out;
129-
}
130-
img:hover {
131-
opacity: 1;
132-
}
133-
*/
104+
img {
105+
opacity: .80;
106+
transition: opacity .5s ease-in-out;
107+
}
108+
img:hover {
109+
opacity: 1;
110+
}
111+
*/
134112
}
135113

136-
137114
/* Grid
138115
–––––––––––––––––––––––––––––––––––––––––––––––––– */
139116
/* CSS Grid depends much more on CSS than HTML, so there is less boilerplate
140117
than with skeleton. Only basic 1-4 column grids are included.
141118
Any additional needs should be made using custom CSS directives */
142119

143-
144120
.grid-container {
145121
position: relative;
146-
max-width: var(--grid-max-width);
122+
max-width: 100vw;
147123
margin: 0 auto;
148-
padding: 20px;
149-
text-align: center;
124+
text-align: left;
150125
display: grid;
151-
grid-gap: 20px;
152-
gap: 20px;
126+
grid-gap: var(--grid-gap);
127+
gap: var(--grid-gap);
153128

154129
/* by default use min 200px wide columns auto-fit into width */
155130
grid-template-columns: minmax(200px, 1fr);
156131
}
157132

133+
.grid-container>div{
134+
padding-left: var(--mobile-padding);
135+
padding-right: var(--mobile-padding);
136+
}
137+
158138
/* grids to 3 columns above mobile sizes */
159139
@media (min-width: 600px) {
160140
.grid-container {
161141
grid-template-columns: repeat(3, 1fr);
162-
padding: 10px 0;
142+
padding: 20px;
143+
}
144+
.grid-container>div{
145+
padding-left: 0;
146+
padding-right: 0;
163147
}
164-
165148
/* basic grids */
166-
.grid-container.fifths {
149+
.grid-container.cols\:6 {
150+
grid-template-columns: repeat(6, 1fr);
151+
}
152+
.grid-container.cols\:5 {
167153
grid-template-columns: repeat(5, 1fr);
168154
}
169-
.grid-container.quarters {
155+
.grid-container.cols\:4 {
170156
grid-template-columns: repeat(4, 1fr);
171157
}
172-
.grid-container.thirds {
158+
.grid-container.cols\:3 {
173159
grid-template-columns: repeat(3, 1fr);
174160
}
175-
.grid-container.halves {
161+
.grid-container.cols\:2 {
176162
grid-template-columns: repeat(2, 1fr);
177163
}
178164
.grid-container.full {
179165
grid-template-columns: 1fr;
180166
}
181-
167+
.grid-container .colspan\:2{
168+
grid-column-end: span 2;
169+
}
170+
.grid-container .colspan\:3{
171+
grid-column-end: span 3;
172+
}
173+
.grid-container .colspan\:4{
174+
grid-column-end: span 4;
175+
}
176+
.grid-container .colspan\:5{
177+
grid-column-end: span 5;
178+
}
182179
}
183180

184181

@@ -189,16 +186,15 @@ html {
189186
scroll-behavior: smooth;
190187
}
191188
body {
192-
font-size: 1.6rem;
193-
/* changed from 15px in orig skeleton */
189+
font-size: 1.6rem; /* changed from 15px in orig skeleton */
194190
line-height: 1.6;
195191
font-weight: 400;
196192
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
197193
color: var(--text-color-normal);
198-
background-color: var(--background-color);;
194+
background-color: var(--background-color);
195+
margin: 0;
199196
}
200197

201-
202198
/* Typography
203199
–––––––––––––––––––––––––––––––––––––––––––––––––– */
204200
h1, h2, h3, h4, h5, h6 {
@@ -237,6 +233,11 @@ h6 {
237233
letter-spacing: 0;
238234
}
239235

236+
p {
237+
margin-top: 0;
238+
}
239+
240+
240241
/* Larger than phablet */
241242
@media (min-width: 600px) {
242243
h1 {
@@ -259,9 +260,6 @@ h6 {
259260
}
260261
}
261262

262-
p {
263-
margin-top: 0;
264-
}
265263

266264

267265
/* Links
@@ -493,30 +491,42 @@ ol,
493491
form {
494492
margin-bottom: 2.5rem;
495493
}
496-
494+
p:last-child{
495+
margin-bottom: 1rem;
496+
}
497497

498498
/* Utilities
499499
–––––––––––––––––––––––––––––––––––––––––––––––––– */
500-
.u-full-width {
500+
.grid-container>div.nopadding{
501+
padding-left:0;
502+
padding-right:0;
503+
}
504+
.full-width {
501505
width: 100%;
502506
box-sizing: border-box;
503507
}
504-
.u-max-full-width {
508+
.max-full-width {
505509
max-width: 100%;
506510
box-sizing: border-box;
507511
}
508-
.u-pull-right {
512+
.pull-right {
509513
float: right;
510514
}
511-
.u-pull-left {
515+
.pull-left {
512516
float: left;
513517
}
514-
.u-align-left {
518+
.align-left {
515519
text-align: left;
516520
}
517-
.u-align-right {
521+
.align-right {
518522
text-align: right;
519523
}
524+
.align-justify{
525+
text-align: justify;
526+
}
527+
.align-center{
528+
text-align: center;
529+
}
520530

521531

522532
/* Misc
@@ -535,7 +545,7 @@ hr {
535545
/* Self Clearing Goodness */
536546
.container:after,
537547
.row:after,
538-
.u-cf {
548+
.clear {
539549
content: "";
540550
display: table;
541551
clear: both;
@@ -553,10 +563,22 @@ there.
553563

554564

555565
/* Larger than mobile (default point when grid becomes active) */
556-
@media (min-width: 600px) {}
566+
@media (min-width: 600px) {
567+
.grid-container{
568+
max-width: 750px;
569+
}
570+
}
557571

558572
/* Larger than phablet */
559-
@media (min-width: 900px) {}
573+
@media (min-width: 900px) {
574+
.grid-container{
575+
max-width: 970px;
576+
}
577+
}
560578

561579
/* Larger than tablet */
562-
@media (min-width: 1200px) {}
580+
@media (min-width: 1280px) {
581+
.grid-container{
582+
max-width: 1068px;
583+
}
584+
}

0 commit comments

Comments
 (0)