Skip to content

Commit e0cd7f5

Browse files
AlexEneAlexEne
committed
Added css from original minima
1 parent 49b4dea commit e0cd7f5

File tree

4 files changed

+683
-0
lines changed

4 files changed

+683
-0
lines changed

‎_sass/minima.scss

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
@charset "utf-8";
2+
3+
// Define defaults for each variable.
4+
5+
$base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
6+
$base-font-size: 16px !default;
7+
$base-font-weight: 400 !default;
8+
$small-font-size: $base-font-size * 0.875 !default;
9+
$base-line-height: 1.5 !default;
10+
11+
$spacing-unit: 30px !default;
12+
13+
$text-color: #111 !default;
14+
$background-color: #fdfdfd !default;
15+
$brand-color: #2a7ae2 !default;
16+
17+
$grey-color: #828282 !default;
18+
$grey-color-light: lighten($grey-color, 40%) !default;
19+
$grey-color-dark: darken($grey-color, 25%) !default;
20+
$orange-color: #f66a0a !default;
21+
$table-text-align: left !default;
22+
23+
// Width of the content area
24+
$content-width: 800px !default;
25+
26+
$on-palm: 600px !default;
27+
$on-laptop: 800px !default;
28+
29+
$on-medium: $on-palm !default;
30+
$on-large: $on-laptop !default;
31+
32+
// Use media queries like this:
33+
// @include media-query($on-palm) {
34+
// .wrapper {
35+
// padding-right: $spacing-unit / 2;
36+
// padding-left: $spacing-unit / 2;
37+
// }
38+
// }
39+
// Notice the following mixin uses max-width, in a deprecated, desktop-first
40+
// approach, whereas media queries used elsewhere now use min-width.
41+
@mixin media-query($device) {
42+
@media screen and (max-width: $device) {
43+
@content;
44+
}
45+
}
46+
47+
@mixin relative-font-size($ratio) {
48+
font-size: $base-font-size * $ratio;
49+
}
50+
51+
// Import partials.
52+
@import
53+
"minima/base",
54+
"minima/layout",
55+
"minima/syntax-highlighting"
56+
;

‎_sass/minima/_base.scss

