From b9d26a638ef5ffb720fb75fa54ff73bd727add91 Mon Sep 17 00:00:00 2001 From: Shubham Shekhawat Date: Wed, 18 Dec 2024 17:23:24 +0530 Subject: [PATCH 1/2] Fix table formatting in CSS --- css/hsf.css | 187 ++++++++++++++++++++++++++++++---------------------- 1 file changed, 107 insertions(+), 80 deletions(-) diff --git a/css/hsf.css b/css/hsf.css index bd3c4f4c0..fd075b6a2 100644 --- a/css/hsf.css +++ b/css/hsf.css @@ -8,13 +8,12 @@ * Override Bootstrap's default container. */ -@media (min-width: 1200px) { + @media (min-width: 1200px) { .container { width: 970px; } } - /* * Centered image */ @@ -24,7 +23,6 @@ display: block; } - /* * Masthead for nav */ @@ -32,7 +30,7 @@ .blog-masthead { background-color: #428bca; -webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1); - box-shadow: inset 0 -2px 5px rgba(0,0,0,.1); + box-shadow: inset 0 -2px 5px rgba(0,0,0,.1); } /* Nav links */ @@ -67,7 +65,6 @@ border-left: 5px solid transparent; } - /* * Blog name and description */ @@ -87,7 +84,6 @@ color: #999; } - /* * Main column and sidebar layout */ @@ -113,7 +109,6 @@ margin-bottom: 0; } - /* Pagination */ .pager { margin-bottom: 60px; @@ -126,14 +121,13 @@ border-radius: 30px; } - /* * Blog posts */ .blog-post { margin-bottom: 30px; - padding: 10px 20px; /* I don't understand why this is needed... */ + padding: 10px 20px; } .blog-post-title { margin-bottom: 5px; @@ -144,7 +138,6 @@ color: #999; } - /* * Footer */ @@ -153,6 +146,73 @@ margin-bottom: 50px; } +/* Table Styles */ +table { + width: 100%; + border-collapse: collapse; /* Ensures tables don't have gaps between cells */ + margin-bottom: 30px; /* Space below the table */ +} + +th, td { + padding: 12px; /* Adds space around content */ + text-align: left; /* Aligns text to the left */ + border: 1px solid #ddd; /* Light border color */ +} + +th { + background-color: #f8f9fa; /* Light background for header */ + font-weight: bold; /* Bold text for headers */ +} + +tr:nth-child(even) { + background-color: #f2f2f2; /* Alternating row colors */ +} + +tr:hover { + background-color: #e9ecef; /* Hover effect on rows */ +} + +/* Training Table Styles */ +.training table { + width: 100%; + border-collapse: collapse; /* Ensures there are no gaps between cells */ +} + +.training table tr { + background-color: white; + border: 1px solid #cccccc; /* Add borders around rows */ +} + +.training table tr:nth-child(2n) { + background-color: #f8f8f8; /* Alternate row color */ +} + +.training table th, .training table td { + padding: 8px 15px; /* Adjust padding for better spacing */ + border: 1px solid #cccccc; /* Border for cells */ + text-align: left; /* Align text to the left */ +} + +.training table th { + background-color: #f0f0f0; /* Light background for table headers */ + font-weight: bold; /* Make header text bold */ +} + +.training table tr:hover { + background-color: #f2f2f2; /* Hover effect for rows */ +} + +.training table tr td:first-child, +.training table tr th:first-child { + padding-left: 20px; /* Add extra padding on the left for the first column */ +} + +.training table tr td:last-child, +.training table tr th:last-child { + padding-right: 20px; /* Add extra padding on the right for the last column */ +} + +/* Footer */ .blog-footer { padding: 40px 0; color: #999; @@ -160,10 +220,12 @@ background-color: #f9f9f9; border-top: 1px solid #e5e5e5; } + .blog-footer p:last-child { margin-bottom: 0; } +/* Navbar */ .navbar-nav { padding-top: 0px; padding-bottom: 0px; @@ -177,20 +239,20 @@ } .navbar-brand { - height: 40px; - padding: 9.5px 15px; - font-size: 15px; + height: 40px; + padding: 9.5px 15px; + font-size: 15px; } .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover, -.navbar-default .navbar-brand:hover{ +.navbar-default .navbar-brand:hover { color: #f39c12; } .navbar-nav>li>a { - padding-top: 9.5px; - padding-bottom: 9.5px + padding-top: 9.5px; + padding-bottom: 9.5px; } a { @@ -212,25 +274,25 @@ body { } .announcement { - background-color: #f39c12; - border-color: #f39c12; - color: #ffffff; - padding: 15px; - margin-bottom: 21px; - border: 1px solid transparent; - border-radius: 4px; - margin-left: -15px; - margin-right: -15px; + background-color: #f39c12; + border-color: #f39c12; + color: #ffffff; + padding: 15px; + margin-bottom: 21px; + border: 1px solid transparent; + border-radius: 4px; + margin-left: -15px; + margin-right: -15px; } .lead { font-size: 20px; } + .event-announce > a:hover { - color: #333333; + color: #333333; } - .alert { padding: 8px; } @@ -241,22 +303,22 @@ body { .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { - background-color: #555555; + background-color: #555555; } [role="button"] { - font-size: 17px; + font-size: 17px; } .alignleft { float: left; } + .alignright { float: right; } /* COLORFUL BIG LINK */ - .big-link-container { width: 100%; display: grid; @@ -280,9 +342,6 @@ body { } /* TRAINING GROUP */ - -/* LIST OF MODULES */ - .training-module { width: 100%; min-height: 100pt; @@ -298,6 +357,7 @@ body { .tm-alpha { background-image: repeating-linear-gradient(-45deg, transparent, transparent 20px, #f9f2f4 20px, #f9f2f4 40px); } + .tm-beta { background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, #f9f9f1 10px, #f9f9f1 40px); } @@ -309,7 +369,6 @@ body { font-size: 17px; } - .training-module-status { padding-top: 10pt; text-align: center; @@ -330,7 +389,6 @@ body { align-self: end; } - .training-module-videos { text-align: center; display: block; @@ -344,59 +402,28 @@ body { gap: 10px; } -.training table { - padding: 0; - width: 100%; - } -.training table tr { - border: 1px solid #cccccc; - background-color: white; - margin: 0; - padding: 0; - } -.training table tr:nth-child(2n) { - background-color: #f8f8f8; -} -.training table tr th { - font-weight: bold; - border: 1px solid #cccccc; - text-align: left; - margin: 0; - padding: 6px 13px; -} -.training table tr td { - border: 1px solid #cccccc; - text-align: left; - margin: 0; - padding: 6px 13px; -} -.training table tr th :first-child, .training table tr td :first-child { - margin-top: 0; -} -.training table tr th :last-child, .training table tr td :last-child { - margin-bottom: 0; -} - figure.centered-figure { - text-align: center + text-align: center; } + .centered-figure > img { - width:80%; - max-width: 600px + width: 80%; + max-width: 600px; } + .centered-figure > figcaption { - width:80%; - max-width: 600px; - text-align: center; - margin: 0 auto; + width: 80%; + max-width: 600px; + text-align: center; + margin: 0 auto; } -/* Media Queries */ +/* Media Queries */ @media (max-width: 620px) { .big-link-container { - grid-template-columns: 1fr; + grid-template-columns: 1fr; } - .big-link-container a { - min-height: 0; -} + + .big-link + From 838b380caea8913d8a2baea136baa608f6223d9f Mon Sep 17 00:00:00 2001 From: Shubham Shekhawat Date: Sun, 22 Dec 2024 10:28:15 +0530 Subject: [PATCH 2/2] Fixed calendar design and table layout in hsf.css --- css/hsf.css | 216 ++++++++++++---------------------------------------- 1 file changed, 49 insertions(+), 167 deletions(-) diff --git a/css/hsf.css b/css/hsf.css index fd075b6a2..cd9abf69c 100644 --- a/css/hsf.css +++ b/css/hsf.css @@ -29,8 +29,8 @@ .blog-masthead { background-color: #428bca; - -webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1); - box-shadow: inset 0 -2px 5px rgba(0,0,0,.1); + -webkit-box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .1); + box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .1); } /* Nav links */ @@ -41,6 +41,7 @@ font-weight: 500; color: #fff; } + .blog-nav-item:hover, .blog-nav-item:focus { color: #fff; @@ -51,6 +52,7 @@ .blog-nav .active { color: #fff; } + .blog-nav .active:after { position: absolute; bottom: 0; @@ -73,12 +75,14 @@ padding-top: 20px; padding-bottom: 20px; } + .blog-title { margin-top: 30px; margin-bottom: 0; font-size: 50px; font-weight: normal; } + .blog-description { font-size: 20px; color: #999; @@ -98,11 +102,13 @@ padding: 15px; margin: 0 -15px 15px; } + .sidebar-module-inset { padding: 15px; background-color: #f5f5f5; border-radius: 4px; } + .sidebar-module-inset p:last-child, .sidebar-module-inset ul:last-child, .sidebar-module-inset ol:last-child { @@ -114,6 +120,7 @@ margin-bottom: 60px; text-align: left; } + .pager > li > a { width: 140px; padding: 10px 20px; @@ -129,10 +136,12 @@ margin-bottom: 30px; padding: 10px 20px; } + .blog-post-title { margin-bottom: 5px; font-size: 24px; } + .blog-post-meta { margin-bottom: 20px; color: #999; @@ -146,86 +155,56 @@ margin-bottom: 50px; } -/* Table Styles */ -table { +/* Calendar Design */ +.calendar { + border-collapse: collapse; width: 100%; - border-collapse: collapse; /* Ensures tables don't have gaps between cells */ - margin-bottom: 30px; /* Space below the table */ -} - -th, td { - padding: 12px; /* Adds space around content */ - text-align: left; /* Aligns text to the left */ - border: 1px solid #ddd; /* Light border color */ -} - -th { - background-color: #f8f9fa; /* Light background for header */ - font-weight: bold; /* Bold text for headers */ -} - -tr:nth-child(even) { - background-color: #f2f2f2; /* Alternating row colors */ -} - -tr:hover { - background-color: #e9ecef; /* Hover effect on rows */ -} - -/* Training Table Styles */ -.training table { - width: 100%; - border-collapse: collapse; /* Ensures there are no gaps between cells */ + margin-bottom: 30px; } -.training table tr { - background-color: white; - border: 1px solid #cccccc; /* Add borders around rows */ +.calendar th, .calendar td { + padding: 15px; + border: 1px solid #ccc; + text-align: center; } -.training table tr:nth-child(2n) { - background-color: #f8f8f8; /* Alternate row color */ +.calendar th { + background-color: #f0f0f0; + font-weight: bold; } -.training table th, .training table td { - padding: 8px 15px; /* Adjust padding for better spacing */ - border: 1px solid #cccccc; /* Border for cells */ - text-align: left; /* Align text to the left */ +.calendar td { + background-color: #fff; } -.training table th { - background-color: #f0f0f0; /* Light background for table headers */ - font-weight: bold; /* Make header text bold */ +.calendar td:hover { + background-color: #f2f2f2; } -.training table tr:hover { - background-color: #f2f2f2; /* Hover effect for rows */ +.calendar td.empty { + background-color: #f9f9f9; } -.training table tr td:first-child, -.training table tr th:first-child { - padding-left: 20px; /* Add extra padding on the left for the first column */ +/* Text spacing */ +.calendar-container { + margin-bottom: 40px; } -.training table tr td:last-child, -.training table tr th:last-child { - padding-right: 20px; /* Add extra padding on the right for the last column */ +.calendar-container h3 { + font-size: 24px; + font-weight: bold; + margin-bottom: 20px; } -/* Footer */ -.blog-footer { - padding: 40px 0; - color: #999; - text-align: center; - background-color: #f9f9f9; - border-top: 1px solid #e5e5e5; +.calendar p { + margin-top: 20px; + line-height: 1.6; } -.blog-footer p:last-child { - margin-bottom: 0; -} +/* + * Navbar + */ -/* Navbar */ .navbar-nav { padding-top: 0px; padding-bottom: 0px; @@ -250,7 +229,7 @@ tr:hover { color: #f39c12; } -.navbar-nav>li>a { +.navbar-nav > li > a { padding-top: 9.5px; padding-bottom: 9.5px; } @@ -289,36 +268,14 @@ body { font-size: 20px; } -.event-announce > a:hover { - color: #333333; -} - .alert { padding: 8px; } -.list-simple { - padding-left: 15px; -} - -.dropdown-menu > li > a:hover, -.dropdown-menu > li > a:focus { - background-color: #555555; -} - -[role="button"] { - font-size: 17px; -} - -.alignleft { - float: left; -} - -.alignright { - float: right; -} +/* + * Colorful link styles + */ -/* COLORFUL BIG LINK */ .big-link-container { width: 100%; display: grid; @@ -341,83 +298,6 @@ body { color: #cc5555; } -/* TRAINING GROUP */ -.training-module { - width: 100%; - min-height: 100pt; - display: grid; - padding: 5pt; - border-radius: 10px 20px; -} - -.tm-stable { - background-color: #f1f9f1; -} - -.tm-alpha { - background-image: repeating-linear-gradient(-45deg, transparent, transparent 20px, #f9f2f4 20px, #f9f2f4 40px); -} - -.tm-beta { - background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, #f9f9f1 10px, #f9f9f1 40px); -} - -.training-module-name { - text-align: center; - font-weight: bold; - padding-bottom: 10pt; - font-size: 17px; -} - -.training-module-status { - padding-top: 10pt; - text-align: center; -} - -.training-module-webpage { - text-align: center; - display: block; - align-self: end; - padding-top: 10pt; -} - -.training-module-repository { - padding-top: 10pt; - vertical-align: bottom; - text-align: center; - display: block; - align-self: end; -} - -.training-module-videos { - text-align: center; - display: block; - align-self: end; -} - -.training-module-container { - width: 100%; - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 10px; -} - -figure.centered-figure { - text-align: center; -} - -.centered-figure > img { - width: 80%; - max-width: 600px; -} - -.centered-figure > figcaption { - width: 80%; - max-width: 600px; - text-align: center; - margin: 0 auto; -} - /* Media Queries */ @media (max-width: 620px) { @@ -425,5 +305,7 @@ figure.centered-figure { grid-template-columns: 1fr; } - .big-link - + .calendar { + font-size: 14px; /* Adjust font size for smaller screens */ + } +}