moved css to files while still inlining

DDP-Projekt · Dec 13, 2024 · 6b86e99 · 6b86e99
1 parent 728aced
commit 6b86e99
Show file tree

Hide file tree

Showing 13 changed files with 265 additions and 264 deletions.
diff --git a/assets/css/changelog.css b/assets/css/changelog.css
@@ -0,0 +1,63 @@
+main {
+    --line-start: 10px;
+    margin: 1rem;
+}
+
+h2 {
+    display: list-item;
+    list-style-type: circle;
+    list-style-position: inside;
+    margin-left: calc(var(--line-start) - 2px);
+}
+
+li {
+    word-wrap: break-word;
+}
+
+li p {
+    display: inline-block;
+}
+
+h2 + ul:not(ul ul) {
+    list-style-type: none;
+    border-left: solid black 1px;
+    padding-left: 20px;
+    margin-left: var(--line-start);
+}
+
+ul:has(+ h2) {
+    padding-bottom: 1rem;
+}
+
+ul ul {
+    list-style-type: disc;
+}
+
+.tag {
+    border-radius: 5rem;
+    padding-left: 0.4rem;
+    padding-right: .5rem;
+}
+
+.Added {
+    background-color: #32b643;
+    color: white;
+}
+
+.Changed  {
+    background-color: #ffb700;
+}
+
+.Removed {
+    background-color: #9c2703;
+    color: white;
+}
+
+.Breaking {
+    background-color: #e84900;
+    color: white;
+}
+
+.Fix {
+    background-color: #9ec5f1;
+}
diff --git a/assets/css/download.css b/assets/css/download.css
@@ -0,0 +1,42 @@
+#dl-row {
+    display: flex; 
+    align-items: center; 
+    justify-content: center; 
+    flex-direction: column;
+}
+
+#dl-wrapper {
+    display: flex; 
+    align-items: center;
+    padding-bottom: 1rem
+}
+
+#dl-btn {
+    display: flex;
+    flex-direction: column;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    margin-right: 1rem;
+    align-items: center;
+}
+
+#dl-label {
+    font-weight: bold;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+#dl-icon {
+    width: 1rem;
+    height: 1rem;
+    fill: white;
+    margin-right: 0.5rem;
+}
+
+#dl-text {
+    font-size: 0.75rem;
+    line-height: 1rem;
+}
diff --git a/assets/css/features.css b/assets/css/features.css
@@ -0,0 +1,39 @@
+.feature {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: calc(100% - var(--c-button-height));
+    padding: 1.5rem;
+}
+
+.feature-content {
+    width: 100%;
+}
+
+@media (min-width: 1024px) {
+    .feature {
+        flex-direction: row;
+    }
+    .feature content {
+        width: 50%;
+        height: 80%;
+    }
+}
+
+.feature-play {
+    width: 100%;
+    height: 100%;
+    padding: 0.5rem;
+}
+
+#next-btn-wrapper {
+    height: var(--c-button-height);
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#next-btn {
+    padding: 0.5rem;
+}
diff --git a/assets/css/home.css b/assets/css/home.css
@@ -0,0 +1,97 @@
+iframe {
+    transform-origin: top left;
+    width: calc(100% / var(--play-zoom-factor));
+    height: calc(100% / var(--play-zoom-factor));
+    transform: scale(var(--play-zoom-factor));
+}
+
+button, [role=button] {
+    cursor: pointer;
+    appearance: none;
+    background-color: #3b82f6;
+    color: white;
+    border-radius: 0.25rem;
+}
+
+button:hover {
+    background-color: #1d4ed8;
+}
+
+.stripe {
+    width: 100%;
+    height: 40rem;
+}
+
+.black {
+    display: flex;
+    flex-direction: column;
+    background-color: #27272a;
+    color: white;
+    height: auto;
+}
+
+.black > div {
+    width: 100%;
+    padding: 1.5rem;
+}
+
+.black ul {
+    padding: 0;
+}
+
+#fizzbuzz-wrapper {
+    width: 100%;
+    height: 14rem;
+}
+
+.red {
+    background-color: #ef4444;
+    color: black;
+}
+
+.gold {
+    display: flex;
+    flex-direction: column;
+    padding: 1.5rem;
+    background-color: #facc15;
+    color: black;
+}
+
+#vs-code-text {
+    width: 100%;
+}
+
+#vs-code-img {
+    width: 100%;
+    padding: 1rem;
+    display: flex;
+    justify-content: center;
+}
+
+#vs-code-img img {
+    width: 100%;
+    max-width: 36rem;
+}
+
+@media (min-width: 1024px) {
+    .stripe {
+        height: 27rem;
+    }
+    .black, .gold {
+        flex-direction: row;
+    }
+    .black > div {
+        width: 50%;
+    }
+    #vs-code-text {
+        width: 40%;
+        height: 100%;
+    }
+    #vs-code-img {
+        width: 60%;
+        height: 100%;
+    }
+    #fizzbuzz-wrapper {
+        height: 66.66%;
+    }
+}
diff --git a/assets/main.css → assets/css/main.css b/assets/main.css → assets/css/main.css
@@ -65,7 +65,7 @@ nav a {
 
 
 @media screen and (max-width: 425px) {
-	nav img {
+	nav svg {
 		display: none;
 	}
 }

diff --git a/assets/reset.css → assets/css/reset.css b/assets/reset.css → assets/css/reset.css
diff --git a/assets/img/ddp-logo.svg b/assets/img/ddp-logo.svg
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -3,7 +3,8 @@
 	{{ partial "head" . }}
 	<body>
 		<nav>
-			<a href="/"><img src="/img/ddp-logo.svg" alt="logo" width="48px" height="48px"></a>
+			{{- $logo := resources.Get "/img/ddp-logo.svg" | minify }}
+			<a href="/">{{ $logo.Content | safeHTML}}</a>
 
 			<a href='{{ T "docs-link" }}'>Bedienungsanleitung</a>
 			<a href="https://spiel.ddp.im">Spielplatz</a>

diff --git a/layouts/_default/changelog.html b/layouts/_default/changelog.html
@@ -1,4 +1,7 @@
 {{- define "main" -}}
+    {{- $style := resources.Get "/css/changelog.css" | minify }}
+    {{ (printf "<%s>%s</style>" "style" ($style.Content | safeCSS)) | safeHTML }}
+
     {{ .Content }}
     {{ $url := "https://raw.githubusercontent.com/DDP-Projekt/Kompilierer/refs/heads/master/CHANGELOG.md" }}
     {{ with resources.GetRemote $url }}
@@ -9,70 +12,4 @@
     {{ else }}
         {{ errorf "Unable to get remote resource %q" $url }}
     {{ end }}
-
-    <style>
-        main {
-            --line-start: 10px;
-            margin: 1rem;
-        }
-
-        h2 {
-            display: list-item;
-            list-style-type: circle;
-            list-style-position: inside;
-            margin-left: calc(var(--line-start) - 2px);
-        }
-
-        li {
-            word-wrap: break-word;
-        }
-
-        li p {
-            display: inline-block;
-        }
-
-        h2 + ul:not(ul ul) {
-            list-style-type: none;
-            border-left: solid black 1px;
-            padding-left: 20px;
-            margin-left: var(--line-start);
-        }
-
-        ul:has(+ h2) {
-            padding-bottom: 1rem;
-        }
-
-        ul ul {
-            list-style-type: disc;
-        }
-
-        .tag {
-            border-radius: 5rem;
-            padding-left: 0.4rem;
-            padding-right: .5rem;
-        }
-
-        .Added {
-            background-color: #32b643;
-            color: white;
-        }
-
-        .Changed  {
-            background-color: #ffb700;
-        }
-
-        .Removed {
-            background-color: #9c2703;
-            color: white;
-        }
-
-        .Breaking {
-            background-color: #e84900;
-            color: white;
-        }
-
-        .Fix {
-            background-color: #9ec5f1;
-        }
-    </style>
 {{- end -}}