Skip to content

Commit 8072c42

Browse files
Dominik-developerDominik-developer
authored
Work (#8)
* Add files via upload * Fix padding * Update * Fix link
1 parent fae10fb commit 8072c42

File tree

3 files changed

+307
-4
lines changed

3 files changed

+307
-4
lines changed

‎example.html

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,25 @@
77
<meta charset="UTF-8">
88
<meta name="viewport" content="width=device-width, initial-scale=1.0">
99
<title>Example page for CSS library</title>
10+
<meta name="author" content="Dominik-developer">
1011

1112
<!-- This link adds CSS library-->
1213
<link rel="stylesheet" type="text/css" href="https://dominik-developer.github.io/BaseFrame_CSS_library/index.css">
14+
15+
<!-- Additional styles for exemple webiste -->
16+
<style>
17+
body {
18+
font-size: larger;
19+
}
20+
</style>
1321

1422
</head>
15-
<body>
23+
<body class="reader">
1624
<section id="container">
1725
<header>
1826
<h1>Real page example of usage of CSS library</h1>
27+
<p>link to repository: <a href="https://github.com/Dominik-developer/BaseFrame_CSS_library">LINK</a></p>
28+
1929
<div>
2030
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam minima suscipit pariatur, quibusdam quis facere alias commodi. Repudiandae odit vel similique laudantium soluta, a sint distinctio consequuntur recusandae. Veniam, sint! At ut dolorem obcaecati inventore dolores rerum magnam ex possimus voluptatibus aliquid, illo aperiam amet debitis quae et illum non aut quam aspernatur voluptas nam sequi provident! Officia error cumque dolor rem voluptatibus incidunt veniam aperiam ut placeat minima, eos sequi, laudantium ipsum fugit repudiandae delectus soluta similique, doloribus sapiente aut iste. Optio ab necessitatibus deleniti iusto itaque facere harum dolor nihil amet dicta placeat odio, autem tempora nobis repellendus?
2131
</div>

‎index.css

Lines changed: 201 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@
44

55
/* Some features have just been introduced and may not work or cause problems. Any problems or bugs should be reported as soon as possible so that they can be fixed. You can report them by opening a new issue in the library repository. Link to the ropository: https://github.com/Dominik-developer/css_library */
66

7+
78
body {
89
margin: 0;
910
padding: 0;
1011
box-sizing: border-box;
1112
width: 100vw;
12-
/*min-height: 100vh;*/
1313
background-color: #fff;
1414

1515
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
@@ -107,6 +107,33 @@ header {
107107
box-sizing: border-box;
108108
background-color: #fff;
109109
width: 100vw;
110+
}
111+
112+
@media (min-width: 1201px) {
113+
header {
114+
width: 100%;
115+
margin: 0 auto;
116+
}
117+
}
118+
119+
@media (max-width: 1200px) {
120+
header {
121+
width: 100%;
122+
margin: 0 auto;
123+
}
124+
}
125+
126+
@media (max-width: 768px) {
127+
header {
128+
width: 100%;
129+
margin: 0 auto;
130+
}
131+
}
132+
133+
@media (max-width: 480px) {
134+
header {
135+
width: 100%;
136+
margin: 0 auto;
110137
}
111138

112139
@media (min-width: 1201px) {
@@ -124,6 +151,80 @@ header {
124151
}
125152
}
126153

154+
155+
/* MAIN */
156+
main {
157+
display: block;
158+
box-sizing: border-box;
159+
background-color: #fff;
160+
width: 100vw;
161+
}
162+
163+
@media (min-width: 1201px) {
164+
main {
165+
width: 100%;
166+
margin: 0 auto;
167+
}
168+
}
169+
170+
@media (max-width: 1200px) {
171+
main {
172+
width: 100%;
173+
margin: 0 auto;
174+
}
175+
}
176+
177+
@media (max-width: 768px) {
178+
main {
179+
width: 100%;
180+
margin: 0 auto;
181+
}
182+
}
183+
184+
@media (max-width: 480px) {
185+
main {
186+
width: 100%;
187+
margin: 0 auto;
188+
}
189+
}
190+
191+
192+
/* FOOTER */
193+
footer {
194+
display: block;
195+
box-sizing: border-box;
196+
background-color: #fff;
197+
width: 100vw;
198+
}
199+
200+
@media (min-width: 1201px) {
201+
footer {
202+
width: 100%;
203+
margin: 0 auto;
204+
}
205+
}
206+
207+
@media (max-width: 1200px) {
208+
footer {
209+
width: 100%;
210+
margin: 0 auto;
211+
}
212+
}
213+
214+
@media (max-width: 768px) {
215+
footer {
216+
width: 100%;
217+
margin: 0 auto;
218+
}
219+
}
220+
221+
@media (max-width: 480px) {
222+
footer {
223+
width: 100%;
224+
margin: 0 auto;
225+
}
226+
}
227+
127228
@media (max-width: 768px) {
128229
footer {
129230
width: 90vw;
@@ -137,20 +238,117 @@ header {
137238
padding: 10px;
138239
}
139240
}
140-
241+
141242

142243
/* CENTERING ELEMENT CLASSES */
143244
.centerOutside {
144245
display: flex;
145246
justify-content: center;
146247
align-items: center;
147248
height: 100vh; /* basics height of outer element, here height of the browser */
148-
149249
}
150250

151251
.centerInside {
152252
width: 50%; /* basics width for inner element */
153253
height: 50%; /* basics height for inner element */
154254
background-color: lightblue; /* basics background color for inner element so its visible */
255+
}
256+
257+
258+
/* This class add nice styling of margins and width to website */
259+
body.reader {}
260+
261+
/* HEADER class: reader */
262+
body.reader header {}
263+
264+
@media (min-width: 1201px) {
265+
body.reader header {
266+
width: 90vw;
267+
padding: 20px;
268+
}
269+
}
270+
271+
@media (max-width: 1200px) {
272+
body.reader header {
273+
width: 90vw;
274+
padding: 10px;
275+
}
276+
}
277+
278+
@media (max-width: 768px) {
279+
body.reader header {
280+
width: 90vw;
281+
padding: 10px;
282+
}
283+
}
284+
285+
@media (max-width: 480px) {
286+
body.reader header {
287+
width: 90vw;
288+
padding: 10px;
289+
}
290+
}
291+
292+
293+
/* MAIN class: reader */
294+
body.reader main {}
295+
296+
@media (min-width: 1201px) {
297+
body.reader main {
298+
width: 90vw;
299+
padding: 20px;
300+
}
301+
}
155302

303+
@media (max-width: 1200px) {
304+
body.reader main {
305+
width: 90vw;
306+
padding: 10px;
307+
}
308+
}
309+
310+
@media (max-width: 768px) {
311+
body.reader main {
312+
width: 90vw;
313+
padding: 10px;
314+
}
315+
}
316+
317+
@media (max-width: 480px) {
318+
body.reader main {
319+
width: 90vw;
320+
padding: 10px;
321+
}
322+
}
323+
324+
325+
/* FOOTER */
326+
footer {}
327+
328+
@media (min-width: 1201px) {
329+
body.reader footer {
330+
width: 90vw;
331+
padding: 20px;
332+
}
333+
}
334+
335+
@media (max-width: 1200px) {
336+
body.reader footer {
337+
width: 90vw;
338+
padding: 10px;
339+
}
340+
}
341+
342+
@media (max-width: 768px) {
343+
body.reader footer {
344+
width: 90vw;
345+
padding: 10px
346+
}
347+
}
348+
349+
@media (max-width: 480px) {
350+
body.reader footer {
351+
width: 90vw;
352+
padding: 10px;
353+
}
156354
}

‎paddings.css

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
2+
/* HEADER */
3+
body.reader header {}
4+
5+
@media (min-width: 1201px) {
6+
body.reader header {
7+
width: 90vw;
8+
padding: 20px;
9+
}
10+
}
11+
12+
@media (max-width: 1200px) {
13+
body.reader header {
14+
width: 90vw;
15+
padding: 10px;
16+
}
17+
}
18+
19+
@media (max-width: 768px) {
20+
body.reader header {
21+
width: 90vw;
22+
padding: 10px;
23+
}
24+
}
25+
26+
@media (max-width: 480px) {
27+
body.reader header {
28+
width: 90vw;
29+
padding: 10px;
30+
}
31+
}
32+
33+
34+
/* MAIN */
35+
body.reader main {}
36+
37+
@media (min-width: 1201px) {
38+
body.reader main {
39+
width: 90vw;
40+
padding: 20px;
41+
}
42+
}
43+
44+
@media (max-width: 1200px) {
45+
body.reader main {
46+
width: 90vw;
47+
padding: 10px;
48+
}
49+
}
50+
51+
@media (max-width: 768px) {
52+
body.reader main {
53+
width: 90vw;
54+
padding: 10px;
55+
}
56+
}
57+
58+
@media (max-width: 480px) {
59+
body.reader main {
60+
width: 90vw;
61+
padding: 10px;
62+
}
63+
}
64+
65+
66+
/* FOOTER */
67+
body.reader footer {}
68+
69+
@media (min-width: 1201px) {
70+
body.reader footer {
71+
width: 90vw;
72+
padding: 20px;
73+
}
74+
}
75+
76+
@media (max-width: 1200px) {
77+
body.reader footer {
78+
width: 90vw;
79+
padding: 10px;
80+
}
81+
}
82+
83+
@media (max-width: 768px) {
84+
body.reader footer {
85+
width: 90vw;
86+
padding: 10px
87+
}
88+
}
89+
90+
@media (max-width: 480px) {
91+
body.reader footer {
92+
width: 90vw;
93+
padding: 10px;
94+
}
95+
}

0 commit comments

Comments
 (0)