-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
114 lines (98 loc) · 2.27 KB
/
style.css
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
108
109
110
111
112
113
114
/******************************************************************************
START Glitch hello-app default styles
The styles in this section do some minimal CSS resets, set default fonts and
colors, and handle the layout for our footer and "Remix on Glitch" button. If
you're new to CSS they may seem a little complicated, but you can scroll down
to this section's matching END comment to see page-specific styles.
******************************************************************************/
/*
The style rules specify elements by type and by attributes such as class and ID
Each section indicates an element or elements, then lists the style properties to apply
See if you can cross-reference the rules in this file with the elements in index.html
*/
/* Our default values set as CSS variables */
:root {
--color-bg: white;
--color-text-main: white;
--color-primary: white;
--image-max-width: 500px; /* Размер изображения */
}
/* Basic page style resets */
* {
box-sizing: border-box;
}
[hidden] {
display: none !important;
}
/* Navigation grid */
.footer {
color: gray;
font-size: 13px;
text-align: center;
}
.footer a:link,
a:visited {
color: #0645AD;
cursor: pointer;
text-decoration: underline;
}
.footer a:hover {
color: blue;
}
body {
background-color: black;
}
a {
color: white;
}
/* Page structure */
.wrapper {
display: grid;
place-items: center;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* Very light scaling for our illustration */
.title {
color: white;
font-family: sans-serif;
font-style: normal;
font-size: 80%;
line-height: 90%;
margin: 0;
}
/* Very light scaling for our illustration */
.illustration {
max-width: 100%;
max-height: var(--image-max-width);
margin-top: var(--image-margin);
}
/* Button - Add it from the README instructions */
button,
input {
font-family: inherit;
font-size: 0%;
background: #FFFFFF;
border: 1px solid #000000;
box-sizing: border-box;
border-radius: 4px;
padding: 0.5rem 1rem;
transition: 500ms;
}
/* Subheading */
h2 {
color: white;
font-family: arial;
font-style: initial;
}
p {
color: white;
}
/* Interactive image */
.illustration:active {
transform: translateY(0px);
}