Fix up some of the margin weirdness

site/assets/cool-border.svg

@@ -0,0 +1,10 @@
+<svg width="180" height="180" version="1.1" viewBox="0 0 47.625 47.625" xmlns="http://www.w3.org/2000/svg">
+ <g fill="none">
+  <path d="m0.79883 12.306 11.507-11.507h23.014s11.507 0 11.507 11.507v23.014l-11.507 11.507c-11.507 0-23.014 0-34.52-2e-6l1.5e-7 -34.52" stroke="#ce027c" stroke-width=".79375"/>
+  <g stroke="#9606b2">
+   <path d="m2.4907 45.134h24.404" stroke-width=".79375"/>
+   <path d="m41.24 38.498 4.0681-4.0681v-16.259" stroke-width=".79375"/>
+   <path d="m2.4907 18.044v-5.0229l10.704-10.704h9.1849" stroke-width=".79375"/>
+  </g>
+ </g>
+</svg>

site/styles.scss

@@ -1,6 +1,12 @@
-body {
+html {
 	--color-bg: #170423;
 	--color-hi: #ce027c;
+	--color-lo: #4a056d;
+
+	scrollbar-color: var(--color-lo) var(--color-bg);
+}
+
+body {
 	background-color: var(--color-bg);
 	color: white;
 
@@ -8,8 +14,6 @@ body {
 	font-size: 1.5em;
 	line-height: 1.4em;
 
-	max-width: 700px;
-	margin: 0 auto;
 	margin-bottom: 60px;
 }
 
@@ -19,6 +23,8 @@ header {
 	font-size: 3.2rem;
 
 	padding: 0px 49px;
+	width: 600px;
+	margin: 0 auto;
 
 	p {
 		display: flex;
@@ -43,14 +49,23 @@ header {
 	}
 }
 
-.emphasis-paragraph {
-	font-family: Resistance;
-	font-size: 3.5rem;
-	line-height: initial;
-	text-align: center;
+#intro {
+	& > * {
+		margin-left: auto;
+		margin-right: auto;
+	}
 
-	margin-left: -50px;
-	margin-right: -50px;
+	p {
+		max-width: 700px;
+	}
+
+	.emphasis-paragraph {
+		max-width: 850px;
+		font-family: Resistance;
+		font-size: 3.5rem;
+		line-height: initial;
+		text-align: center;
+	}
 }
 
 #should-hide-intro:checked + #intro {
@@ -71,9 +86,12 @@ header {
 	margin-left: auto;
 	margin-right: auto;
 	cursor: pointer;
+	background: none;
+	border: none;
+	padding: 0;
 
 	& > div:nth-child(2) {
-		padding: 5px 30px;
+		padding: 0 30px;
 	}
 }
 
@@ -83,6 +101,12 @@ header {
 		border-top: 0;
 		& ~ :not(.bevel) {
 			background-color: var(--bevel);
+			:first-child {
+				margin-top: 0;
+			}
+			:last-child {
+				margin-bottom: 0;
+			}
 		}
 	}
 	&.bl, &.br {
@@ -96,11 +120,64 @@ header {
 	}
 }
 
+#license-chooser {
+	max-width: 800px;
+	margin: 0 auto;
+
+	#selected-license {
+		border: 60px solid;
+		border-image: url("/assets/cool-border.svg") 60;
+		padding: 30px;
+		border-radius: 20px;
+		white-space: pre-wrap;
+		h2 {
+			margin-top: 0;
+		}
+		p {
+			margin-bottom: 0;
+			font-size: 1.3rem;
+			line-height: 130%;
+		}
+	}
+	#available-licenses {
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		gap: 20px;
+		margin-top: 20px;
+
+		.selectable-license {
+			background: none;
+			border: 3px solid var(--color-hi);
+			height: 50px;
+			color: white;
+			font-family: Lack, sansserif;
+			font-size: 1.2rem;
+			transform: skew(-15deg);
+			cursor: pointer;
+
+			span {
+				transform: skew(15deg);
+				display: block;
+			}
+
+			&:hover {
+				background-color: #1f0430;
+			}
+
+			&.active {
+				background-color: var(--color-hi);
+				color: var(--color-bg);
+			}
+		}
+	}
+}
+
 #modules {
 	display: grid;
-	grid-template-columns: 50% 50%;
+	grid-template-columns: 1fr 1fr;
 	gap: 50px;
