test-css/style.css at main · d-stuff/test-css · 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
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

#app {
 font-family: 'Roboto', sans-serif;
 height: 100vh;
 --font-regular: 16px;
 --font-big: 24px;
 --font-bigger: 28px;
 --font-huge: 32px;
 --main-color: #8bc34a;
 --secondary-color: #607d8b;
}

#app main {
 min-height: 100vh;
 overflow: auto;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

a { color: var(--main-color); }
a:hover { border-bottom: 1px solid var(--main-color); }

p, h1, h2, h3, h4, h5 {
  padding: 10px;
}

p, .post-item-short {
  font-size: var(--font-regular);
  line-height: calc(var(--font-regular) * 1.7)
}

h1 {
  font-size: var(--font-huge);
}

h2 {
  font-size: var(--font-bigger);
}

h3 {
  font-size: var(--font-big);
}

.menu-wrapper {
 background-color: var(--secondary-color);
 padding: 10px;
 margin: 0;
}

.menu-wrapper .menu { display: flex; flex-direction: row; align-items: center; gap: 10px; }

.menu-link a { display: block; color: #000; padding: 10px; }
.menu-link a:hover { border: none; background-color: #000; color: #fff;  }

.posts-list .post-item {
 margin: 10px;
 padding: 10px;
 border-radius: 5px;
 background-color: var(--main-color);
 transition: background-color 0.3s linear;
}

.posts-list .post-item h2 { padding: 10px 0; }

.posts-list .post-item a { color: #fff; }
.posts-list .post-item a:hover, .posts-list .post-item:hover a { border-bottom: 1px solid #fff; }

.posts-list .post-item:hover { background-color: #64b596; }

.post-short, .post-short p {
 background-color: #eee;
 font-size: var(--font-big);
}

footer, .footer {
 position: sticky;
 top: 100%;
 padding: 10px;
 background-color: #64b596;
}