From 7a199e728f25011662c523e6019af6c9d8d8d89f Mon Sep 17 00:00:00 2001 From: Matthew Iverson Date: Fri, 29 Nov 2024 14:38:20 -0500 Subject: [PATCH] Add static/css/xmas_theme.css --- static/css/xmas_theme.css | 136 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 136 insertions(+) create mode 100644 static/css/xmas_theme.css diff --git a/static/css/xmas_theme.css b/static/css/xmas_theme.css new file mode 100644 index 0000000..350ec0c --- /dev/null +++ b/static/css/xmas_theme.css @@ -0,0 +1,136 @@ +/* xmas_theme.css */ +body { + background-color: #d32f2f; /* Festive red background */ + color: #ffffff; /* White text for contrast */ + font-family: 'Arial', sans-serif; + background-image: url('/static/images/snowflake-pattern.png'); /* Optional: subtle snowflake background */ + background-size: cover; + background-attachment: fixed; +} + +h1, h2, h3, p { + color: #ffeb3b; /* Cheerful yellow for headings */ +} + +a { + color: #4caf50; /* Xmas green for links */ + text-decoration: none; +} + +a:hover { + color: #ffffff; /* White for hover effect */ + text-decoration: underline; +} + +button { + background-color: #4caf50; /* Xmas green button background */ + color: #ffffff; /* White text */ + border: none; + padding: 10px 20px; + border-radius: 5px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); + transition: background-color 0.3s ease; +} + +button:hover { + background-color: #388e3c; /* Darker green on hover */ + cursor: pointer; +} + +.navbar { + background-color: #b71c1c; /* Deep red navbar */ + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); +} + +.navbar a { + color: #ffeb3b; /* Yellow links */ + font-weight: bold; +} + +.navbar a:hover { + color: #ffffff; /* White hover effect */ +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 20px; +} + +.card { + background-color: #4caf50; /* Xmas green for cards */ + border-radius: 8px; + padding: 20px; + margin-bottom: 20px; + color: #ffffff; /* White text on cards */ + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); +} + +.card-header { + font-size: 1.5rem; + color: #ffffff; /* White headers inside cards */ + font-weight: bold; + border-bottom: 2px solid #ffeb3b; /* Yellow underline for card headers */ + padding-bottom: 10px; + margin-bottom: 15px; +} + +input[type="text"], textarea { + width: 100%; + padding: 10px; + border: 1px solid #ffeb3b; /* Yellow borders */ + border-radius: 5px; + background-color: #b71c1c; /* Deep red input background */ + color: #ffffff; /* White text for contrast */ + margin-bottom: 15px; +} + +input[type="submit"], input[type="button"] { + background-color: #4caf50; /* Green buttons */ + color: white; + border: none; + padding: 10px 20px; + border-radius: 5px; + cursor: pointer; + font-size: 1rem; + transition: background-color 0.3s ease; +} + +input[type="submit"]:hover, input[type="button"]:hover { + background-color: #388e3c; /* Darker green on hover */ +} + +footer { + background-color: #263238; /* Neutral dark gray for footer */ + color: #ffffff; + text-align: center; + padding: 20px; + border-top: 2px solid #ffeb3b; /* Festive yellow border */ +} + +footer a { + color: #4caf50; /* Green links */ +} + +footer a:hover { + color: #ffeb3b; /* Yellow hover effect */ +} + +/* Additional Xmas touches */ +.snowflake { + font-size: 2rem; + color: #ffffff; + animation: fall 10s linear infinite; + position: absolute; +} + +@keyframes fall { + 0% { + top: -10%; + transform: translateX(0); + } + 100% { + top: 100%; + transform: translateX(20px); + } +}