commit e449002350b051e7d04bb6602232802f456d3ee6
parent 41532287948caf3d5a49d9d7a858d052bc44311b
Author: weetat <wtenison@protonmail.com>
Date: Thu, 13 Feb 2025 16:48:47 +0000
Rework styles.css and home page layout
Replace the left/center/right sections in index.html with a single
._content container and reformat the markup to match.
Diffstat:
3 files changed, 112 insertions(+), 105 deletions(-)
diff --git a/src/miki/miki.go b/src/miki/miki.go
@@ -92,7 +92,7 @@ type IResourceData interface {
func main() {
fmt.Println("MIKI")
- /// PULL SYSTEM INFO FROM YAML ///
+ ////////// PULL SYSTEM INFO FROM YAML //////////
_fsBuffer := bytes.NewBufferString("filesysteminfo: *fs\n")
@@ -128,7 +128,7 @@ func main() {
}
fmt.Printf("%+v\n", _si)
- /// CHECK FOR VALID CERT INFO ///
+ ////////// CHECK FOR VALID CERT INFO //////////
_tls_cert_path := filepath.Join(_si.ServerInfo.SslPath, _si.ServerInfo.CertFile)
if _, err := os.Stat(_tls_cert_path); err != nil {
@@ -140,7 +140,7 @@ func main() {
log.Panicf("__PANIC\tmain:%s", err)
}
- /// SET UP SERVER MUX ///
+ ////////// SET UP SERVER MUX //////////
_mux := http.NewServeMux()
_mux.Handle("/web/", http.StripPrefix("/web/", http.FileServer(http.Dir(_fs.FileSystemInfo.WebDir))))
@@ -176,7 +176,7 @@ func main() {
fmt.Printf("INFO:\tmain():mux:Resource(%+v)\n", _rPkg)
})
- /// RUN SERVERS ///
+ ////////// RUN SERVERS //////////
if _err := http.ListenAndServeTLS(":"+_si.ServerInfo.Port, _tls_cert_path, _tls_key_path, _mux); _err != nil {
fmt.Printf("_ERROR\tmain():ListenAndServeTLS():%s\n", _err)
diff --git a/web/index.html b/web/index.html
@@ -1,17 +1,21 @@
<!DOCTYPE html>
<html>
- <head>
- <title>Miki</title>
- <meta name="viewport" charset="utf-8" content="width=device-width, initial-scale=1.0"/>
- <link rel="stylesheet" type="text/css" href="/web/styles.css"/>
- </head>
- <body>
- <section id="_left"></section>
- <section id="_center">
+<head>
+ <title>Miki</title>
+ <meta name="viewport" charset="utf-8" content="width=device-width, initial-scale=1.0" />
+ <link rel="stylesheet" type="text/css" href="/web/styles.css" />
+</head>
+
+<body>
+ <section class="_content">
+ <div></div>
+ <div>
<h1>HELLO WORLD</h1>
<p class="--font-center">Work-in-progess; More coming soon.</p>
- </section>
- <section id="_right"></section>
- </body>
+ </div>
+ <div></div>
+ </section>
+</body>
+
</html>
\ No newline at end of file
diff --git a/web/styles.css b/web/styles.css
@@ -1,4 +1,4 @@
-@layer base, mod;
+@layer base, primatives, modifiers;
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');
@@ -13,25 +13,25 @@
:root {
- --wte_gold: 1.618;
+ --miki_gold: 1.618;
- --wte_header__height: 5rem;
+ --miki_header__height: 5rem;
- --wte_page__max-width: 900px;
+ --miki_page__max-width: 900px;
- --wte_padding--half: calc(var(--wte_padding) * 0.5);
- --wte_padding: 0.5rem;
- --wte_padding--double: calc(var(--wte_padding) * 2.0);
+ --miki_padding--half: calc(var(--miki_padding) * 0.5);
+ --miki_padding: 0.5rem;
+ --miki_padding--double: calc(var(--miki_padding) * 2.0);
- --wte_margin--half: calc(var(--wte_margin) * 0.5);
- --wte_margin: 0.5rem;
- --wte_margin--double: calc(var(--wte_margin) * 2);
+ --miki_margin--half: calc(var(--miki_margin) * 0.5);
+ --miki_margin: 0.5rem;
+ --miki_margin--double: calc(var(--miki_margin) * 2);
- --wte_border__width--half: calc(var(--wte_border__width) / 2);
- --wte_border__width: 0.25rem;
- --wte_border__width--double: 0.5rem;
- --wte_border__radius: 1.0rem;
- --wte_border__radius--half: calc(var(--wte_border__radius) * 0.5);
+ --miki_border__width--half: calc(var(--miki_border__width) / 2);
+ --miki_border__width: 0.25rem;
+ --miki_border__width--double: 0.5rem;
+ --miki_border__radius: 1.0rem;
+ --miki_border__radius--half: calc(var(--miki_border__radius) * 0.5);
--color__ff: #fdfdfd;
--color__f0: #dfe6e9;
@@ -72,9 +72,9 @@
}
body {
- margin: calc(var(--wte_header__height) + var(--wte_padding)) var(--wte_margin--double) var(--wte_margin--double);
+ margin: calc(var(--miki_header__height) + var(--miki_padding)) var(--miki_margin--double) var(--miki_margin--double);
- color-scheme: light;
+ color-scheme: dark;
color: var(--color__font-dark);
background-color: var(--color__bg-light);
@@ -84,7 +84,7 @@
display: grid;
@media screen and (min-width: 900px) {
- grid-template-columns: auto max(var(--wte_page__max-width)) auto;
+ grid-template-columns: auto max(var(--miki_page__max-width)) auto;
}
}
}
@@ -95,8 +95,8 @@
h4,
h5,
h6 {
- padding: var(--wte_padding--half) var(--wte_padding) var(--wte_padding--half) var(--wte_padding);
- margin: var(--wte_margin--double) var(--wte_margin) var(--wte_margin--double) var(--wte_margin);
+ padding: var(--miki_padding--half) var(--miki_padding) var(--miki_padding--half) var(--miki_padding);
+ margin: var(--miki_margin--double) var(--miki_margin) var(--miki_margin--double) var(--miki_margin);
display: grid;
justify-items: center;
@@ -107,13 +107,14 @@
img {
width: 75%;
- padding: var(--wte_padding);
- margin: var(--wte_margin);
+ padding: var(--miki_padding);
+ margin: var(--miki_margin);
justify-self: center;
}
+}
- /* ////////// LAYOUT ////////// */
+@layer primatives {
@scope (.collapsible_) {
:scope {
@@ -125,8 +126,8 @@
/* Collapsible 'header'*/
> :first-child {
width: 100%;
- margin: var(--wte_margin--half);
- padding: var(--wte_padding--half);
+ margin: var(--miki_margin--half);
+ padding: var(--miki_padding--half);
cursor: pointer;
@@ -155,20 +156,20 @@
@scope (.slideshow_) {
:scope {
width: max-content;
- padding: var(--wte_padding--double);
+ padding: var(--miki_padding--double);
display: grid;
grid-template-columns: max-content auto max-content;
justify-items: center;
align-items: center;
- border-radius: var(--wte_border__radius);
+ border-radius: var(--miki_border__radius);
}
#image-frame {
width: 100%;
- height: var(--wte_image__size);
- padding: var(--wte_padding--double);
+ height: var(--miki_image__size);
+ padding: var(--miki_padding--double);
display: grid;
justify-items: center;
@@ -176,7 +177,7 @@
img {
display: none;
- height: calc(var(--wte_image__size) - var(--wte_padding--double) * 2);
+ height: calc(var(--miki_image__size) - var(--miki_padding--double) * 2);
}
}
@@ -195,134 +196,136 @@
}
}
- /* ////////// UTILITIES ////////// */
+ .__container>* {
+ width: 100%;
+ height: 100%;
+ padding: var(--miki_padding);
+ margin: 0;
+
+ display: grid;
+ }
- /* STANDARD LAYOUT CONTAINER */
- .__bg {
- padding: var(--wte_padding);
+ .__container_bg-1 {
+ padding: var(--miki_padding);
background-color: var(--color__bg-dark);
border: 3px solid var(--color__fg-light);
- border-radius: var(--wte_border__radius--half);
+ border-radius: var(--miki_border__radius--half);
&>* {
- padding: var(--wte_padding);
+ padding: var(--miki_padding);
background-color: var(--color__bg-light);
border: 2px solid var(--color__fg-light);
- border-radius: var(--wte_border__radius--half);
+ border-radius: var(--miki_border__radius--half);
}
}
- .--clear-bg {
- background-color: inherit;
- border: none;
+ .__container_collapse {
+ padding: var(--miki_padding);
+ border-bottom-left-radius: var(--miki_border__radius);
+ border-bottom-right-radius: var(--miki_border__radius);
+ background-color: var(--color__bg-dark);
+
+ &>* {
+ border: 2px solid var(--color__fg-light);
+ border-radius: var(--miki_border__radius--half);
+ background-color: var(--color__bg-light);
+ }
}
- .__vb {
- padding: var(--wte_padding);
- border-bottom-left-radius: var(--wte_border__radius);
- border-bottom-right-radius: var(--wte_border__radius);
+ .__container_collapse--small {
+ padding: var(--miki_padding--half);
+ border-bottom-left-radius: var(--miki_border__radius);
+ border-bottom-right-radius: var(--miki_border__radius);
background-color: var(--color__bg-dark);
&>* {
+ margin-top: var(--miki_margin);
+ margin-bottom: var(--miki_margin);
border: 2px solid var(--color__fg-light);
- border-radius: var(--wte_border__radius--half);
+ border-radius: var(--miki_border__radius--half);
background-color: var(--color__bg-light);
}
}
- /* DELIMITED LIST */
- ul.__del-list {
- padding: var(--wte_padding);
+ ul.__list_delim {
+ padding: var(--miki_padding);
margin: 0;
> :first-child {
border-top: none;
}
+ .li_header {
+ padding-bottom: var(--miki_padding);
+ font-weight: bold;
+ }
+
>li {
- padding: var(--wte_padding--double) 0 var(--wte_padding--double);
+ padding: var(--miki_padding--double) 0 var(--miki_padding--double);
border-top: 2px solid var(--color__fg-light);
list-style-type: none;
}
-
- .h {
- padding-bottom: var(--wte_padding);
- font-weight: bold;
- }
}
- .__table-list>* {
+ .__table_2-col>* {
display: grid;
grid-template-columns: 1fr auto;
}
- .__table-grid-l>* {
+ .__table_2-col--lrg>* {
display: grid;
grid-template-columns: minmax(100px, .25fr) 1fr;
}
+ .__descriptor {
+ margin-top: 0.25rem;
+ font-size: 0.75em;
+ }
+
+}
- .__vb-1 {
- padding: var(--wte_padding--half);
- border-bottom-left-radius: var(--wte_border__radius);
- border-bottom-right-radius: var(--wte_border__radius);
- background-color: var(--color__bg-dark);
+@layer modifiers {
- &>* {
- margin-top: var(--wte_margin);
- margin-bottom: var(--wte_margin);
- border: 2px solid var(--color__fg-light);
- border-radius: var(--wte_border__radius--half);
- background-color: var(--color__bg-light);
- }
+ /*//////// BACKGROUND ////////*/
+
+ .--clear_bg {
+ background-color: inherit;
+ border: none;
}
+ /*//////// BORDER ////////*/
- .__border-circle {
- background-color: light-dark(var(--color__blue-dark), var(--color__bg-light));
- border: 0.5rem solid light-dark(var(--color__bg-light), var(--color__blue-dark));
+ .--circle_border {
border-radius: 100%;
}
- .descriptor {
- margin-top: 0.25rem;
- font-size: 0.75em;
- }
+ /*//////// FONT ////////*/
- .--font-center {
+ .--center_font {
text-align: center;
}
- .--font-half {
+ .--size-half_font {
font-size: .5rem;
}
- .--font-3-4 {
+ .--size-3-4_font {
font-size: .75rem;
}
- .--font-4-3 {
+ .--size-4-3_font {
font-size: 1.25rem;
}
- .--font-double {
+ .--size-double_font {
font-size: 2rem;
}
- .--font-bold {
+ .--bold_font {
font-weight: bold;
}
.--clickable {
cursor: pointer;
}
-
- .__stdc>* {
- width: 100%;
- height: 100%;
- padding: var(--wte_padding);
- margin: 0;
-
- display: grid;
- }
}
\ No newline at end of file
