├── media
└── Something


/media:
--------------------------------------------------------------------------------
 1 | /* ------------------------------- media ------------------------------- */
 2 | 
 3 | /* -------------------- body -------------------- */
 4 | 
 5 | @media screen and (min-width: 1600px) {
 6 | 
 7 | 	.global__body{
 8 | 		width: 50%;
 9 | 	}
10 | 
11 | }
12 | @media screen and (min-width: 1350px) and (max-width: 1600px) {
13 | 
14 | 	.global__body{
15 | 		width: 60%;
16 | 	}
17 | 
18 | }
19 | @media screen and (min-width: 1150px) and (max-width: 1350px) {
20 | 
21 | 	.global__body{
22 | 		width: 70%;
23 | 	}
24 | 
25 | }
26 | @media screen and (min-width: 1000px) and (max-width: 1150px) {
27 | 
28 | 	.global__body{
29 | 		width: 80%;
30 | 	}
31 | 
32 | }
33 | @media screen and (max-width: 1000px) {
34 | 
35 | 	.global__body{
36 | 		width: 100%;
37 | 	}
38 | 	.global__aside{
39 | 		display: none;
40 | 	}
41 | 
42 | }
43 | 


--------------------------------------------------------------------------------
/Something:
--------------------------------------------------------------------------------
  1 | /* ------------------------------- global ------------------------------- */
  2 | 
  3 | /* -------------------- body -------------------- */
  4 | 
  5 | .global__body{
  6 | 	display: grid;
  7 | 	grid-template-areas: "aside main";
  8 | 
  9 | 	margin: 0 auto;
 10 | 	width: 50%;
 11 | 
 12 | 	background-image: url(../img/fon.jpg);
 13 | }
 14 | 
 15 | /* -------------------- aside -------------------- */
 16 | 
 17 | .global__aside{
 18 | 	position: sticky;
 19 | 	padding-top: 47px;
 20 | 
 21 | 	height: 25vh;
 22 | 
 23 | 	font-family: Arial, sans-serif;
 24 | 
 25 | 	background-color: rgba(234, 231, 226, 1);
 26 | }
 27 | .global__aside-header{
 28 | 	text-align: center;
 29 | 
 30 | 	border-bottom: 1px solid #666666;
 31 | }
 32 | .global__aside-list{
 33 | 	padding: 0;
 34 | 
 35 | 	list-style: none;
 36 | }
 37 | .global__aside-list-item{
 38 | 	margin: 4px;
 39 | 
 40 | 	font-size: 1em;
 41 | 
 42 | 	border-radius: 10px;
 43 | 
 44 | 	border: 1px solid #999999;
 45 | 	background-color: rgba(255, 255, 255, 0.4);
 46 | }
 47 | .global__aside-list-item:hover{
 48 | 	background-color: rgba(255, 255, 255, 1);
 49 | }
 50 | .global__aside-list-item:hover a{
 51 | 	text-decoration: underline;
 52 | }
 53 | .global__aside-list-item-link{
 54 | 	display: block;
 55 | 
 56 | 	padding: 4px 10px;
 57 | 
 58 | 	text-decoration: none;
 59 | 
 60 | 	color: #000000;
 61 | }
 62 | 
 63 | /* -------------------- main -------------------- */
 64 | 
 65 | .global__main{
 66 | 	padding: 0 40px;
 67 | 
 68 | 	font-family: Calibri, serif;
 69 | 
 70 | 	background-color: rgba(234, 231, 226, 1);
 71 | }
 72 | 
 73 | .global__main-header{
 74 | 	font-family: Arial, sans-serif;
 75 | 
 76 | 	border-bottom: 1px solid #666666;
 77 | }
 78 | .global__main-subheader{
 79 | 	font-family: Arial, sans-serif;
 80 | }
 81 | 
 82 | .global__main-text{
 83 | 	font-size: 1.05em;
 84 | }
 85 | .global__main-notice{
 86 | 	padding: 5px;
 87 | 	padding-left: 15px;
 88 | 
 89 | 	border-left: 5px solid burlywood;
 90 | 	background-color: rgba(222, 184, 135, 0.4);
 91 | }
 92 | .global__main-list{
 93 | 	font-size: 1.05em;
 94 | }
 95 | .global__main-list-item{
 96 | 	margin: 16px 0;
 97 | }
 98 | 
 99 | .global__main-image{
100 | 	display: block;
101 | 
102 | 	margin: 10px auto;
103 | 
104 | 	width: 100%;
105 | 
106 | 	border: 1px solid #666666;
107 | }
108 | 
109 | .global__main-table{
110 | 	border-collapse: collapse;
111 | }
112 | .global__main-table th{
113 | 	font-size: 1.05em;
114 | 
115 | 	border: 1px solid #999999;
116 | }
117 | .global__main-table td{
118 | 	padding: 5px;
119 | 
120 | 	border: 1px solid #999999;
121 | }
122 | 


--------------------------------------------------------------------------------