Lines changed: 256 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
1+
/**
2+
* Reset some basic elements
3+
*/
4+
body, h1, h2, h3, h4, h5, h6,
5+
p, blockquote, pre, hr,
6+
dl, dd, ol, ul, figure {
7+
margin: 0;
8+
padding: 0;
9+
10+
}
11+
12+
13+
14+
/**
15+
* Basic styling
16+
*/
17+
body {
18+
font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
19+
color: $text-color;
20+
background-color: $background-color;
21+
-webkit-text-size-adjust: 100%;
22+
-webkit-font-feature-settings: "kern" 1;
23+
-moz-font-feature-settings: "kern" 1;
24+
-o-font-feature-settings: "kern" 1;
25+
font-feature-settings: "kern" 1;
26+
font-kerning: normal;
27+
display: flex;
28+
min-height: 100vh;
29+
flex-direction: column;
30+
}
31+
32+
33+
34+
/**
35+
* Set `margin-bottom` to maintain vertical rhythm
36+
*/
37+
h1, h2, h3, h4, h5, h6,
38+
p, blockquote, pre,
39+
ul, ol, dl, figure,
40+
%vertical-rhythm {
41+
margin-bottom: $spacing-unit / 2;
42+
}
43+
44+
45+
46+
/**
47+
* `main` element
48+
*/
49+
main {
50+
display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */
51+
}
52+
53+
54+
55+
/**
56+
* Images
57+
*/
58+
img {
59+
max-width: 100%;
60+
vertical-align: middle;
61+
}
62+
63+
64+
65+
/**
66+
* Figures
67+
*/
68+
figure > img {
69+
display: block;
70+
}
71+
72+
figcaption {
73+
font-size: $small-font-size;
74+
}
75+
76+
77+
78+
/**
79+
* Lists
80+
*/
81+
ul, ol {
82+
margin-left: $spacing-unit;
83+
}
84+
85+
li {
86+
> ul,
87+
> ol {
88+
margin-bottom: 0;
89+
}
90+
}
91+
92+
93+
94+
/**
95+
* Headings
96+
*/
97+
h1, h2, h3, h4, h5, h6 {
98+
font-weight: $base-font-weight;
99+
}
100+
101+
102+
103+
/**
104+
* Links
105+
*/
106+
a {
107+
color: $brand-color;
108+
text-decoration: none;
109+
110+
&:visited {
111+
color: darken($brand-color, 15%);
112+
}
113+
114+
&:hover {
115+
color: $text-color;
116+
text-decoration: underline;
117+
}
118+
119+
.social-media-list &:hover {
120+
text-decoration: none;
121+
122+
.username {
123+
text-decoration: underline;
124+
}
125+
}
126+
}
127+
128+
129+
/**
130+
* Blockquotes
131+
*/
132+
blockquote {
133+
color: $grey-color;
134+
border-left: 4px solid $grey-color-light;
135+
padding-left: $spacing-unit / 2;
136+
@include relative-font-size(1.125);
137+
letter-spacing: -1px;
138+
font-style: italic;
139+
140+
> :last-child {
141+
margin-bottom: 0;
142+
}
143+
}
144+
145+
146+
147+
/**
148+
* Code formatting
149+
*/
150+
pre,
151+
code {
152+
@include relative-font-size(0.9375);
153+
border: 1px solid $grey-color-light;
154+
border-radius: 3px;
155+
background-color: #eef;
156+
}
157+
158+
code {
159+
padding: 1px 5px;
160+
}
161+
162+
pre {
163+
padding: 8px 12px;
164+
overflow-x: auto;
165+
166+
> code {
167+
border: 0;
168+
padding-right: 0;
169+
padding-left: 0;
170+
}
171+
}
172+
173+
174+
175+
/**
176+
* Wrapper
177+
*/
178+
.wrapper {
179+
max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
180+
max-width: calc(#{$content-width} - (#{$spacing-unit}));
181+
margin-right: auto;
182+
margin-left: auto;
183+
padding-right: $spacing-unit / 2;
184+
padding-left: $spacing-unit / 2;
185+
@extend %clearfix;
186+
187+
@media screen and (min-width: $on-large) {
188+
max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
189+
max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
190+
padding-right: $spacing-unit;
191+
padding-left: $spacing-unit;
192+
}
193+
}
194+
195+
196+
197+
/**
198+
* Clearfix
199+
*/
200+
%clearfix:after {
201+
content: "";
202+
display: table;
203+
clear: both;
204+
}
205+
206+
207+
208+
/**
209+
* Icons
210+
*/
211+
212+
.orange {
213+
color: $orange-color;
214+
}
215+
216+
.grey {
217+
color: $grey-color;
218+
}
219+
220+
.svg-icon {
221+
width: 16px;
222+
height: 16px;
223+
display: inline-block;
224+
fill: currentColor;
225+
padding: 5px 3px 2px 5px;
226+
vertical-align: text-bottom;
227+
}
228+
229+
230+
/**
231+
* Tables
232+
*/
233+
table {
234+
margin-bottom: $spacing-unit;
235+
width: 100%;
236+
text-align: $table-text-align;
237+
color: lighten($text-color, 18%);
238+
border-collapse: collapse;
239+
border: 1px solid $grey-color-light;
240+
tr {
241+
&:nth-child(even) {
242+
background-color: lighten($grey-color-light, 6%);
243+
}
244+
}
245+
th, td {
246+
padding: ($spacing-unit / 3) ($spacing-unit / 2);
247+
}
248+
th {
249+
background-color: lighten($grey-color-light, 3%);
250+
border: 1px solid darken($grey-color-light, 4%);
251+
border-bottom-color: darken($grey-color-light, 12%);
252+
}
253+
td {
254+
border: 1px solid $grey-color-light;
255+
}
256+
}

0 commit comments

Comments
 (0)