commit f16d24e75b05d27aff36d425cfd740f13b682a2c
parent bbbb14fc7146d2183a373d56585a96c2ca7bb828
Author: Michael Neuper <michael@michaelneuper.com>
Date: Fri, 3 Nov 2023 15:57:57 +0200
Refactor all css
Diffstat:
| M | assets/sass/main.scss | | | 461 | +++++++++++++++++++++++++++++++++++++------------------------------------------ |
1 file changed, 215 insertions(+), 246 deletions(-)
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
@@ -1,4 +1,9 @@
$radius: 0.25rem;
+$margin: 1rem;
+$max-width: 70vw;
+$padding: (100vw - $max-width) / 2;
+$border: 2px;
+$mobile-breakpoint: 768px;
@media (prefers-color-scheme: dark) {
:root {
@@ -34,50 +39,111 @@ $radius: 0.25rem;
body {
background-color: var(--background);
color: var(--text);
+
+ #wrapper {
+ background-color: var(--background);
+ padding-left: $padding;
+ padding-right: $padding;
+
+ @media (max-width: $mobile-breakpoint) {
+ padding-left: $padding / 3;
+ padding-right: $padding / 3;
+ }
+ }
+}
+
+a {
+ text-decoration: none;
+
+ &:link {
+ color: var(--blue);
+ }
+
+ &:hover,
+ &:visited {
+ color: var(--violet);
+ }
+}
+
+::selection,
+::-moz-selection {
+ background-color: var(--blue);
+ color: white;
}
hr {
background-color: var(--text-secondary);
- margin-top: 20px;
- margin-bottom: 10px;
+ margin-top: $margin;
+ margin-bottom: $margin;
border: 0;
- height: 2px;
+ height: $border;
}
-table {
- margin: auto;
- background-color: var(--background);
- border-top: 1px solid var(--text);
- border-bottom: 1px solid var(--text);
- border-collapse: collapse;
- border: none;
- border-radius: $radius;
- margin-top: 0;
- margin-bottom: 0;
+time {
+ color: var(--text-secondary);
+}
- thead {
- th {
- border-bottom: 1px solid var(--text-secondary);
+header {
+ a,
+ a:hover,
+ a:visited {
+ color: var(--text-emphasized);
+ }
+
+ nav {
+ margin-top: 10px;
+
+ a.link {
+ color: var(--text-emphasized);
+ text-decoration: none;
+ display: inline-block;
+ position: relative;
+
+ &:after {
+ background-color: var(--text-emphasized);
+ content: "";
+ position: absolute;
+ width: 100%;
+ transform: scaleX(0);
+ height: $border;
+ bottom: 0;
+ left: 0;
+ transform-origin: bottom right;
+ transition: transform 0.25s ease-out;
+ }
+
+ &:hover:after {
+ transform: scaleX(1);
+ transform-origin: bottom left;
+ }
}
}
}
-.content th {
- background: var(--background-secondary);
- color: var(--text-emphasized);
-}
+.content {
+ a {
+ text-decoration: none;
+ }
-th,
-td {
- padding: 5px;
-}
+ table {
+ margin: auto;
+ background-color: var(--background);
+ border-collapse: collapse;
+ border: none;
+ margin-top: 0;
+ margin-bottom: 0;
+
+ th {
+ background: var(--background-secondary);
+ color: var(--text-emphasized);
+ }
+ }
-.content {
blockquote {
background: var(--background-secondary);
border-color: var(--text);
border-radius: $radius;
- padding-right: 20px;
+ padding-right: 2rem;
}
pre {
@@ -106,191 +172,153 @@ td {
}
}
-#wrapper {
- background-color: var(--background);
- padding-left: 100px;
- padding-right: 100px;
-
- @media (max-width: 767px) {
- padding-left: 40px;
- padding-right: 40px; /* TODO fix padding */
- }
-}
-
main {
display: flex;
-}
-
-main.grid-container {
- display: grid;
- grid-template-columns: 3fr 1fr;
- gap: 20px;
-
- @media (max-width: 767px) {
- grid-template-columns: 1fr;
- }
-}
-
-#main {
- max-width: 1000px;
-
- .toc {
- background-color: var(--background-secondary);
- border: 1px dashed var(--text-secondary);
- border-radius: $radius;
- }
-}
-
-#main :target {
- background-color: var(--background-secondary);
- color: var(--text-emphasized);
- border-radius: 0.25em;
- padding-left: 20px;
- padding-top: 10px;
- padding-bottom: 10px;
-}
+ padding: 0 !important;
+ margin-left: $margin;
+ margin-right: $margin;
-.numbered-subtitles {
- color: var(--text) !important;
-}
-
-.index {
- flex: 3;
- padding-right: 10px;
- padding-left: 10px;
-
- @media (max-width: 767px) {
- padding-left: 10px;
- padding-right: 10px;
- }
-}
-
-.sidebar {
- flex: 1;
-
- @media (max-width: 767px) {
- order: 1;
- padding-left: 10px;
- padding-right: 10px;
- }
-}
-
-.sidebar ul {
- list-style: none;
- padding: 0;
-}
-
-.sidebar ul li a {
- text-decoration: none;
- display: block;
- padding: 2px 12px;
- color: var(--text);
-
- transition: color 0.3s, background-color 0.3s;
-}
-
-.sidebar ul li a:hover {
- color: var(--text-emphasized);
- background-color: var(--background-secondary);
-}
+ &#main {
+ max-width: 100%;
-.nav-list {
- border-color: var(--text-secondary);
- display: block;
- padding: 10px 15px;
- margin: 10px 5px;
- margin-left: -5px;
- border: 2px solid;
- border-radius: $radius;
-}
+ .post-heading {
+ text-align: center;
-.content a {
- text-decoration: none;
-}
+ .publish-date {
+ color: var(--text-secondary);
+ font-size: large;
+ padding-top: $margin / 2;
+ }
+ }
-a:link {
- color: var(--blue);
-}
+ .toc {
+ background-color: var(--background-secondary);
+ border: $border / 2 dashed var(--text-secondary);
+ border-radius: $radius;
-a:visited {
- color: var(--violet);
-}
+ #TableOfContents a {
+ text-decoration: none;
+ color: var(--text);
-a:hover {
- color: var(--violet);
-}
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
-/* h2 a {
- color: var(--basei1);
- } */
+ .numbered-subtitles {
+ color: var(--text);
+ }
-span.nav-bar-item a.link {
- color: var(--text-emphasized);
- text-decoration: none;
- display: inline-block;
- position: relative;
-}
+ &.archive {
+ padding: 0;
-span.nav-bar-item a:after {
- background-color: var(--text-emphasized);
- content: "";
- position: absolute;
- width: 100%;
- transform: scaleX(0);
- height: 2px;
- bottom: 0;
- left: 0;
- transform-origin: bottom right;
- transition: transform 0.25s ease-out;
-}
+ .post-group {
+ ul {
+ border-left-color: var(--text-secondary);
+ border-left-width: $border;
+ }
-span.nav-bar-item a:hover:after {
- transform: scaleX(1);
- transform-origin: bottom left;
-}
+ a {
+ text-decoration: none;
+ transition: text-decoration 0.3s ease;
-#TableOfContents a {
- text-decoration: none;
- color: var(--text);
-}
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+ }
+ }
-#TableOfContents a:hover {
- text-decoration: underline;
-}
+ &.grid-container {
+ display: grid;
+ grid-template-columns: 3fr 1fr;
+ gap: $margin;
-header a:hover,
-header a:visited,
-header .current a {
- color: var(--text-emphasized);
-}
+ @media (max-width: $mobile-breakpoint) {
+ grid-template-columns: 1fr;
+ }
-#header > nav {
- margin-top: 10px;
+ .sidebar {
+ flex: 1;
+
+ @media (max-width: $mobile-breakpoint) {
+ order: 1;
+ }
+
+ h3.taxonomy > a {
+ color: var(--text);
+
+ &:visited {
+ color: var(--text);
+ }
+
+ &:hover {
+ color: var(--text-emphasized);
+ }
+ }
+
+ ul {
+ list-style: none;
+ padding: 0;
+ border-color: var(--text-secondary);
+ display: block;
+ padding: $margin / 2;
+ margin-top: $margin / 2;
+ margin-bottom: $margin / 2;
+ border: $border solid;
+ border-radius: $radius;
+
+ li a {
+ text-decoration: none;
+ display: block;
+ padding: 2px 12px;
+ color: var(--text);
+ transition: color 0.3s, background-color 0.3s;
+
+ &:hover {
+ color: var(--text-emphasized);
+ background-color: var(--background-secondary);
+ border-radius: $radius;
+ }
+ }
+ }
+ }
+ }
}
-h3.taxonomy > a {
- color: var(--text);
+footer {
+ color: var(--text-secondary);
}
-h3.taxonomy > a:visited {
- color: var(--text);
+.icon {
+ padding-right: 0.1em;
+ padding-left: 0.1em;
}
-h3.taxonomy > a:hover {
- color: var(--text-emphasized);
+.row {
+ margin-left: 2rem;
}
-.post-group a {
- text-decoration: none;
- transition: text-decoration 0.3s ease;
-}
+#searchbox {
+ margin-top: 0;
+ margin-bottom: $margin;
-.post-group a:hover {
- text-decoration: underline;
-}
+ #ddgSearch > input {
+ color: var(--text-emphasized);
+ background-color: var(--background-secondary);
+ font-family: "Latin Modern Roman", "Times New Roman", serif;
+ padding-left: 8px;
+ width: 200px;
+ height: 1.5rem;
+ border: $border solid var(--text-secondary);
+ border-radius: $radius;
-time {
- color: var(--text-secondary);
+ &:focus {
+ outline: $border solid var(--text-emphasized);
+ }
+ }
}
button.copyButton {
@@ -306,46 +334,12 @@ button.copyButton {
cursor: pointer;
font-size: 14px;
transition: opacity 0.3s;
-}
-button.copyButton:hover {
- opacity: 1;
-}
-
-/* TODO fix this */
-.main-content {
- flex: 1;
- max-width: 80%;
- margin: 0 auto;
- box-sizing: border-box;
- padding-left: 300px;
-
- @media (max-width: 768px) {
- padding-left: 0;
- margin: 20px;
+ &:hover {
+ opacity: 1;
}
}
-.post-title {
- text-align: center;
-}
-
-.publish-date {
- color: var(--text-secondary);
- font-size: large;
- padding-top: 10px;
-}
-
-::selection {
- background-color: var(--blue);
- color: white;
-}
-
-::-moz-selection {
- background-color: var(--blue);
- color: white;
-}
-
.book-container {
clear: both;
}
@@ -353,28 +347,3 @@ button.copyButton:hover {
.book-container > img {
margin-left: 50px;
}
-
-#ddgSearch > input {
- color: var(--text-emphasized);
- background-color: var(--background-secondary);
- font-family: "Latin Modern Roman", "Times New Roman", serif;
- padding-left: 8px;
- width: 200px;
- height: 25px;
- margin-bottom: 25px;
- border: 1px solid var(--text);
- border-radius: $radius;
-
- &:focus {
- outline: 1.5px solid var(--text-emphasized);
- }
-}
-
-.icon {
- padding-right: 0.1em;
- padding-left: 0.1em;
-}
-
-.row {
- margin-left: 30px;
-}
