Skip to content

Commit c47ad8d

Browse files
AilysGeisterAilysGeister
authored
responsive css
1 parent 474a9d1 commit c47ad8d

1 file changed

Lines changed: 122 additions & 36 deletions

File tree

‎stylesheet.css‎

Lines changed: 122 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,139 @@
1-
body {
1+
* {
2+
box-sizing: border-box;
23
margin: 0;
3-
background-color: rgb(250, 249, 246);
4-
font-size: large;
4+
padding: 0;
5+
}
6+
7+
body {
8+
font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
9+
background-color: #faf9f6;
10+
color: #222;
11+
line-height: 1.6;
512
}
613

714
header {
8-
color: azure;
9-
background-color: rgb(60, 93, 160);
10-
width: 100%;
15+
position: sticky;
16+
top: 0;
17+
background-color: #3c5da0;
18+
color: white;
19+
padding: 0.75rem 1rem;
1120
display: flex;
12-
flex-direction:row;
13-
justify-content: center;
1421
align-items: center;
15-
gap: 2em;
16-
17-
button {
18-
background-color: rgb(27, 56, 112);
19-
border-radius: 25%;
20-
border: none;
21-
height: 50px;
22-
width: 50px;
23-
display:flex;
24-
justify-content: center;
25-
align-items: center;
26-
}
22+
gap: 1rem;
23+
z-index: 100;
24+
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
2725
}
2826

29-
footer {
30-
text-align: center;
27+
header h1 {
28+
font-size: 1.4rem;
29+
}
30+
31+
header button {
32+
background-color: #1b3870;
33+
border: none;
34+
border-radius: 8px;
35+
padding: 6px;
36+
cursor: pointer;
37+
}
38+
39+
header button:hover {
40+
background-color: #244b92;
3141
}
3242

3343
#content {
34-
text-align: center;
44+
max-width: 900px;
45+
margin: auto;
46+
padding: 1.5rem;
3547
}
3648

37-
summary {
38-
border: 1px solid black;
39-
background-color: rgb(236, 236, 236);
40-
width: 50%;
49+
#summary {
50+
background-color: #ececec;
51+
padding: 1rem;
52+
border-bottom: 1px solid #ccc;
53+
}
4154

42-
a {
43-
text-decoration: none;
44-
color: inherit;
45-
}
55+
#summary h2 {
56+
margin-bottom: 0.5rem;
57+
}
58+
59+
#summary h3 {
60+
margin-top: 1rem;
61+
font-size: 1rem;
62+
}
63+
64+
#summary ul {
65+
list-style: none;
66+
margin-left: 1rem;
67+
}
68+
69+
#summary a {
70+
text-decoration: none;
71+
color: #1b3870;
72+
}
73+
74+
#summary a:hover {
75+
text-decoration: underline;
76+
}
77+
78+
#content > div {
79+
margin-bottom: 3rem;
80+
}
81+
82+
h2 {
83+
margin-top: 2rem;
84+
margin-bottom: 1rem;
85+
color: #3c5da0;
86+
}
87+
88+
h3 {
89+
margin-top: 1.2rem;
90+
margin-bottom: 0.4rem;
91+
}
92+
93+
p {
94+
margin-bottom: 1rem;
95+
}
96+
97+
pre {
98+
margin: 1rem 0;
99+
overflow-x: auto;
46100
}
47101

48102
code {
49-
padding: 10px;
50-
border-radius: 10px;
51-
background-color: rgb(52, 52, 52);
52-
color: yellow;
53-
}
103+
display: block;
104+
padding: 1rem;
105+
border-radius: 8px;
106+
background-color: #2b2b2b;
107+
color: #f1f1a3;
108+
font-family: Consolas, monospace;
109+
font-size: 0.9rem;
110+
}
111+
112+
p img {
113+
vertical-align: middle;
114+
}
115+
116+
footer {
117+
text-align: center;
118+
padding: 2rem 1rem;
119+
background-color: #f0f0f0;
120+
}
121+
122+
footer a {
123+
margin: 0 0.5rem;
124+
}
125+
126+
@media (max-width: 768px) {
127+
128+
header h1 {
129+
font-size: 1.2rem;
130+
}
131+
132+
#content {
133+
padding: 1rem;
134+
}
135+
136+
#summary {
137+
font-size: 0.95rem;
138+
}
139+
}

0 commit comments

Comments
 (0)