This repository has been archived by the owner on Jan 21, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyle.css
122 lines (110 loc) · 5.16 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
115
116
117
118
119
120
121
122
@charset "UTF-8";
*:focus {
outline: none !important;
}
body {
background-color: #C8C2AA;
background-size: 4px 4px;
background-image: linear-gradient(90deg, transparent, transparent 3px, rgba(0, 0, 0, 0.07) 4px), linear-gradient(transparent, transparent 3px, rgba(0, 0, 0, 0.07) 4px);
color: #4D493E;
font-family: "Noto Sans", sans-serif;
font-weight: 300;
margin: 0;
min-height: 100vh;
box-shadow: inset 0 0 150px rgba(77, 73, 62, 0.4), inset 0 0 150px rgba(77, 73, 62, 0.3);
display: flex;
min-height: 100vh;
flex-direction: column;
letter-spacing: 0.1rem;
}
.container {
padding: 0 4rem;
}
header {
padding: 1rem 0;
}
h1 {
text-transform: uppercase;
font-weight: 300;
letter-spacing: 0.7rem;
text-shadow: 0.3rem 0.3rem 0 rgba(77, 73, 62, 0.3);
}
h1 span {
font-size: 50%;
}
h1 small {
font-weight: 500;
text-transform: none;
text-shadow: none;
letter-spacing: 0.1rem;
}
h1 small::before {
content: "–";
}
.pattern {
border-top: 2px solid #4D493E;
}
footer .pattern {
margin-top: -7%;
scale: 1 -1;
}
.pattern-inner {
height: 40px;
background-size: 50px 3px, 50px 1px, 50px 1px, 50px 1px, 50px 1px, 50px 1px, 50px 1px, 50px 1px, 50px 1px;
background-position: 0 0, 22px 4px, 22px 5px, 22px 6px, 22px 7px, 28px 12px, 28px 13px, 28px 14px, 28px 15px;
background-image: linear-gradient(90deg, #4D493E, #4D493E 10px, transparent 10px), linear-gradient(90deg, rgba(77, 73, 62, 0.4), rgba(77, 73, 62, 0.4) 1px, rgba(77, 73, 62, 0.8) 1px, rgba(77, 73, 62, 0.8) 2px, rgba(77, 73, 62, 0.9) 2px, rgba(77, 73, 62, 0.9) 3px, rgba(77, 73, 62, 0.4) 3px, rgba(77, 73, 62, 0.4) 4px, transparent 4px, transparent 12px, rgba(77, 73, 62, 0.4) 12px, rgba(77, 73, 62, 0.4) 13px, rgba(77, 73, 62, 0.8) 13px, rgba(77, 73, 62, 0.8) 14px, rgba(77, 73, 62, 0.9) 14px, rgba(77, 73, 62, 0.9) 15px, rgba(77, 73, 62, 0.4) 15px, rgba(77, 73, 62, 0.4) 16px, transparent 16px), linear-gradient(90deg, rgba(77, 73, 62, 0.9), rgba(77, 73, 62, 0.9) 1px, #4d493e 1px, #4d493e 2px, #4d493e 2px, #4d493e 3px, rgba(77, 73, 62, 0.9) 3px, rgba(77, 73, 62, 0.9) 4px, transparent 4px, transparent 12px, rgba(77, 73, 62, 0.9) 12px, rgba(77, 73, 62, 0.9) 13px, #4d493e 13px, #4d493e 14px, #4d493e 14px, #4d493e 15px, rgba(77, 73, 62, 0.9) 15px, rgba(77, 73, 62, 0.9) 16px, transparent 16px), linear-gradient(90deg, rgba(77, 73, 62, 0.9), rgba(77, 73, 62, 0.9) 1px, #4d493e 1px, #4d493e 2px, #4d493e 2px, #4d493e 3px, rgba(77, 73, 62, 0.9) 3px, rgba(77, 73, 62, 0.9) 4px, transparent 4px, transparent 12px, rgba(77, 73, 62, 0.9) 12px, rgba(77, 73, 62, 0.9) 13px, #4d493e 13px, #4d493e 14px, #4d493e 14px, #4d493e 15px, rgba(77, 73, 62, 0.9) 15px, rgba(77, 73, 62, 0.9) 16px, transparent 16px), linear-gradient(90deg, rgba(77, 73, 62, 0.4), rgba(77, 73, 62, 0.4) 1px, rgba(77, 73, 62, 0.8) 1px, rgba(77, 73, 62, 0.8) 2px, rgba(77, 73, 62, 0.9) 2px, rgba(77, 73, 62, 0.9) 3px, rgba(77, 73, 62, 0.4) 3px, rgba(77, 73, 62, 0.4) 4px, transparent 4px, transparent 12px, rgba(77, 73, 62, 0.4) 12px, rgba(77, 73, 62, 0.4) 13px, rgba(77, 73, 62, 0.8) 13px, rgba(77, 73, 62, 0.8) 14px, rgba(77, 73, 62, 0.9) 14px, rgba(77, 73, 62, 0.9) 15px, rgba(77, 73, 62, 0.4) 15px, rgba(77, 73, 62, 0.4) 16px, transparent 16px), linear-gradient(90deg, rgba(77, 73, 62, 0.4), rgba(77, 73, 62, 0.4) 1px, rgba(77, 73, 62, 0.8) 1px, rgba(77, 73, 62, 0.8) 2px, rgba(77, 73, 62, 0.9) 2px, rgba(77, 73, 62, 0.9) 3px, rgba(77, 73, 62, 0.4) 3px, rgba(77, 73, 62, 0.4) 4px, transparent 4px), linear-gradient(90deg, rgba(77, 73, 62, 0.9), rgba(77, 73, 62, 0.9) 1px, #4d493e 1px, #4d493e 2px, #4d493e 2px, #4d493e 3px, rgba(77, 73, 62, 0.9) 3px, rgba(77, 73, 62, 0.9) 4px, transparent 4px), linear-gradient(90deg, rgba(77, 73, 62, 0.9), rgba(77, 73, 62, 0.9) 1px, #4d493e 1px, #4d493e 2px, #4d493e 2px, #4d493e 3px, rgba(77, 73, 62, 0.9) 3px, rgba(77, 73, 62, 0.9) 4px, transparent 4px), linear-gradient(90deg, rgba(77, 73, 62, 0.4), rgba(77, 73, 62, 0.4) 1px, rgba(77, 73, 62, 0.8) 1px, rgba(77, 73, 62, 0.8) 2px, rgba(77, 73, 62, 0.9) 2px, rgba(77, 73, 62, 0.9) 3px, rgba(77, 73, 62, 0.4) 3px, rgba(77, 73, 62, 0.4) 4px, transparent 4px);
background-repeat: repeat-x;
}
button {
cursor: pointer;
font: inherit;
border: none;
padding: 0.4rem 1rem;
background-color: rgba(77, 73, 62, 0.35);
color: #4D493E;
box-sizing: content-box;
position: relative;
border: 1px solid transparent;
border-left: none;
border-right: none;
}
button::before {
content: "";
position: absolute;
z-index: -1;
left: 0;
top: 3px;
bottom: 3px;
width: 0;
background-color: #4D493E;
transition: width 0.2s;
}
button::after {
content: "";
display: none;
position: absolute;
background: #4D493E;
width: 100%;
height: 2px;
left: 0;
bottom: -4px;
}
button:hover, button:focus {
background-color: transparent;
color: #C8C2AA;
border-color: #4D493E;
}
button:hover::before, button:focus::before {
width: 100%;
}
main {
flex: 1;
}
.content {
padding-left: 4rem;
background-image: linear-gradient(90deg, rgba(77, 73, 62, 0.2), rgba(77, 73, 62, 0.2) 14px, transparent 14px, transparent 20px, rgba(77, 73, 62, 0.2) 20px, rgba(77, 73, 62, 0.2) 23px, transparent 23px);
margin-bottom: 2rem;
}
img {
box-shadow: 3px 3px 0 rgba(77, 73, 62, 0.6);
}