commit 09a44900d23da8a34fb8ee3eab7940f96330fd2d
parent 4eac4e96e8637490bd133d92e5b83f9b9849a405
Author: Samdal <samdal@protonmail.com>
Date: Fri, 21 Feb 2025 20:30:53 +0100
clean up css
Diffstat:
3 files changed, 101 insertions(+), 136 deletions(-)
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -37,7 +37,7 @@ layout: compress
</main>
<div class="footer" >
- <img class="footer-image invertable-image" src="/assets/images/grass.png">
+ <img style="width:100%;" class="invertable-image" src="/assets/images/grass.png">
</div>
</body>
</html>
diff --git a/_pages/about.md b/_pages/about.md
@@ -25,7 +25,7 @@ Even if you already know programming, you should check out these people:
- Jonathan Blow
- [John Jackson](https://www.youtube.com/@johnjackson9767) (awesome guy)
-<br>
+<hr>
My [nisse](https://en.wikipedia.org/wiki/Nisse_(folklore)) collection:
diff --git a/_sass/_main.scss b/_sass/_main.scss
@@ -6,6 +6,8 @@ e,:after,:before {
padding:0;
}
+/*********** body ************/
+
html {
font-size: 22px;
}
@@ -25,78 +27,102 @@ body {
background-color: #faf9ee;
}
-.footer {
- max-height: 220px;
- width: 100%;
- overflow-x: hidden;
- overflow-y: hidden;
- aspect-ratio: 1920 / 493;
+/*********** main ************/
+
+main {
+ flex: 1;
+ padding:1rem;
+ background-color: transparent;
}
-.footer-image {
- width: 100%;
- transform-origin: bottom left;
+.main-title {
+ max-width:60rem;
+ margin:0px auto;
}
-nav ul {
- border-right: 3px solid #bcd1cf;
+.main-content {
+ max-width:60rem;
+ margin:2rem auto;
+ display:flex;
+ flex-wrap:wrap;
}
-a {
- color: #000;
- text-decoration-skip-ink: auto;
- text-decoration: underline;
+.main-title-columns {
+ display:flex;
}
-pre {
- margin: .5rem 0;
- padding: .5rem;
+section {
+ flex-basis:0;
+ flex-grow:999;
+ min-width:70%;
+ display:flex;
+ flex-direction:column;
}
-.post p {
- margin: .5rem 0;
+/*********** footer ************/
+
+.footer {
+ max-height: 220px;
+ width: 100%;
+ overflow-x: hidden;
+ overflow-y: hidden;
+ aspect-ratio: 1920 / 493;
}
-h1 {
- font-weight: bold;
- font-size: 2rem;
+/*********** header ************/
+
+header {
+ margin-top: 0px;
+ flex-basis:6rem;
+ max-width: 6rem;
+ flex-grow:1;
+ position:relative;
+ word-break: keep-all;
}
-h2 {
- font-weight: bold;
- font-size: 1.8rem;
+
+header a {
+ text-decoration: none;
}
-h3 {
- font-weight: bold;
- font-size: 1.6rem;
+
+header li {
+ margin-bottom: 0px;
+ text-align: right;
+ margin-right: 1rem;
}
-h4 {
+
+header a.active {
font-weight: bold;
- font-size: 1.4rem;
}
-main h1 {
- color: #f4ca96;
-}
-main h2 {
- color: #bcd1cf;
+header,section {
+ padding-right:1rem;
+ padding-top:0px;
}
-.post h1 {
- color: #f4ca96;
-}
-.post h2 {
- color: #bcd1cf;
-}
-.post h3 {
- color: #a3bfa3;
+/*********** text ************/
+
+a {
+ color: #000;
+ text-decoration-skip-ink: auto;
+ text-decoration: underline;
}
+.post p {
+ margin: .5rem 0;
+}
-.post h1, .post h2, .post h3, .post h4 {
+h1,h2,h3,h4,h5 {
+ line-height: 1;
margin: 1rem 0;
+ font-weight: bold;
}
-.post h2:first-child, .project h2:first-child, .photo h2:first-child {
+h1 {font-size: 2.0rem; color: #f4ca96;}
+h2 {font-size: 1.8rem; color: #bcd1cf;}
+h3 {font-size: 1.6rem; color: #a3bfa3;}
+h4 {font-size: 1.4rem; color: #e3bd6d }
+
+.post h2:first-child, .project h2:first-child, .photo h2:first-child section h1:first-child {
margin-top: 0;
}
@@ -104,20 +130,21 @@ main h2 {
margin: 2rem 0;
}
-code,pre {
+code, pre {
background: rgb(236, 237, 238);
font-size: 0.8rem;
}
-code {
- padding: .1rem;
-}
-
pre code {
border: none;
}
+code {
+ padding: .1rem;
+}
+
pre {
+ margin: .5rem 0;
padding: 1rem;
overflow-x: auto;
}
@@ -127,55 +154,19 @@ img {
}
hr {
- background: #000;
- height: 1px;
+ background: #bcd1cf99;
+ height: 3px;
border: 0;
-}
-
-header {
- margin-top: 0px;
- flex-basis:6rem;
- max-width: 6rem;
- flex-grow:1;
- position:relative;
- word-break: keep-all;
-}
-
-header a {
- text-decoration: none;
-}
-
-header li {
- margin-bottom: 0px;
- text-align: right;
+ margin-left: 1rem;
margin-right: 1rem;
}
-header a.active {
- font-weight: bold;
-}
-
-header,section {
- padding-right:1rem;
- padding-top:0px;
-}
-
blockquote {
font-style: italic;
- border-left: 5px solid #ececec;
+ border-left: 5px solid #bcd1cf99;
padding-left: 1rem;
}
-h1,h2,h3,h4,h5 {
- line-height: 1;
- margin: 1rem 0;
- font-weight: 600;
-}
-
-section h1:first-child {
- margin-top: 0;
-}
-
strong, b {
font-weight: bold;
}
@@ -219,35 +210,16 @@ li {
font-variant-numeric: tabular-nums;
}
-.post ul, .project ul, .post ol {
- //list-style-position: inside;
-}
-main {
- flex: 1;
- padding:1rem;
- background-color: transparent;
-}
-
-.main-title {
- max-width:60rem;
- margin:0px auto;
-}
-
-.main-content {
- max-width:60rem;
- margin:2rem auto;
- display:flex;
- flex-wrap:wrap;
-}
+/*********** nav ************/
-.main-title-columns {
- display:flex;
+header ul {
+ border-right: 3px solid #bcd1cf99;
}
+/*********** phone mode ************/
@media screen and (max-width: 45rem ) {
-
header {
max-width: 100%;
}
@@ -256,11 +228,9 @@ main {
margin-right: 1rem;
}
header ul {
- border-bottom: 3px solid #bcd1cf;
- padding-bottom: 1rem;
- }
- nav ul {
+ border-bottom: 3px solid #bcd1cf99;
border-right: 0px;
+ padding-bottom: 1rem;
}
.photos ul {
@@ -272,22 +242,7 @@ main {
}
}
-section {
- flex-basis:0;
- flex-grow:999;
- min-width:70%;
- display:flex;
- flex-direction:column;
-
-}
-
-@media print
-{
- .no-print, .no-print *
- {
- display: none !important;
- }
-}
+/*********** dark theme ************/
@media (prefers-color-scheme: dark) {
a {
@@ -305,3 +260,13 @@ section {
filter: invert(0.6);
}
}
+
+/*********** print ************/
+
+@media print
+{
+ .no-print, .no-print *
+ {
+ display: none !important;
+ }
+}
