diff options
| -rw-r--r-- | static/css/styles.css | 269 |
1 files changed, 269 insertions, 0 deletions
diff --git a/static/css/styles.css b/static/css/styles.css new file mode 100644 index 0000000..7d3ad97 --- /dev/null +++ b/static/css/styles.css @@ -0,0 +1,269 @@ +:root { + --primary-color: #3498db; + --secondary-color: #2ecc71; + --accent-color: #e74c3c; + --text-color: #34495e; + --background-color: #ecf0f1; + --link-color: #2980b9; + --border-color: #bdc3c7; + --shadow: rgba(0, 0, 0, 0.1); + --dark-shadow: rgba(0, 0, 0, 0.2); +} +body, h1, h2, ul, li { + margin: 0; + padding: 0; +} + +body { + background: var(--background-color); + color: var(--text-color); +} + +main { + margin: 1em 2.5vw; +} + +main > article { + max-width: 70em; +} + +nav { + background-color: var(--primary-color); + padding: 10px; + text-align: center; +} + +menu { + list-style-type: none; + padding: 0; +} + +.card { + margin-top: 20px; + margin-bottom: 15px; + border: 3px solid var(--border-color); + padding: 20px; + border-radius: 8px; + background-color: var(--background-color); + box-shadow: 0 2px 4px var(--shadow); + transition: background-color 0.3s; +} + +.card .card-title { + color: var(--link-color); + margin: 0; + text-decoration: var(--decoration, inherit); +} + +.card .card-body { + color: var(--text-color); + width: 100%; +} + +.card-content { + display: flex; + flex-direction: column; + align-items: center; +} + +.card:hover { + color: var(--link-color); + border-color: var(--secondary-color); + --decoration: underline; +} + +a { + color: var(--link-color); + /* display: block; */ +} + +header > :not(nav) { + margin-left: 1.5vw; +} +header > h1 { + padding-top: 0.2em; +} + +/* Style the site title */ +h1 a { + color: var(--primary-color); + text-decoration: none; +} + +nav li { + display: inline-block; + padding: 0.1em 0.3em; +} + +nav a { + color: var(--background-color); + text-decoration: none; +} + +/* Hover effect for the links */ +nav a:hover { + text-decoration: underline; +} + +menu a { + text-decoration: none; +} + +#landing-image { + width: 100%; + max-height: 100%; + border-radius: 10px; + box-shadow: 0 4px 8px var(--shadow); +} + +.featured-image-container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border-right: 2px solid var(--border-color); + max-width: 55%; +} + +.featured-image-container figure { + max-width: 100%; + max-height: 100%; +} + +.featured-image-container figure figcaption { + text-align: center; +} + +.featured { + display: flex; + flex-direction: row; + gap: 10px; +} + +@media (width <= 850px) { + .featured { + flex-direction: column; + } + + .featured-image-container { + border-right: 0; + border-bottom: 2px solid var(--border-color); + max-width: 100%; + } +} + +.recent-updates { + display: flex; + flex-wrap: wrap; + flex-direction: row; + justify-content: center; +} + +.recent-projects, .recent-research, .recent-blog { + list-style-position: inside; + width: 33.3%; +} + +@media (width <= 700px) { + .recent-updates { + flex-direction: column; + align-items: center; + } + + .recent-projects, .recent-research, .recent-blog { + width: 100%; + } +} + +.links-container { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 1em; + margin: 0.25em; +} + +footer { + display: flex; + flex-direction: column; + align-items: center; +} + +details summary { + cursor: pointer; + padding: 10px; + background-color: #ddd; + border: 2px solid #ddd; + border-radius: 5px; +} + +details > :not(summary) { + padding: 0 15px 10px 15px; +} + +details { + /* TODO: add bluegrey background */ + background-color: #ddd; + border-radius: 5px; + box-shadow: 1px 1px 1px var(--dark-shadow); +} + +details[open] summary, details summary:hover { + background-color: var(--primary-color); + border-color: var(--primary-color); + color: var(--background-color); +} + +hr { + color: var(--border-color); +} + +nav > h1 { + font-size: 2em; + transition: transform 0.3s ease-in-out; +} + +nav > h1:hover { + transform: scale(1.5); +} + +/* Container for the tags */ +.card-meta { + display: flex; /* Use flexbox to create a horizontal layout */ + flex-wrap: wrap; /* Allow the tags to wrap to the next line if there's not enough space */ + gap: 8px; /* Space between each tag */ + margin-top: 0.5em; +} + +.card-image { + max-width: 100%; +} + +.meta-tag { + display: inline-block; + padding: 8px 16px; + background-color: var(--primary-color); + color: var(--background-color); + border-radius: 16px; + text-decoration: none; + transition: background-color 0.3s ease; +} + +.meta-tag:hover { + background-color: var(--link-color); +} + +.logo { + width: 50px; + height: 50px; +} + +.logo path { + fill: var(--primary-color); +} + +.logo:hover path { + /* filter: brightness(0.5); */ + fill: var(--link-color); +} |