From 195f30592eff0efbdcacf016ed355210c4683fee Mon Sep 17 00:00:00 2001 From: Late Night Defender Date: Sat, 4 Nov 2023 02:48:23 +0700 Subject: [PATCH] CSS refactoring --- index.html | 4 +- latenightdef/more-info.html | 2 +- latenightdef/more-links.html | 2 +- latenightdef/profile.html | 2 +- latenightdef/style.css | 320 ---------------------------------- latenightdef/work-kmitl.html | 2 +- latenightdef/work-others.html | 2 +- style.css | 22 ++- 8 files changed, 25 insertions(+), 331 deletions(-) delete mode 100644 latenightdef/style.css diff --git a/index.html b/index.html index 7af9c32..4b71e10 100644 --- a/index.html +++ b/index.html @@ -15,11 +15,11 @@ Warning: Scheduled connection reset on our side at 2AM every day. -
+
TTT Logo

TechTransThai 🏳️‍⚧️

-
+
diff --git a/latenightdef/more-info.html b/latenightdef/more-info.html index 8c22706..0411a79 100644 --- a/latenightdef/more-info.html +++ b/latenightdef/more-info.html @@ -1,7 +1,7 @@ - + diff --git a/latenightdef/more-links.html b/latenightdef/more-links.html index 3cd2a4a..6b2a3ae 100644 --- a/latenightdef/more-links.html +++ b/latenightdef/more-links.html @@ -1,7 +1,7 @@ - + diff --git a/latenightdef/profile.html b/latenightdef/profile.html index 4333a4a..1c6d9a3 100644 --- a/latenightdef/profile.html +++ b/latenightdef/profile.html @@ -1,7 +1,7 @@ - + diff --git a/latenightdef/style.css b/latenightdef/style.css deleted file mode 100644 index 7756e19..0000000 --- a/latenightdef/style.css +++ /dev/null @@ -1,320 +0,0 @@ -@import url("../cantarell/cantarell.css"); - -html * -{ - font-family: Cantarell, sans-serif; -} - -.header { - display: flex; - justify-content: center; - align-items: center; -} - -.name { - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; -} - -.pfp { - display: flex; - justify-content: center; - align-items: center; - margin-top: 3cm; -} - -.middle { - grid-area: middle; - width: 15cm; -} - -.inner-grid { - display: grid; - align-items: center; - grid-template-columns: 3cm 1fr 3cm; - grid-template-areas: - 'inner-left inner-middle inner-right' -} - -.description { - font-size: 10pt; - margin-top: -0.3cm; - margin-bottom: 0.5cm; - opacity: 0.5; -} - -@media (prefers-color-scheme: light) { - - body { - background-color: #fafafa; - } - - .logo { - color: #000; - } - - .grid-container { - display: grid; - justify-content: center; - color: #000000; - grid-template-areas: - 'left middle right' - } - - .button { - background-color: #EBEBEB; - color: black; - border: none; - border-radius: 8px; - justify-content: center; - align-items: center; - text-decoration: none; - display: flex; - font-size: 16px; - font-weight: bold; - margin: 4px 2px; - cursor: pointer; - width: 100px; - height: 35px; - transition-duration: 0.2s; - } - - .button:hover { - background-color: #E0E0E0; - } - - .headerbutton { - background-color: #EBEBEB; - color: black; - border: none; - border-radius: 8px; - justify-content: center; - align-items: center; - text-decoration: none; - display: flex; - font-size: 16px; - font-weight: bold; - margin: 4px 2px; - padding-left: 0.3cm; - padding-right: 0.3cm; - cursor: pointer; - height: 35px; - transition-duration: 0.2s; - } - - .headerbutton:hover { - background-color: #E0E0E0; - } - - .list { - border-radius: 12px 12px 12px 12px; - background-color: #ffffff; - box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13); - margin-bottom: 50px; - } - - .separator { - width: 15cm; - height: 1px; - background-color: rgba(237, 237, 237, 1); - } - - .listaction { - display: grid; - grid-template-columns: 1fr 1cm; - text-decoration: none; - color: black; - align-items: center; - } - - .topbar { - position: fixed; - width: 100%; - height: 1.2cm; - top: 0px; - left: 0px; - background-color: rgba(255, 255, 255, 1); - border: 1px solid rgba(224, 224, 224, 1); - color: #000000; - z-index: 10; - } - - .listinfo { - display: grid; - grid-template-columns: 1fr 1fr; - text-decoration: none; - color: black; - align-items: center; - } - - .backbutton { - position: absolute; - color: black; - border-radius:10px; - justify-content: center; - align-items: center; - text-decoration: none; - display: grid; - font-size: 14px; - cursor: pointer; - margin: 0.1cm; - transition-duration: 0.2s; - width: 1cm; - height: 1cm; - } - - .backbutton:hover { - background-color: #DEDEDE; - } - - .banner { - background-color: #BFD7F3; - color: black; - width: 90%; - justify-content: center; - align-items: center; - display: flex; - font-weight: bold; - padding: 0.2cm; - border-radius:10px; - } -} - -@media (prefers-color-scheme: dark) { - - .logo { - color: #fff; - } - - body { - background-color: #222222; - } - - .grid-container { - display: grid; - justify-content: center; - color: #ffffff; - grid-template-areas: - 'left middle right' - } - - .button { - background-color: #4a4a4a; - color: #ffffff; - border: none; - border-radius: 8px; - justify-content: center; - align-items: center; - text-decoration: none; - display: flex; - font-size: 16px; - font-weight: bold; - margin: 4px 2px; - cursor: pointer; - width: 100px; - height: 35px; - transition-duration: 0.2s; - } - - .button:hover { - background-color: #595959; - } - - .headerbutton { - background-color: #4a4a4a; - color: #ffffff; - border: none; - border-radius: 8px; - justify-content: center; - align-items: center; - text-decoration: none; - display: flex; - font-size: 16px; - font-weight: bold; - margin: 4px 2px; - padding-left: 0.3cm; - padding-right: 0.3cm; - cursor: pointer; - height: 35px; - transition-duration: 0.2s; - } - - .headerbutton:hover { - background-color: #595959; - } - - .list { - border-radius: 12px 12px 12px 12px; - background-color: #363636; - box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13); - margin-bottom: 50px; - } - - .separator { - width: 15cm; - height: 1px; - background-color: #232323; - } - - .listaction { - display: grid; - grid-template-columns: 1fr 1cm; - text-decoration: none; - color: #ffffff; - align-items: center; - } - - .topbar { - position: fixed; - width: 100%; - height: 1.2cm; - top: 0px; - left: 0px; - background-color: #303030; - border: 1px solid #1f1f1f; - color: #ffffff; - z-index: 10; - } - - .listinfo { - display: grid; - grid-template-columns: 1fr 1fr; - text-decoration: none; - color: #ffffff; - align-items: center; - } - - .backbutton { - position: absolute; - color: #ffffff; - border-radius:10px; - justify-content: center; - align-items: center; - text-decoration: none; - display: grid; - font-size: 14px; - cursor: pointer; - margin: 0.1cm; - transition-duration: 0.2s; - width: 1cm; - height: 1cm; - } - - .backbutton:hover { - background-color: #3e3e3e; - } - - .banner { - background-color: #29415E; - color: white; - width: 90%; - justify-content: center; - align-items: center; - display: flex; - font-weight: bold; - padding: 0.2cm; - border-radius:10px; - } -} diff --git a/latenightdef/work-kmitl.html b/latenightdef/work-kmitl.html index ff2ef81..6e66e15 100644 --- a/latenightdef/work-kmitl.html +++ b/latenightdef/work-kmitl.html @@ -1,7 +1,7 @@ - + diff --git a/latenightdef/work-others.html b/latenightdef/work-others.html index b487e86..72c842d 100644 --- a/latenightdef/work-others.html +++ b/latenightdef/work-others.html @@ -1,7 +1,7 @@ - + diff --git a/style.css b/style.css index ba0a2ad..c82ee52 100644 --- a/style.css +++ b/style.css @@ -9,8 +9,20 @@ html * display: flex; justify-content: center; align-items: center; - margin: 1cm; +} +.name { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.pfp { + display: flex; + justify-content: center; + align-items: center; + margin-top: 3cm; } .middle { @@ -27,8 +39,12 @@ html * } .description { - font-size: medium; + font-size: 10pt; + margin-top: -0.3cm; + margin-bottom: 0.5cm; + opacity: 0.5; } + @media (prefers-color-scheme: light) { body { @@ -84,7 +100,6 @@ html * padding-left: 0.3cm; padding-right: 0.3cm; cursor: pointer; - min-width: 100px; height: 35px; transition-duration: 0.2s; } @@ -225,7 +240,6 @@ html * padding-left: 0.3cm; padding-right: 0.3cm; cursor: pointer; - min-width: 100px; height: 35px; transition-duration: 0.2s; }