summaryrefslogtreecommitdiff
path: root/static/css
diff options
context:
space:
mode:
Diffstat (limited to 'static/css')
-rw-r--r--static/css/dark.css81
-rw-r--r--static/css/light.css83
-rw-r--r--static/css/style.css (renamed from static/css/general_style.css)187
3 files changed, 181 insertions, 170 deletions
diff --git a/static/css/dark.css b/static/css/dark.css
index 2f43bcc..1cb3028 100644
--- a/static/css/dark.css
+++ b/static/css/dark.css
@@ -28,16 +28,7 @@
--switch-sun: var(--color13);
}
-html {
- background: var(--bg);
-}
-
-body {
- background: var(--body-bg);
- color: var(--fg);
- border: 4px outset var(--fg);
-}
-
+/* general */
a {
color: var(--link);
}
@@ -66,49 +57,44 @@ h5 {
color: var(--fg-acc5);
}
-/* switch */
-.slider {
- background-color: var(--switch-bg);
-}
-
-#theme-switcher-container i.fa-moon {
- color: var(--switch-moon);
-}
-
-#theme-switcher-container i.fa-sun {
- color: var(--switch-sun);
-}
-
-.slider:before {
- background-color: var(--switch-slider);
+body {
+ background: var(--bg);
+ color: var(--fg);
}
-.switch input:checked + .slider {
- background-color: var(--switch-toggled-bg);
+main {
+ background: linear-gradient(var(--bg) 0.5em, 1em, var(--body-bg) 1.5em calc(100% - 1.5em), calc(100% - 1em), var(--bg) calc(100% - 0.5em));
}
-.switch input:focus + .slider {
- box-shadow: 0 0 0.1em var(--switch-ol);
+/* nav bar */
+body > header {
+ background: linear-gradient(var(--body-bg) calc(100% - 1.5em), calc(100% - 1em), var(--bg) calc(100% - 0.5em));
}
-/* menu bar (header) */
-.menubar li {
+nav li {
background: var(--navitem-bg);
}
-.menubar a {
+nav a {
color: var(--navitem-link);
}
-.menubar li:hover {
+nav li:hover {
background: var(--navitem-bg-hl);
color: var(--fg-hl);
}
-.menubar li:hover > a {
+nav li:hover > a {
color: var(--navitem-link-hl);
}
+
+/* footer */
+body > footer {
+ background: linear-gradient(var(--bg) calc(100% - 1.5em), calc(100% - 1em), var(--body-bg) calc(100% - 0.5em));
+}
+
+
/* image gallery (not really being used rn) */
div.gallery {
border: 1px solid var(--fg-hl);
@@ -117,3 +103,30 @@ div.gallery {
div.gallery:hover {
border: var(--fg-acc5);
}
+
+
+/* switch */
+.slider {
+ background-color: var(--switch-bg);
+}
+
+.theme-switch-container i.fa-moon {
+ color: var(--switch-moon);
+}
+
+.theme-switch-container i.fa-sun {
+ color: var(--switch-sun);
+}
+
+.slider:before {
+ background-color: var(--switch-slider);
+}
+
+.switch input:checked + .slider {
+ background-color: var(--switch-toggled-bg);
+}
+
+.switch input:focus + .slider {
+ box-shadow: 0 0 0.1em var(--switch-ol);
+}
+
diff --git a/static/css/light.css b/static/css/light.css
index 4f41d5f..27df3c4 100644
--- a/static/css/light.css
+++ b/static/css/light.css
@@ -28,17 +28,8 @@
--switch-sun: var(--color13);
}
-html {
- background: var(--bg);
-}
-
-body {
- background: var(--body-bg);
- color: var(--fg);
- border: 4px outset var(--fg);
-}
-
-a{
+/* general */
+a {
color: var(--link);
}
@@ -66,49 +57,44 @@ h5 {
color: var(--fg-acc5);
}
-/* switch */
-.slider {
- background-color: var(--switch-bg);
-}
-
-#theme-switcher-container i.fa-moon {
- color: var(--switch-moon);
-}
-
-#theme-switcher-container i.fa-sun {
- color: var(--switch-sun);
-}
-
-.slider:before {
- background-color: var(--switch-slider);
+body {
+ background: var(--bg);
+ color: var(--fg);
}
-.switch input:checked + .slider {
- background-color: var(--switch-toggled-bg);
+main {
+ background: linear-gradient(var(--bg) 0.5em, 1em, var(--body-bg) 1.5em calc(100% - 1.5em), calc(100% - 1em), var(--bg) calc(100% - 0.5em));
}
-.switch input:focus + .slider {
- box-shadow: 0 0 0.1em var(--switch-ol);
+/* nav bar */
+body > header {
+ background: linear-gradient(var(--body-bg) calc(100% - 1.5em), calc(100% - 1em), var(--bg) calc(100% - 0.5em));
}
-/* menu bar (header) */
-.menubar li {
+nav li {
background: var(--navitem-bg);
}
-.menubar a {
+nav a {
color: var(--navitem-link);
}
-.menubar li:hover {
+nav li:hover {
background: var(--navitem-bg-hl);
color: var(--fg-hl);
}
-.menubar li:hover > a {
+nav li:hover > a {
color: var(--navitem-link-hl);
}
+
+/* footer */
+body > footer {
+ background: linear-gradient(var(--bg) calc(100% - 1.5em), calc(100% - 1em), var(--body-bg) calc(100% - 0.5em));
+}
+
+
/* image gallery (not really being used rn) */
div.gallery {
border: 1px solid var(--fg-hl);
@@ -117,3 +103,30 @@ div.gallery {
div.gallery:hover {
border: var(--fg-acc5);
}
+
+
+/* switch */
+.slider {
+ background-color: var(--switch-bg);
+}
+
+.theme-switch-container i.fa-moon {
+ color: var(--switch-moon);
+}
+
+.theme-switch-container i.fa-sun {
+ color: var(--switch-sun);
+}
+
+.slider:before {
+ background-color: var(--switch-slider);
+}
+
+.switch input:checked + .slider {
+ background-color: var(--switch-toggled-bg);
+}
+
+.switch input:focus + .slider {
+ box-shadow: 0 0 0.1em var(--switch-ol);
+}
+
diff --git a/static/css/general_style.css b/static/css/style.css
index 60a8f7e..0ba4e05 100644
--- a/static/css/general_style.css
+++ b/static/css/style.css
@@ -3,106 +3,66 @@
font-size: larger;
}
-body {
- max-width: 50em;
- margin-top: 1em;
- margin-bottom: 1em;
- margin-left: auto;
- margin-right: auto;
- padding: 0.5em;
- text-align: justify;
- text-justify: inter-word;
-}
-
-a{
- text-decoration: none;
+body, html {
+ margin: 0;
+ padding: 0;
}
-/* switch */
-/* slider container */
-.switch {
- position: relative;
- display: inline-block;
- width: 2rem;
- height: 1rem;
+* {
+ box-sizing: border-box;
}
-/* specifically the theme switcher */
-#theme-switcher-container {
- position: absolute;
- top: 1.6em;
- --hardcoded-pos: calc(50vw - 25.2em);
- --resized-pos: calc(0.4px + 0.5em);
- --calculated-pos: max(var(--hardcoded-pos), var(--resized-pos));
- right: var(--calculated-pos);
-}
+body {
+ width: 100%;
+ display: grid;
-#theme-switcher-container i {
- position: relative;
- top: -0.2em;
+ grid-template-areas:
+ 'header'
+ 'main'
+ 'footer';
+ grid-template-rows: 3em auto auto;
+ grid-template-columns: auto;
}
-.switch input {
- opacity: 0;
- width: 0;
- height: 0;
+body > header {
+ grid-area: header;
}
-/* slider dimentions */
-.slider {
- position: absolute;
- cursor: pointer;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- -webkit-transition: 0.4s;
- transition: 0.4s;
+body > footer {
+ grid-area: footer;
}
-.slider:before {
- position:absolute;
- content: "";
- height: 0.8em;
- width: 0.8em;
- left: 0.1em;
- bottom: 0.1em;
- -webkit-transition: 0.4s;
- transition: 0.4s;
+main {
+ grid-area: main;
}
-/* slider movement on click */
-.switch input:checked + .slider:before {
- -webkit-transform: translateX(0.9em);
- -ms-transform: translateX(0.9em);
- transform: translateX(0.9em);
+a{
+ text-decoration: none;
}
-/* slider container */
-.slider.round {
- border-radius: 1em;
+body > header, body > footer, main {
+ justify-self: center;
+ width: clamp(45ch, 50%, 75ch);
+ padding-left: 0.5em;
+ padding-right: 0.5em;
}
-/* slider */
-.slider.round:before {
- border-radius: 1em;
-}
-/* menu bar (header) */
-header {
- margin-top: 1em;
- margin-left: auto;
- margin-right: auto;
- text-align: center;
+/* nav bar / header */
+body > header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ align-content: center;
}
-.menubar {
- display: inline-block;
+nav ul {
margin: 0;
padding: 0;
+ list-style-type: none;
}
-.menubar li {
+nav li {
display: block;
float: left;
min-width: 2em;
@@ -115,57 +75,82 @@ header {
margin-right: 0.2em;
}
-.menubar ul {
+nav > ul > li > ul {
visibility: hidden;
position: absolute;
padding-top: 0.2em;
padding-bottom: 0.2em;
- margin-left: -2.6em;
- min-width: 2em;
- max-width: 10em;
}
-.menubar li:hover ul {
+nav > ul > li:hover > ul {
visibility: visible;
}
-/* keep subitmes as list */
-.menubar li ul li{
+nav > ul > li > ul > li {
float: none;
margin-top: 0.4em;
}
-/* separation from icon */
-.menubar span {
+nav span {
padding-left: 0.4em;
}
+
/* footer */
-footer {
+body > footer {
margin-left: auto;
margin-right: auto;
text-align: center;
}
-/* images */
-img {
- max-width: 35vw;
+
+/* theme swticher */
+.switch {
+ position: relative;
+ top: 0.2em;
+ display: inline-block;
+ width: 2em;
+ height: 1em;
}
-/* image gallery (not really being used rn) */
-div.gallery {
- margin: 5px;
- border: 1px solid;
- float: left;
- width: 180px;
+.switch input {
+ opacity: 0;
+ width: 0;
+ height: 0;
}
-div.gallery img {
- width: 100%;
- height: auto;
+.switch input:checked + .slider:before {
+ -webkit-transform: translateX(0.9em);
+ -ms-transform: translateX(0.9em);
+ transform: translateX(0.9em);
}
-div.desc {
- padding: 15px;
- text-align: center;
+.slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ -webkit-transition: 0.4s;
+ transition: 0.4s;
+}
+
+.slider:before {
+ position:absolute;
+ content: "";
+ height: 0.8em;
+ width: 0.8em;
+ left: 0.1em;
+ bottom: 0.1em;
+ -webkit-transition: 0.4s;
+ transition: 0.4s;
+}
+
+.slider.round {
+ border-radius: 1em;
+}
+
+.slider.round:before {
+ border-radius: 1em;
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2024-12-26 17:35:38 +0000