Merge pull request #5 from pulsar-edit/rewrite-css

Rewrite CSS

docs/main.js

@@ -389,13 +389,13 @@ const Hovercards = {
     }
 
     let html = `
-      <div class="hovercard-card">
-        <div class="hovercard-title">
+      <div class="hovercard__content">
+        <div class="hovercard__title">
           <a href="${card.link}" target="_blank">
             ${card.title}
           </a>
         </div>
-        <div class="hovercard-summary">
+        <div class="hovercard__summary">
           ${card.description}
         </div>
       </div>
@@ -633,7 +633,7 @@ const Sidebar = {
 let autoToc = new AutoTOC();
 
 {
-  let topMargin = document.querySelector('.page_header')?.offsetHeight ?? 0;
+  let topMargin = document.querySelector('.page-header')?.offsetHeight ?? 0;
   let manageHistoryEntries = !location.pathname.startsWith('/api/');
   window.headingObserver = new HeadingObserver({ topMargin, manageHistoryEntries });
 }

docs/main.less

@@ -1,10 +1,8 @@
-@import 'skeleton-less/less/skeleton.less';
-@import 'less/skeleton-modifiers.less';
 @import 'less/mixins.less';
 @import 'less/themes.less';
 @import 'less/content.less';
 @import 'less/tabs.less';
-@import 'less/custom-containers.less';
+@import 'less/alert.less';
 @import 'less/sidebar.less';
 @import 'less/index.less';
 @import 'less/blocks.less';
@@ -14,8 +12,9 @@
 @import 'less/syntax-highlighting.less';
 @import 'less/page-header.less';
 @import 'less/hovercard.less';
-@import 'less/skeleton-theming.less';
-@import 'less/globals.less';
+@import 'less/base.less';
 @import 'less/api.less';
+@import 'less/variables.less';
+@import 'less/todo.less';
 
 @import 'less/octicons/octicons.less';

layouts/api/arguments_table.ejs

@@ -1,4 +1,4 @@
-<table class="arguments">
+<table class="api-arguments">
   <thead>
     <tr>
       <th>Argument</th>

layouts/api/arguments_table_row.ejs

@@ -1,4 +1,4 @@
-<tr class="argument--depth-<%=level%>">
+<tr class="arguments__row--depth-<%=level%>">
   <td>
     <code><%=arg.name%></code>
   </td>

layouts/api/page.ejs

@@ -21,8 +21,8 @@
           <h1 class="title" id="title"><%= pageTitle %></h1>
         </section>
 
-        <section class="description">
-          <header class="description__header">
+        <section class="api-description">
+          <header class="api-description__header">
             <h2 id="description">Description</h2>
           </header>
           <%- mdRender(content.description) %>

layouts/api/return_values_table.ejs

@@ -1,7 +1,7 @@
-<section class="return-values">
+<section class="api-return-values">
   <header><h6>Return values</h6></header>
 
-  <ul class="return-values__content">
+  <ul class="api-return-values__content">
     <% for (const val of returnValues) { -%>
     <li>
       <%- mdRender(val.description) -%>

layouts/hovercard.ejs

@@ -1 +1 @@
-<div class="hovercard-element" id="hovercard"></div>
+<div class="hovercard" id="hovercard"></div>

layouts/page_header.ejs

@@ -1,22 +1,22 @@
-<header class="page_header">
-  <div class="page_header__inner">
-    <a href="/" class="page_header__logo">
-      <img class="page_header__img" src="/static/logo-name-navbar-dark.svg">
+<header class="page-header">
+  <div class="page-header__content">
+    <a href="/" class="page-header__logo">
+      <img class="page-header__img" src="/static/logo-name-navbar-dark.svg">
     </a>
 
-    <nav class="page_header__items">
-      <a class="page_header__link" href="/api/pulsar">
+    <nav class="page-header__items">
+      <a class="page-header__link" href="/api/pulsar">
         <span>Pulsar API</span>
       </a>
-      <a class="page_header__link" href="https://api.pulsar-edit.dev/swagger-ui/">
+      <a class="page-header__link" href="https://api.pulsar-edit.dev/swagger-ui/">
         <span>Package Registry API</span>
       </a>
-      <a class="page_header__link" href="https://pulsar-edit.dev">
+      <a class="page-header__link" href="https://pulsar-edit.dev">
         <span>Homepage</span>
       </a>
     </nav>
 
-    <nav class="page_header__actions">
+    <nav class="page-header__actions">
       <div class="theme-switcher-menu">
         <button type="button" id="theme-switcher">
           <svg xmlns="http://www.w3.org/2000/svg" class="icon auto-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="auto icon">

less/adjacent-nav.less

@@ -1,17 +1,18 @@
 
 nav.adjacent {
+  display: flex;
+
   margin-top: 4rem;
+  border-top: 2px solid var(--thematic-break-color);
   padding-top: 4rem;
-  border-top: 2px solid var(--thematicBreak-color);
 
-  display: flex;
   justify-content: space-between;
 
   .adjacent__previous,
   .adjacent__next {
-    display: flex;
     justify-content: flex-start;
     align-items: top;
+    display: flex;
   }
 
   .adjacent__previous {
@@ -25,8 +26,8 @@ nav.adjacent {
   }
   .adjacent__next {
     margin-left: auto;
-    text-align: right;
     padding-left: 3vw;
+    text-align: right;
 
     &::after {
       content: '→';

less/alert.less

@@ -0,0 +1,94 @@
+
+// Custom containers from markdown-it
+.alert {
+  position: relative;
+  overflow: clip;
+
+  margin: 1rem 3rem 2rem 0;
+  padding: 0rem 1rem 0.25rem;
+  border-radius: 0.8rem;
+  border-left: 0.45rem solid var(--alert-border);
+
+  background-color: var(--alert-bg);
+
+  color: var(--alert-color);
+
+  .alert__content {
+    // (when there's no title)
+    &:first-child {
+      padding-top: 0.75rem;
+    }
+
+    & > :last-child {
+      margin-bottom: 0.75rem;
+    }
+  }
+
+  .alert__title {
+    margin: 0rem -1rem 0.25rem;
+    padding-top: 0.75rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+
+    background-color: var(--alert-bg-title);
+
+    color: var(--alert-color-title);
+    font-weight: 700;
+    text-transform: uppercase;
+  }
+
+  &.note {
+    border-color: var(--alert-border-note, var(--alert-border));
+    background-color: var(--alert-bg-note, var(--alert-bg));
+    color: var(--alert-color-note, var(--alert-color));
+
+    .alert__title {
+      background-color: var(--alert-bg-title-note, var(--alert-bg-title));
+      color: var(--alert-color-title-note, var(--alert-color-title));
+    }
+  }
+
+  &.warning {
+    border-color: var(--alert-border-warning, var(--alert-border));
+    background-color: var(--alert-bg-warning, var(--alert-bg));
+    color: var(--alert-color-warning, var(--alert-color));
+
+    .alert__title {
+      background-color: var(--alert-bg-title-warning, var(--alert-bg-title));
+      color: var(--alert-color-title-warning, var(--alert-color-title));
+    }
+  }
+
+  &.info {
+    border-color: var(--alert-border-info, var(--alert-border));
+    background-color: var(--alert-bg-info, var(--alert-bg));
+    color: var(--alert-color-info, var(--alert-color));
+
+    .alert__title {
+      background-color: var(--alert-bg-title-info, var(--alert-bg-title));
+      color: var(--alert-color-title-info, var(--alert-color-title));
+    }
+  }
+
+  &.tip {
+    border-color: var(--alert-border-tip, var(--alert-border));
+    background-color: var(--alert-bg-tip, var(--alert-bg));
+    color: var(--alert-color-tip, var(--alert-color));
+
+    .alert__title {
+      background-color: var(--alert-bg-title-tip, var(--alert-bg-title));
+      color: var(--alert-color-title-tip, var(--alert-color-title));
+    }
+  }
+
+  &.danger {
+    border-color: var(--alert-border-danger, var(--alert-border));
+    background-color: var(--alert-bg-danger, var(--alert-bg));
+    color: var(--alert-color-danger, var(--alert-color));
+
+    .alert__title {
+      background-color: var(--alert-bg-title-danger, var(--alert-bg-title));
+      color: var(--alert-color-title-danger, var(--alert-color-title));
+    }
+  }
+}