-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyle.css
137 lines (116 loc) · 3.66 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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
/* * is a special css element that effects everything */
* {
font-family: "Lucida Grande", "Helvetica", "Arial", sans-serif; /* This sets the font family. Since it is inside a *, it does it for every element */
}
/* things without . do not affect classes, they affect html tags such as <html>, <body> */
html, body {
margin: 0px; /* Margin is the area outside of the box that is padded */
}
body {
background-color: rgb(247 166 166); /* Background-Color sets the background color of an element */
/* Linear Gradient */
background: linear-gradient(to right, #ff4e4e, #feb47b);
height: 100vh;
}
/* things with . affect classes. they affect html tags that have class="" inside of them, like this: <body class="namehere"> */
.content {
margin: 8px; /* Margin is the area outside of the box that is padded */
margin-top: 50px;
}
.contentAboutme {
margin: 8px; /* Margin is the area outside of the box that is padded */
margin-top: 50px;
color: rgb(0 0 0); /* Color is text color */
text-align: center;
}
.YTVideo {
width: 420px; /* Width of the element */
/* Padding but on the right of the element */
height: 345px;
border: black;
border-style: solid;
margin-top: 10px;
margin-left: 10px;
border-width: 3px;
border-radius: 3px;
padding: 5px;
background: rgb(156 156 156 / 49%);
text-align: center;
margin: auto;
}
.modslist {
display: flex; /* flex stuff, confusing */
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
justify-content: flex-start;
align-items: center;
padding: 8px;
width: 70%;
margin: auto;
}
.mod {
width: 200px; /* Width of the element */
/* Padding but on the right of the element */
height: 295px;
border: black;
border-style: solid;
margin-top: 10px;
margin-left: 10px;
border-width: 3px;
border-radius: 3px;
padding: 5px;
background: rgb(156 156 156 / 49%);
}
.navbar {
position: fixed; /* position: fixed makes this always on screen */
height: 30px; /* height sets the height */
top: 0; /* top sets the top position */
width: 100%; /* width: 100% makes this fill the screen */
background-color: rgb(137, 3, 3); /* Background-Color sets the background color of an element */
background: linear-gradient(rgb(191 1 1),rgb(113 8 8)); /* Background can also set the background color of an element, but can do way more. I use it here for just in case browser don't support linear-gradient */
padding: 0px; /* Padding is the area inside of the box that is padded */
box-shadow: 0 0 15px 0 rgb(0 0 0); /* box-shadow makes a drop shadow. confusing */
text-align: center;
display: table-cell;
}
.navbar a {
padding-top: 5.1px;
padding-bottom: 5.1px;
display: inline-table;
padding: 8.20px;
color: rgb(255, 255, 255); /* Color is text color */
text-decoration: none; /* Text decoration is underlines, etc */
}
.mod img {
width: 180px; /* Width of the element */
margin-left: 0px; /* Margin Left, is the margin for the left side of the content */
height: 180px;
border: black;
border-style: solid;
}
.mod p {
height: 45px;
width: 190px;
text-align: center;
text-overflow: ellipsis;
}
.mod p a {
margin-left: 0px !important;
}
.modslist a {
margin-left: 20px;
}
/* a:hover only is used when well, hovering */
.navbar a:hover {
color: rgba(255, 255, 255, 0.747); /* Color is text color */
text-decoration: underline; /* Text decoration is underlines, etc */
}
a {
color: rgb(19, 83, 157);
text-decoration: none;
}
a:hover {
color: rgb(47, 105, 172);
text-decoration: underline;
}