leandraportfolio.github.io/about.css at main · LeandraHall/leandraportfolio.github.io · 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
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box; /* Prevent padding/borders from affecting width */
    overflow-x: hidden; /* Hide horizontal overflow */
}

/* Default (Light Mode) */
:root {
    --background-color: #ffffff;
    --text-color: #000000;
    --image-url: url('blonde logo.png')
}

/* Dark Mode */
body.dark-mode {
    --background-color: #000000;
    --text-color: #ffffff;
    --image-url: url('blonde logo 2.png')
}

/* Apply Theme Variables */
body {
    background-color: var(--background-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s; /* Smooth transitions */
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    background-color: #007BFF;   /* Button background color */
    color: white;                /* Button text color */
    border-radius: 5px;          /* Optional: Rounded corners */
    transition: background-color 0.3s;
}


.title {
    font-family: "Faculty Glyphic", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
}

.center{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.center2{
    display: flex;
    justify-content: center;
    align-items: center;
}

#logo{
    content: var(--image-url);
}

.button {
    font-family: "Faculty Glyphic", sans-serif;
    text-decoration: none; /* Ensures no underline for buttons */
    background-color: var(--background-color); /* Green (or your color) */
    border: none;
    color: var(--text-color); /* Button text color */
    padding: 15px 32px;
    display: inline-block;
    font-size: 16px;
    justify-content: center;
    align-items: center;
}

.button a {
    color: inherit;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
}

.artist-bio {
    display: flex;                /* Use flexbox to align text and image side by side */
    align-items: center;          /* Vertically center the text and image */
    gap: 20px;                    /* Space between text and image */
    padding: 85px;
    justify-content: flex-start;  /* Align both elements to the left */
}

/* Styling for text block */
.artist-text {
    font-size: 16px;
    color: var(--text-color);
    max-width: 600px;             /* Limit text width */
}

/* Image styling */
.profileImage img {
    width: 500px;                 /* Set image width */
    height: auto;                 /* Maintain aspect ratio */
    border-radius: 5%;           /* Circular image */
    display: block;               /* Prevent image from stretching */
}

 /* Style inputs with type="text", select elements and textareas */
 input[type=text], select, textarea {
    width: 100%; /* Full width */
    padding: 12px; /* Some padding */
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
  }

  /* Style the submit button with a specific background color etc */
  input[type=submit] {
    background-color: #04AA6D;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  /* When moving the mouse over the submit button, add a darker green color */
  input[type=submit]:hover {
    background-color: #45a049;
  }

  /* Add a background color and some padding around the form */
  .container {
    border-radius: 5px;
    background-color: var(--background-color);
    padding: 20px;
    font-family: "Faculty Glyphic", sans-serif;
  }