Skip to content

Commit c2e68d3

Browse files
virtualvirtual
committed
add in css fx
1 parent 6ad4c69 commit c2e68d3

8 files changed

Lines changed: 387 additions & 18 deletions

File tree

‎source/01.blade.php‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212

1313
<p>Gain access to our full library of tutorials along with expert code reviews.
1414
Perfect for any developers who are serious about honing their skills.</p>
15+
1516
</div>
1617
</div>
1718
<div class="row">
@@ -47,4 +48,5 @@
4748
<link rel="preconnect" href="https://fonts.googleapis.com">
4849
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
4950
<link href="https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap" rel="stylesheet">
51+
<link rel="icon" type="image/png" href="{{ $page->baseUrl }}/resources/01/favicon-32x32.png">
5052
@endsection

‎source/_assets/sass/_colors.scss‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
1-
.theme-primary {
2-
background-color: $theme-primary;
3-
}
4-
.theme-secondary {
5-
background-color: $theme-secondary;
1+
$themeColours: (
2+
"primary": $theme-primary,
3+
"secondary": $theme-secondary,
4+
);
5+
6+
@each $themeColour, $i in $themeColours {
7+
.theme-#{$themeColour} {
8+
background-color: $i;
9+
}
610
}

‎source/_assets/sass/_structure.scss‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "sass:math";
2+
13
body {
24
background: #E0EAFC; /* fallback for old browsers */
35
background: -webkit-linear-gradient(to right, #CFDEF3, #E0EAFC); /* Chrome 10-25, Safari 5.1-6 */
@@ -29,12 +31,16 @@ body {
2931
max-width: $screen-xl;
3032
margin: 0 auto;
3133
}
32-
.col-8, .col-16 {
33-
width: 100%;
34+
div[class^="col-"] {
3435
padding: $gutter * 2;
35-
}
36-
.col-8 {
37-
@media (min-width: $screen-md) {
38-
width: 50%;
39-
}
36+
}
37+
38+
// https://www.gavsblog.com/blog/for-each-while-loops-sass-scss
39+
$columns: 16;
40+
41+
// https://sass-lang.com/d/slash-div
42+
@for $i from 1 through $columns {
43+
.col-#{$i} {
44+
width: math.div(100, $columns) * $i * 1%;
45+
}
4046
}

‎source/_assets/sass/_typography.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:math";
12
body {
23
font-family: $theme-font-family;
34
}
@@ -6,4 +7,16 @@ h1 {
67
}
78
.lead {
89
color: $theme-secondary;
10+
}
11+
12+
$count: 0;
13+
@while $count <= 6 {
14+
h#{$count} {
15+
font-size: (math.div($theme-font-size-base, math.div($count, 5)));
16+
line-height: 1.3;
17+
margin-bottom: $gutter;
18+
margin-top: 0;
19+
}
20+
21+
$count: $count + 1;
922
}

‎source/assets/build/css/main.css‎

Lines changed: 175 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,176 @@
1-
.theme-primary{background-color:#2ab2af}.theme-secondary{background-color:#c0df34}body{font-family:Karla,sans-serif}h1{color:#2ab2af}.lead{color:#c0df34}body{align-items:center;background:#e0eafc;background:linear-gradient(90deg,#cfdef3,#e0eafc);display:flex;flex-direction:column;justify-content:center;min-height:100vh;padding:16px}*{box-sizing:border-box}.row{clear:both;display:flex;flex-direction:column;width:100%}@media (min-width:768px){.row{flex-direction:row}}.container{margin:0 auto;max-width:1200px;width:100%}.col-8,.col-16{padding:32px;width:100%}@media (min-width:768px){.col-8{width:50%}}.card-conatiner{background:#fff}
1+
.theme-primary {
2+
background-color: #2ab2af;
3+
}
24

3-
/*# sourceMappingURL=main.css.map*/
5+
.theme-secondary {
6+
background-color: #c0df34;
7+
}
8+
9+
body {
10+
font-family: "Karla", sans-serif;
11+
}
12+
13+
h1 {
14+
color: #2ab2af;
15+
}
16+
17+
.lead {
18+
color: #c0df34;
19+
}
20+
21+
h0 {
22+
font-size: Infinitypx;
23+
line-height: 1.3;
24+
margin-bottom: 16px;
25+
margin-top: 0;
26+
}
27+
28+
h1 {
29+
font-size: 80px;
30+
line-height: 1.3;
31+
margin-bottom: 16px;
32+
margin-top: 0;
33+
}
34+
35+
h2 {
36+
font-size: 40px;
37+
line-height: 1.3;
38+
margin-bottom: 16px;
39+
margin-top: 0;
40+
}
41+
42+
h3 {
43+
font-size: 26.6666666667px;
44+
line-height: 1.3;
45+
margin-bottom: 16px;
46+
margin-top: 0;
47+
}
48+
49+
h4 {
50+
font-size: 20px;
51+
line-height: 1.3;
52+
margin-bottom: 16px;
53+
margin-top: 0;
54+
}
55+
56+
h5 {
57+
font-size: 16px;
58+
line-height: 1.3;
59+
margin-bottom: 16px;
60+
margin-top: 0;
61+
}
62+
63+
h6 {
64+
font-size: 13.3333333333px;
65+
line-height: 1.3;
66+
margin-bottom: 16px;
67+
margin-top: 0;
68+
}
69+
70+
body {
71+
background: #E0EAFC;
72+
/* fallback for old browsers */
73+
/* Chrome 10-25, Safari 5.1-6 */
74+
background: linear-gradient(to right, #CFDEF3, #E0EAFC);
75+
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
76+
min-height: 100vh;
77+
padding: 16px;
78+
display: flex;
79+
flex-direction: column;
80+
align-items: center;
81+
justify-content: center;
82+
}
83+
84+
* {
85+
box-sizing: border-box;
86+
}
87+
88+
.row {
89+
clear: both;
90+
width: 100%;
91+
display: flex;
92+
flex-direction: column;
93+
}
94+
@media (min-width: 768px) {
95+
.row {
96+
flex-direction: row;
97+
}
98+
}
99+
100+
.container {
101+
width: 100%;
102+
max-width: 1200px;
103+
margin: 0 auto;
104+
}
105+
106+
div[class^=col-] {
107+
padding: 32px;
108+
}
109+
110+
.col-1 {
111+
width: 6.25%;
112+
}
113+
114+
.col-2 {
115+
width: 12.5%;
116+
}
117+
118+
.col-3 {
119+
width: 18.75%;
120+
}
121+
122+
.col-4 {
123+
width: 25%;
124+
}
125+
126+
.col-5 {
127+
width: 31.25%;
128+
}
129+
130+
.col-6 {
131+
width: 37.5%;
132+
}
133+
134+
.col-7 {
135+
width: 43.75%;
136+
}
137+
138+
.col-8 {
139+
width: 50%;
140+
}
141+
142+
.col-9 {
143+
width: 56.25%;
144+
}
145+
146+
.col-10 {
147+
width: 62.5%;
148+
}
149+
150+
.col-11 {
151+
width: 68.75%;
152+
}
153+
154+
.col-12 {
155+
width: 75%;
156+
}
157+
158+
.col-13 {
159+
width: 81.25%;
160+
}
161+
162+
.col-14 {
163+
width: 87.5%;
164+
}
165+
166+
.col-15 {
167+
width: 93.75%;
168+
}
169+
170+
.col-16 {
171+
width: 100%;
172+
}
173+
174+
.card-conatiner {
175+
background: #fff;
176+
}

0 commit comments

Comments
 (0)