maxcoredev.github.io/global.css at master · maxcoredev/maxcoredev.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
body {
    --font-size:         20px; --line-height:         33px;  /* Just for articles */
    --font-size-tiny:    13px; --line-height-tiny:    20px;
    --font-size-small:   14px; --line-height-small:   21px;
    --font-size-medium:  15px; --line-height-medium:  23px;
    --font-size-regular: 16px; --line-height-regular: 24px;
    --font-size-big:     17px; --line-height-big:     26px;
    --font-size-large:   18px; --line-height-large:   28px;

    --grey:         rgba(0,0,0,0.5);
    --grey-on-dark: rgba(255,255,255,0.5);

    --hover:   hsl(0,0%,96%);
    --current: hsl(0,0%,94%);
    --focus:   hsl(0,0%,92%);
    --active:  hsl(0,0%,90%);

    --red:         hsl(0,80%,54%);
    --red-focus:   hsl(0,80%,56%);
    --red-hover:   hsl(0,80%,58%);
    --red-current: hsl(0,80%,40%);
    --red-active:  hsl(0,80%,46%);
    --red-alpha:   hsla(0,80%,54%,0.25);

	--green:         hsl(110,90%,40%);
    --green-focus:   hsl(110,90%,41%);
    --green-hover:   hsl(110,90%,42%);
    --green-current: hsl(110,90%,38%);
    --green-active:  hsl(110,90%,36%);
    --green-alpha:   hsla(110,90%,40%,0.25);

	--blue:         hsl(215,85%,50%);
    --blue-focus:   hsl(215,85%,52%);
    --blue-hover:   hsl(215,85%,54%);
    --blue-current: hsl(215,85%,48%);
    --blue-active:  hsl(215,85%,46%);
	--blue-alpha:   hsla(215,85%,50%,0.25);

	--bold: 500;
    --border-radius: 2px;
    --transition-duration: 0.2s;

	--wrapper: calc((100% - 768px) / 2); /* Instead of wrapper */
	--paragraph: max(calc((100% - 768px) / 2 + 24px), 24px);

    --border-color-light: rgba(0,0,0,0.1);
	--border-color: rgba(0,0,0,0.2);
    --border-color-medium: rgba(0,0,0,0.3);
    --border-color-dark: rgba(0,0,0,0.4);
}

/* Reset */

* {box-sizing:border-box;vertical-align:top;}

table {border-collapse:collapse;}

/* Misc */

a {color:var(--blue);text-decoration:none;}
a:hover {text-decoration:underline;}

img {display:block;max-width:100%;}

b, th {font-weight:var(--bold);}

/* Layout */

html {min-height:100vh;}
body {min-height:100vh;margin:0;overflow-y:scroll;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;}

main > *, main > .p {margin-left:auto;margin-right:auto;}
main > *:not(img):not(column):not(article):not(section):not(div), main > .p {padding-left:var(--paragraph);padding-right:var(--paragraph);}

.wrapper {padding-left:var(--wrapper);padding-right:var(--wrapper);}
.paragraph {padding-left:var(--paragraph);padding-right:var(--paragraph);}

/* Fonts */

body, input, button, select, textarea {font-family:'IBM Plex Sans', sans-serif;font-size:var(--font-size-big);line-height:var(--line-height-big);}

/* Article */

h1, .h1 {font-size:48px;}
h2, .h2 {font-size:32px;}
h3, .h3 {font-size:28px;}
h4, .h4 {font-size:24px;}
h5, .h5 {font-size:16px;}
h6, .h6 {font-size:14px;}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {font-weight:var(--bold);line-height:1.6em;}

h1 a, .h1 a, .h1,
h2 a, .h2 a, .h2,
h3 a, .h3 a, .h3,
h4 a, .h4 a, .h4,
h5 a, .h5 a, .h5,
h6 a, .h6 a, .h6 {padding-top:0.1em;padding-bottom:0.1em;}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {margin-top:var(--line-height);margin-bottom:0;}
p, .p, ul, ol {margin-top:calc(var(--line-height) / 3);margin-bottom:var(--line-height);}
p, .p, li {font-size:var(--font-size);line-height:var(--line-height);}

ul, ol {}
li {margin:calc(var(--line-height) / 3) 0 calc(var(--line-height) / 3) calc(var(--line-height));}
li:first-child {margin-top:0;}
li:last-child {margin-bottom:0;}