-	margin: 0 -180px;
+	max-width: 1070px;
+	margin: 0 auto;
 	margin-bottom: 50px;
 
 	.module-button > div {
@@ -138,7 +215,29 @@ header {
 #downloads {
 	display: grid;
 	grid-template-columns: auto auto auto;
-	width: 100%;
+	max-width: 800px;
+	margin: 0 auto;
+}
+
+.divider {
+	display: grid;
+	grid-template-columns: 1fr 0fr 1fr;
+	align-items: center;
+	margin: 0 auto;
+	max-width: 900px;
+	gap: 50px;
+	font-family: Resistance;
+	color: #e1c0ed;
+	margin-top: 110px;
+	margin-bottom: 30px;
+
+	h2 {
+		white-space: nowrap;
+	}
+
+	div {
+		border-bottom: 1px solid #bf8cd1;
+	}
 }
 
 .cooler-checkbox {

src/License.elm

@@ -7,6 +7,7 @@ module License exposing
   , downloadMime
   , empty
   , License
+  , LicenseDescriptors
   , LicenseInfo
   , Template
   , ModuleInfo
@@ -82,6 +83,13 @@ type alias LicenseInfo modtype =
   { availableModules : List modtype
   , templates : DownloadType -> Template modtype
   , moduleInfo : modtype -> ModuleInfo
+  , descriptors : LicenseDescriptors
+  }
+
+type alias LicenseDescriptors =
+  { name : String
+  , desc : String
+  , slug : String
   }
 
 empty : LicenseInfo modtype -> License modtype

src/License/Hippocratic.elm

@@ -17,6 +17,15 @@ info =
   { availableModules = availableModules
   , templates = getTemplate
   , moduleInfo = moduleInfo
+  , descriptors =
+    { name = "Hippocratic License 3.0"
+    , slug = "HL"
+    , desc = String.trim """
+The flagship ethical source license, the hippocratic license is one of the most customizable and practical ELOS licenses out there.  The 3rd version features many optional modules to tailor the license to issues that matter to you, including optional copyleft functionality.
+
+Also featured is an out-of-court arbitration clause, and restrictions that prevent any organizations involved in unethical practices from using the software, as opposed to just preventing the direct use of the software for unethical practices.
+"""
+    }
   }
 
 type Module

src/License/NPL.elm

@@ -15,6 +15,17 @@ info =
   { availableModules = availableModules
   , templates = getTemplate
   , moduleInfo = moduleInfo
+  , descriptors =
+    { name = "Nonviolent Public License v7"
+    , slug = "NVPL/CNPL"
+    , desc = String.trim """
+The NVPL is perhaps best known for its variant the CNPL (Cooperative Nonviolent Public License), an ELOS license unique in its restriction of comercial use of software to worker owned co-operatives (check off "Worker Ownership" to enable this variant).
+
+Even on its own, however, the NVPL is a powerful license, including protections against using the work to hurt others or using the work for surveilence, war/war-profiteering, incarceration, fossil fuel extraction/processing, child labor, and the spreading of hate speach.
+
+The NVPL is also one of a few ELOS licenses that explicitly includes an (AGPL-like) clause that requires network services to distribute or link to the project's source code.
+"""
+    }
   }
 
 type Module

src/Main.elm

@@ -2,7 +2,7 @@ module Main exposing (main)
 
 import Browser
 import Sort.Set as Set exposing (Set)
-import Html exposing (Html, div, input, label, p, section, text, h3)
+import Html exposing (Html, button, div, h2, h3, input, label, p, section, text, span, h3)
 import Html.Events exposing (onCheck, onClick)
 import Html.Attributes exposing (class, type_, id)
 import Html.Attributes exposing (attribute)
@@ -28,6 +28,8 @@ subscriptions _ = Sub.none
 type SelectedLicense
   = Hippocratic
   | NPL
+availableLicenses : List SelectedLicense
+availableLicenses = [ Hippocratic, NPL ]
 
 type alias Model =
   { selected : SelectedLicense
@@ -35,6 +37,12 @@ type alias Model =
   , npl : License NPL.Module
   }
 
+selectedInfo : SelectedLicense -> License.LicenseDescriptors
+selectedInfo selected =
+  case selected of
+    Hippocratic -> Hippocratic.info.descriptors
+    NPL -> NPL.info.descriptors
+
 init : () -> (Model, Cmd Msg)
 init () =
   (
@@ -100,6 +108,40 @@ view_module_button wrapModule moduleInfo enabled mod =
       ]
     ]
 
+viewLicenseChooser : SelectedLicense -> Html Msg
+viewLicenseChooser selected =
+  div
+    [ id "license-chooser" ]
+    [ selected
+      |> selectedInfo
+      |> viewLicenseInfo
+      |> Html.map never
+    , div [ id "available-licenses" ]
+      ( availableLicenses
+        |> List.map (selectableLicense selected)
+      )
+    ]
+
+viewLicenseInfo : License.LicenseDescriptors -> Html Never
+viewLicenseInfo info =
+  div [ id "selected-license" ]
+    [ h2 [] [text info.name]
+    , p [] [text info.desc]
+    ]
+
+selectableLicense : SelectedLicense -> SelectedLicense -> Html Msg
+selectableLicense currentlySelected license =
+  button
+    ( [ onClick (SwitchLicense license)
+      , class "selectable-license"
+      ]
+        ++ if currentlySelected == license then [class "active"] else []
+    )
+    [ span []
+      [ text (.slug (selectedInfo license))
+      ]
+    ]
+
 view_modules : ModuleWrapper moduleType -> License moduleType -> Html Msg
 view_modules wrap license =
   section [id "modules"] (
@@ -109,7 +151,7 @@ view_modules wrap license =
 
 view_cooler_button : String -> msg -> Html msg
 view_cooler_button name message =
-  div
+  button
     [ class "cool-button"
     , onClick message
     ]
@@ -140,12 +182,22 @@ downloads =
       ]
     )
 
+divider : String -> Html Never
+divider sectionName =
+  div [class "divider"]
+    [ div [] []
+    , h3 [] [text sectionName]
+    , div [] []
+    ]
 
 view : Model -> Html Msg
 view model =
   div [id "elm-area"]
-    [ case model.selected of
+    [ viewLicenseChooser model.selected
+    , Html.map never (divider "Customize")
+    , case model.selected of
         Hippocratic -> view_modules HippocraticMod model.hippocratic
         NPL -> view_modules NPLMod model.npl
+    , Html.map never (divider "Download")
     , downloads
     ]