Some_Teams/style.css at main · veeblom/Some_Teams · GitHub

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
138
139
140
141
142
143
/* -----------------------------
   General page styling
----------------------------- */
body {
    font-family: Arial, sans-serif; /* Use a clean, readable font */
    background-color: #f9f9f9;      /* Light gray background for the page */
    margin: 0;                       /* Remove default browser margin */
    padding: 20px;                   /* Add some space around the content */
    color: #333;                     /* Dark gray text color for readability */
}

/* -----------------------------
   Header styling
----------------------------- */
header {
    background-color: #333; /* Dark gray/black background for the header */
    color: white;           /* White text in header */
    padding: 10px 20px;     /* Space inside the header */
    margin-bottom: 20px;    /* Space between header and main content */
}

/* -----------------------------
   Navigation links
----------------------------- */
header nav a {
    color: white;           /* White text for links */
    text-decoration: none;  /* Remove underlines from links */
    margin-right: 15px;     /* Space between links */
    font-weight: bold;      /* Make the links bold */
}

header nav a:hover {
    text-decoration: underline; /* Underline link on hover for visual feedback */
}

/* -----------------------------
   Main content container
----------------------------- */
main {
    max-width: 1000px;      /* Limit content width for readability */
    margin: 0 auto;         /* Center main content horizontally */
}

/* -----------------------------
   Team grid container
----------------------------- */
.team-grid {
    display: flex;          /* Use flexbox to arrange cards in a row */
    flex-wrap: wrap;        /* Allow cards to move to the next line if needed */
    gap: 20px;              /* Space between cards horizontally and vertically */
    justify-content: center;/* Center the cards in the container */
}

/* -----------------------------
   Individual team cards
----------------------------- */
.team-card {
    background-color: #fff;       /* White background for the card */
    border: 1px solid #ddd;       /* Light gray border around the card */
    border-radius: 10px;            /* Rounded corners */
    width: 150px;                   /* Fixed width for all cards */
    text-align: center;             /* Center the team name text */
    padding: 10px;                  /* Space inside the card so content doesn't touch edges */
    transition: transform 0.2s;     /* Smooth hover effect for scaling */
}

/* -----------------------------
   Hover effect for team cards
----------------------------- */
.team-card:hover {
    transform: scale(1.05);         /* Slightly enlarge the card when hovered */
}

/* -----------------------------
   Team logo images inside cards
----------------------------- */
.team-card img {
    width: 100px;           /* Fixed width for logos */
    height: 100px;          /* Fixed height for logos */
    object-fit: contain;    /* Keep logo proportions without stretching */
}

/* -----------------------------
   Footer styling
----------------------------- */
footer {
    background-color: #333;     /* Dark gray background to match header */
    color: white;               /* White text */
    text-align: center;           /* Center the text */
    padding: 10px 0;              /* Space inside the footer */
    margin-top: 20px;             /* Space above the footer */
    border-radius: 0;             /* No rounded corner for full width */
    font-size: 0.9rem;            /* Slightly smaller text */
}

/* -----------------------------
   About Image styling
----------------------------- */
.about-img {
    width: 100%;   /* fills the container */
    height: auto;
    display: block;
}

/* -----------------------------
   About page content centering
----------------------------- */
.about-content {
    text-align: center; /* Center all text inside this container */
    max-width: 600px;   /* Limit width for readability */
    margin: 0 auto;     /* Center the container horizontally */
}

/* -----------------------------
   Team page container
----------------------------- */
.team-detail {
    max-width: 800px;      /* keeps content readable, not stretched too wide */
    margin: 20px auto;     /* centers the container horizontally */
    padding: 20px;         /* space inside the container */
    text-align: center;    /* center headings, logo, and paragraphs */
}

/* -----------------------------
   Team logo on Team page
----------------------------- */
.team-logo-large {
    max-width: 300px;      /* the logo won’t be too big */
    width: 100%;           /* scales down for small screens */
    height: auto;          /* keeps the aspect ratio correct */
    margin: 20px 0;        /* space above and below the image */
}

/* -----------------------------
   Opponents list on Team page
----------------------------- */
.team-detail ul {
    list-style-type: disc;    /* normal bullet points */
    padding-left: 20px;       /* indent bullets */
    text-align: left;          /* left-align opponents list */
    display: inline-block;     /* keeps list centered with the page */
    /* inline-block + text-align: keeps list centered on the page while still having bullets aligned. */
}