Compare commits
6 Commits
| Author | SHA1 | Date |
|---|---|---|
Ben Visness
|
75e21ccbe9 | |
Asaf Gartner
|
7410fbcd4a | |
Ben Visness
|
d0c7605029 | |
|
Ben Visness
|
be7440acce | |
|
Ben Visness
|
1a0be1912e | |
|
Ben Visness
|
19a8c6bf0d |
2
go.mod
2
go.mod
|
|
@ -24,7 +24,6 @@ require (
|
|||
github.com/stretchr/testify v1.8.1
|
||||
github.com/tcolgate/mp3 v0.0.0-20170426193717-e79c5a46d300
|
||||
github.com/teacat/noire v1.1.0
|
||||
github.com/wellington/go-libsass v0.9.2
|
||||
github.com/yuin/goldmark v1.4.13
|
||||
github.com/yuin/goldmark-highlighting v0.0.0-20210516132338-9216f9c5aa01
|
||||
golang.org/x/crypto v0.6.0
|
||||
|
|
@ -45,6 +44,7 @@ require (
|
|||
github.com/danwakefield/fnmatch v0.0.0-20160403171240-cbb64ac3d964 // indirect
|
||||
github.com/davecgh/go-spew v1.1.1 // indirect
|
||||
github.com/dlclark/regexp2 v1.4.0 // indirect
|
||||
github.com/evanw/esbuild v0.21.4 // indirect
|
||||
github.com/huandu/xstrings v1.3.2 // indirect
|
||||
github.com/imdario/mergo v0.3.12 // indirect
|
||||
github.com/inconshreveable/mousetrap v1.0.0 // indirect
|
||||
|
|
|
|||
3
go.sum
3
go.sum
|
|
@ -90,6 +90,8 @@ github.com/dlclark/regexp2 v1.4.0 h1:F1rxgk7p4uKjwIQxBs9oAXe5CqrXlCduYEJvrF4u93E
|
|||
github.com/dlclark/regexp2 v1.4.0/go.mod h1:2pZnwuY/m+8K6iRw6wQdMtk+rH5tNGR1i55kozfMjCc=
|
||||
github.com/emersion/go-ical v0.0.0-20220601085725-0864dccc089f h1:feGUUxxvOtWVOhTko8Cbmp33a+tU0IMZxMEmnkoAISQ=
|
||||
github.com/emersion/go-ical v0.0.0-20220601085725-0864dccc089f/go.mod h1:2MKFUgfNMULRxqZkadG1Vh44we3y5gJAtTBlVsx1BKQ=
|
||||
github.com/evanw/esbuild v0.21.4 h1:pe4SEQMoR1maEjhgWPEPWmUy11Jp6nidxd1mOvMrFFU=
|
||||
github.com/evanw/esbuild v0.21.4/go.mod h1:D2vIQZqV/vIf/VRHtViaUtViZmG7o+kKmlBfVQuRi48=
|
||||
github.com/fatih/color v1.7.0/go.mod h1:Zm6kSWBoL9eyXnKyktHP6abPY2pDugNf5KwzbycvMj4=
|
||||
github.com/fsnotify/fsnotify v1.4.7/go.mod h1:jwhsz4b93w/PPRr/qN1Yymfu8t87LnFCMoQvtojpjFo=
|
||||
github.com/ghodss/yaml v1.0.0/go.mod h1:4dBDuWmgqj2HViK6kFavaiC9ZROes6MMH2rRYeMEF04=
|
||||
|
|
@ -369,6 +371,7 @@ golang.org/x/sys v0.0.0-20200223170610-d5e6a3e2c0ae/go.mod h1:h1NjWce9XRLGQEsW7w
|
|||
golang.org/x/sys v0.0.0-20200413165638-669c56c373c4/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
|
||||
golang.org/x/sys v0.0.0-20210630005230-0f9fa26af87c/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
|
||||
golang.org/x/sys v0.0.0-20210927094055-39ccf1dd6fa6/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
|
||||
golang.org/x/sys v0.0.0-20220715151400-c0bba94af5f8/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
|
||||
golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
|
||||
golang.org/x/sys v0.5.0 h1:MUK/U/4lj1t1oPg0HfuXDN/Z1wv31ZJ/YcPiGccS4DU=
|
||||
golang.org/x/sys v0.5.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
|
||||
|
|
|
|||
2
main.go
2
main.go
|
|
@ -3,7 +3,7 @@ package main
|
|||
import (
|
||||
_ "git.handmade.network/hmn/hmn/src/admintools"
|
||||
_ "git.handmade.network/hmn/hmn/src/assets"
|
||||
_ "git.handmade.network/hmn/hmn/src/buildscss"
|
||||
_ "git.handmade.network/hmn/hmn/src/buildscss/cmd"
|
||||
_ "git.handmade.network/hmn/hmn/src/discord/cmd"
|
||||
_ "git.handmade.network/hmn/hmn/src/initimage"
|
||||
_ "git.handmade.network/hmn/hmn/src/migration"
|
||||
|
|
|
|||
|
|
@ -1,12 +1,15 @@
|
|||
function ImageSelector(form, maxFileSize, container, defaultImageUrl) {
|
||||
this.form = form;
|
||||
this.maxFileSize = maxFileSize;
|
||||
this.fileInput = container.querySelector(".image_input");
|
||||
this.removeImageInput = container.querySelector(".remove_input");
|
||||
this.fileInput = container.querySelector(".imginput");
|
||||
this.removeImageInput = container.querySelector(".imginput-remove");
|
||||
this.imageEl = container.querySelector("img");
|
||||
this.resetLink = container.querySelector(".reset");
|
||||
this.removeLink = container.querySelector(".remove");
|
||||
this.originalImageUrl = this.imageEl.getAttribute("data-original");
|
||||
this.container = container.querySelector(".imginput-container");
|
||||
this.resetLink = container.querySelector(".imginput-reset-link");
|
||||
this.removeLink = container.querySelector(".imginput-remove-link");
|
||||
this.filenameText = container.querySelector(".imginput-filename");
|
||||
this.originalImageUrl = this.imageEl.getAttribute("data-imginput-original");
|
||||
this.originalImageFilename = this.imageEl.getAttribute("data-imginput-original-filename");
|
||||
this.currentImageUrl = this.originalImageUrl;
|
||||
this.defaultImageUrl = defaultImageUrl || "";
|
||||
|
||||
|
|
@ -14,7 +17,7 @@ function ImageSelector(form, maxFileSize, container, defaultImageUrl) {
|
|||
this.removeImageInput.value = "";
|
||||
|
||||
this.setImageUrl(this.originalImageUrl);
|
||||
this.updateButtons();
|
||||
this.updatePreview();
|
||||
|
||||
this.fileInput.addEventListener("change", function(ev) {
|
||||
if (this.fileInput.files.length > 0) {
|
||||
|
|
@ -33,12 +36,16 @@ function ImageSelector(form, maxFileSize, container, defaultImageUrl) {
|
|||
}
|
||||
}
|
||||
|
||||
ImageSelector.prototype.openFileInput = function() {
|
||||
this.fileInput.click();
|
||||
}
|
||||
|
||||
ImageSelector.prototype.handleNewImageFile = function(file) {
|
||||
if (file) {
|
||||
this.updateSizeLimit(file.size);
|
||||
this.removeImageInput.value = "";
|
||||
this.setImageUrl(URL.createObjectURL(file));
|
||||
this.updateButtons();
|
||||
this.updatePreview(file);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -47,7 +54,7 @@ ImageSelector.prototype.removeImage = function() {
|
|||
this.fileInput.value = "";
|
||||
this.removeImageInput.value = "true";
|
||||
this.setImageUrl(this.defaultImageUrl);
|
||||
this.updateButtons();
|
||||
this.updatePreview(null);
|
||||
};
|
||||
|
||||
ImageSelector.prototype.resetImage = function() {
|
||||
|
|
@ -55,7 +62,7 @@ ImageSelector.prototype.resetImage = function() {
|
|||
this.fileInput.value = "";
|
||||
this.removeImageInput.value = "";
|
||||
this.setImageUrl(this.originalImageUrl);
|
||||
this.updateButtons();
|
||||
this.updatePreview(null);
|
||||
};
|
||||
|
||||
ImageSelector.prototype.updateSizeLimit = function(size) {
|
||||
|
|
@ -82,19 +89,24 @@ ImageSelector.prototype.setImageUrl = function(url) {
|
|||
}
|
||||
};
|
||||
|
||||
ImageSelector.prototype.updateButtons = function() {
|
||||
if ((this.originalImageUrl.length > 0 && this.originalImageUrl != this.defaultImageUrl)
|
||||
&& this.currentImageUrl != this.originalImageUrl) {
|
||||
ImageSelector.prototype.updatePreview = function(file) {
|
||||
const showReset = (
|
||||
this.originalImageUrl
|
||||
&& this.originalImageUrl != this.defaultImageUrl
|
||||
&& this.originalImageUrl != this.currentImageUrl
|
||||
);
|
||||
const showRemove = (
|
||||
!this.fileInput.required
|
||||
&& this.currentImageUrl != this.defaultImageUrl
|
||||
);
|
||||
this.resetLink.hidden = !showReset;
|
||||
this.removeLink.hidden = !showRemove;
|
||||
|
||||
this.resetLink.style.display = "inline-block";
|
||||
if (this.currentImageUrl == this.originalImageUrl) {
|
||||
this.filenameText.innerText = this.originalImageFilename;
|
||||
} else {
|
||||
this.resetLink.style.display = "none";
|
||||
this.filenameText.innerText = file ? file.name : "";
|
||||
}
|
||||
|
||||
if (!this.fileInput.required && this.currentImageUrl != this.defaultImageUrl) {
|
||||
this.removeLink.style.display = "inline-block";
|
||||
} else {
|
||||
this.removeLink.style.display = "none";
|
||||
}
|
||||
this.container.hidden = !this.currentImageUrl;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
function rem2px(rem) {
|
||||
return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
|
||||
}
|
||||
|
|
@ -9,7 +9,7 @@ function readableByteSize(numBytes) {
|
|||
"gb"
|
||||
];
|
||||
let scale = 0;
|
||||
while (numBytes > 1024 && scale < scales.length-1) {
|
||||
while (numBytes > 1024 && scale < scales.length - 1) {
|
||||
numBytes /= 1024;
|
||||
scale++;
|
||||
}
|
||||
|
|
@ -28,7 +28,7 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen
|
|||
snippetEdit.avatarLink.href = ownerUrl;
|
||||
snippetEdit.username.textContent = ownerName;
|
||||
snippetEdit.username.href = ownerUrl;
|
||||
snippetEdit.date.textContent = new Intl.DateTimeFormat([], {month: "2-digit", day: "2-digit", year: "numeric"}).format(date);
|
||||
snippetEdit.date.textContent = new Intl.DateTimeFormat([], { month: "2-digit", day: "2-digit", year: "numeric" }).format(date);
|
||||
snippetEdit.text.value = text;
|
||||
if (attachmentElement) {
|
||||
originalAttachment = attachmentElement.cloneNode(true);
|
||||
|
|
@ -56,7 +56,7 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen
|
|||
updateProjectSelector();
|
||||
|
||||
if (originalSnippetEl) {
|
||||
snippetEdit.cancelLink.addEventListener("click", function() {
|
||||
snippetEdit.cancelLink.addEventListener("click", function () {
|
||||
cancel();
|
||||
});
|
||||
} else {
|
||||
|
|
@ -78,7 +78,7 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen
|
|||
if (proj.id == stickyProjectId) {
|
||||
projEl.removeButton.remove();
|
||||
} else {
|
||||
projEl.removeButton.addEventListener("click", function(ev) {
|
||||
projEl.removeButton.addEventListener("click", function (ev) {
|
||||
projEl.root.remove();
|
||||
updateProjectSelector();
|
||||
});
|
||||
|
|
@ -126,7 +126,7 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen
|
|||
option.textContent = remainingProjects[i].name;
|
||||
projectSelector.appendChild(option);
|
||||
}
|
||||
projectSelector.addEventListener("change", function(ev) {
|
||||
projectSelector.addEventListener("change", function (ev) {
|
||||
if (projectSelector.selectedOptions.length > 0) {
|
||||
let selected = projectSelector.selectedOptions[0];
|
||||
if (selected.value != "") {
|
||||
|
|
@ -237,33 +237,33 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen
|
|||
}
|
||||
}
|
||||
|
||||
snippetEdit.uploadLink.addEventListener("click", function() {
|
||||
snippetEdit.uploadLink.addEventListener("click", function () {
|
||||
snippetEdit.file.click();
|
||||
});
|
||||
|
||||
snippetEdit.removeLink.addEventListener("click", function() {
|
||||
snippetEdit.removeLink.addEventListener("click", function () {
|
||||
clearAttachment(false);
|
||||
});
|
||||
|
||||
snippetEdit.replaceLink.addEventListener("click", function() {
|
||||
snippetEdit.replaceLink.addEventListener("click", function () {
|
||||
snippetEdit.file.click();
|
||||
});
|
||||
|
||||
snippetEdit.resetLink.addEventListener("click", function() {
|
||||
snippetEdit.resetLink.addEventListener("click", function () {
|
||||
clearAttachment(true);
|
||||
});
|
||||
|
||||
snippetEdit.uploadResetLink.addEventListener("click", function() {
|
||||
snippetEdit.uploadResetLink.addEventListener("click", function () {
|
||||
clearAttachment(true);
|
||||
});
|
||||
|
||||
snippetEdit.file.addEventListener("change", function() {
|
||||
snippetEdit.file.addEventListener("change", function () {
|
||||
if (snippetEdit.file.files.length > 0) {
|
||||
setFile(snippetEdit.file.files[0]);
|
||||
}
|
||||
});
|
||||
|
||||
snippetEdit.root.addEventListener("dragover", function(ev) {
|
||||
snippetEdit.root.addEventListener("dragover", function (ev) {
|
||||
let effect = "none";
|
||||
for (let i = 0; i < ev.dataTransfer.items.length; ++i) {
|
||||
if (ev.dataTransfer.items[i].kind.toLowerCase() == "file") {
|
||||
|
|
@ -277,7 +277,7 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen
|
|||
|
||||
let enterCounter = 0;
|
||||
|
||||
snippetEdit.root.addEventListener("dragenter", function(ev) {
|
||||
snippetEdit.root.addEventListener("dragenter", function (ev) {
|
||||
enterCounter++;
|
||||
let droppable = Array.from(ev.dataTransfer.items).some(
|
||||
item => item.kind.toLowerCase() === "file"
|
||||
|
|
@ -287,14 +287,14 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen
|
|||
}
|
||||
});
|
||||
|
||||
snippetEdit.root.addEventListener("dragleave", function(ev) {
|
||||
snippetEdit.root.addEventListener("dragleave", function (ev) {
|
||||
enterCounter--;
|
||||
if (enterCounter == 0) {
|
||||
snippetEdit.root.classList.remove("drop");
|
||||
}
|
||||
});
|
||||
|
||||
snippetEdit.root.addEventListener("drop", function(ev) {
|
||||
snippetEdit.root.addEventListener("drop", function (ev) {
|
||||
enterCounter = 0;
|
||||
snippetEdit.root.classList.remove("drop");
|
||||
|
||||
|
|
@ -305,18 +305,18 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen
|
|||
ev.preventDefault();
|
||||
});
|
||||
|
||||
snippetEdit.text.addEventListener("paste", function(ev) {
|
||||
snippetEdit.text.addEventListener("paste", function (ev) {
|
||||
const files = ev.clipboardData?.files ?? [];
|
||||
if (files.length > 0) {
|
||||
setFile(files[0]);
|
||||
}
|
||||
});
|
||||
|
||||
snippetEdit.text.addEventListener("input", function(ev) {
|
||||
snippetEdit.text.addEventListener("input", function (ev) {
|
||||
validate();
|
||||
});
|
||||
|
||||
snippetEdit.saveButton.addEventListener("click", function(ev) {
|
||||
snippetEdit.saveButton.addEventListener("click", function (ev) {
|
||||
let projectsChanged = false;
|
||||
let projInputs = snippetEdit.projectList.querySelectorAll("input[name=project_id]");
|
||||
let assignedIds = [];
|
||||
|
|
@ -350,7 +350,7 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen
|
|||
}
|
||||
});
|
||||
|
||||
snippetEdit.deleteButton.addEventListener("click", function(ev) {
|
||||
snippetEdit.deleteButton.addEventListener("click", function (ev) {
|
||||
if (!window.confirm("Are you sure you want to delete this snippet?")) {
|
||||
ev.preventDefault();
|
||||
return;
|
||||
|
|
@ -367,7 +367,7 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen
|
|||
function editTimelineSnippet(timelineItemEl, stickyProjectId) {
|
||||
let ownerName = timelineItemEl.querySelector(".user")?.textContent;
|
||||
let ownerUrl = timelineItemEl.querySelector(".user")?.href;
|
||||
let ownerAvatar = timelineItemEl.querySelector(".avatar-icon")?.src;
|
||||
let ownerAvatar = timelineItemEl.querySelector(".avatar")?.src;
|
||||
let creationDate = new Date(timelineItemEl.querySelector("time").dateTime);
|
||||
let rawDesc = timelineItemEl.querySelector(".rawdesc").textContent;
|
||||
let attachment = timelineItemEl.querySelector(".timeline-content-box")?.children?.[0];
|
||||
|
|
|
|||
16255
public/style.css
16255
public/style.css
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -2,94 +2,63 @@ package buildscss
|
|||
|
||||
import (
|
||||
"context"
|
||||
"encoding/base64"
|
||||
"fmt"
|
||||
"os"
|
||||
"path/filepath"
|
||||
|
||||
color "git.handmade.network/hmn/hmn/src/ansicolor"
|
||||
"git.handmade.network/hmn/hmn/src/oops"
|
||||
"git.handmade.network/hmn/hmn/src/website"
|
||||
"github.com/spf13/cobra"
|
||||
"github.com/wellington/go-libsass"
|
||||
"git.handmade.network/hmn/hmn/src/config"
|
||||
"git.handmade.network/hmn/hmn/src/jobs"
|
||||
"git.handmade.network/hmn/hmn/src/logging"
|
||||
"github.com/evanw/esbuild/pkg/api"
|
||||
)
|
||||
|
||||
var compressed bool
|
||||
var ActiveServerPort uint16
|
||||
|
||||
func init() {
|
||||
libsass.RegisterSassFunc("base64($filename)", func(ctx context.Context, in libsass.SassValue) (*libsass.SassValue, error) {
|
||||
var filename string
|
||||
err := libsass.Unmarshal(in, &filename)
|
||||
if err != nil {
|
||||
return nil, err
|
||||
}
|
||||
|
||||
fileBytes, err := os.ReadFile(filename)
|
||||
if err != nil {
|
||||
return nil, err
|
||||
}
|
||||
|
||||
encoded, _ := libsass.Marshal(base64.StdEncoding.EncodeToString(fileBytes))
|
||||
return &encoded, nil
|
||||
})
|
||||
|
||||
buildCommand := &cobra.Command{
|
||||
Use: "buildscss",
|
||||
Short: "Build the website CSS",
|
||||
Run: func(cmd *cobra.Command, args []string) {
|
||||
style := libsass.NESTED_STYLE
|
||||
if compressed {
|
||||
style = libsass.COMPRESSED_STYLE
|
||||
}
|
||||
|
||||
err := compile("src/rawdata/scss/style.scss", "public/style.css", "light", style)
|
||||
if err != nil {
|
||||
fmt.Println(color.Bold + color.Red + "Failed to compile main SCSS." + color.Reset)
|
||||
fmt.Println(err)
|
||||
os.Exit(1)
|
||||
}
|
||||
|
||||
for _, theme := range []string{"light", "dark"} {
|
||||
err := compile("src/rawdata/scss/theme.scss", fmt.Sprintf("public/themes/%s/theme.css", theme), theme, style)
|
||||
if err != nil {
|
||||
fmt.Println(color.Bold + color.Red + "Failed to compile theme SCSS." + color.Reset)
|
||||
fmt.Println(err)
|
||||
os.Exit(1)
|
||||
}
|
||||
}
|
||||
func RunServer(ctx context.Context) jobs.Job {
|
||||
job := jobs.New()
|
||||
if config.Config.Env != config.Dev {
|
||||
job.Done()
|
||||
return job
|
||||
}
|
||||
logger := logging.ExtractLogger(ctx).With().Str("module", "EsBuild").Logger()
|
||||
esCtx, ctxErr := BuildContext()
|
||||
if ctxErr != nil {
|
||||
panic(ctxErr)
|
||||
}
|
||||
logger.Info().Msg("Starting esbuild server and watcher")
|
||||
err := esCtx.Watch(api.WatchOptions{})
|
||||
serverResult, err := esCtx.Serve(api.ServeOptions{
|
||||
Port: config.Config.EsBuild.Port,
|
||||
Servedir: "./",
|
||||
OnRequest: func(args api.ServeOnRequestArgs) {
|
||||
logger.Info().Interface("args", args).Msg("Response from esbuild server")
|
||||
},
|
||||
})
|
||||
if err != nil {
|
||||
panic(err)
|
||||
}
|
||||
buildCommand.Flags().BoolVar(&compressed, "compressed", false, "Minify the output CSS")
|
||||
ActiveServerPort = serverResult.Port
|
||||
go func() {
|
||||
<-ctx.Done()
|
||||
logger.Info().Msg("Shutting down esbuild server and watcher")
|
||||
esCtx.Dispose()
|
||||
job.Done()
|
||||
}()
|
||||
|
||||
website.WebsiteCommand.AddCommand(buildCommand)
|
||||
return job
|
||||
}
|
||||
|
||||
func compile(inpath, outpath string, theme string, style int) error {
|
||||
err := os.MkdirAll(filepath.Dir(outpath), 0755)
|
||||
if err != nil {
|
||||
panic(oops.New(err, "failed to create directory for CSS file"))
|
||||
}
|
||||
|
||||
outfile, err := os.OpenFile(outpath, os.O_WRONLY|os.O_CREATE|os.O_TRUNC, 0644)
|
||||
if err != nil {
|
||||
panic(oops.New(err, "failed to open CSS file for writing"))
|
||||
}
|
||||
defer outfile.Close()
|
||||
|
||||
infile, err := os.Open(inpath)
|
||||
if err != nil {
|
||||
panic(oops.New(err, "failed to open SCSS file"))
|
||||
}
|
||||
compiler, err := libsass.New(outfile, infile,
|
||||
libsass.IncludePaths([]string{
|
||||
"src/rawdata/scss",
|
||||
fmt.Sprintf("src/rawdata/scss/themes/%s", theme),
|
||||
}),
|
||||
libsass.OutputStyle(style),
|
||||
)
|
||||
if err != nil {
|
||||
panic(oops.New(err, "failed to create SCSS compiler"))
|
||||
}
|
||||
|
||||
return compiler.Run()
|
||||
func BuildContext() (api.BuildContext, *api.ContextError) {
|
||||
return api.Context(api.BuildOptions{
|
||||
EntryPoints: []string{
|
||||
"src/rawdata/scss/style.css",
|
||||
},
|
||||
Outbase: "src/rawdata/scss",
|
||||
Outdir: "public",
|
||||
External: []string{"/public/*"},
|
||||
Bundle: true,
|
||||
Write: true,
|
||||
Engines: []api.Engine{
|
||||
{Name: api.EngineChrome, Version: "109"},
|
||||
{Name: api.EngineFirefox, Version: "109"},
|
||||
{Name: api.EngineSafari, Version: "12"},
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
package cmd
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
"os"
|
||||
|
||||
"git.handmade.network/hmn/hmn/src/buildscss"
|
||||
"git.handmade.network/hmn/hmn/src/logging"
|
||||
"git.handmade.network/hmn/hmn/src/website"
|
||||
"github.com/spf13/cobra"
|
||||
)
|
||||
|
||||
func init() {
|
||||
buildCommand := &cobra.Command{
|
||||
Use: "buildscss",
|
||||
Short: "Build the website CSS",
|
||||
Run: func(cmd *cobra.Command, args []string) {
|
||||
ctx, err := buildscss.BuildContext()
|
||||
if err != nil {
|
||||
fmt.Println(err)
|
||||
os.Exit(1)
|
||||
}
|
||||
|
||||
res := ctx.Rebuild()
|
||||
outputFilenames := make([]string, 0)
|
||||
for _, o := range res.OutputFiles {
|
||||
outputFilenames = append(outputFilenames, o.Path)
|
||||
}
|
||||
logging.Info().
|
||||
Interface("Errors", res.Errors).
|
||||
Interface("Warnings", res.Warnings).
|
||||
Msg("Ran esbuild")
|
||||
if len(outputFilenames) > 0 {
|
||||
logging.Info().Interface("Files", outputFilenames).Msg("Wrote files")
|
||||
}
|
||||
},
|
||||
}
|
||||
website.WebsiteCommand.AddCommand(buildCommand)
|
||||
}
|
||||
|
|
@ -91,4 +91,7 @@ var Config = HMNConfig{
|
|||
FFMpegPath: "", // Will not generate asset video thumbnails if ffmpeg is not specified
|
||||
CPULimitPath: "", // Not mandatory. FFMpeg will not limited if this is not provided
|
||||
},
|
||||
EsBuild: EsBuildConfig{
|
||||
Port: 9004,
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,8 @@ type HMNConfig struct {
|
|||
EpisodeGuide EpisodeGuide
|
||||
DevConfig DevConfig
|
||||
PreviewGeneration PreviewGenerationConfig
|
||||
Calendars []CalendarSource
|
||||
Calendars []CalendarSource
|
||||
EsBuild EsBuildConfig
|
||||
}
|
||||
|
||||
type PostgresConfig struct {
|
||||
|
|
@ -104,7 +105,7 @@ type MatrixConfig struct {
|
|||
|
||||
type CalendarSource struct {
|
||||
Name string
|
||||
Url string
|
||||
Url string
|
||||
}
|
||||
|
||||
type EpisodeGuide struct {
|
||||
|
|
@ -126,6 +127,10 @@ type PreviewGenerationConfig struct {
|
|||
CPULimitPath string
|
||||
}
|
||||
|
||||
type EsBuildConfig struct {
|
||||
Port uint16
|
||||
}
|
||||
|
||||
func init() {
|
||||
if Config.EpisodeGuide.Projects == nil {
|
||||
Config.EpisodeGuide.Projects = make(map[string]string)
|
||||
|
|
|
|||
|
|
@ -38,8 +38,9 @@ type ProjectsQuery struct {
|
|||
|
||||
type ProjectAndStuff struct {
|
||||
Project models.Project
|
||||
LogoLightAsset *models.Asset `db:"logolight_asset"`
|
||||
LogoDarkAsset *models.Asset `db:"logodark_asset"`
|
||||
LogoLightAsset *models.Asset
|
||||
LogoDarkAsset *models.Asset
|
||||
HeaderImage *models.Asset
|
||||
Owners []*models.User
|
||||
Tag *models.Tag
|
||||
}
|
||||
|
|
@ -72,6 +73,7 @@ func FetchProjects(
|
|||
Project models.Project `db:"project"`
|
||||
LogoLightAsset *models.Asset `db:"logolight_asset"`
|
||||
LogoDarkAsset *models.Asset `db:"logodark_asset"`
|
||||
HeaderAsset *models.Asset `db:"header_asset"`
|
||||
Tag *models.Tag `db:"tag"`
|
||||
}
|
||||
|
||||
|
|
@ -86,6 +88,7 @@ func FetchProjects(
|
|||
project
|
||||
LEFT JOIN asset AS logolight_asset ON logolight_asset.id = project.logolight_asset_id
|
||||
LEFT JOIN asset AS logodark_asset ON logodark_asset.id = project.logodark_asset_id
|
||||
LEFT JOIN asset AS header_asset ON header_asset.id = project.header_asset_id
|
||||
LEFT JOIN tag ON project.tag = tag.id
|
||||
`)
|
||||
if len(q.OwnerIDs) > 0 {
|
||||
|
|
@ -219,6 +222,7 @@ func FetchProjects(
|
|||
Project: p.Project,
|
||||
LogoLightAsset: p.LogoLightAsset,
|
||||
LogoDarkAsset: p.LogoDarkAsset,
|
||||
HeaderImage: p.HeaderAsset,
|
||||
Owners: owners,
|
||||
Tag: p.Tag,
|
||||
})
|
||||
|
|
|
|||
|
|
@ -347,24 +347,6 @@ func BuildConferences() string {
|
|||
return Url("/conferences", nil)
|
||||
}
|
||||
|
||||
/*
|
||||
* Volunteer/Staff Roles
|
||||
*/
|
||||
|
||||
var RegexStaffRolesIndex = regexp.MustCompile(`^/roles$`)
|
||||
|
||||
func BuildStaffRolesIndex() string {
|
||||
defer CatchPanic()
|
||||
return Url("/roles", nil)
|
||||
}
|
||||
|
||||
var RegexStaffRole = regexp.MustCompile(`^/roles/(?P<slug>[^/]+)$`)
|
||||
|
||||
func BuildStaffRole(slug string) string {
|
||||
defer CatchPanic()
|
||||
return Url(fmt.Sprintf("/roles/%s", slug), nil)
|
||||
}
|
||||
|
||||
/*
|
||||
* User
|
||||
*/
|
||||
|
|
@ -649,6 +631,12 @@ func BuildEducationRerender() string {
|
|||
return Url("/education/rerender", nil)
|
||||
}
|
||||
|
||||
/*
|
||||
* Style test
|
||||
*/
|
||||
|
||||
var RegexStyleTest = regexp.MustCompile(`^/debug/styles$`)
|
||||
|
||||
/*
|
||||
* Forums
|
||||
*/
|
||||
|
|
@ -993,6 +981,13 @@ func BuildS3Asset(s3key string) string {
|
|||
return res
|
||||
}
|
||||
|
||||
var RegexEsBuild = regexp.MustCompile("^/esbuild$")
|
||||
|
||||
func BuildEsBuild() string {
|
||||
defer CatchPanic()
|
||||
return Url("/esbuild", nil)
|
||||
}
|
||||
|
||||
var RegexPublic = regexp.MustCompile("^/public/.+$")
|
||||
|
||||
func BuildPublic(filepath string, cachebust bool) string {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,47 @@
|
|||
package migrations
|
||||
|
||||
import (
|
||||
"context"
|
||||
"time"
|
||||
|
||||
"git.handmade.network/hmn/hmn/src/migration/types"
|
||||
"github.com/jackc/pgx/v5"
|
||||
)
|
||||
|
||||
func init() {
|
||||
registerMigration(AddHeaderImage{})
|
||||
}
|
||||
|
||||
type AddHeaderImage struct{}
|
||||
|
||||
func (m AddHeaderImage) Version() types.MigrationVersion {
|
||||
return types.MigrationVersion(time.Date(2024, 6, 1, 2, 1, 18, 0, time.UTC))
|
||||
}
|
||||
|
||||
func (m AddHeaderImage) Name() string {
|
||||
return "AddHeaderImage"
|
||||
}
|
||||
|
||||
func (m AddHeaderImage) Description() string {
|
||||
return "Adds a header image to projects"
|
||||
}
|
||||
|
||||
func (m AddHeaderImage) Up(ctx context.Context, tx pgx.Tx) error {
|
||||
_, err := tx.Exec(ctx,
|
||||
`
|
||||
ALTER TABLE project
|
||||
ADD COLUMN header_asset_id UUID REFERENCES asset (id) ON DELETE SET NULL;
|
||||
`,
|
||||
)
|
||||
return err
|
||||
}
|
||||
|
||||
func (m AddHeaderImage) Down(ctx context.Context, tx pgx.Tx) error {
|
||||
_, err := tx.Exec(ctx,
|
||||
`
|
||||
ALTER TABLE project
|
||||
DROP COLUMN header_asset_id;
|
||||
`,
|
||||
)
|
||||
return err
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
.unapproved-project {
|
||||
border-bottom: 1px solid transparent;
|
||||
padding: 10px;
|
||||
padding-bottom: 20px;
|
||||
|
||||
&.hidden-project {
|
||||
background: -moz-linear-gradient(left, rgba(132,26,26,0.4) 0%,rgba(132,26,26,0.1) 15%, rgba(132,26,26,0.0) 50%); /* FF3.6-15 */
|
||||
background: -webkit-linear-gradient(left, rgba(132,26,26,0.4) 0%,rgba(132,26,26,0.1) 15%, rgba(132,26,26,0.0) 50%); /* Chrome10-25,Safari5.1-6 */
|
||||
background: linear-gradient(to right, rgba(132,26,26,0.4) 0%,rgba(132,26,26,0.1) 15%, rgba(132,26,26,0.0) 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-width: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-project-tag {
|
||||
color:red;
|
||||
}
|
||||
|
||||
a.new-user {
|
||||
display:block;
|
||||
}
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
.userlist {
|
||||
text-align:center;
|
||||
width:100%;
|
||||
margin:0px auto;
|
||||
padding-top:30px;
|
||||
position:relative;
|
||||
line-height:0em;
|
||||
|
||||
.user {
|
||||
margin:5px;
|
||||
display:inline-block;
|
||||
height:200px;
|
||||
max-height:180px;
|
||||
text-align:left;
|
||||
position:relative;
|
||||
width:296px;
|
||||
border-radius:3px;
|
||||
line-height:1.4em;
|
||||
overflow:hidden;
|
||||
box-shadow:0px 2px 5px rgba(0,0,0,0.20);
|
||||
|
||||
top:0px;
|
||||
transition: box-shadow 0.2s, background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
box-shadow:0px 3px 7px rgba(0,0,0,0.20);
|
||||
}
|
||||
|
||||
table {
|
||||
/* Border and background color given by theme */
|
||||
border:1px solid transparent;
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
td {
|
||||
vertical-align:top;
|
||||
|
||||
&.avatar {
|
||||
width:100px;
|
||||
height:80px;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
text-align:left;
|
||||
|
||||
.username {
|
||||
vertical-align:middle;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar .image {
|
||||
display:block;
|
||||
float:left;
|
||||
width:80px;
|
||||
height:80px;
|
||||
background-size:cover;
|
||||
margin-right:10px;
|
||||
}
|
||||
|
||||
.bio {
|
||||
padding:5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,186 +0,0 @@
|
|||
strong {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.text {
|
||||
@include usevar(background-color, text-background);
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
.monospace {
|
||||
font-family: $monospace-fonts;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
padding: 0.2em 0 0.05em;
|
||||
border-radius: 3px;
|
||||
|
||||
&::before, &::after {
|
||||
content: "\00a0";
|
||||
letter-spacing: -0.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.justify {
|
||||
text-align:justify;
|
||||
-webkit-hyphens:manual;
|
||||
-moz-hyphens:manual;
|
||||
-ms-hyphens:manual;
|
||||
hyphens:manual;
|
||||
}
|
||||
|
||||
.spoiler {
|
||||
@include usevar(border-color, spoiler-border);
|
||||
|
||||
border-width: 1px;
|
||||
border-style: dashed;
|
||||
color: transparent;
|
||||
|
||||
&::selection {
|
||||
color: white;
|
||||
background-color: black;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
@extend .b--dimmest;
|
||||
@extend .ml2, .pl2, .mr0;
|
||||
@extend .bl;
|
||||
|
||||
.quotewho {
|
||||
line-height: 2em;
|
||||
|
||||
&::after {
|
||||
content: " said:";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: $monospace-fonts;
|
||||
}
|
||||
|
||||
.post-content {
|
||||
* {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
li:not(:last-child) {
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
hr {
|
||||
@extend .mh3;
|
||||
}
|
||||
|
||||
div.code {
|
||||
@extend .b--dimmer;
|
||||
|
||||
max-width: 100%;
|
||||
max-height: 20em;
|
||||
max-height: 80vh;
|
||||
overflow: auto;
|
||||
-moz-tab-size: 4;
|
||||
tab-size: 4;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
div + br,
|
||||
blockquote + br,
|
||||
ul + br,
|
||||
ol + br,
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
table {
|
||||
@extend .mv2;
|
||||
}
|
||||
|
||||
th, td {
|
||||
@extend .ph2, .pv1;
|
||||
@extend .ba, .b--dimmest;
|
||||
}
|
||||
|
||||
code {
|
||||
@extend .bg--dim;
|
||||
@extend .br2;
|
||||
|
||||
padding: .2em 0;
|
||||
white-space: nowrap;
|
||||
|
||||
&::before, &::after {
|
||||
content: "\00a0";
|
||||
letter-spacing: -0.2em;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
pre > code, pre.hmn-code {
|
||||
@extend .bg--dim;
|
||||
@extend .br2;
|
||||
|
||||
padding: 0.7em;
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
figure {
|
||||
@extend .mh0, .mv2, .mv3-ns, .pa2, .pa3-ns, .bg--dim, .br3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 0;
|
||||
|
||||
figcaption {
|
||||
@extend .pv1, .pv2-ns;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,834 +0,0 @@
|
|||
// Global variables
|
||||
$input-padding: 0.3rem;
|
||||
|
||||
.noselect {
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
-webkit-user-select: none; /* Chrome/Safari/Opera */
|
||||
-khtml-user-select: none; /* Konqueror */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* IE/Edge */
|
||||
user-select: none; /* non-prefixed version, currently */
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
br {
|
||||
border-style: none; // why, IE...
|
||||
}
|
||||
|
||||
body {
|
||||
@include usevar(background-color, main-background-color);
|
||||
@include usevar(color, main-color);
|
||||
|
||||
font-family: "Fira Sans", sans-serif;
|
||||
background-size: cover;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
font-size: px2rem(14px);
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
a, .link {
|
||||
@include usevar(color, link-color);
|
||||
@include usevar(border-bottom-color, link-border-color);
|
||||
|
||||
border-bottom: none;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
/* text-decoration:underline; */
|
||||
}
|
||||
|
||||
&.external::after {
|
||||
font-family: "icons";
|
||||
content:" 1";
|
||||
vertical-align:middle;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: circle;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.list-none {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding-left: 5px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.25em;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
p {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.p-spaced p {
|
||||
$spacing: 0.6em;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: $spacing;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: $spacing;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
th, td {
|
||||
@include usevar(color, fg-font-color);
|
||||
}
|
||||
|
||||
td {
|
||||
vertical-align:baseline;
|
||||
}
|
||||
|
||||
hr {
|
||||
@include usevar(border-top-color, hr-color);
|
||||
@extend .mv3;
|
||||
|
||||
border-width: 1px 0 0;
|
||||
border-top-style: solid;
|
||||
}
|
||||
|
||||
$monospace-fonts: "Fira Mono", monospace;
|
||||
|
||||
.mono {
|
||||
font-family: $monospace-fonts;
|
||||
}
|
||||
|
||||
article code {
|
||||
font-family: $monospace-fonts;
|
||||
}
|
||||
|
||||
.big { font-size:120%; }
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.clear {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.column h2 {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.margin-center {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.flex-fair {
|
||||
flex-basis: 1px;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
@media #{$breakpoint-not-small} {
|
||||
.flex-fair-ns {
|
||||
flex-basis: 1px;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$breakpoint-large} {
|
||||
.flex-fair-l {
|
||||
flex-basis: 1px;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.c--normal {
|
||||
@include usevar('color', 'fg-font-color');
|
||||
}
|
||||
|
||||
.c--inherit {
|
||||
color: inherit;
|
||||
|
||||
&:hover, &:active {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.b--theme {
|
||||
@include usevar(border-color, theme-color);
|
||||
}
|
||||
|
||||
.c--dim {
|
||||
@include usevar(color, dim-color);
|
||||
}
|
||||
|
||||
.c--theme-dim {
|
||||
@include usevar(color, theme-color-dim);
|
||||
}
|
||||
|
||||
.b--dim {
|
||||
@include usevar(border-color, dim-color);
|
||||
}
|
||||
|
||||
.b--theme-dim {
|
||||
@include usevar(border-color, theme-color-dim);
|
||||
}
|
||||
|
||||
.c--dimmer {
|
||||
@include usevar(color, dimmer-color);
|
||||
}
|
||||
|
||||
.c--theme-dimmer {
|
||||
@include usevar(color, theme-color-dimmer);
|
||||
}
|
||||
|
||||
.b--dimmer {
|
||||
@include usevar(border-color, dimmer-color);
|
||||
}
|
||||
|
||||
.b--theme-dimmer {
|
||||
@include usevar(border-color, theme-color-dimmer);
|
||||
}
|
||||
|
||||
.c--dimmest {
|
||||
@include usevar(color, dimmest-color);
|
||||
}
|
||||
|
||||
.c--theme-dimmest {
|
||||
@include usevar(color, theme-color-dimmest);
|
||||
}
|
||||
|
||||
.b--dimmest {
|
||||
@include usevar(border-color, dimmest-color);
|
||||
}
|
||||
|
||||
.b--theme-dimmest {
|
||||
@include usevar(border-color, theme-color-dimmest);
|
||||
}
|
||||
|
||||
.bg--dim {
|
||||
@include usevar(background-color, dim-background);
|
||||
}
|
||||
|
||||
.bg--content {
|
||||
@include usevar(background-color, content-background);
|
||||
}
|
||||
|
||||
.bg--card {
|
||||
@include usevar(background-color, card-background);
|
||||
}
|
||||
|
||||
.f8 {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.mw-site {
|
||||
max-width: 80rem;
|
||||
}
|
||||
|
||||
.mh-3 {
|
||||
max-height: $height-3;
|
||||
}
|
||||
|
||||
.mh-4 {
|
||||
max-height: $height-4;
|
||||
}
|
||||
|
||||
.mh-5 {
|
||||
max-height: $height-5;
|
||||
}
|
||||
|
||||
.mh-6 {
|
||||
max-height: $height-6;
|
||||
}
|
||||
|
||||
.mh-100 {
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.mh-50vh {
|
||||
max-height: 50vh;
|
||||
}
|
||||
|
||||
.mh-60vh {
|
||||
max-height: 60vh;
|
||||
}
|
||||
|
||||
.mh-70vh {
|
||||
max-height: 70vh;
|
||||
}
|
||||
|
||||
.mh-80vh {
|
||||
max-height: 80vh;
|
||||
}
|
||||
|
||||
.minw-100 {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.minh-1 {
|
||||
min-height: $height-1;
|
||||
}
|
||||
|
||||
.minh-2 {
|
||||
min-height: $height-2;
|
||||
}
|
||||
|
||||
.minh-3 {
|
||||
min-height: $height-3;
|
||||
}
|
||||
|
||||
.minh-4 {
|
||||
min-height: $height-4;
|
||||
}
|
||||
|
||||
.minh-5 {
|
||||
min-height: $height-5;
|
||||
}
|
||||
|
||||
.minh-6 {
|
||||
min-height: $height-6;
|
||||
}
|
||||
|
||||
.h1-5 {
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.fira {
|
||||
font-family: "Fira Sans", sans-serif;
|
||||
}
|
||||
|
||||
.bi-avoid { break-inside: avoid; }
|
||||
.cc-auto { column-count: auto; }
|
||||
.cc1 { column-count: 1; }
|
||||
.cc2 { column-count: 2; }
|
||||
.cc3 { column-count: 3; }
|
||||
.cg0 { column-gap: $spacing-none; }
|
||||
.cg1 { column-gap: $spacing-extra-small; }
|
||||
.cg2 { column-gap: $spacing-small; }
|
||||
.cg3 { column-gap: $spacing-medium; }
|
||||
.cg4 { column-gap: $spacing-large; }
|
||||
.cg5 { column-gap: $spacing-extra-large; }
|
||||
|
||||
.g0 { gap: $spacing-none; }
|
||||
.g1 { gap: $spacing-extra-small; }
|
||||
.g2 { gap: $spacing-small; }
|
||||
.g3 { gap: $spacing-medium; }
|
||||
.g4 { gap: $spacing-large; }
|
||||
.g5 { gap: $spacing-extra-large; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.grid-1 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.grid-2 {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.aspect-ratio--2x1 {
|
||||
padding-bottom: 50%;
|
||||
}
|
||||
|
||||
.hide-if-empty:empty {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@media #{$breakpoint-not-small} {
|
||||
.bi-avoid-ns { break-inside: avoid; }
|
||||
.cc-auto-ns { column-count: auto; }
|
||||
.cc1-ns { column-count: 1; }
|
||||
.cc2-ns { column-count: 2; }
|
||||
.cc3-ns { column-count: 3; }
|
||||
.cg0-ns { column-gap: $spacing-none; }
|
||||
.cg1-ns { column-gap: $spacing-extra-small; }
|
||||
.cg2-ns { column-gap: $spacing-small; }
|
||||
.cg3-ns { column-gap: $spacing-medium; }
|
||||
.cg4-ns { column-gap: $spacing-large; }
|
||||
.cg5-ns { column-gap: $spacing-extra-large; }
|
||||
.grid-1-ns { grid-template-columns: 1fr; }
|
||||
.grid-2-ns { grid-template-columns: 1fr 1fr; }
|
||||
|
||||
.bg--dim-ns {
|
||||
@include usevar(background-color, dim-background);
|
||||
}
|
||||
|
||||
.g0-ns { gap: $spacing-none; }
|
||||
.g1-ns { gap: $spacing-extra-small; }
|
||||
.g2-ns { gap: $spacing-small; }
|
||||
.g3-ns { gap: $spacing-medium; }
|
||||
.g4-ns { gap: $spacing-large; }
|
||||
.g5-ns { gap: $spacing-extra-large; }
|
||||
}
|
||||
|
||||
@media #{$breakpoint-medium} {
|
||||
.bi-avoid-m { break-inside: avoid; }
|
||||
.cc-auto-m { column-count: auto; }
|
||||
.cc1-m { column-count: 1; }
|
||||
.cc2-m { column-count: 2; }
|
||||
.cc3-m { column-count: 3; }
|
||||
.cg1-m { column-gap: $spacing-extra-small; }
|
||||
.cg2-m { column-gap: $spacing-small; }
|
||||
.cg3-m { column-gap: $spacing-medium; }
|
||||
.cg4-m { column-gap: $spacing-large; }
|
||||
.cg5-m { column-gap: $spacing-extra-large; }
|
||||
.grid-1-m { grid-template-columns: 1fr; }
|
||||
.grid-2-m { grid-template-columns: 1fr 1fr; }
|
||||
|
||||
.bg--dim-m {
|
||||
@include usevar(background-color, dim-background);
|
||||
}
|
||||
|
||||
.g0-m { gap: $spacing-none; }
|
||||
.g1-m { gap: $spacing-extra-small; }
|
||||
.g2-m { gap: $spacing-small; }
|
||||
.g3-m { gap: $spacing-medium; }
|
||||
.g4-m { gap: $spacing-large; }
|
||||
.g5-m { gap: $spacing-extra-large; }
|
||||
}
|
||||
|
||||
@media #{$breakpoint-large} {
|
||||
.bi-avoid-l { break-inside: avoid; }
|
||||
.cc-auto-l { column-count: auto; }
|
||||
.cc1-l { column-count: 1; }
|
||||
.cc2-l { column-count: 2; }
|
||||
.cc3-l { column-count: 3; }
|
||||
.cg1-l { column-gap: $spacing-extra-small; }
|
||||
.cg2-l { column-gap: $spacing-small; }
|
||||
.cg3-l { column-gap: $spacing-medium; }
|
||||
.cg4-l { column-gap: $spacing-large; }
|
||||
.cg5-l { column-gap: $spacing-extra-large; }
|
||||
.grid-1-l { grid-template-columns: 1fr; }
|
||||
.grid-2-l { grid-template-columns: 1fr 1fr; }
|
||||
|
||||
.bg--dim-l {
|
||||
@include usevar(background-color, dim-background);
|
||||
}
|
||||
|
||||
.g0-l { gap: $spacing-none; }
|
||||
.g1-l { gap: $spacing-extra-small; }
|
||||
.g2-l { gap: $spacing-small; }
|
||||
.g3-l { gap: $spacing-medium; }
|
||||
.g4-l { gap: $spacing-large; }
|
||||
.g5-l { gap: $spacing-extra-large; }
|
||||
}
|
||||
|
||||
.not-first:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.not-first-of-type:first-of-type {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.not-last:last-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.not-last-of-type:last-of-type {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.svgicon {
|
||||
svg {
|
||||
fill: currentColor;
|
||||
stroke: currentColor;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
&:not(.svgicon-nofix) svg {
|
||||
transform: translate(0px,0.1em);
|
||||
}
|
||||
}
|
||||
|
||||
// Tachyons' `center` is unfortunately overloaded by a .center
|
||||
// class we have in our own CSS.
|
||||
.center-layout {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
footer {
|
||||
.list li:not(:last-child)::after {
|
||||
@extend .c--dimmer;
|
||||
|
||||
@media #{$breakpoint-not-small} {
|
||||
& {
|
||||
content: ' / ';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
@include usevar(background-color, content-background);
|
||||
|
||||
margin: auto;
|
||||
|
||||
p {
|
||||
-moz-text-size-adjust:auto;
|
||||
-webkit-text-size-adjust:auto;
|
||||
text-size-adjust:auto;
|
||||
|
||||
margin: 0.6rem 0;
|
||||
}
|
||||
|
||||
.description {
|
||||
line-height: 1.42em;
|
||||
text-align: left;
|
||||
margin: auto;
|
||||
|
||||
p {
|
||||
margin-bottom: $spacing-small;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
> .top-bar {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.content-block {
|
||||
// TODO: What the heck are these styles
|
||||
/* Background color given by theme */
|
||||
background-repeat:repeat-x;
|
||||
border-radius:2px;
|
||||
text-align:left;
|
||||
width:100%;
|
||||
/* box-shadow: 0px 4px 7px rgba(0,0,0,0.5); /* Not themed */
|
||||
position:relative;
|
||||
box-sizing:border-box;
|
||||
|
||||
&.top-bar {
|
||||
background-image:none;
|
||||
}
|
||||
|
||||
&.language-desc {
|
||||
padding: 10px;
|
||||
|
||||
h3 {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.no-bg {
|
||||
background-image:none;
|
||||
background-color:transparent;
|
||||
box-shadow:none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
.content-block {
|
||||
&.single {
|
||||
padding:0px; /* for project list, TODO */
|
||||
margin-top:20px;
|
||||
}
|
||||
|
||||
&.top-bar {
|
||||
/* box-shadow: 0px 2px 4px rgba(0,0,0,0.2); /* Not themed */
|
||||
width:80%;
|
||||
display:block;
|
||||
margin:10px auto;
|
||||
}
|
||||
}
|
||||
|
||||
br.sidebar-filler {
|
||||
line-height:20px;
|
||||
}
|
||||
|
||||
.projectlist {
|
||||
background-color:transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.content-block .bottom-padding, .sidebar .bottom-padding {
|
||||
margin-top: $spacing-medium;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
&:hover {
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
&.current {
|
||||
text-overflow: clip ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-before:nth-of-type(n+2)::before {
|
||||
content: '≫';
|
||||
}
|
||||
|
||||
.optionbar {
|
||||
@extend .b--dimmest;
|
||||
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
border-style: dashed;
|
||||
border-width: 0px;
|
||||
border-bottom-width: 1px;
|
||||
padding-bottom: $spacing-small;
|
||||
|
||||
@media #{$breakpoint-not-small} {
|
||||
flex-direction: row;
|
||||
text-align: left;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
border-bottom-width: 0px;
|
||||
border-top-width: 1px;
|
||||
padding-bottom: 0;
|
||||
padding-top: $spacing-small;
|
||||
|
||||
@media #{$breakpoint-not-small} {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.center {
|
||||
text-align: center; // TODO: find this and kill it
|
||||
}
|
||||
|
||||
.options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@media #{$breakpoint-not-small} {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
& {
|
||||
#{$buttons} {
|
||||
@include lite-button;
|
||||
@extend .ph2;
|
||||
@extend .pv1;
|
||||
@extend .pv2-ns;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.group {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.tab {
|
||||
@include usevar(background-color, tab-background);
|
||||
@extend .pa2;
|
||||
}
|
||||
|
||||
.tab-bar {
|
||||
@include usevar(border-color, tab-border-color);
|
||||
@extend .flex, .flex-row;
|
||||
|
||||
width: 100%;
|
||||
|
||||
.tab-button {
|
||||
@include usevar(background-color, tab-button-background);
|
||||
@include usevar(border-color, tab-border-color);
|
||||
@extend .ph3, .pv2;
|
||||
|
||||
cursor: pointer; // TODO: Should this be a link?
|
||||
|
||||
&:hover {
|
||||
@include usevar(background-color, tab-button-background-hover);
|
||||
}
|
||||
|
||||
&.current {
|
||||
@include usevar(background-color, tab-button-background-current);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
.page.current {
|
||||
cursor: default;
|
||||
font-weight: 600;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
@extend .pv0, .ph2;
|
||||
}
|
||||
}
|
||||
|
||||
.user-link {
|
||||
position:relative;
|
||||
}
|
||||
|
||||
// TODO(ben): It appears that this code is inactive because the JS that would
|
||||
// create the popups is commented out.
|
||||
.user-popup {
|
||||
opacity:0;
|
||||
max-height:0px;
|
||||
width:340px;
|
||||
|
||||
text-align:center;
|
||||
|
||||
transition:max-height 0.2s, opacity 0.1s;
|
||||
box-shadow:0px 2px 5px rgba(0,0,0,0.3);
|
||||
|
||||
overflow:hidden;
|
||||
position:absolute;
|
||||
bottom:0px;
|
||||
|
||||
&.expanded {
|
||||
visibility:visible;
|
||||
max-height:250px;
|
||||
opacity:1;
|
||||
}
|
||||
|
||||
table {
|
||||
/* Background color given by theme */
|
||||
width:100%;
|
||||
position:relative;
|
||||
border-radius:3px;
|
||||
z-index:10;
|
||||
}
|
||||
|
||||
td {
|
||||
vertical-align:top;
|
||||
padding:15px 9px;
|
||||
}
|
||||
|
||||
#avatar {
|
||||
width:100px;
|
||||
height:100px;
|
||||
background-size:contain;
|
||||
background-position:center center;
|
||||
background-repeat:no-repeat;
|
||||
border-radius:3px;
|
||||
margin:0px auto;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
/* Border color given by theme */
|
||||
border-top: 1px solid transparent;
|
||||
padding: 15px;
|
||||
|
||||
.bio {
|
||||
vertical-align:top;
|
||||
width:90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site-search {
|
||||
&[type=text].lite {
|
||||
// wow CSS selector priority sucks
|
||||
|
||||
// First transition copied from input .lite
|
||||
transition: border-bottom-color 60ms ease-in-out, width 300ms ease;
|
||||
}
|
||||
}
|
||||
|
||||
#search_button_homepage {
|
||||
margin:0px;
|
||||
height:100%;
|
||||
height:calc(100% - 2px);
|
||||
border-radius:0px;
|
||||
display:inline-block;
|
||||
display:none;
|
||||
}
|
||||
|
||||
.background-even:nth-of-type(even) {
|
||||
// this is the default, and should be overridden by dynamic colors.
|
||||
@include usevar(background-color, background-even-background);
|
||||
@include usevar(--fade-color, background-even-background);
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
border: 0;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
word-wrap: normal !important;
|
||||
transition: 0.2s all;
|
||||
}
|
||||
|
||||
.sr-focusable {
|
||||
@extend .sr-only;
|
||||
|
||||
&:focus {
|
||||
padding: 15px 10px;
|
||||
height: auto;
|
||||
width: auto;
|
||||
background: var(--content-background);
|
||||
clip: initial;
|
||||
clip-path: initial;
|
||||
z-index: 99999;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,130 +0,0 @@
|
|||
// TODO: Old and wrong and bad
|
||||
.toolbar {
|
||||
@include usevar('background-color', 'editor-toolbar-background');
|
||||
@include usevar('border-color', 'editor-toolbar-border-color');
|
||||
|
||||
border-radius:3px;
|
||||
height: 2.2em;
|
||||
overflow-y:scroll;
|
||||
transition:all 0.3s;
|
||||
border: 1px solid transparent;
|
||||
|
||||
.button, input[type=button] {
|
||||
@include usevar('background-color', 'editor-toolbar-button-background');
|
||||
@include usevar('border-color', 'editor-toolbar-button-border-color');
|
||||
|
||||
line-height: 2.2em;
|
||||
box-shadow:none;
|
||||
border:0px;
|
||||
border-right:1px solid transparent;
|
||||
border-radius:0px;
|
||||
margin:0px;
|
||||
padding:0px 10px;
|
||||
height:100%;
|
||||
vertical-align:bottom;
|
||||
text-transform:none;
|
||||
font-weight:300;
|
||||
|
||||
&:hover {
|
||||
@include usevar('background-color', 'editor-toolbar-button-background-hover');
|
||||
}
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
height:2.2em;
|
||||
border:0px solid transparent; /* Not themed */
|
||||
}
|
||||
}
|
||||
|
||||
#preview:empty::after {
|
||||
content: 'A preview of your post will appear here.';
|
||||
@include usevar(color, dimmer-color);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@media #{$breakpoint-not-small} {
|
||||
#preview-container {
|
||||
max-height: calc(100vh - 20rem);
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-form {
|
||||
.edit-form-row {
|
||||
@extend .flex;
|
||||
@extend .flex-column;
|
||||
@extend .flex-row-ns;
|
||||
@extend .mv3;
|
||||
|
||||
> :first-child {
|
||||
@extend .w-100;
|
||||
@extend .w4-ns;
|
||||
@extend .flex-grow-0;
|
||||
@extend .flex-shrink-0;
|
||||
@extend .tl;
|
||||
@extend .tr-ns;
|
||||
@extend .pr0;
|
||||
@extend .pr2-ns;
|
||||
@extend .pb1;
|
||||
@extend .pb0-ns;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
> :nth-child(2) {
|
||||
@extend .flex-grow-1;
|
||||
@extend .overflow-hidden;
|
||||
}
|
||||
|
||||
.pt-input-ns {
|
||||
// NOTE(ben): This could maybe be more general someday?
|
||||
@media #{$breakpoint-not-small} {
|
||||
padding-top: $input-padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
@extend .w-100;
|
||||
@extend .mw5-ns;
|
||||
}
|
||||
|
||||
input[type=text]:invalid {
|
||||
@include usevar(border-color, form-error-color);
|
||||
}
|
||||
|
||||
textarea {
|
||||
@extend .w-100;
|
||||
@extend .w6-ns;
|
||||
@extend .mw-100;
|
||||
@extend .h3;
|
||||
}
|
||||
|
||||
&.project-edit {
|
||||
.project_description {
|
||||
width: 100%;
|
||||
min-height: 400px;
|
||||
height: 30vh;
|
||||
}
|
||||
|
||||
input.project_blurb,
|
||||
input.project_name,
|
||||
{
|
||||
min-width: 300px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.quota-bar {
|
||||
// @include usevar(border-color, 'project-edit-quota-bar-border-color');
|
||||
|
||||
width: 500px;
|
||||
border-width: 1px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.quota-filled {
|
||||
// @include usevar(background-color, 'project-edit-quota-bar-filled-background');
|
||||
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,269 +0,0 @@
|
|||
.episode-list {
|
||||
.description p {
|
||||
line-height:1.42em;
|
||||
}
|
||||
|
||||
h2, h3 {
|
||||
font-size:1em;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-bottom:30px;
|
||||
list-style-type:none;
|
||||
margin-top:-2px;
|
||||
}
|
||||
}
|
||||
|
||||
// UNUSED(outer_holder)
|
||||
#outer_holder .back {
|
||||
margin: 0px auto 20px auto;
|
||||
|
||||
.outer {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
|
||||
& > .sidebar {
|
||||
max-width: 260px;
|
||||
|
||||
& > div {
|
||||
margin: 6px;
|
||||
background-color: #ddd;
|
||||
width: 200px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
article {
|
||||
-webkit-box-flex: 1 1 40%;
|
||||
-moz-box-flex: 1 1 40%;
|
||||
-webkit-flex: 1 1 40%;
|
||||
-ms-flex: 1 1 40%;
|
||||
flex: 1 1 40%;
|
||||
}
|
||||
}
|
||||
|
||||
// UNUSED
|
||||
#player-wrapper {
|
||||
display: inline-block;
|
||||
-webkit-box-flex: 0 1 auto;
|
||||
-moz-box-flex: 0 1 auto;
|
||||
-webkit-flex: 0 1 auto;
|
||||
-ms-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
box-shadow: 0px 0px 4px #000;
|
||||
}
|
||||
|
||||
@media screen {
|
||||
#player-wrapper #player {
|
||||
width: 320px;
|
||||
height: 210px;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 500px) {
|
||||
#player-wrapper #player {
|
||||
width: 480px;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 670px) {
|
||||
#player-wrapper #player {
|
||||
width: 640px;
|
||||
height: 390px;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 890px) {
|
||||
#player-wrapper #player {
|
||||
width: 854px;
|
||||
height: 510px;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1320px) {
|
||||
#player-wrapper #player {
|
||||
width: 1280px;
|
||||
height: 750px;
|
||||
}
|
||||
}
|
||||
|
||||
.annotation {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
|
||||
.navigation {
|
||||
width: 450px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.notes {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
// UNUSED(timecodes)
|
||||
nav.timecodes {
|
||||
margin: 0px;
|
||||
max-width: 450px;
|
||||
min-height: 700px;
|
||||
overflow-y: auto;
|
||||
-webkit-box-flex: 0 0 auto;
|
||||
-moz-box-flex: 0 0 auto;
|
||||
-webkit-flex: 0 0 auto;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
|
||||
a {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
ul[name=markers] {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
list-style-type: none;
|
||||
font-size: 15px;
|
||||
|
||||
& > li {
|
||||
padding: 4px;
|
||||
display: block;
|
||||
border-bottom: 1px solid #333;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0,90,0,0.3);
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
|
||||
span.timecode {
|
||||
color: #777777;
|
||||
float: left;
|
||||
font-size: 86%;
|
||||
margin-right: .5em;
|
||||
text-align: right;
|
||||
width: 42px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// UNUSED
|
||||
#video-notes {
|
||||
min-height: 700px;
|
||||
margin-top: 0px;
|
||||
|
||||
pre {
|
||||
margin-top:1.5em;
|
||||
margin-left: 10px;
|
||||
margin-right: 30px;
|
||||
margin-bottom: 1.5em;
|
||||
padding: 10px;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// UNUSED
|
||||
#game_icon {
|
||||
background-position: 0px 0px;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url("/images/hero_home_200x114.png");
|
||||
background-size: cover;
|
||||
height: 113px;
|
||||
margin: 0px 0px 4px 0px;
|
||||
}
|
||||
|
||||
// UNUSED
|
||||
.sidebar-heading {
|
||||
margin: 0px 0px 16px;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
font-weight: bold;
|
||||
color: #00547c;
|
||||
white-space: nowrap;
|
||||
text-shadow: 1px 1px 2px rgba(0,0,0,0.25);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Episode Search
|
||||
|
||||
.queryContainer {
|
||||
width: 1000px;
|
||||
margin: 15px auto;
|
||||
display: flex;
|
||||
flex-direction: horizontal;
|
||||
|
||||
label {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
#query {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#results {
|
||||
width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.dayContainer:nth-child(2n) {
|
||||
background-color: rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.dayName {
|
||||
width: 200px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
line-height: 16px;
|
||||
box-sizing: border-box;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.markerList {
|
||||
display: inline-block;
|
||||
width: 600px;
|
||||
box-sizing: border-box;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.marker {
|
||||
cursor: pointer;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
|
||||
&:first-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
b {
|
||||
color: black;
|
||||
background-color: rgb(255, 155, 0);
|
||||
}
|
||||
}
|
||||
|
||||
#resultsSummary {
|
||||
text-align: center;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
|
@ -1,360 +0,0 @@
|
|||
.display-options {
|
||||
height:100%;
|
||||
padding:0px 20px 0px 20px;
|
||||
|
||||
> * {
|
||||
display:inline-block;
|
||||
vertical-align:middle;
|
||||
}
|
||||
}
|
||||
|
||||
.forum h3 {
|
||||
margin:0px 80px 0px 20px;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.forum-narrow .forum-narrow-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.post-bg-alternate:nth-of-type(odd) {
|
||||
@include usevar('background-color', 'forum-even-background');
|
||||
}
|
||||
|
||||
.thread-list-item .latestpost {
|
||||
width: 16.5rem;
|
||||
}
|
||||
|
||||
.thread {
|
||||
@include usevar('color', 'fg-font-color');
|
||||
|
||||
@extend .ma0;
|
||||
|
||||
.profile & {
|
||||
padding-left:15px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
|
||||
transition: border-bottom-color 0.1s;
|
||||
border-bottom-color: transparent;
|
||||
|
||||
&:hover {
|
||||
border-bottom-color: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.forum & .info th {
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
flex-shrink: 0;
|
||||
object-fit: cover;
|
||||
border-radius: 100%;
|
||||
overflow: hidden;
|
||||
object-fit: cover;
|
||||
@include usevar(background-color, dimmest-color);
|
||||
}
|
||||
|
||||
:root {
|
||||
@include usevar(--fade-color, 'content-background');
|
||||
}
|
||||
|
||||
.excerpt-fade {
|
||||
background-image: linear-gradient(to top, var(--fade-color), rgba(0, 0, 0, 0));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.read {
|
||||
@include usevar('color', 'forum-thread-read-color');
|
||||
|
||||
td {
|
||||
@include usevar('color', 'forum-thread-read-color');
|
||||
}
|
||||
|
||||
a {
|
||||
@include usevar('color', 'forum-thread-read-link-color');
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.goto {
|
||||
font-size: 200%;
|
||||
width: 30px;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 0px 10px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
line-height: 100%;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
border-radius: 1000em;
|
||||
padding: 0 0.8em;
|
||||
font-size: 0.9em;
|
||||
line-height: 1.8em;
|
||||
font-weight: bold;
|
||||
|
||||
&.staff {
|
||||
background-color: #17b2c6;
|
||||
color: white;
|
||||
|
||||
&::before {
|
||||
content: 'Staff';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.postid a {
|
||||
margin-top: -4rem;
|
||||
padding-top: 4rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.codeblocktable {
|
||||
font-family: $monospace-fonts;
|
||||
font-size:14px;
|
||||
overflow:auto;
|
||||
line-height:1.5em;
|
||||
|
||||
tbody {
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.linenos {
|
||||
@include usevar(color, 'code-line-number-color');
|
||||
|
||||
font-weight:500;
|
||||
padding: 5px;
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.code {
|
||||
/* Background color given by theme */
|
||||
padding-right:20px;
|
||||
padding-left:10px;
|
||||
max-width:80em;
|
||||
}
|
||||
}
|
||||
|
||||
.post {
|
||||
.action.button {
|
||||
padding:0px 10px;
|
||||
margin-top:0px;
|
||||
margin-right:4px;
|
||||
background-color:transparent;
|
||||
font-size:130%;
|
||||
border-radius:0px;
|
||||
border-width:0px;
|
||||
border-bottom-width:2px;
|
||||
transition:border-bottom-width 0.1s;
|
||||
|
||||
&:hover {
|
||||
border-bottom-width:4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blog {
|
||||
.post {
|
||||
.meta {
|
||||
position:relative;
|
||||
}
|
||||
|
||||
&.op .meta {
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
||||
.badges {
|
||||
width: 40px;
|
||||
font-size: 0.7em;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
.post > .author {
|
||||
padding:15px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.recent-posts {
|
||||
text-align:center;
|
||||
padding:15px;
|
||||
|
||||
h2 {
|
||||
display:inline;
|
||||
}
|
||||
}
|
||||
|
||||
.archive ul {
|
||||
list-style-type:none;
|
||||
text-align:left;
|
||||
}
|
||||
}
|
||||
|
||||
.post-list {
|
||||
.post {
|
||||
&:nth-child(even) {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.featured-post .meta .avatar-icon {
|
||||
left:-60px;
|
||||
bottom:-5px;
|
||||
}
|
||||
|
||||
.content-block.blog {
|
||||
p.title {
|
||||
font-weight:bold;
|
||||
|
||||
a {
|
||||
border-bottom-width:0px;
|
||||
|
||||
&:hover {
|
||||
border-bottom-width:1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.mark_as_read {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.mark_as_read_toplevel_forum {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
div.mark_as_read_toplevel_blog {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mark_as_read_toplevel_blog
|
||||
div.mark_as_read_site {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mark_as_read_site
|
||||
li.post-entry {
|
||||
margin-left:0px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.diff {
|
||||
width:100%;
|
||||
max-height:100vh;
|
||||
overflow-y:scroll;
|
||||
margin-top:20px;
|
||||
|
||||
> .post-source {
|
||||
@include usevar(color, 'fg-font-color');
|
||||
@include usevar(background-color, 'forum-diff-source-background');
|
||||
@include usevar(border-color, 'forum-diff-source-border-color');
|
||||
|
||||
border-width: 1px;
|
||||
border-radius: 2px;
|
||||
font-family: $monospace-fonts;
|
||||
width:49%;
|
||||
box-sizing:border-box;
|
||||
padding: 4px;
|
||||
display:inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.diff-replace,
|
||||
.diff-delete,
|
||||
.diff-insert,
|
||||
{
|
||||
border-width: 1px;
|
||||
border-radius: 2px;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.diff-replace {
|
||||
@include usevar(background-color, 'forum-diff-replace-background');
|
||||
@include usevar(border-color, 'forum-diff-replace-border-color');
|
||||
}
|
||||
|
||||
.diff-delete {
|
||||
@include usevar(background-color, 'forum-diff-delete-background');
|
||||
@include usevar(border-color, 'forum-diff-delete-border-color');
|
||||
}
|
||||
|
||||
.diff-insert {
|
||||
@include usevar(background-color, 'forum-diff-insert-background');
|
||||
@include usevar(border-color, 'forum-diff-insert-border-color');
|
||||
}
|
||||
}
|
||||
|
||||
.index {
|
||||
list-style-type:none;
|
||||
-webkit-column-count: 3;
|
||||
-moz-column-count: 3;
|
||||
column-count: 3;
|
||||
margin-top:20px;
|
||||
|
||||
.index-category {
|
||||
margin-bottom:20px;
|
||||
-webkit-column-break-inside: avoid;
|
||||
page-break-inside: avoid;
|
||||
break-inside: avoid-column;
|
||||
}
|
||||
}
|
||||
|
||||
.bbtable {
|
||||
width: 100%;
|
||||
border: 1px solid;
|
||||
|
||||
td, th {
|
||||
border: 1px solid;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
th {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
font-weight: bold;
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(even) {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,150 +0,0 @@
|
|||
header {
|
||||
$logo-height: px2rem(60px);
|
||||
|
||||
.hmn-logo {
|
||||
height: $logo-height;
|
||||
width: 100%;
|
||||
text-transform: uppercase;
|
||||
font-family: 'MohaveHMN', sans-serif;
|
||||
font-size: 2rem;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white !important;
|
||||
|
||||
&.big {
|
||||
@media #{$breakpoint-not-small} {
|
||||
width: px2rem(180px);
|
||||
}
|
||||
}
|
||||
|
||||
&.small {
|
||||
@media #{$breakpoint-not-small} {
|
||||
width: $logo-height;
|
||||
padding: 0.8rem;
|
||||
text-align: justify;
|
||||
text-align-last: justify;
|
||||
text-justify: inter-character;
|
||||
flex-direction: column;
|
||||
font-size: 1rem;
|
||||
line-height: 1em;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.items {
|
||||
position: relative; // will be used on mobile, when .root-item is not relative
|
||||
}
|
||||
|
||||
.root-item {
|
||||
@media #{$breakpoint-not-small} {
|
||||
& {
|
||||
position: relative; // makes submenus align to this item instead of the screen
|
||||
height: $logo-height;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:hover):not(.clicked) > .submenu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.clicked .svgicon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
> a {
|
||||
@extend .pa2, .ph3-l;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.svgicon {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.clicked) .root-item:not(:hover),
|
||||
&.clicked .root-item:not(.clicked) {
|
||||
> .submenu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.submenu {
|
||||
@extend .bw1;
|
||||
@include usevar(background-color, content-background);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
min-width: 10rem;
|
||||
border-top-style: solid;
|
||||
border-bottom-style: solid;
|
||||
|
||||
@media #{$breakpoint-not-small} {
|
||||
& {
|
||||
border-top-style: none;
|
||||
border-left-style: solid;
|
||||
border-right-style: solid;
|
||||
left: initial;
|
||||
right: initial;
|
||||
}
|
||||
}
|
||||
|
||||
> a {
|
||||
@extend .pa2, .ph3-l;
|
||||
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
z-index: 1;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
|
||||
@media #{$breakpoint-not-small} {
|
||||
& {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-bar {
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#login-link{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#login-popup {
|
||||
@include usevar(background-color, login-popup-background);
|
||||
@include usevar(color, fg-font-color);
|
||||
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
z-index: 12;
|
||||
overflow: hidden;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
width: 100%;
|
||||
|
||||
&.open {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@media #{$breakpoint-not-small} {
|
||||
top: 2.2rem;
|
||||
width: 17rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,206 +0,0 @@
|
|||
.chat {
|
||||
@include usevar(border-color, 'irc-border-color');
|
||||
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
border: 1px solid transparent;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-right: 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
#tabs {
|
||||
overflow-y: scroll;
|
||||
box-sizing: border-box;
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.current {
|
||||
@include usevar(box-shadow, 'irc-tab-current-shadow');
|
||||
}
|
||||
|
||||
.button {
|
||||
padding-left: 10px;
|
||||
padding-right: 3px;
|
||||
transition: width 0.2s;
|
||||
text-transform: none;
|
||||
vertical-align: top;
|
||||
|
||||
.close-btn {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
display: inline-block;
|
||||
font-size: 9pt;
|
||||
vertical-align: middle;
|
||||
height: 13px;
|
||||
line-height: 11px;
|
||||
width: 13px;
|
||||
margin-left: 5px;
|
||||
padding-left: 2px;
|
||||
padding-right: 3px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid transparent; /* Not themed */
|
||||
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
&:hover .close-btn {
|
||||
@include usevar(color, 'irc-tab-close-button-color');
|
||||
@include usevar(background-color, 'irc-tab-close-button-background');
|
||||
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.new-tab {
|
||||
padding: 0px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
#history {
|
||||
width: 100%;
|
||||
min-height: 300px;
|
||||
height: 50vh;
|
||||
overflow-y: auto;
|
||||
padding-top: 3px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.channel {
|
||||
width: 100%;
|
||||
display: none;
|
||||
|
||||
&.current {
|
||||
display: table;
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.entry {
|
||||
display: table-row;
|
||||
width: 100%;
|
||||
font-size: 11pt;
|
||||
|
||||
&.minor {
|
||||
color: #777;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
&.alert {
|
||||
color: #dd683b;
|
||||
}
|
||||
|
||||
&.error {
|
||||
color: #880000;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
&.action {
|
||||
font-style: italic;
|
||||
|
||||
.msg .action-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.nick, .msg {
|
||||
display: table-cell;
|
||||
padding: 0px 4px;
|
||||
}
|
||||
|
||||
.nick {
|
||||
@include usevar(border-color, 'irc-nick-border-color');
|
||||
|
||||
font-weight: bold;
|
||||
text-align: right;
|
||||
border-right-width: 1px;
|
||||
border-right-style: solid;
|
||||
}
|
||||
|
||||
.msg {
|
||||
width: 100%;
|
||||
|
||||
.highlight {
|
||||
background-color: #dd683b;
|
||||
color: #fff;
|
||||
padding: 0px 5px;
|
||||
}
|
||||
|
||||
.emote {
|
||||
height: 1.6em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#chatbox {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#users {
|
||||
@include usevar(color, 'irc-users-color');
|
||||
@include usevar(background-color, 'irc-users-background');
|
||||
@include usevar(border-color, 'irc-users-border-color');
|
||||
|
||||
position: absolute;
|
||||
border-left-width: 1px;
|
||||
border-left-style: solid;
|
||||
padding: 5px;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
color: #333;
|
||||
height: 100%;
|
||||
max-width: 20%;
|
||||
width: 20%;
|
||||
transition: right 0.2s;
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.collapsed {
|
||||
right:-20%;
|
||||
}
|
||||
|
||||
.popout {
|
||||
@include usevar(background-color, 'irc-users-popout-background');
|
||||
@include usevar(border-left-color, 'irc-users-popout-border-color-left');
|
||||
@include usevar(border-right-color, 'irc-users-popout-border-color-right');
|
||||
|
||||
width: 8px;
|
||||
font-size: 7pt;
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
border: 0px solid transparent; /* Not themed */
|
||||
border-left-width: 1px;
|
||||
border-left-style: solid;
|
||||
border-right-width: 1px;
|
||||
border-right-style: solid;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: -8px;
|
||||
box-shadow: 0px 0px 0px transparent; /* Not themed */
|
||||
text-align: center;
|
||||
margin: 0px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.op {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.user {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
.landing-layout {
|
||||
display: grid;
|
||||
gap: $spacing-medium;
|
||||
|
||||
> * {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$breakpoint-large} {
|
||||
.landing-layout {
|
||||
grid-template-columns: 1fr;
|
||||
grid-auto-columns: 1fr;
|
||||
|
||||
> * {
|
||||
grid-column: 1 / 2;
|
||||
|
||||
&.landing-right {
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 1 / 20; // increase this number if somehow you ever add that much garbage to the home page :)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
.star-btn {
|
||||
border-bottom-width: 2px;
|
||||
@include usevar('background-color', 'library-star-btn-background');
|
||||
@include usevar('border-color', 'library-star-btn-border-color');
|
||||
|
||||
a {
|
||||
@include usevar('border-color', 'library-star-btn-a-border-color');
|
||||
|
||||
&:hover {
|
||||
@include usevar('background-color', 'library-star-btn-a-hover-background');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.library-dropcap {
|
||||
width: 1em;
|
||||
height: 1.1em;
|
||||
padding-top: 0.19em;
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
.notice {
|
||||
@include usevar(color, notice-text-color);
|
||||
@extend .ph3, .pv2;
|
||||
@extend .br2-ns;
|
||||
|
||||
a {
|
||||
@include usevar(color, notice-text-color);
|
||||
@include usevar(border-bottom-color, notice-text-color);
|
||||
}
|
||||
}
|
||||
.notice-unapproved {
|
||||
@include usevar(background-color, notice-unapproved-color);
|
||||
}
|
||||
|
||||
.notice-hidden {
|
||||
@include usevar(background-color, notice-hidden-color);
|
||||
}
|
||||
|
||||
.notice-hiatus {
|
||||
@include usevar(background-color, notice-hiatus-color);
|
||||
}
|
||||
|
||||
.notice-dead {
|
||||
@include usevar(background-color, notice-dead-color);
|
||||
}
|
||||
|
||||
.notice-lts {
|
||||
@include usevar(background-color, notice-lts-color);
|
||||
}
|
||||
|
||||
.notice-lts-reqd {
|
||||
@include usevar(background-color, notice-lts-reqd-color);
|
||||
}
|
||||
|
||||
.notice-success {
|
||||
@include usevar(background-color, notice-success-color);
|
||||
}
|
||||
|
||||
.notice-warn {
|
||||
@include usevar(background-color, notice-warn-color);
|
||||
}
|
||||
|
||||
.notice-failure {
|
||||
@include usevar(background-color, notice-failure-color);
|
||||
}
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
.profile {
|
||||
.content {
|
||||
.description {
|
||||
margin:0px auto;
|
||||
max-width:40em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom:10px;
|
||||
}
|
||||
}
|
||||
|
||||
ul.recent-posts, ul.recent-comments {
|
||||
list-style-type:none;
|
||||
}
|
||||
|
||||
ul .entry {
|
||||
margin-left:20px;
|
||||
}
|
||||
|
||||
.entry {
|
||||
.context {
|
||||
font-weight:bold;
|
||||
border-bottom:0px;
|
||||
}
|
||||
}
|
||||
|
||||
.content-block.projects {
|
||||
background-image:none;
|
||||
overflow-y:visible;
|
||||
}
|
||||
}
|
||||
|
||||
.profile .content-block.avatar,
|
||||
.project .content-block.logo {
|
||||
background-color:transparent;
|
||||
background-image:none;
|
||||
box-shadow:none;
|
||||
min-height:200px;
|
||||
|
||||
img {
|
||||
// TODO(ben): Check if this was actually set to anything before
|
||||
// box-shadow:
|
||||
}
|
||||
}
|
||||
|
||||
.project .content-block.screenshots,
|
||||
.profile .content-block.projects
|
||||
{
|
||||
padding:0px;
|
||||
min-height:0em;
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
.upload_bar.uploading .instructions, .upload_bar:not(.uploading) .progress {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.upload_bar .progress_bar {
|
||||
border: 2px solid;
|
||||
@include usevar('border-color', 'link-color');
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.upload_bar .progress_bar > div {
|
||||
@include usevar('background-color', 'link-color');
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -1,272 +0,0 @@
|
|||
.project-carousel {
|
||||
.carousel-item {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
br {
|
||||
line-height: 0.6em;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-item-small {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
&:not(.active) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-description {
|
||||
max-height: 14rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.carousel-fade {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 30px;
|
||||
|
||||
@include usevar(background, "linear-gradient(" dim-background-transparent "," dim-background ")")
|
||||
}
|
||||
}
|
||||
|
||||
.project {
|
||||
.pair {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.key {
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.value {
|
||||
text-align: right;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-icon {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
margin: 0px;
|
||||
text-align: center;
|
||||
padding: 3px;
|
||||
border-radius: 5px;
|
||||
line-height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.screenshots .slideshow {
|
||||
background-color:black;
|
||||
}
|
||||
|
||||
.tags {
|
||||
text-align:center;
|
||||
|
||||
h2 {
|
||||
margin-bottom:5px;
|
||||
}
|
||||
|
||||
li {
|
||||
display:inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.button-bar {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.forum {
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.thread-entry-right {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.project-card {
|
||||
@include usevar(color, 'fg-font-color');
|
||||
@include usevar(background-color, 'card-background');
|
||||
@include usevar(border-color, 'project-card-border-color');
|
||||
|
||||
transition: box-shadow 0.2s, background-color 0.2s;
|
||||
|
||||
.slideshow & {
|
||||
margin-top:8px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include usevar(background-color, 'card-background-hover');
|
||||
|
||||
& > .title {
|
||||
text-decoration:underline;
|
||||
}
|
||||
}
|
||||
|
||||
.image-container {
|
||||
$image-size: 8rem;
|
||||
|
||||
width: $image-size;
|
||||
min-height: $image-size;
|
||||
|
||||
.image {
|
||||
position: absolute;
|
||||
width: $image-size;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
/* Background color given by theme */
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.badges:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.badge {
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.projectlist {
|
||||
.sidebar & {
|
||||
padding:0px;
|
||||
width:340px;
|
||||
|
||||
// background-image:none;
|
||||
// background-color:transparent;
|
||||
// box-shadow:none;
|
||||
|
||||
.project-card.more {
|
||||
height:40px;
|
||||
width:326px;
|
||||
padding-top:5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.screenshots .slide {
|
||||
max-width:100%;
|
||||
}
|
||||
|
||||
.slideshow {
|
||||
/* Background color and color given by theme */
|
||||
position:relative;
|
||||
background-image:none;
|
||||
overflow:hidden;
|
||||
|
||||
.optionbar {
|
||||
height:30px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display:inline-block;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.button {
|
||||
line-height:100%;
|
||||
padding:5px 8px;
|
||||
font-weight:400;
|
||||
|
||||
&.current {
|
||||
font-weight:600;
|
||||
}
|
||||
}
|
||||
|
||||
#slide-deck {
|
||||
width:100%;
|
||||
position:relative;
|
||||
transition:left 0.3s;
|
||||
left:0px;
|
||||
text-align:center;
|
||||
display:flex;
|
||||
flex-direction:horizontal;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.slide {
|
||||
flex: 1 1 100%;
|
||||
position:relative;
|
||||
|
||||
img {
|
||||
margin:auto;
|
||||
max-height:60vh;
|
||||
max-width:100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.cards {
|
||||
#slide-deck {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.slide {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#project_owner_suggestions {
|
||||
max-height:300px;
|
||||
overflow:auto;
|
||||
position:absolute;
|
||||
border:1px solid transparent;
|
||||
|
||||
#user_template {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
.user_suggestions {
|
||||
@include usevar(background-color, 'project-user-suggestions-background');
|
||||
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
|
||||
&#project_owner_suggestions .user {
|
||||
@include usevar(border-color, 'project-user-suggestions-border-color');
|
||||
|
||||
border-bottom-width: 1px;
|
||||
width: 200px;
|
||||
box-sizing:border-box;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.user {
|
||||
position:relative;
|
||||
margin-left:50px;
|
||||
display: inline-block;
|
||||
margin-right:10px;
|
||||
|
||||
.avatar-icon {
|
||||
left:-50px;
|
||||
bottom:0px;
|
||||
border-radius:50%;
|
||||
border:2px solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#project_owners {
|
||||
min-width:50%;
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
.showcase-item {
|
||||
.gradient {
|
||||
width: 100%;
|
||||
height: 114px;
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0));
|
||||
}
|
||||
}
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
.streams-container {
|
||||
#empty-message {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.streams {
|
||||
&:empty {
|
||||
display: none;
|
||||
|
||||
+ #empty-message {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stream {
|
||||
.live {
|
||||
position: absolute;
|
||||
left: $spacing-small;
|
||||
top: $spacing-small;
|
||||
color: white;
|
||||
background-color: #e91916;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.viewers {
|
||||
position: absolute;
|
||||
left: $spacing-small;
|
||||
bottom: $spacing-small;
|
||||
color: white;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.twitch-embed-container {
|
||||
padding-bottom: 0%;
|
||||
transition: padding-bottom 400ms ease-in-out;
|
||||
|
||||
&.open {
|
||||
padding-bottom: 150%;
|
||||
|
||||
@media screen and (min-width: 713px) { // magic numbers, Twitch has weird breakpoints
|
||||
padding-bottom: 40.6%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
.timeline-item {
|
||||
@include usevar(background-color, card-background);
|
||||
@include usevar(--fade-color, card-background);
|
||||
@include usevar(color, main-color);
|
||||
|
||||
.avatar-icon {
|
||||
border: 2px solid;
|
||||
@include usevar(border-color, theme-color);
|
||||
|
||||
&.big {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
|
||||
@media #{$breakpoint-not-small} {
|
||||
width: px2rem(62px);
|
||||
height: px2rem(62px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-content-box {
|
||||
&.timeline-item-bg {
|
||||
@include usevar(background-color, timeline-content-background);
|
||||
}
|
||||
|
||||
> * {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 80vh;
|
||||
}
|
||||
|
||||
&.embed {
|
||||
@extend .aspect-ratio, .aspect-ratio--16x9;
|
||||
|
||||
> iframe {
|
||||
@extend .aspect-ratio--object;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-modal {
|
||||
.container {
|
||||
max-height: 100vh;
|
||||
max-width: 100%;
|
||||
|
||||
@media #{$breakpoint-not-small} {
|
||||
width: auto;
|
||||
max-width: calc(100% - 2rem);
|
||||
max-height: calc(100vh - 2rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -14,23 +14,22 @@
|
|||
|
||||
.carousel-button {
|
||||
border: 1px solid;
|
||||
@include usevar(border-color, dimmer-color);
|
||||
border-color: var(--dimmer-color);
|
||||
cursor: pointer;
|
||||
|
||||
transition: all 100ms ease-in-out;
|
||||
|
||||
&:hover {
|
||||
@include usevar(background-color, dimmest-color);
|
||||
background-color: var(--dimmest-color);
|
||||
}
|
||||
|
||||
&.active {
|
||||
@include usevar(border-color, theme-color);
|
||||
@extend .w2;
|
||||
border-color: var(--theme-color);
|
||||
width: var(--width-2);
|
||||
|
||||
&:hover {
|
||||
@include usevar(background-color, theme-color-dimmest);
|
||||
background-color: var(--theme-color-dimmest);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,176 @@
|
|||
.post-content {
|
||||
line-height: 1.4;
|
||||
|
||||
* {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
line-height: 1.2;
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
li:not(:last-child) {
|
||||
margin-bottom: 0.6em;
|
||||
}
|
||||
|
||||
li p {
|
||||
margin-top: 0.6em;
|
||||
margin-bottom: 0.6em;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-left: var(--spacing-medium);
|
||||
margin-right: var(--spacing-medium);
|
||||
}
|
||||
|
||||
div.code {
|
||||
border-color: var(--dimmer-color);
|
||||
|
||||
max-width: 100%;
|
||||
max-height: 20em;
|
||||
max-height: 80vh;
|
||||
overflow: auto;
|
||||
-moz-tab-size: 4;
|
||||
tab-size: 4;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
div+br,
|
||||
blockquote+br,
|
||||
ul+br,
|
||||
ol+br {
|
||||
display: none;
|
||||
}
|
||||
|
||||
table {
|
||||
margin-top: var(--spacing-small);
|
||||
margin-bottom: var(--spacing-small);
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: var(--spacing-extra-small) var(--spacing-small);
|
||||
border: 1px solid var(--dimmest-color);
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: var(--dim-background);
|
||||
|
||||
padding: .2em 0;
|
||||
white-space: nowrap;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "\00a0";
|
||||
letter-spacing: -0.2em;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
pre>code,
|
||||
pre.hmn-code {
|
||||
background-color: var(--dim-background);
|
||||
|
||||
padding: 0.7em;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-color: var(--dimmest-color);
|
||||
margin-left: var(--spacing-small);
|
||||
padding-left: var(--spacing-small);
|
||||
margin-right: 0;
|
||||
border-left-style: solid;
|
||||
border-left-width: 1px;
|
||||
|
||||
.quotewho {
|
||||
line-height: 2em;
|
||||
|
||||
&::after {
|
||||
content: " said:";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: var(--spacing-small) 0;
|
||||
padding: var(--spacing-small) var(--spacing-small) 0;
|
||||
background-color: var(--dim-background);
|
||||
border-radius: var(--border-radius-3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@media screen and (min-width: 35em) {
|
||||
margin-top: var(--spacing-medium);
|
||||
margin-bottom: var(--spacing-medium);
|
||||
padding: var(--spacing-medium) var(--spacing-medium) 0;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
margin: var(--spacing-extra-small) 0;
|
||||
|
||||
@media screen and (min-width: 35em) {
|
||||
margin: var(--spacing-small) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
td {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.spoiler {
|
||||
border-color: var(--spoiler-border);
|
||||
|
||||
border-width: 1px;
|
||||
border-style: dashed;
|
||||
color: transparent;
|
||||
|
||||
&::selection {
|
||||
color: white;
|
||||
background-color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,760 @@
|
|||
/* Bare minimum styles */
|
||||
|
||||
* {
|
||||
/* It's aggressive, but we like it aggressive */
|
||||
box-sizing: border-box;
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
br {
|
||||
/* why, IE... */
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--color);
|
||||
font-family: "Inter", sans-serif;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a,
|
||||
.link {
|
||||
color: var(--link-color);
|
||||
border-bottom: none;
|
||||
text-decoration: none;
|
||||
|
||||
&.external::after {
|
||||
font-family: "icons";
|
||||
content: " 1";
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.link--normal {
|
||||
--link-color: var(--color);
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: inherit;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
code,
|
||||
pre,
|
||||
.mono {
|
||||
font-family: "Fira Mono", monospace;
|
||||
}
|
||||
|
||||
/* Utility */
|
||||
|
||||
.bg--main {
|
||||
background-color: var(--main-background-color);
|
||||
}
|
||||
|
||||
.bg--card {
|
||||
background-color: var(--card-background);
|
||||
}
|
||||
|
||||
.bg--card-transparent {
|
||||
background-color: var(--card-background-transparent);
|
||||
}
|
||||
|
||||
.m--center {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.flex-shrink-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.flex-grow-1 {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.flex-fair {
|
||||
flex-basis: 1px;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 35em) {
|
||||
.flex-fair-ns {
|
||||
flex-basis: 1px;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 60em) {
|
||||
.flex-fair-l {
|
||||
flex-basis: 1px;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.b--dim {
|
||||
border-color: var(--dim-color);
|
||||
}
|
||||
|
||||
.b--dimmer {
|
||||
border-color: var(--dimmer-color);
|
||||
}
|
||||
|
||||
.b--dimmest {
|
||||
border-color: var(--dimmest-color);
|
||||
}
|
||||
|
||||
.b--theme {
|
||||
border-color: var(--theme-color);
|
||||
}
|
||||
|
||||
.b--theme-dim {
|
||||
border-color: var(--theme-color-dim);
|
||||
}
|
||||
|
||||
.b--theme-dimmer {
|
||||
border-color: var(--theme-color-dimmer);
|
||||
}
|
||||
|
||||
.b--theme-dimmest {
|
||||
border-color: var(--theme-color-dimmest);
|
||||
}
|
||||
|
||||
.b--theme-dark {
|
||||
border-color: var(--theme-color-dark);
|
||||
}
|
||||
|
||||
.b--theme-light {
|
||||
border-color: var(--theme-color-light);
|
||||
}
|
||||
|
||||
.bg1 {
|
||||
background-color: var(--bg-1);
|
||||
}
|
||||
|
||||
.bg2 {
|
||||
background-color: var(--bg-2);
|
||||
}
|
||||
|
||||
.bg3 {
|
||||
background-color: var(--bg-3);
|
||||
}
|
||||
|
||||
.bg4 {
|
||||
background-color: var(--bg-4);
|
||||
}
|
||||
|
||||
.bg5 {
|
||||
background-color: var(--bg-5);
|
||||
}
|
||||
|
||||
.bg-theme {
|
||||
background-color: var(--theme-color);
|
||||
}
|
||||
|
||||
.bg-theme-dim {
|
||||
background-color: var(--theme-color-dim);
|
||||
}
|
||||
|
||||
.bg-theme-dimmer {
|
||||
background-color: var(--theme-color-dimmer);
|
||||
}
|
||||
|
||||
.bg-theme-dimmest {
|
||||
background-color: var(--theme-color-dimmest);
|
||||
}
|
||||
|
||||
.bg-theme-dark {
|
||||
background-color: var(--theme-color-dark);
|
||||
}
|
||||
|
||||
.bg-theme-light {
|
||||
background-color: var(--theme-color-light);
|
||||
}
|
||||
|
||||
.c--normal {
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
.c--inherit {
|
||||
color: inherit;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.c--dim {
|
||||
color: var(--dim-color);
|
||||
}
|
||||
|
||||
.c--theme-dim {
|
||||
color: var(--theme-color-dim);
|
||||
}
|
||||
|
||||
.c--dimmer {
|
||||
color: var(--dimmer-color);
|
||||
}
|
||||
|
||||
.c--theme-dimmer {
|
||||
color: var(--theme-color-dimmer);
|
||||
}
|
||||
|
||||
.c--dimmest {
|
||||
color: var(--dimmest-color);
|
||||
}
|
||||
|
||||
.c--theme-dimmest {
|
||||
color: var(--theme-color-dimmest);
|
||||
}
|
||||
|
||||
.f8 {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.mw-site {
|
||||
max-width: var(--site-width);
|
||||
}
|
||||
|
||||
.mw-site-narrow {
|
||||
max-width: var(--site-width-narrow);
|
||||
}
|
||||
|
||||
.mh-3 {
|
||||
max-height: var(--height-3);
|
||||
}
|
||||
|
||||
.mh-4 {
|
||||
max-height: var(--height-4);
|
||||
}
|
||||
|
||||
.mh-5 {
|
||||
max-height: var(--height-5);
|
||||
}
|
||||
|
||||
.mh-6 {
|
||||
max-height: var(--height-6);
|
||||
}
|
||||
|
||||
.mh-100 {
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.mh-50vh {
|
||||
max-height: 50vh;
|
||||
}
|
||||
|
||||
.mh-60vh {
|
||||
max-height: 60vh;
|
||||
}
|
||||
|
||||
.mh-70vh {
|
||||
max-height: 70vh;
|
||||
}
|
||||
|
||||
.mh-80vh {
|
||||
max-height: 80vh;
|
||||
}
|
||||
|
||||
.minw-100 {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.minh-1 {
|
||||
min-height: var(--height-1);
|
||||
}
|
||||
|
||||
.minh-2 {
|
||||
min-height: var(--height-2);
|
||||
}
|
||||
|
||||
.minh-3 {
|
||||
min-height: var(--height-3);
|
||||
}
|
||||
|
||||
.minh-4 {
|
||||
min-height: var(--height-4);
|
||||
}
|
||||
|
||||
.minh-5 {
|
||||
min-height: var(--height-5);
|
||||
}
|
||||
|
||||
.minh-6 {
|
||||
min-height: var(--height-6);
|
||||
}
|
||||
|
||||
.h1-5 {
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.fira {
|
||||
font-family: "Fira Sans", sans-serif;
|
||||
}
|
||||
|
||||
.bi-avoid {
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
.cc-auto {
|
||||
column-count: auto;
|
||||
}
|
||||
|
||||
.cc1 {
|
||||
column-count: 1;
|
||||
}
|
||||
|
||||
.cc2 {
|
||||
column-count: 2;
|
||||
}
|
||||
|
||||
.cc3 {
|
||||
column-count: 3;
|
||||
}
|
||||
|
||||
.cg0 {
|
||||
column-gap: var(--spacing-none);
|
||||
}
|
||||
|
||||
.cg1 {
|
||||
column-gap: var(--spacing-extra-small);
|
||||
}
|
||||
|
||||
.cg2 {
|
||||
column-gap: var(--spacing-small);
|
||||
}
|
||||
|
||||
.cg3 {
|
||||
column-gap: var(--spacing-medium);
|
||||
}
|
||||
|
||||
.cg4 {
|
||||
column-gap: var(--spacing-large);
|
||||
}
|
||||
|
||||
.cg5 {
|
||||
column-gap: var(--spacing-extra-large);
|
||||
}
|
||||
|
||||
.g0 {
|
||||
gap: var(--spacing-none);
|
||||
}
|
||||
|
||||
.g1 {
|
||||
gap: var(--spacing-extra-small);
|
||||
}
|
||||
|
||||
.g2 {
|
||||
gap: var(--spacing-small);
|
||||
}
|
||||
|
||||
.g3 {
|
||||
gap: var(--spacing-medium);
|
||||
}
|
||||
|
||||
.g4 {
|
||||
gap: var(--spacing-large);
|
||||
}
|
||||
|
||||
.g5 {
|
||||
gap: var(--spacing-extra-large);
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.grid-1 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.grid-2 {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.aspect-ratio--2x1 {
|
||||
padding-bottom: 50%;
|
||||
}
|
||||
|
||||
.hide-if-empty:empty {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.fill-current {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.rot-180 {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
:not([hidden])+.show-when-sibling-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.grab:hover {
|
||||
cursor: grab;
|
||||
|
||||
.grabbing & {
|
||||
cursor: grabbing;
|
||||
}
|
||||
}
|
||||
|
||||
.grabbing {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 35em) {
|
||||
.bi-avoid-ns {
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
.cc-auto-ns {
|
||||
column-count: auto;
|
||||
}
|
||||
|
||||
.cc1-ns {
|
||||
column-count: 1;
|
||||
}
|
||||
|
||||
.cc2-ns {
|
||||
column-count: 2;
|
||||
}
|
||||
|
||||
.cc3-ns {
|
||||
column-count: 3;
|
||||
}
|
||||
|
||||
.cg0-ns {
|
||||
column-gap: var(--spacing-none);
|
||||
}
|
||||
|
||||
.cg1-ns {
|
||||
column-gap: var(--spacing-extra-small);
|
||||
}
|
||||
|
||||
.cg2-ns {
|
||||
column-gap: var(--spacing-small);
|
||||
}
|
||||
|
||||
.cg3-ns {
|
||||
column-gap: var(--spacing-medium);
|
||||
}
|
||||
|
||||
.cg4-ns {
|
||||
column-gap: var(--spacing-large);
|
||||
}
|
||||
|
||||
.cg5-ns {
|
||||
column-gap: var(--spacing-extra-large);
|
||||
}
|
||||
|
||||
.grid-1-ns {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.grid-2-ns {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.bg1-ns {
|
||||
background-color: var(--bg-1);
|
||||
}
|
||||
|
||||
.bg2-ns {
|
||||
background-color: var(--bg-2);
|
||||
}
|
||||
|
||||
.bg3-ns {
|
||||
background-color: var(--bg-3);
|
||||
}
|
||||
|
||||
.bg4-ns {
|
||||
background-color: var(--bg-4);
|
||||
}
|
||||
|
||||
.bg5-ns {
|
||||
background-color: var(--bg-5);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 35em) and (max-width: 60em) {
|
||||
.bi-avoid-m {
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
.cc-auto-m {
|
||||
column-count: auto;
|
||||
}
|
||||
|
||||
.cc1-m {
|
||||
column-count: 1;
|
||||
}
|
||||
|
||||
.cc2-m {
|
||||
column-count: 2;
|
||||
}
|
||||
|
||||
.cc3-m {
|
||||
column-count: 3;
|
||||
}
|
||||
|
||||
.cg1-m {
|
||||
column-gap: var(--spacing-extra-small);
|
||||
}
|
||||
|
||||
.cg2-m {
|
||||
column-gap: var(--spacing-small);
|
||||
}
|
||||
|
||||
.cg3-m {
|
||||
column-gap: var(--spacing-medium);
|
||||
}
|
||||
|
||||
.cg4-m {
|
||||
column-gap: var(--spacing-large);
|
||||
}
|
||||
|
||||
.cg5-m {
|
||||
column-gap: var(--spacing-extra-large);
|
||||
}
|
||||
|
||||
.grid-1-m {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.grid-2-m {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.bg1-m {
|
||||
background-color: var(--bg-1);
|
||||
}
|
||||
|
||||
.bg2-m {
|
||||
background-color: var(--bg-2);
|
||||
}
|
||||
|
||||
.bg3-m {
|
||||
background-color: var(--bg-3);
|
||||
}
|
||||
|
||||
.bg4-m {
|
||||
background-color: var(--bg-4);
|
||||
}
|
||||
|
||||
.bg5-m {
|
||||
background-color: var(--bg-5);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 60em) {
|
||||
.bi-avoid-l {
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
.cc-auto-l {
|
||||
column-count: auto;
|
||||
}
|
||||
|
||||
.cc1-l {
|
||||
column-count: 1;
|
||||
}
|
||||
|
||||
.cc2-l {
|
||||
column-count: 2;
|
||||
}
|
||||
|
||||
.cc3-l {
|
||||
column-count: 3;
|
||||
}
|
||||
|
||||
.cg1-l {
|
||||
column-gap: var(--spacing-extra-small);
|
||||
}
|
||||
|
||||
.cg2-l {
|
||||
column-gap: var(--spacing-small);
|
||||
}
|
||||
|
||||
.cg3-l {
|
||||
column-gap: var(--spacing-medium);
|
||||
}
|
||||
|
||||
.cg4-l {
|
||||
column-gap: var(--spacing-large);
|
||||
}
|
||||
|
||||
.cg5-l {
|
||||
column-gap: var(--spacing-extra-large);
|
||||
}
|
||||
|
||||
.grid-1-l {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.grid-2-l {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.bg1-l {
|
||||
background-color: var(--bg-1);
|
||||
}
|
||||
|
||||
.bg2-l {
|
||||
background-color: var(--bg-2);
|
||||
}
|
||||
|
||||
.bg3-l {
|
||||
background-color: var(--bg-3);
|
||||
}
|
||||
|
||||
.bg4-l {
|
||||
background-color: var(--bg-4);
|
||||
}
|
||||
|
||||
.bg5-l {
|
||||
background-color: var(--bg-5);
|
||||
}
|
||||
}
|
||||
|
||||
.svgicon {
|
||||
svg {
|
||||
fill: currentColor;
|
||||
stroke: currentColor;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
&:not(.svgicon-nofix) svg {
|
||||
transform: translate(0px, 0.1em);
|
||||
}
|
||||
}
|
||||
|
||||
.sr {
|
||||
border: 0;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
word-wrap: normal !important;
|
||||
transition: 0.2s all;
|
||||
}
|
||||
|
||||
.sr-focusable:focus {
|
||||
padding: 15px 10px;
|
||||
height: auto;
|
||||
width: auto;
|
||||
background: var(--content-background);
|
||||
clip: initial;
|
||||
clip-path: initial;
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&.current {
|
||||
text-overflow: clip ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
/* Old stuff that should probably be moved? */
|
||||
|
||||
.optionbar {
|
||||
width: 100%;
|
||||
padding-bottom: var(--spacing-small);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
border-style: dashed;
|
||||
border-width: 0 0 1px;
|
||||
border-color: var(--dimmest-color);
|
||||
|
||||
@media screen and (min-width: 35em) {
|
||||
flex-direction: row;
|
||||
text-align: left;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
border-bottom-width: 0;
|
||||
border-top-width: 1px;
|
||||
padding-bottom: 0;
|
||||
padding-top: var(--spacing-small);
|
||||
|
||||
@media screen and (min-width: 35em) {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.center {
|
||||
/* TODO: find this and kill it */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@media screen and (min-width: 35em) {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.option {
|
||||
padding: var(--spacing-extra-small) var(--spacing-small);
|
||||
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@media screen and (min-width: 35em) {
|
||||
padding-top: var(--spacing-small);
|
||||
padding-bottom: var(--spacing-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.group {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.tab {
|
||||
background-color: var(--tab-background);
|
||||
padding: var(--spacing-small);
|
||||
}
|
||||
|
||||
.background-even:nth-of-type(even) {
|
||||
background-color: var(--background-even-background);
|
||||
--fade-color: var(--background-even-background);
|
||||
}
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
#preview:empty::after {
|
||||
content: 'A preview of your post will appear here.';
|
||||
color: var(--dimmer-color);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 35em) {
|
||||
#preview-container {
|
||||
max-height: calc(100vh - 20rem);
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-form {
|
||||
.edit-form-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: var(--spacing-medium);
|
||||
margin-bottom: var(--spacing-medium);
|
||||
|
||||
@media screen and (min-width: 35em) {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
> :first-child {
|
||||
width: 100%;
|
||||
font-weight: 500;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
text-align: left;
|
||||
padding-right: 0;
|
||||
padding-bottom: var(--spacing-extra-small);
|
||||
|
||||
@media screen and (min-width: 35em) {
|
||||
width: var(--width-4);
|
||||
text-align: right;
|
||||
padding-right: var(--spacing-small);
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> :nth-child(2) {
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pt-input-ns {
|
||||
@media screen and (min-width: 35em) {
|
||||
padding-top: var(--spacing-extra-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
width: 100%;
|
||||
|
||||
@media screen and (min-width: 35em) {
|
||||
max-width: var(--width-5);
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text]:invalid {
|
||||
border-color: var(--red);
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: var(--height-3);
|
||||
|
||||
@media screen and (min-width: 35em) {
|
||||
width: var(--width-6);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,26 +1,26 @@
|
|||
.edu-course {
|
||||
&.highlight {
|
||||
border-left: 0.25rem solid black;
|
||||
@include usevar(border-color, link-color);
|
||||
@include usevar(background-color, theme-color-dimmest);
|
||||
border-color: var(--link-color);
|
||||
background-color: var(--theme-color-dimmest);
|
||||
}
|
||||
|
||||
.edu-article.coming-soon {
|
||||
@extend .c--dimmer;
|
||||
color: var(--dimmer-color);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.edu-article::after {
|
||||
$height: 10rem;
|
||||
--height: 10rem;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 1rem;
|
||||
height: $height;
|
||||
height: var(--height);
|
||||
border-width: 0 0 1px 1px;
|
||||
border-style: solid;
|
||||
@include usevar(border-color, dimmest-color);
|
||||
border-color: var(--dimmest-color);
|
||||
left: -1.5rem;
|
||||
top: 1rem - $height;
|
||||
top: calc(1rem - var(--height));
|
||||
border-bottom-left-radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
.hmn-form {
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
color: var(--color);
|
||||
accent-color: var(--button-color-primary);
|
||||
background-color: var(--bg-3);
|
||||
padding: 0.75rem;
|
||||
outline: none;
|
||||
|
||||
&:not(.no-border) {
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--border-color-focused);
|
||||
|
||||
~.also-focus {
|
||||
border-color: var(--border-color-focused);
|
||||
}
|
||||
}
|
||||
|
||||
.error &,
|
||||
&.error,
|
||||
&:invalid {
|
||||
border-color: var(--border-color-error);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: var(--bg-5);
|
||||
color: var(--border-color);
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type=submit] {
|
||||
color: var(--color);
|
||||
background-color: var(--bg-3);
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
line-height: 1.5rem;
|
||||
|
||||
&.btn-primary {
|
||||
background-color: var(--button-color-primary);
|
||||
}
|
||||
|
||||
&:not(.no-border) {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:not(.no-padding) {
|
||||
padding: 0.5rem 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-extra-small);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.error .error-msg {
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 1px solid var(--border-color);
|
||||
background-color: var(--bg-2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
legend {
|
||||
background-color: var(--bg-1);
|
||||
font-weight: bold;
|
||||
float: left;
|
||||
padding: var(--spacing-medium);
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,173 @@
|
|||
.thread-list-item .latestpost {
|
||||
width: 16.5rem;
|
||||
}
|
||||
|
||||
.excerpt-fade {
|
||||
background-image: linear-gradient(to top, var(--fade-color), rgba(0, 0, 0, 0));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.read {
|
||||
color: var(--forum-thread-read-color);
|
||||
|
||||
td {
|
||||
color: var(--forum-thread-read-color);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--forum-thread-read-link-color);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.goto {
|
||||
font-size: 200%;
|
||||
width: 30px;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 0px 10px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
line-height: 100%;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
border-radius: 1000em;
|
||||
padding: 0 0.8em;
|
||||
font-size: 0.9em;
|
||||
line-height: 1.8em;
|
||||
font-weight: bold;
|
||||
|
||||
&.staff {
|
||||
background-color: #17b2c6;
|
||||
color: white;
|
||||
|
||||
&::before {
|
||||
content: 'Staff';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.postid a {
|
||||
margin-top: -4rem;
|
||||
padding-top: 4rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.codeblocktable {
|
||||
font-family: monospace;
|
||||
font-size: 14px;
|
||||
overflow: auto;
|
||||
line-height: 1.5em;
|
||||
|
||||
tbody {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.linenos {
|
||||
color: var(--theme-dim);
|
||||
font-weight: 500;
|
||||
padding: 5px;
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.code {
|
||||
/* Background color given by theme */
|
||||
padding-right: 20px;
|
||||
padding-left: 10px;
|
||||
max-width: 80em;
|
||||
}
|
||||
}
|
||||
|
||||
.post {
|
||||
.action.button {
|
||||
padding: 0px 10px;
|
||||
margin-top: 0px;
|
||||
margin-right: 4px;
|
||||
background-color: transparent;
|
||||
font-size: 130%;
|
||||
border-radius: 0px;
|
||||
border-width: 0px;
|
||||
border-bottom-width: 2px;
|
||||
transition: border-bottom-width 0.1s;
|
||||
|
||||
&:hover {
|
||||
border-bottom-width: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blog {
|
||||
.post {
|
||||
.meta {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&.op .meta {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.badges {
|
||||
width: 40px;
|
||||
font-size: 0.7em;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
.post>.author {
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.recent-posts {
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
|
||||
h2 {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
.archive ul {
|
||||
list-style-type: none;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.post-list {
|
||||
.post {
|
||||
&:nth-child(even) {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bbtable {
|
||||
width: 100%;
|
||||
border: 1px solid;
|
||||
|
||||
td,
|
||||
th {
|
||||
border: 1px solid;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
th {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
font-weight: bold;
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(even) {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,179 @@
|
|||
header.old {
|
||||
--logo-height: 3.75rem;
|
||||
|
||||
.hmn-logo {
|
||||
height: var(--logo-height);
|
||||
width: 100%;
|
||||
text-transform: uppercase;
|
||||
font-family: 'MohaveHMN', sans-serif;
|
||||
font-size: 2rem;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white !important;
|
||||
|
||||
&.big {
|
||||
@media screen and (min-width: 35em) {
|
||||
width: 11.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.small {
|
||||
@media screen and (min-width: 35em) {
|
||||
width: var(--logo-height);
|
||||
padding: 0.8rem;
|
||||
text-align: justify;
|
||||
text-align-last: justify;
|
||||
text-justify: inter-character;
|
||||
flex-direction: column;
|
||||
font-size: 1rem;
|
||||
line-height: 1em;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.items {
|
||||
position: relative;
|
||||
/* will be used on mobile, when .root-item is not relative */
|
||||
}
|
||||
|
||||
.root-item {
|
||||
@media screen and (min-width: 35em) {
|
||||
& {
|
||||
position: relative;
|
||||
/* makes submenus align to this item instead of the screen */
|
||||
height: var(--logo-height);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:hover):not(.clicked)>.submenu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.clicked .svgicon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
>a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.svgicon {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.clicked) .root-item:not(:hover),
|
||||
&.clicked .root-item:not(.clicked) {
|
||||
>.submenu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.submenu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
min-width: 10rem;
|
||||
border-top-style: solid;
|
||||
border-bottom-style: solid;
|
||||
|
||||
@media screen and (min-width: 35em) {
|
||||
& {
|
||||
border-top-style: none;
|
||||
border-left-style: solid;
|
||||
border-right-style: solid;
|
||||
left: initial;
|
||||
right: initial;
|
||||
}
|
||||
}
|
||||
|
||||
>a {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
z-index: 1;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
|
||||
@media screen and (min-width: 35em) {
|
||||
& {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: var(--bg-4);
|
||||
|
||||
.hmn-logo {
|
||||
font-family: 'MohaveHMN', sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.6rem;
|
||||
padding: 0.6rem 0.8rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.menu-chevron {
|
||||
/* ensure that it also has .svgicon */
|
||||
display: inline-block;
|
||||
margin-left: var(--spacing-extra-small);
|
||||
font-size: var(--font-size-7);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 1.8rem;
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
|
||||
>a,
|
||||
>.root-item>a {
|
||||
display: block;
|
||||
padding: var(--spacing-medium);
|
||||
}
|
||||
|
||||
.submenu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
min-width: 8rem;
|
||||
background-color: var(--card-background);
|
||||
|
||||
>a {
|
||||
padding: var(--spacing-small) var(--spacing-medium);
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.root-item {
|
||||
&:not(:hover):not(.clicked)>.submenu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.clicked .svgicon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.clicked) .root-item:not(:hover),
|
||||
&.clicked .root-item:not(.clicked) {
|
||||
>.submenu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -9,65 +9,65 @@ span.icon {
|
|||
|
||||
span.icon-settings::before {
|
||||
font-family: "icons";
|
||||
content:"0";
|
||||
content: "0";
|
||||
}
|
||||
|
||||
span.icon-link::before {
|
||||
font-family: "icons";
|
||||
content:"1";
|
||||
content: "1";
|
||||
}
|
||||
|
||||
span.icon-logout::before {
|
||||
font-family: "icons";
|
||||
content:"2";
|
||||
content: "2";
|
||||
}
|
||||
|
||||
span.icon-twitter::before {
|
||||
font-family: "icons";
|
||||
content:"#";
|
||||
content: "#";
|
||||
}
|
||||
|
||||
span.icon-twitch::before {
|
||||
font-family: "icons";
|
||||
content:"$";
|
||||
content: "$";
|
||||
}
|
||||
|
||||
span.icon-github::before {
|
||||
font-family: "icons";
|
||||
content:"%";
|
||||
content: "%";
|
||||
}
|
||||
|
||||
span.icon-patreon::before {
|
||||
font-family: "icons";
|
||||
content:"&";
|
||||
content: "&";
|
||||
}
|
||||
|
||||
span.icon-youtube::before {
|
||||
font-family: "icons";
|
||||
content:"'";
|
||||
content: "'";
|
||||
}
|
||||
|
||||
span.icon-soundcloud::before {
|
||||
font-family: "icons";
|
||||
content:"*";
|
||||
content: "*";
|
||||
}
|
||||
|
||||
span.icon-web::before {
|
||||
font-family: "icons";
|
||||
content:"3";
|
||||
content: "3";
|
||||
}
|
||||
|
||||
span.icon-itchio::before {
|
||||
font-family: "icons";
|
||||
content:"+";
|
||||
content: "+";
|
||||
}
|
||||
|
||||
span.icon-hitbox::before {
|
||||
font-family: "icons";
|
||||
content:",";
|
||||
content: ",";
|
||||
}
|
||||
|
||||
span.icon-rss::before {
|
||||
font-family: "icons";
|
||||
content:"4";
|
||||
content: "4";
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
.notice a {
|
||||
color: inherit;
|
||||
border-bottom-color: inherit;
|
||||
}
|
||||
|
||||
.notice-hiatus {
|
||||
background-color: var(--notice-hiatus-color);
|
||||
}
|
||||
|
||||
.notice-dead {
|
||||
background-color: var(--notice-dead-color);
|
||||
}
|
||||
|
||||
.notice-lts {
|
||||
background-color: var(--notice-lts-color);
|
||||
}
|
||||
|
||||
.notice-success {
|
||||
background-color: var(--notice-success-color);
|
||||
}
|
||||
|
||||
.notice-warn {
|
||||
background-color: var(--notice-warn-color);
|
||||
}
|
||||
|
||||
.notice-failure {
|
||||
background-color: var(--notice-failure-color);
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
.upload_bar.uploading .instructions,
|
||||
.upload_bar:not(.uploading) .progress {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.upload_bar .progress_bar {
|
||||
border: 2px solid;
|
||||
border-color: var(--link-color);
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.upload_bar .progress_bar>div {
|
||||
background-color: var(--link-color);
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
.pair {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.key {
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.value {
|
||||
text-align: right;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.project-carousel {
|
||||
.carousel-item {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
br {
|
||||
line-height: 0.6em;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-item-small {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
&:not(.active) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-description {
|
||||
max-height: 14rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.carousel-fade {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 30px;
|
||||
|
||||
background: linear-gradient(var(--dim-background-transparent), var(--dim-background));
|
||||
}
|
||||
}
|
||||
|
||||
.project-card {
|
||||
color: var(--fg-font-color);
|
||||
background-color: var(--card-background);
|
||||
|
||||
&.project-card-black {
|
||||
background-color: var(--card-background-transparent);
|
||||
}
|
||||
|
||||
.slideshow & {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
--image-size: 8rem;
|
||||
|
||||
width: var(--image-size);
|
||||
min-height: var(--image-size);
|
||||
|
||||
.image {
|
||||
position: absolute;
|
||||
width: var(--image-size);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.badges:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.badge {
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
.showcase-item .gradient {
|
||||
width: 100%;
|
||||
height: 114px;
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0));
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
@import "tachyons.min.css";
|
||||
|
||||
@import "vars.css";
|
||||
@import "core.css";
|
||||
|
||||
@import "carousel.css";
|
||||
@import "content.css";
|
||||
@import "editor.css";
|
||||
@import "education.css";
|
||||
@import "form.css";
|
||||
@import "forum.css";
|
||||
@import "header.css";
|
||||
@import "icons.css";
|
||||
@import "notices.css";
|
||||
@import "progress_bar.css";
|
||||
@import "projects.css";
|
||||
@import "showcase.css";
|
||||
@import "syntax.css";
|
||||
@import "timeline.css";
|
||||
|
|
@ -14,17 +14,17 @@
|
|||
@import 'episodes';
|
||||
@import 'education';
|
||||
@import 'forms';
|
||||
@import 'forum';
|
||||
// @import 'forum';
|
||||
@import 'header';
|
||||
@import 'icons';
|
||||
@import 'irc';
|
||||
@import 'landing';
|
||||
// @import 'landing';
|
||||
@import 'library';
|
||||
@import 'profile';
|
||||
@import 'projects';
|
||||
@import 'showcase';
|
||||
@import 'streams';
|
||||
@import 'timeline';
|
||||
// @import 'timeline';
|
||||
@import 'carousel';
|
||||
@import 'notices';
|
||||
@import 'progress_bar';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
pre, code, .codeblock {
|
||||
.hll { background-color: #ffffcc }
|
||||
.c { color: #008000 } /* Comment */
|
||||
.err { border: 1px solid #FF0000 } /* Error */
|
||||
.k { color: #0000ff } /* Keyword */
|
||||
.ch { color: #008000 } /* Comment.Hashbang */
|
||||
.cm { color: #008000 } /* Comment.Multiline */
|
||||
.cp { color: #0000ff } /* Comment.Preproc */
|
||||
.cpf { color: #008000 } /* Comment.PreprocFile */
|
||||
.c1 { color: #008000 } /* Comment.Single */
|
||||
.cs { color: #008000 } /* Comment.Special */
|
||||
.ge { font-style: italic } /* Generic.Emph */
|
||||
.gh { font-weight: bold } /* Generic.Heading */
|
||||
.gp { font-weight: bold } /* Generic.Prompt */
|
||||
.gs { font-weight: bold } /* Generic.Strong */
|
||||
.gu { font-weight: bold } /* Generic.Subheading */
|
||||
.kc { color: #0000ff } /* Keyword.Constant */
|
||||
.kd { color: #0000ff } /* Keyword.Declaration */
|
||||
.kn { color: #0000ff } /* Keyword.Namespace */
|
||||
.kp { color: #0000ff } /* Keyword.Pseudo */
|
||||
.kr { color: #0000ff } /* Keyword.Reserved */
|
||||
.kt { color: #2b91af } /* Keyword.Type */
|
||||
.s { color: #a31515 } /* Literal.String */
|
||||
.nc { color: #2b91af } /* Name.Class */
|
||||
.ow { color: #0000ff } /* Operator.Word */
|
||||
.sa { color: #a31515 } /* Literal.String.Affix */
|
||||
.sb { color: #a31515 } /* Literal.String.Backtick */
|
||||
.sc { color: #a31515 } /* Literal.String.Char */
|
||||
.dl { color: #a31515 } /* Literal.String.Delimiter */
|
||||
.sd { color: #a31515 } /* Literal.String.Doc */
|
||||
.s2 { color: #a31515 } /* Literal.String.Double */
|
||||
.se { color: #a31515 } /* Literal.String.Escape */
|
||||
.sh { color: #a31515 } /* Literal.String.Heredoc */
|
||||
.si { color: #a31515 } /* Literal.String.Interpol */
|
||||
.sx { color: #a31515 } /* Literal.String.Other */
|
||||
.sr { color: #a31515 } /* Literal.String.Regex */
|
||||
.s1 { color: #a31515 } /* Literal.String.Single */
|
||||
.ss { color: #a31515 } /* Literal.String.Symbol */
|
||||
}
|
||||
|
|
@ -0,0 +1,140 @@
|
|||
/* Variables copied from tachyons/variables.scss and adapted to CSS variables. */
|
||||
|
||||
:root {
|
||||
--sans-serif: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, helvetica, 'helvetica neue', ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;
|
||||
--serif: georgia, serif;
|
||||
--code: consolas, monaco, monospace;
|
||||
--font-size-headline: 6rem;
|
||||
--font-size-subheadline: 5rem;
|
||||
--font-size-1: 3rem;
|
||||
--font-size-2: 2.25rem;
|
||||
--font-size-3: 1.5rem;
|
||||
--font-size-4: 1.25rem;
|
||||
--font-size-5: 1rem;
|
||||
--font-size-6: .875rem;
|
||||
--font-size-7: .75rem;
|
||||
--letter-spacing-tight: -.05em;
|
||||
--letter-spacing-1: .1em;
|
||||
--letter-spacing-2: .25em;
|
||||
--line-height-solid: 1;
|
||||
--line-height-title: 1.25;
|
||||
--line-height-copy: 1.5;
|
||||
--measure: 30em;
|
||||
--measure-narrow: 20em;
|
||||
--measure-wide: 34em;
|
||||
--spacing-none: 0;
|
||||
--spacing-extra-small: .25rem;
|
||||
--spacing-small: .5rem;
|
||||
--spacing-medium: 1rem;
|
||||
--spacing-large: 2rem;
|
||||
--spacing-extra-large: 4rem;
|
||||
--spacing-extra-extra-large: 8rem;
|
||||
--spacing-extra-extra-extra-large: 16rem;
|
||||
--spacing-copy-separator: 1.5em;
|
||||
--height-1: 1rem;
|
||||
--height-2: 2rem;
|
||||
--height-3: 4rem;
|
||||
--height-4: 8rem;
|
||||
--height-5: 16rem;
|
||||
--height-6: 32rem;
|
||||
--width-1: 1rem;
|
||||
--width-2: 2rem;
|
||||
--width-3: 4rem;
|
||||
--width-4: 8rem;
|
||||
--width-5: 16rem;
|
||||
--width-6: 32rem;
|
||||
--width-7: 48rem;
|
||||
--width-8: 64rem;
|
||||
--max-width-1: 1rem;
|
||||
--max-width-2: 2rem;
|
||||
--max-width-3: 4rem;
|
||||
--max-width-4: 8rem;
|
||||
--max-width-5: 16rem;
|
||||
--max-width-6: 32rem;
|
||||
--max-width-7: 48rem;
|
||||
--max-width-8: 64rem;
|
||||
--max-width-9: 96rem;
|
||||
--border-radius-none: 0;
|
||||
--border-radius-1: .125rem;
|
||||
--border-radius-2: .25rem;
|
||||
--border-radius-3: .5rem;
|
||||
--border-radius-4: 1rem;
|
||||
--border-radius-circle: 100%;
|
||||
--border-radius-pill: 9999px;
|
||||
--border-width-none: 0;
|
||||
--border-width-1: .125rem;
|
||||
--border-width-2: .25rem;
|
||||
--border-width-3: .5rem;
|
||||
--border-width-4: 1rem;
|
||||
--border-width-5: 2rem;
|
||||
--box-shadow-1: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
|
||||
--box-shadow-2: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
|
||||
--box-shadow-3: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
|
||||
--box-shadow-4: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
|
||||
--box-shadow-5: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
|
||||
--black: #000;
|
||||
--near-black: #111;
|
||||
--dark-gray: #333;
|
||||
--mid-gray: #555;
|
||||
--gray: #777;
|
||||
--silver: #999;
|
||||
--light-silver: #aaa;
|
||||
--moon-gray: #ccc;
|
||||
--light-gray: #eee;
|
||||
--near-white: #f4f4f4;
|
||||
--white: #fff;
|
||||
--transparent: transparent;
|
||||
--black-90: rgba(0, 0, 0, .9);
|
||||
--black-80: rgba(0, 0, 0, .8);
|
||||
--black-70: rgba(0, 0, 0, .7);
|
||||
--black-60: rgba(0, 0, 0, .6);
|
||||
--black-50: rgba(0, 0, 0, .5);
|
||||
--black-40: rgba(0, 0, 0, .4);
|
||||
--black-30: rgba(0, 0, 0, .3);
|
||||
--black-20: rgba(0, 0, 0, .2);
|
||||
--black-10: rgba(0, 0, 0, .1);
|
||||
--black-05: rgba(0, 0, 0, .05);
|
||||
--black-025: rgba(0, 0, 0, .025);
|
||||
--black-0125: rgba(0, 0, 0, .0125);
|
||||
--white-90: rgba(255, 255, 255, .9);
|
||||
--white-80: rgba(255, 255, 255, .8);
|
||||
--white-70: rgba(255, 255, 255, .7);
|
||||
--white-60: rgba(255, 255, 255, .6);
|
||||
--white-50: rgba(255, 255, 255, .5);
|
||||
--white-40: rgba(255, 255, 255, .4);
|
||||
--white-30: rgba(255, 255, 255, .3);
|
||||
--white-20: rgba(255, 255, 255, .2);
|
||||
--white-10: rgba(255, 255, 255, .1);
|
||||
--white-05: rgba(255, 255, 255, .05);
|
||||
--white-025: rgba(255, 255, 255, .025);
|
||||
--white-0125: rgba(255, 255, 255, .0125);
|
||||
--dark-red: #e7040f;
|
||||
--red: #ff4136;
|
||||
--light-red: #ff725c;
|
||||
--orange: #ff6300;
|
||||
--gold: #ffb700;
|
||||
--yellow: #ffd700;
|
||||
--light-yellow: #fbf1a9;
|
||||
--purple: #5e2ca5;
|
||||
--light-purple: #a463f2;
|
||||
--dark-pink: #d5008f;
|
||||
--hot-pink: #ff41b4;
|
||||
--pink: #ff80cc;
|
||||
--light-pink: #ffa3d7;
|
||||
--dark-green: #137752;
|
||||
--green: #19a974;
|
||||
--light-green: #9eebcf;
|
||||
--navy: #001b44;
|
||||
--dark-blue: #00449e;
|
||||
--blue: #357edd;
|
||||
--light-blue: #96ccff;
|
||||
--lightest-blue: #cdecff;
|
||||
--washed-blue: #f6fffe;
|
||||
--washed-green: #e8fdf5;
|
||||
--washed-yellow: #fffceb;
|
||||
--washed-red: #ffdfdf;
|
||||
|
||||
--breakpoint-not-small: 'screen and (min-width: 35em)';
|
||||
--breakpoint-medium: 'screen and (min-width: 35em) and (max-width: 60em)';
|
||||
--breakpoint-large: 'screen and (min-width: 60em)';
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -25,8 +25,6 @@ $vars: (
|
|||
|
||||
menu-bottom-border-color: #444,
|
||||
|
||||
login-popup-background: #181818,
|
||||
|
||||
content-background: #202020,
|
||||
content-background-transparent: rgba(#202020, 0),
|
||||
dim-background: #252525,
|
||||
|
|
|
|||
|
|
@ -25,8 +25,6 @@ $vars: (
|
|||
|
||||
menu-bottom-border-color: black,
|
||||
|
||||
login-popup-background: #fbfbfb,
|
||||
|
||||
content-background: #f8f8f8,
|
||||
content-background-transparent: rgba(#f8f8f8, 0),
|
||||
dim-background: #f0f0f0,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
.avatar {
|
||||
object-fit: cover;
|
||||
border-radius: 100%;
|
||||
overflow: hidden;
|
||||
background-color: var(--dimmest-color);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
background-color: var(--card-background);
|
||||
--fade-color: var(--card-background);
|
||||
color: var(--main-color);
|
||||
|
||||
.timeline-content-box {
|
||||
&.timeline-item-bg {
|
||||
background-color: var(--timeline-content-background);
|
||||
}
|
||||
|
||||
>* {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 80vh;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
/* 40px */
|
||||
width: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-modal {
|
||||
.container {
|
||||
max-height: 100vh;
|
||||
max-width: 100%;
|
||||
|
||||
@media screen and (min-width: 35em) {
|
||||
width: auto;
|
||||
max-width: calc(100% - 2rem);
|
||||
max-height: calc(100vh - 2rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
/*
|
||||
Media queries cannot have variables, so here are media queries you can copy-paste as necessary:
|
||||
|
||||
$breakpoint-not-small: screen and (min-width: 35em)
|
||||
$breakpoint-medium: screen and (min-width: 35em) and (max-width: 60em)
|
||||
$breakpoint-large: screen and (min-width: 60em)
|
||||
*/
|
||||
|
||||
@import "tachyons-vars.css";
|
||||
|
||||
:root {
|
||||
--background-color: white;
|
||||
--color: black;
|
||||
--link-color: #d12991;
|
||||
--red: #c61d24;
|
||||
|
||||
--dim-color: #333;
|
||||
--dimmer-color: #999;
|
||||
--dimmest-color: #bbb;
|
||||
|
||||
/* Default theme colors in case the project.css is busted */
|
||||
--theme-color: #666;
|
||||
--theme-color-dim: #aaa;
|
||||
--theme-color-dimmer: #bbb;
|
||||
--theme-color-dimmest: #ccc;
|
||||
|
||||
--theme-color-dark: #666;
|
||||
--theme-color-light: #666;
|
||||
|
||||
--main-background-color: #f8f8f8;
|
||||
--main-background-color-transparent: rgba(#f8f8f8, 0);
|
||||
|
||||
--bg-1: #1f1f1f;
|
||||
--bg-2: #2f2f2f;
|
||||
--bg-3: #494949;
|
||||
|
||||
--forum-thread-read-color: #555;
|
||||
--forum-thread-read-link-color: #888;
|
||||
|
||||
--notice-hiatus-color: #aa7d30;
|
||||
--notice-dead-color: #b42222;
|
||||
--notice-lts-color: #43a52f;
|
||||
--notice-success-color: #43a52f;
|
||||
--notice-warn-color: #aa7d30;
|
||||
--notice-failure-color: #b42222;
|
||||
|
||||
--spoiler-border: #aaa;
|
||||
|
||||
--site-width: 80rem;
|
||||
--site-width-narrow: 60rem;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #2f2f2f;
|
||||
|
||||
--color: #eee;
|
||||
--link-color: #ff5dc2;
|
||||
--color-error: #ff6666;
|
||||
|
||||
--dim-color: #bbb;
|
||||
--dimmer-color: #999;
|
||||
--dimmest-color: #777;
|
||||
|
||||
--theme-color: #666;
|
||||
--theme-color-dim: #444;
|
||||
--theme-color-dimmer: #383838;
|
||||
--theme-color-dimmest: #333;
|
||||
|
||||
--theme-color-dark: #666;
|
||||
--theme-color-light: #666;
|
||||
|
||||
--main-background-color: #202020;
|
||||
--main-background-color-transparent: rgba(#202020, 0);
|
||||
|
||||
/* --card-background: #282828; */
|
||||
--card-background: #494949;
|
||||
--card-background-hover: #333;
|
||||
--card-background-transparent: #242424D8;
|
||||
|
||||
--bg-1: #1f1f1f;
|
||||
--bg-2: #2f2f2f;
|
||||
--bg-3: #494949;
|
||||
--bg-4: #595959;
|
||||
--bg-5: #cbcbcb;
|
||||
|
||||
--border-color: #595959;
|
||||
--border-color-focused: #4e55ff;
|
||||
--border-color-error: #ff3a3a;
|
||||
|
||||
--button-color-primary: #c900ea;
|
||||
|
||||
--forum-thread-read-color: #777;
|
||||
--forum-thread-read-link-color: #999;
|
||||
|
||||
--notice-hiatus-color: #876327;
|
||||
--notice-dead-color: #7a2020;
|
||||
--notice-lts-color: #2a681d;
|
||||
--notice-success-color: #2a681d;
|
||||
--notice-warn-color: #876327;
|
||||
--notice-failure-color: #7a2020;
|
||||
|
||||
--spoiler-border: #777;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M6,6l0,-6l2,0l0,6l6,0l0,2l-6,0l0,6l-2,0l0,-6l-6,0l0,-2l6,0Z"/></svg>
|
||||
|
After Width: | Height: | Size: 171 B |
|
|
@ -0,0 +1,7 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<g transform="matrix(1,0,0,1,-5,-5)">
|
||||
<path d="M16.004,9.414L7.397,18.021L5.983,16.607L14.589,8L7.004,8L7.004,6L18.004,6L18.004,17L16.004,17L16.004,9.414Z" style="fill-rule:nonzero;"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 656 B |
|
|
@ -1,11 +1 @@
|
|||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 47.971 47.971">
|
||||
<g>
|
||||
<path d="M28.228,23.986L47.092,5.122c1.172-1.171,1.172-3.071,0-4.242c-1.172-1.172-3.07-1.172-4.242,0L23.986,19.744L5.121,0.88
|
||||
c-1.172-1.172-3.07-1.172-4.242,0c-1.172,1.171-1.172,3.071,0,4.242l18.865,18.864L0.879,42.85c-1.172,1.171-1.172,3.071,0,4.242
|
||||
C1.465,47.677,2.233,47.97,3,47.97s1.535-0.293,2.121-0.879l18.865-18.864L42.85,47.091c0.586,0.586,1.354,0.879,2.121,0.879
|
||||
s1.535-0.293,2.121-0.879c1.172-1.171,1.172-3.071,0-4.242L28.228,23.986z"/>
|
||||
</g>
|
||||
</svg>
|
||||
<svg viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M7,5.444l5.444,-5.444l1.556,1.556l-5.444,5.444l5.444,5.444l-1.556,1.556l-5.444,-5.444l-5.444,5.444l-1.556,-1.556l5.444,-5.444l-5.444,-5.444l1.556,-1.556l5.444,5.444Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 776 B After Width: | Height: | Size: 257 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M17 6H22V8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V8H2V6H7V3C7 2.44772 7.44772 2 8 2H16C16.5523 2 17 2.44772 17 3V6ZM18 8H6V20H18V8ZM13.4142 13.9997L15.182 15.7675L13.7678 17.1817L12 15.4139L10.2322 17.1817L8.81802 15.7675L10.5858 13.9997L8.81802 12.232L10.2322 10.8178L12 12.5855L13.7678 10.8178L15.182 12.232L13.4142 13.9997ZM9 4V6H15V4H9Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 467 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8.5 7C9.32843 7 10 6.32843 10 5.5C10 4.67157 9.32843 4 8.5 4C7.67157 4 7 4.67157 7 5.5C7 6.32843 7.67157 7 8.5 7ZM8.5 13.5C9.32843 13.5 10 12.8284 10 12C10 11.1716 9.32843 10.5 8.5 10.5C7.67157 10.5 7 11.1716 7 12C7 12.8284 7.67157 13.5 8.5 13.5ZM10 18.5C10 19.3284 9.32843 20 8.5 20C7.67157 20 7 19.3284 7 18.5C7 17.6716 7.67157 17 8.5 17C9.32843 17 10 17.6716 10 18.5ZM15.5 7C16.3284 7 17 6.32843 17 5.5C17 4.67157 16.3284 4 15.5 4C14.6716 4 14 4.67157 14 5.5C14 6.32843 14.6716 7 15.5 7ZM17 12C17 12.8284 16.3284 13.5 15.5 13.5C14.6716 13.5 14 12.8284 14 12C14 11.1716 14.6716 10.5 15.5 10.5C16.3284 10.5 17 11.1716 17 12ZM15.5 20C16.3284 20 17 19.3284 17 18.5C17 17.6716 16.3284 17 15.5 17C14.6716 17 14 17.6716 14 18.5C14 19.3284 14.6716 20 15.5 20Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 859 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM8.82258 15.3427C8.42804 14.8663 7.9373 14.6957 7.34401 14.834L7.19355 14.875L6.60484 15.8911C6.37903 16.2863 6.5121 16.7903 6.90726 17.0161C7.26949 17.2231 7.7232 17.1286 7.97023 16.807L8.03226 16.7137L8.82258 15.3427ZM13.2097 8.66129C12.7218 9.06452 12.2298 10.2581 12.9194 11.4476L15.9597 16.7137C16.1895 17.1089 16.6895 17.2419 17.0847 17.0161C17.4469 16.8054 17.5889 16.3677 17.4361 15.9919L17.3871 15.8911L16.5847 14.5H17.7742C18.2298 14.5 18.5968 14.1331 18.5968 13.6774C18.5968 13.2568 18.2841 12.9118 17.8776 12.8612L17.7742 12.8548H15.6331L13.44 9.05741L13.2097 8.66129ZM13.4879 5.61694C13.1257 5.40995 12.672 5.50451 12.4249 5.82608L12.3629 5.91935L11.996 6.55242L11.6371 5.91935C11.4073 5.52419 10.9073 5.39113 10.5121 5.61694C10.1499 5.82762 10.0079 6.26532 10.1606 6.64118L10.2097 6.74194L11.0484 8.19758L8.3629 12.8508H6.26613C5.81048 12.8508 5.44355 13.2177 5.44355 13.6734C5.44355 14.094 5.7562 14.439 6.16268 14.4896L6.26613 14.496H13.746C14.0869 13.8562 13.6854 12.9472 12.9357 12.8579L12.8145 12.8508H10.2621L13.7903 6.74194C14.0161 6.34677 13.8831 5.84274 13.4879 5.61694Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M12 11.3884C11.0942 9.62673 8.62833 6.34423 6.335 4.7259C4.13833 3.17506 3.30083 3.4434 2.75167 3.69256C2.11583 3.9784 2 4.95506 2 5.52839C2 6.10339 2.315 10.2367 2.52 10.9276C3.19917 13.2076 5.61417 13.9776 7.83917 13.7309C4.57917 14.2142 1.68333 15.4017 5.48083 19.6292C9.65833 23.9542 11.2058 18.7017 12 16.0392C12.7942 18.7017 13.7083 23.7651 18.4442 19.6292C22 16.0392 19.4208 14.2142 16.1608 13.7309C18.3858 13.9784 20.8008 13.2076 21.48 10.9276C21.685 10.2376 22 6.10256 22 5.52923C22 4.95423 21.8842 3.97839 21.2483 3.6909C20.6992 3.44256 19.8617 3.17423 17.665 4.72423C15.3717 6.34506 12.9058 9.62756 12 11.3884Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 748 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M19.3034 5.33716C17.9344 4.71103 16.4805 4.2547 14.9629 4C14.7719 4.32899 14.5596 4.77471 14.411 5.12492C12.7969 4.89144 11.1944 4.89144 9.60255 5.12492C9.45397 4.77471 9.2311 4.32899 9.05068 4C7.52251 4.2547 6.06861 4.71103 4.70915 5.33716C1.96053 9.39111 1.21766 13.3495 1.5891 17.2549C3.41443 18.5815 5.17612 19.388 6.90701 19.9187C7.33151 19.3456 7.71356 18.73 8.04255 18.0827C7.41641 17.8492 6.82211 17.5627 6.24904 17.2231C6.39762 17.117 6.5462 17.0003 6.68416 16.8835C10.1438 18.4648 13.8911 18.4648 17.3082 16.8835C17.4568 17.0003 17.5948 17.117 17.7434 17.2231C17.1703 17.5627 16.576 17.8492 15.9499 18.0827C16.2789 18.73 16.6609 19.3456 17.0854 19.9187C18.8152 19.388 20.5875 18.5815 22.4033 17.2549C22.8596 12.7341 21.6806 8.80747 19.3034 5.33716ZM8.5201 14.8459C7.48007 14.8459 6.63107 13.9014 6.63107 12.7447C6.63107 11.5879 7.45884 10.6434 8.5201 10.6434C9.57071 10.6434 10.4303 11.5879 10.4091 12.7447C10.4091 13.9014 9.57071 14.8459 8.5201 14.8459ZM15.4936 14.8459C14.4535 14.8459 13.6034 13.9014 13.6034 12.7447C13.6034 11.5879 14.4323 10.6434 15.4936 10.6434C16.5442 10.6434 17.4038 11.5879 17.3825 12.7447C17.3825 13.9014 16.5548 14.8459 15.4936 14.8459Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M12.001 2C6.47598 2 2.00098 6.475 2.00098 12C2.00098 16.425 4.86348 20.1625 8.83848 21.4875C9.33848 21.575 9.52598 21.275 9.52598 21.0125C9.52598 20.775 9.51348 19.9875 9.51348 19.15C7.00098 19.6125 6.35098 18.5375 6.15098 17.975C6.03848 17.6875 5.55098 16.8 5.12598 16.5625C4.77598 16.375 4.27598 15.9125 5.11348 15.9C5.90098 15.8875 6.46348 16.625 6.65098 16.925C7.55098 18.4375 8.98848 18.0125 9.56348 17.75C9.65098 17.1 9.91348 16.6625 10.201 16.4125C7.97598 16.1625 5.65098 15.3 5.65098 11.475C5.65098 10.3875 6.03848 9.4875 6.67598 8.7875C6.57598 8.5375 6.22598 7.5125 6.77598 6.1375C6.77598 6.1375 7.61348 5.875 9.52598 7.1625C10.326 6.9375 11.176 6.825 12.026 6.825C12.876 6.825 13.726 6.9375 14.526 7.1625C16.4385 5.8625 17.276 6.1375 17.276 6.1375C17.826 7.5125 17.476 8.5375 17.376 8.7875C18.0135 9.4875 18.401 10.375 18.401 11.475C18.401 15.3125 16.0635 16.1625 13.8385 16.4125C14.201 16.725 14.5135 17.325 14.5135 18.2625C14.5135 19.6 14.501 20.675 14.501 21.0125C14.501 21.275 14.6885 21.5875 15.1885 21.4875C19.259 20.1133 21.9999 16.2963 22.001 12C22.001 6.475 17.526 2 12.001 2Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M21.6634 9.98681L21.6354 9.91518L18.9164 2.8208C18.8612 2.68166 18.7634 2.56353 18.6371 2.48326C18.5098 2.40292 18.3607 2.36406 18.2104 2.37206C18.0601 2.38006 17.9159 2.43452 17.7979 2.52792C17.6809 2.62169 17.5966 2.75 17.5569 2.89453L15.7187 8.52037H8.28157L6.44336 2.89453C6.40366 2.75 6.31934 2.62169 6.20241 2.52792C6.08487 2.43389 5.94083 2.37903 5.79052 2.37102C5.64021 2.36301 5.49116 2.40226 5.36429 2.48326C5.2374 2.5632 5.13921 2.6814 5.08388 2.8208L2.36183 9.9245L2.33379 9.99512C1.94304 11.0182 1.895 12.1406 2.19691 13.1933C2.49882 14.2461 3.13436 15.1724 4.00794 15.8329L4.01832 15.8401L4.04221 15.8588L8.18917 18.9631L10.2393 20.5157L11.4856 21.4597C11.6319 21.5704 11.8104 21.6302 11.9939 21.6302C12.1774 21.6302 12.3559 21.5704 12.5023 21.4597L13.7486 20.5157L15.7997 18.9631L19.9706 15.8401L19.9819 15.8318C20.8585 15.1719 21.4966 14.2449 21.7999 13.1904C22.1033 12.1361 22.0553 11.0116 21.6634 9.98681Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M3.60972 1.81396L13.793 12L3.61082 22.1864C3.41776 22.1048 3.24866 21.962 3.13555 21.7667C3.0474 21.6144 3.00098 21.4416 3.00098 21.2656V2.73453C3.00098 2.32109 3.25188 1.96625 3.60972 1.81396ZM14.5 12.707L16.802 15.009L5.86498 21.342L14.5 12.707ZM17.699 9.50896L20.5061 11.1347C20.9841 11.4114 21.1473 12.0232 20.8705 12.5011C20.783 12.6523 20.6574 12.778 20.5061 12.8655L17.698 14.491L15.207 12L17.699 9.50896ZM5.86498 2.65796L16.803 8.98996L14.5 11.293L5.86498 2.65796Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 599 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M15.001 17C10.8588 17 7.50098 13.6421 7.50098 9.5C7.50098 5.35786 10.8588 2 15.001 2C19.1431 2 22.501 5.35786 22.501 9.5C22.501 13.6421 19.1431 17 15.001 17ZM2.00098 2H6.00098V22H2.00098V2Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 316 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M12.0052 2C6.75435 2 2.44852 6.05 2.04102 11.1975L7.40102 13.4125C7.85518 13.1033 8.40352 12.9208 8.99435 12.9208C9.04685 12.9208 9.09852 12.9242 9.15102 12.9258L11.5352 9.47417V9.425C11.5352 7.34583 13.2252 5.655 15.3052 5.655C17.3835 5.655 19.0752 7.3475 19.0752 9.4275C19.0752 11.5075 17.3835 13.1983 15.3052 13.1983H15.2177L11.821 15.6242C11.821 15.6675 11.8243 15.7117 11.8243 15.7567C11.8243 17.3192 10.5618 18.5867 8.99935 18.5867C7.63685 18.5867 6.48602 17.6092 6.22352 16.3142L2.38602 14.725C3.57435 18.9225 7.42768 22 12.0052 22C17.5277 22 22.0043 17.5225 22.0043 12C22.0043 6.4775 17.5268 2 12.0052 2ZM7.07852 16.6667C7.29685 17.1192 7.67352 17.4992 8.17352 17.7083C9.25435 18.1575 10.501 17.645 10.9502 16.5625C11.1693 16.0375 11.1702 15.4633 10.9543 14.9383C10.7385 14.4133 10.3293 14.0042 9.80685 13.7858C9.28685 13.5692 8.73185 13.5783 8.24185 13.7608L9.51102 14.2858C10.3077 14.6192 10.6852 15.5358 10.3518 16.3317C10.021 17.1292 9.10435 17.5067 8.30685 17.175L7.07852 16.6667ZM17.8185 9.4225C17.8185 8.0375 16.691 6.91 15.306 6.91C13.9185 6.91 12.7935 8.0375 12.7935 9.4225C12.7935 10.81 13.9185 11.935 15.306 11.935C16.6918 11.935 17.8185 10.81 17.8185 9.4225ZM15.3118 7.53C16.3527 7.53 17.2002 8.375 17.2002 9.41833C17.2002 10.4608 16.3527 11.3058 15.3118 11.3058C14.2677 11.3058 13.4243 10.4608 13.4243 9.41833C13.4243 8.375 14.2685 7.53 15.3118 7.53Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M16 8.24537V15.5C16 19.0899 13.0899 22 9.5 22C5.91015 22 3 19.0899 3 15.5C3 11.9101 5.91015 9 9.5 9C10.0163 9 10.5185 9.06019 11 9.17393V12.3368C10.5454 12.1208 10.0368 12 9.5 12C7.567 12 6 13.567 6 15.5C6 17.433 7.567 19 9.5 19C11.433 19 13 17.433 13 15.5V2H16C16 4.76142 18.2386 7 21 7V10C19.1081 10 17.3696 9.34328 16 8.24537Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 456 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M5.25098 3H18.751C19.993 3 21.001 4.00737 21.001 5.25V18.75C21.001 19.992 19.9935 21 18.751 21H5.25098C4.00898 21 3.00098 19.9925 3.00098 18.75V5.25C3.00098 4.008 4.00835 3 5.25098 3ZM13.171 6.42054V12.1795C13.171 12.7762 13.6545 13.26 14.2507 13.26H17.5812C18.1776 13.26 18.661 12.7765 18.661 12.1795V6.42054C18.661 5.82384 18.1774 5.34 17.5812 5.34H14.2507C13.6543 5.34 13.171 5.82348 13.171 6.42054ZM5.34098 6.42045V16.6796C5.34098 17.2762 5.82455 17.76 6.42071 17.76H9.75125C10.3476 17.76 10.831 17.277 10.831 16.6796V6.42045C10.831 5.82375 10.3474 5.34 9.75125 5.34H6.42071C5.82428 5.34 5.34098 5.82303 5.34098 6.42045Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 751 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M21.001 3V14.7391L16.3053 19.4348H12.3923L9.95523 21.7826H6.91402V19.4348H3.00098V6.13043L4.2281 3H21.001ZM19.4358 4.56522H6.13141V16.3043H9.26185V18.6522L11.6097 16.3043H16.3053L19.4358 13.1739V4.56522ZM16.3053 7.69565V12.3913H14.7401V7.69565H16.3053ZM12.3923 7.69565V12.3913H10.8271V7.69565H12.3923Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 428 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M18.2048 2.25H21.5128L14.2858 10.51L22.7878 21.75H16.1308L10.9168 14.933L4.95084 21.75H1.64084L9.37084 12.915L1.21484 2.25H8.04084L12.7538 8.481L18.2048 2.25ZM17.0438 19.77H18.8768L7.04484 4.126H5.07784L17.0438 19.77Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 344 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M22.2125 5.65605C21.4491 5.99375 20.6395 6.21555 19.8106 6.31411C20.6839 5.79132 21.3374 4.9689 21.6493 4.00005C20.8287 4.48761 19.9305 4.83077 18.9938 5.01461C18.2031 4.17106 17.098 3.69303 15.9418 3.69434C13.6326 3.69434 11.7597 5.56661 11.7597 7.87683C11.7597 8.20458 11.7973 8.52242 11.8676 8.82909C8.39047 8.65404 5.31007 6.99005 3.24678 4.45941C2.87529 5.09767 2.68005 5.82318 2.68104 6.56167C2.68104 8.01259 3.4196 9.29324 4.54149 10.043C3.87737 10.022 3.22788 9.84264 2.64718 9.51973C2.64654 9.5373 2.64654 9.55487 2.64654 9.57148C2.64654 11.5984 4.08819 13.2892 6.00199 13.6731C5.6428 13.7703 5.27232 13.8194 4.90022 13.8191C4.62997 13.8191 4.36771 13.7942 4.11279 13.7453C4.64531 15.4065 6.18886 16.6159 8.0196 16.6491C6.53813 17.8118 4.70869 18.4426 2.82543 18.4399C2.49212 18.4402 2.15909 18.4205 1.82812 18.3811C3.74004 19.6102 5.96552 20.2625 8.23842 20.2601C15.9316 20.2601 20.138 13.8875 20.138 8.36111C20.138 8.1803 20.1336 7.99886 20.1256 7.81997C20.9443 7.22845 21.651 6.49567 22.2125 5.65605Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M1.17444 8.30112C0.892531 7.88758 0.922443 7.88758 1.50184 7.37867C2.73388 6.29651 3.8964 5.11316 5.23826 4.1668C6.45346 3.31485 8.06417 2.7652 9.16466 4.1202C10.1791 5.36886 10.203 7.26157 10.4599 8.76952C10.7168 10.3336 10.963 11.9336 11.5114 13.4308C11.6632 13.8514 11.9535 14.6472 12.4793 14.7141C13.1568 14.8073 13.8474 13.6184 14.1617 13.1739C14.979 11.9945 16.0867 10.4053 15.9469 8.88781C15.8094 7.27591 14.0685 7.57941 12.9811 7.96416C13.1556 6.1551 14.8392 4.1214 16.4607 3.43314C18.1801 2.71979 20.7372 2.73174 21.6011 4.67105C22.5235 6.77286 21.6943 9.21402 20.6894 11.1187C19.5925 13.187 18.1801 15.1012 16.671 16.8888C15.3399 18.4768 13.765 20.2189 11.7803 20.9777C9.51357 21.8416 8.17052 20.158 7.39862 18.2079C6.55622 16.0846 6.13682 13.702 5.52862 11.4915C5.27291 10.5571 4.96941 9.49362 4.3624 8.72292C3.57019 7.72757 2.67044 8.66317 1.88779 9.19968C1.61894 8.93322 1.39669 8.59267 1.17444 8.30112Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM9.71002 19.6674C8.74743 17.6259 8.15732 15.3742 8.02731 13H4.06189C4.458 16.1765 6.71639 18.7747 9.71002 19.6674ZM10.0307 13C10.1811 15.4388 10.8778 17.7297 12 19.752C13.1222 17.7297 13.8189 15.4388 13.9693 13H10.0307ZM19.9381 13H15.9727C15.8427 15.3742 15.2526 17.6259 14.29 19.6674C17.2836 18.7747 19.542 16.1765 19.9381 13ZM4.06189 11H8.02731C8.15732 8.62577 8.74743 6.37407 9.71002 4.33256C6.71639 5.22533 4.458 7.8235 4.06189 11ZM10.0307 11H13.9693C13.8189 8.56122 13.1222 6.27025 12 4.24799C10.8778 6.27025 10.1811 8.56122 10.0307 11ZM14.29 4.33256C15.2526 6.37407 15.8427 8.62577 15.9727 11H19.9381C19.542 7.8235 17.2836 5.22533 14.29 4.33256Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 891 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M12.2439 4C12.778 4.00294 14.1143 4.01586 15.5341 4.07273L16.0375 4.09468C17.467 4.16236 18.8953 4.27798 19.6037 4.4755C20.5486 4.74095 21.2913 5.5155 21.5423 6.49732C21.942 8.05641 21.992 11.0994 21.9982 11.8358L21.9991 11.9884L21.9991 11.9991C21.9991 11.9991 21.9991 12.0028 21.9991 12.0099L21.9982 12.1625C21.992 12.8989 21.942 15.9419 21.5423 17.501C21.2878 18.4864 20.5451 19.261 19.6037 19.5228C18.8953 19.7203 17.467 19.8359 16.0375 19.9036L15.5341 19.9255C14.1143 19.9824 12.778 19.9953 12.2439 19.9983L12.0095 19.9991L11.9991 19.9991C11.9991 19.9991 11.9956 19.9991 11.9887 19.9991L11.7545 19.9983C10.6241 19.9921 5.89772 19.941 4.39451 19.5228C3.4496 19.2573 2.70692 18.4828 2.45587 17.501C2.0562 15.9419 2.00624 12.8989 2 12.1625V11.8358C2.00624 11.0994 2.0562 8.05641 2.45587 6.49732C2.7104 5.51186 3.45308 4.73732 4.39451 4.4755C5.89772 4.05723 10.6241 4.00622 11.7545 4H12.2439ZM9.99911 8.49914V15.4991L15.9991 11.9991L9.99911 8.49914Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -106,6 +106,9 @@ func ProjectAndStuffToTemplate(p *hmndata.ProjectAndStuff, url string, theme str
|
|||
for _, o := range p.Owners {
|
||||
res.Owners = append(res.Owners, UserToTemplate(o, theme))
|
||||
}
|
||||
if p.HeaderImage != nil {
|
||||
res.HeaderImage = hmnurl.BuildS3Asset(p.HeaderImage.S3Key)
|
||||
}
|
||||
return res
|
||||
}
|
||||
|
||||
|
|
@ -129,7 +132,7 @@ func ProjectToProjectSettings(
|
|||
p *models.Project,
|
||||
owners []*models.User,
|
||||
tag string,
|
||||
lightLogoUrl, darkLogoUrl string,
|
||||
lightLogo, darkLogo, headerImage *models.Asset,
|
||||
currentTheme string,
|
||||
) ProjectSettings {
|
||||
ownerUsers := make([]User, 0, len(owners))
|
||||
|
|
@ -147,8 +150,26 @@ func ProjectToProjectSettings(
|
|||
Blurb: p.Blurb,
|
||||
Description: p.Description,
|
||||
Owners: ownerUsers,
|
||||
LightLogo: lightLogoUrl,
|
||||
DarkLogo: darkLogoUrl,
|
||||
LightLogo: AssetToTemplate(lightLogo),
|
||||
DarkLogo: AssetToTemplate(darkLogo),
|
||||
HeaderImage: AssetToTemplate(headerImage),
|
||||
}
|
||||
}
|
||||
|
||||
func AssetToTemplate(a *models.Asset) *Asset {
|
||||
if a == nil {
|
||||
return nil
|
||||
}
|
||||
|
||||
return &Asset{
|
||||
Url: hmnurl.BuildS3Asset(a.S3Key),
|
||||
|
||||
ID: a.ID.String(),
|
||||
Filename: a.Filename,
|
||||
Size: a.Size,
|
||||
MimeType: a.MimeType,
|
||||
Width: a.Width,
|
||||
Height: a.Height,
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -236,77 +257,102 @@ type LinkService struct {
|
|||
}
|
||||
|
||||
var LinkServices = []LinkService{
|
||||
// {
|
||||
// Name: "itch.io",
|
||||
// IconName: "itch",
|
||||
// Regex: regexp.MustCompile(`://(?P<username>[\w-]+)\.itch\.io`),
|
||||
// },
|
||||
{
|
||||
Name: "YouTube",
|
||||
IconName: "youtube",
|
||||
Regex: regexp.MustCompile(`youtube\.com/(c/)?(?P<userdata>[\w/-]+)$`),
|
||||
Name: "App Store",
|
||||
IconName: "app-store",
|
||||
Regex: regexp.MustCompile(`^https?://apps.apple.com`),
|
||||
},
|
||||
{
|
||||
Name: "Twitter",
|
||||
IconName: "twitter",
|
||||
Regex: regexp.MustCompile(`twitter\.com/(?P<userdata>\w+)$`),
|
||||
Name: "Bluesky",
|
||||
IconName: "bluesky",
|
||||
Regex: regexp.MustCompile(`^https?://bsky.app/profile/(?P<username>[\w.-]+)$`),
|
||||
},
|
||||
{
|
||||
Name: "Discord",
|
||||
IconName: "discord",
|
||||
Regex: regexp.MustCompile(`^https?://discord\.gg`),
|
||||
},
|
||||
{
|
||||
Name: "GitHub",
|
||||
IconName: "github",
|
||||
Regex: regexp.MustCompile(`github\.com/(?P<userdata>[\w/-]+)$`),
|
||||
Regex: regexp.MustCompile(`^https?://github\.com/(?P<username>[\w/-]+)`),
|
||||
},
|
||||
{
|
||||
Name: "Twitch",
|
||||
IconName: "twitch",
|
||||
Regex: regexp.MustCompile(`twitch\.tv/(?P<userdata>[\w/-]+)$`),
|
||||
Name: "GitLab",
|
||||
IconName: "gitlab",
|
||||
Regex: regexp.MustCompile(`^https?://gitlab\.com/(?P<username>[\w/-]+)`),
|
||||
},
|
||||
{
|
||||
Name: "Hitbox",
|
||||
IconName: "hitbox",
|
||||
Regex: regexp.MustCompile(`hitbox\.tv/(?P<userdata>[\w/-]+)$`),
|
||||
Name: "Google Play",
|
||||
IconName: "google-play",
|
||||
Regex: regexp.MustCompile(`^https?://play\.google\.com`),
|
||||
},
|
||||
{
|
||||
Name: "Patreon",
|
||||
IconName: "patreon",
|
||||
Regex: regexp.MustCompile(`patreon\.com/(?P<userdata>[\w/-]+)$`),
|
||||
Regex: regexp.MustCompile(`^https?://patreon\.com/(?P<username>[\w-]+)`),
|
||||
},
|
||||
{
|
||||
Name: "SoundCloud",
|
||||
IconName: "soundcloud",
|
||||
Regex: regexp.MustCompile(`soundcloud\.com/(?P<userdata>[\w/-]+)$`),
|
||||
Name: "Twitch",
|
||||
IconName: "twitch",
|
||||
Regex: regexp.MustCompile(`^https?://twitch\.tv/(?P<username>[\w/-]+)`),
|
||||
},
|
||||
{
|
||||
Name: "itch.io",
|
||||
IconName: "itch",
|
||||
Regex: regexp.MustCompile(`(?P<userdata>[\w/-]+)\.itch\.io/?$`),
|
||||
Name: "Twitter",
|
||||
IconName: "twitter",
|
||||
Regex: regexp.MustCompile(`^https?://(twitter|x)\.com/(?P<username>\w+)`),
|
||||
},
|
||||
{
|
||||
Name: "Vimeo",
|
||||
IconName: "vimeo",
|
||||
Regex: regexp.MustCompile(`^https?://vimeo\.com/(?P<username>\w+)`),
|
||||
},
|
||||
{
|
||||
Name: "YouTube",
|
||||
IconName: "youtube",
|
||||
Regex: regexp.MustCompile(`youtube\.com/(c/)?(?P<username>[@\w/-]+)$`),
|
||||
},
|
||||
}
|
||||
|
||||
func ParseKnownServicesForLink(link *models.Link) (service LinkService, userData string) {
|
||||
func ParseKnownServicesForLink(link *models.Link) (service LinkService, username string) {
|
||||
for _, svc := range LinkServices {
|
||||
match := svc.Regex.FindStringSubmatch(link.URL)
|
||||
if match != nil {
|
||||
return svc, match[svc.Regex.SubexpIndex("userdata")]
|
||||
username := ""
|
||||
if idx := svc.Regex.SubexpIndex("username"); idx >= 0 {
|
||||
username = match[idx]
|
||||
}
|
||||
|
||||
return svc, username
|
||||
}
|
||||
}
|
||||
return LinkService{}, ""
|
||||
return LinkService{
|
||||
IconName: "website",
|
||||
}, ""
|
||||
}
|
||||
|
||||
func LinkToTemplate(link *models.Link) Link {
|
||||
tlink := Link{
|
||||
Name: link.Name,
|
||||
Url: link.URL,
|
||||
LinkText: link.URL,
|
||||
service, username := ParseKnownServicesForLink(link)
|
||||
return Link{
|
||||
Name: link.Name,
|
||||
Url: link.URL,
|
||||
ServiceName: service.Name,
|
||||
Icon: service.IconName,
|
||||
Username: username,
|
||||
}
|
||||
}
|
||||
|
||||
service, userData := ParseKnownServicesForLink(link)
|
||||
if tlink.Name == "" && service.Name != "" {
|
||||
tlink.Name = service.Name
|
||||
func LinksToTemplate(links []*models.Link) []Link {
|
||||
res := make([]Link, len(links))
|
||||
for i, link := range links {
|
||||
res[i] = LinkToTemplate(link)
|
||||
}
|
||||
if service.IconName != "" {
|
||||
tlink.Icon = service.IconName
|
||||
}
|
||||
if userData != "" {
|
||||
tlink.LinkText = userData
|
||||
}
|
||||
|
||||
return tlink
|
||||
return res
|
||||
}
|
||||
|
||||
func TimelineItemsToJSON(items []TimelineItem) string {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
{{ define "content" }}
|
||||
<div class="post-content">
|
||||
<div class="mw7 ph3 ph0-ns margin-center">
|
||||
<div class="mw7 ph3 ph0-ns m--center">
|
||||
<h3>
|
||||
We're trying to put programming back on the right track.
|
||||
</h3>
|
||||
|
|
@ -16,14 +16,14 @@
|
|||
The Handmade Network's activities are funded by the <a href="{{ .FoundationUrl }}">Handmade Software Foundation</a>, a (soon-to-be) 501(c)(3) nonprofit corporation.
|
||||
</p> -->
|
||||
<p>
|
||||
We can teach programmers how things actually work. We can teach users to expect better. We can build the best software you've ever seen. <a href="{{ .RolesUrl }}"><b>Join us.</b></a>
|
||||
We can teach programmers how things actually work. We can teach users to expect better. We can build the best software you've ever seen. <b>Join us.</b>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="ph3 ph0-ns mt4">
|
||||
<h2>Leadership</h2>
|
||||
<div class="flex flex-column flex-row-ns g3">
|
||||
<div class="flex-fair pa3 bg--dim br3">
|
||||
<div class="flex-fair pa3 bg3 br3">
|
||||
<h3>Ben Visness</h3>
|
||||
<h4>Lead<!--, Foundation President--></h4>
|
||||
<p>
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
</p> -->
|
||||
</div>
|
||||
|
||||
<div class="flex-fair pa3 bg--dim br3">
|
||||
<div class="flex-fair pa3 bg3 br3">
|
||||
<h3>Asaf Gartner</h3>
|
||||
<h4>Admin<!--, Foundation Secretary--></h4>
|
||||
<p>
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex-fair pa3 bg--dim br3">
|
||||
<div class="flex-fair pa3 bg3 br3">
|
||||
<h3>Colin Davidson</h3>
|
||||
<h4>Admin<!--, Foundation Treasurer--></h4>
|
||||
<p>
|
||||
|
|
@ -67,34 +67,11 @@
|
|||
<div class="ph3 ph0-ns mt4">
|
||||
<h2>Key Contributors</h2>
|
||||
<div class="flex flex-column flex-row-ns g3">
|
||||
<div class="flex-fair pa3 bg--dim br3">
|
||||
<div class="flex-fair pa3 bg3 br3">
|
||||
<h3>Martin Fouilleul</h3>
|
||||
<h4>[Secret Project] Lead</h4>
|
||||
<p>Martin is a PhD student at <a href="https://www.ircam.fr/">Ircam</a>, researching programming languages and models for distributed temporal interactions in music and performing arts software. He is also a former sound engineer and computer music designer.</p>
|
||||
<p>Right now he is working behind the scenes on a secret Handmade Network project, to be revealed at a later date.</p>
|
||||
</div>
|
||||
<div class="flex-fair pa3 bg--dim br3">
|
||||
<h3>???</h3>
|
||||
<h4>Education Lead</h4>
|
||||
<p>
|
||||
<strong>This could be you!</strong> Education is one of our flagship initiatives, and we are looking for someone to lead it. If you are excited about programming education and want to help out, please <a href="{{ .EducationLeadUrl }}">learn more and get in touch!</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-column flex-row-ns g3 mt3">
|
||||
<div class="flex-fair pa3 bg--dim br3">
|
||||
<h3>???</h3>
|
||||
<h4>Advocacy Lead</h4>
|
||||
<p>
|
||||
<strong>This could be you!</strong> We want to go out into the world and advocate for better software and better programming practices. We need a strong communicator who can lead this for us. If this excites you, please <a href="{{ .AdvocacyLeadUrl }}">learn more and get in touch!</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex-fair pa3 bg--dim br3">
|
||||
<h3>???</h3>
|
||||
<h4>Design Lead</h4>
|
||||
<p>
|
||||
<strong>This could be you!</strong> Building software for people means designing software for people. We are looking for someone with visual and UX design skills to design website features, event art, livestreaming assets, educational graphics, and more. If any of this sounds interesting to you, <a href="{{ .DesignLeadUrl }}">learn more and get in touch!</a>
|
||||
</p>
|
||||
<h4>Orca Lead</h4>
|
||||
<p>Martin is a systems programmer, researcher, and PhD with experience in programming languages and models for distributed temporal interactions in music and performing arts software. He is also a former sound engineer and computer music designer.</p>
|
||||
<p>He is the project lead on <a href="https://orca-app.dev/">Orca</a>, a new platform for WebAssembly applications outside the browser.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<div class="optionbar">
|
||||
<div class="options">
|
||||
{{ if .CanCreatePost }}
|
||||
<a class="button" href="{{ .NewPostUrl }}"><span class="big pr1">+</span> Create Post</a>
|
||||
<a class="option" href="{{ .NewPostUrl }}"><span class="big pr1">+</span> Create Post</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="options">
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
{{ if .Posts }}
|
||||
{{ range .Posts }}
|
||||
<div class="flex items-start ph3 pv3 background-even">
|
||||
<img class="avatar-icon mr2" src="{{ .Author.AvatarUrl }}">
|
||||
<img class="avatar mr2" src="{{ .Author.AvatarUrl }}">
|
||||
<div class="flex-grow-1 overflow-hidden">
|
||||
<div class="title mb1"><a href="{{ .Url }}">{{ .Title }}</a></div>
|
||||
<div class="details">
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
{{ template "base.html" . }}
|
||||
|
||||
{{ define "content" }}
|
||||
<div class="mw7 margin-center tl post ph3 ph0-ns">
|
||||
<div class="mw7 m--center tl post ph3 ph0-ns">
|
||||
<h1>{{ .Thread.Title }}</h1>
|
||||
{{ with .MainPost }}
|
||||
<div class="flex justify-between items-center mt2 mb3">
|
||||
<div class="flex items-center">
|
||||
<div class="avatar-icon contain bg-center" style="background-image:url('{{ .Author.AvatarUrl }}');"></div>
|
||||
<div class="avatar contain bg-center" style="background-image:url('{{ .Author.AvatarUrl }}');"></div>
|
||||
<div class="flex flex-column ml2">
|
||||
<div>
|
||||
<a class="username" href="{{ .Author.ProfileUrl }}" target="_blank">{{ .Author.Name }}</a>
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
{{ range .Comments }}
|
||||
<div class="pa3 flex items-start background-even">
|
||||
<div>
|
||||
<div class="avatar-icon contain bg-center" style="background-image:url('{{ .Author.AvatarUrl }}');"></div>
|
||||
<div class="avatar contain bg-center" style="background-image:url('{{ .Author.AvatarUrl }}');"></div>
|
||||
</div>
|
||||
<div class="pl3 flex flex-column w-100">
|
||||
<div class="flex justify-between">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{{ template "base.html" . }}
|
||||
|
||||
{{ define "content" }}
|
||||
<div class="mw7 margin-center">
|
||||
<div class="mw7 m--center">
|
||||
<h3 class="mb3">Are you sure you want to delete this post?</h3>
|
||||
{{ template "forum_post_standalone.html" .Post }}
|
||||
<form action="{{ .SubmitUrl }}" method="POST" class="pv3 flex justify-end">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{{ template "base.html" . }}
|
||||
|
||||
{{ define "content" }}
|
||||
<div class="center-layout mw7 mv3 ph3 ph0-ns post-content">
|
||||
<div class="m--center mw7 mv3 ph3 ph0-ns post-content">
|
||||
<h1>Handmade Guide to Community Interaction</h1>
|
||||
<h2>Our Philosophy</h2>
|
||||
<p>The Handmade community strives to create an environment conducive to innovation, education, and constructive discussion. To that end, we expect members of the community to respect the following set of principles to maintain civil discourse and create an inclusive environment.</p>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
{{ define "content" }}
|
||||
{{ $bannerclass := "overflow-hidden br2 mt2 h4 h5-ns cover bg-center" }}
|
||||
<div class="center-layout mw7 ph3 ph0-ns post-content flex flex-column g3">
|
||||
<div class="m--center mw7 ph3 ph0-ns post-content flex flex-column g3">
|
||||
<div class="fronke">
|
||||
<a href="https://handmadehero.org/conference">
|
||||
<h2>HandmadeCon</h2>
|
||||
|
|
|
|||
|
|
@ -29,28 +29,6 @@
|
|||
{{ if .CanEditPostTitle }}
|
||||
<input id="title" class="b w-100 mb1" name="title" type="text" placeholder="Post title..." value="{{ .PostTitle }}" />
|
||||
{{ end }}
|
||||
{{/* TODO: Reintroduce the toolbar in a way that makes sense for Markdown */}}
|
||||
{{/*
|
||||
<div class="toolbar" id="toolbar">
|
||||
<input type="button" id="bold" value="B" />
|
||||
<input type="button" id="italic" value="I" />
|
||||
<input type="button" id="underline" value="U" />
|
||||
<input type="button" id="monospace" value="monospace" />
|
||||
<input type="button" id="url" value="url" />
|
||||
<input type="button" id="img" value="img" />
|
||||
<input type="button" id="code" value="code" />
|
||||
<input type="button" id="quote_simple" value="quote (anon)" />
|
||||
<input type="button" id="quote_member" value="quote (member)" />
|
||||
<input type="button" id="spoiler" value="spoiler" />
|
||||
<input type="button" id="lalign" value="Left" />
|
||||
<input type="button" id="calign" value="Center" />
|
||||
<input type="button" id="ralign" value="Right" />
|
||||
<input type="button" id="ulist" value="ul" />
|
||||
<input type="button" id="olist" value="ol" />
|
||||
<input type="button" id="litem" value="li" />
|
||||
<input type="button" id="youtube" value="youtube" />
|
||||
</div>
|
||||
*/}}
|
||||
<textarea id="editor" class="w-100 h6 minh-6 pa2 mono lh-copy" name="body">{{ .EditInitialContents }}</textarea>
|
||||
|
||||
<div class="flex justify-end items-center mt2">
|
||||
|
|
@ -82,7 +60,7 @@
|
|||
|
||||
{{ if .ShowEduOptions }}
|
||||
{{/* Hope you have a .Article field! */}}
|
||||
<div class="bg--dim br3 pa3 mt3">
|
||||
<div class="bg3 br3 pa3 mt3">
|
||||
<h4>Education Options</h4>
|
||||
<div class="mb2">
|
||||
<label for="slug">Slug:</label>
|
||||
|
|
@ -108,7 +86,7 @@
|
|||
</div>
|
||||
{{ end }}
|
||||
</form>
|
||||
<div id="preview-container" class="post post-preview mathjax flex-fair-ns overflow-auto mv3 mv0-ns ml3-ns pa3 br3 bg--dim {{ .PreviewClass }}">
|
||||
<div id="preview-container" class="post post-preview mathjax flex-fair-ns overflow-auto mv3 mv0-ns ml3-ns pa3 br3 bg3 {{ .PreviewClass }}">
|
||||
<div id="preview" class="post-content"></div>
|
||||
</div>
|
||||
<input type="file" multiple name="file_input" id="file_input" class="dn" />{{/* NOTE(asaf): Placing this outside the form to avoid submitting it to the server by accident */}}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
{{ template "base.html" . }}
|
||||
|
||||
{{ define "content" }}
|
||||
<div class="mw7 margin-center">
|
||||
<div class="mw7 m--center">
|
||||
<h3 class="mb3">Are you sure you want to delete this article?</h3>
|
||||
<div class="bg--dim pa3 br3 tl post-content">
|
||||
<div class="bg3 pa3 br3 tl post-content">
|
||||
<h1>{{ .Article.Title }}</h1>
|
||||
{{ .Article.Content }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<p>Dive into one of these topics and start learning.</p>
|
||||
|
||||
<div class="flex flex-column flex-row-ns g3 mt3 mb4">
|
||||
<a href="#compilers" class="edu-topic db flex-fair-ns bg--dim br3 overflow-hidden c--inherit flex flex-column">
|
||||
<a href="#compilers" class="edu-topic db flex-fair-ns bg3 br3 overflow-hidden c--inherit flex flex-column">
|
||||
<img src="{{ static "education/compilers.jpg" }}">
|
||||
<div class="pa3">
|
||||
<h2>Compilers</h2>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#networking" class="edu-topic db flex-fair-ns bg--dim br3 overflow-hidden c--inherit flex flex-column">
|
||||
<a href="#networking" class="edu-topic db flex-fair-ns bg3 br3 overflow-hidden c--inherit flex flex-column">
|
||||
<img src="{{ static "education/networking.jpg" }}">
|
||||
<div class="pa3">
|
||||
<h2>Networking</h2>
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#time" class="edu-topic db flex-fair-ns bg--dim br3 overflow-hidden c--inherit flex flex-column">
|
||||
<a href="#time" class="edu-topic db flex-fair-ns bg3 br3 overflow-hidden c--inherit flex flex-column">
|
||||
<img src="{{ static "education/time.jpg" }}">
|
||||
<div class="pa3">
|
||||
<h2>Time</h2>
|
||||
|
|
@ -39,17 +39,17 @@
|
|||
<h2>What makes us different?</h2>
|
||||
|
||||
<div class="flex flex-column flex-row-ns g3 mb4">
|
||||
<div class="flex-fair bg--dim pa3 br2">
|
||||
<div class="flex-fair bg3 pa3 br2">
|
||||
<h3>Real material.</h3>
|
||||
|
||||
We equip you to go straight to the source. Our guides are structured around books and articles written by experts. We give you high-quality material to read, and the context to understand it. You do the rest.
|
||||
</div>
|
||||
<div class="flex-fair bg--dim pa3 br3">
|
||||
<div class="flex-fair bg3 pa3 br3">
|
||||
<h3>For any skill level.</h3>
|
||||
|
||||
Each guide runs the gamut from beginner to advanced. Whether you're new to a topic or have been practicing it for years, read through our guides and you'll find something new.
|
||||
</div>
|
||||
<div class="flex-fair bg--dim pa3 br3">
|
||||
<div class="flex-fair bg3 pa3 br3">
|
||||
<h3>Designed for programmers.</h3>
|
||||
|
||||
We're not here to teach you how to program. We're here to teach you a specific topic.
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
<h2>All Topics</h2>
|
||||
|
||||
{{ range .Courses }}
|
||||
<div id="{{ .Slug }}" class="edu-course mv3 bg--dim pa3 br3">
|
||||
<div id="{{ .Slug }}" class="edu-course mv3 bg3 pa3 br3">
|
||||
<h3>{{ .Name }}</h3>
|
||||
<div class="overflow-hidden">
|
||||
<div class="edu-articles ml3 pl3">
|
||||
|
|
|
|||
|
|
@ -1,39 +1,6 @@
|
|||
{{ template "base.html" . }}
|
||||
|
||||
{{ define "extrahead" }}
|
||||
<style type="text/css">
|
||||
.queryContainer {
|
||||
width: 80%;
|
||||
margin: 15px auto 20px auto;
|
||||
display: flex;
|
||||
flex-direction: horizontal;
|
||||
}
|
||||
|
||||
.queryContainer input {
|
||||
height:3em;
|
||||
}
|
||||
|
||||
.queryContainer #query {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.queryContainer #submit_button {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
padding:0px 10px;
|
||||
vertical-align:middle;
|
||||
margin:0px;
|
||||
}
|
||||
#annotationContainer {
|
||||
left: -10px;
|
||||
margin: 0px;
|
||||
margin-left: -20px;
|
||||
padding: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0px transparent none;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" type="text/css" href="{{ static "annotations/cinera.css" }}">
|
||||
<link rel="stylesheet" type="text/css" href="{{ static (strjoin "annotations/cinera__" .Project.Subdomain ".css") }}">
|
||||
<link rel="stylesheet" type="text/css" href="{{ static "annotations/cinera_topics.css" }}">
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
</div>
|
||||
{{ range .Posts }}
|
||||
<div class="post-list-item flex items-center ph3 pv2 {{ if .Unread }}unread{{ else }}read{{ end }} {{ .Classes }}">
|
||||
<img class="avatar-icon mr2" src="{{ .User.AvatarUrl }}">
|
||||
<img class="avatar mr2" src="{{ .User.AvatarUrl }}">
|
||||
<div class="flex-grow-1 overflow-hidden">
|
||||
{{ template "breadcrumbs.html" .Breadcrumbs }}
|
||||
<div class="title nowrap truncate"><a href="{{ .Url }}" title="{{ .Preview }}">{{ if .PostTypePrefix }}{{ .PostTypePrefix }}: {{ end }}{{ .Title }}</a></div>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<div class="mt3 mw7">
|
||||
{{ range .Fishbowls }}
|
||||
<div class="br2 bg--dim pa3 mb2">
|
||||
<div class="br2 bg3 pa3 mb2">
|
||||
{{ if .Valid }}
|
||||
<a href="{{ .Url }}"><h3 class="f4 ma0">{{ .Fishbowl.Title }}</h3></a>
|
||||
{{ else }}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{{ template "base.html" . }}
|
||||
|
||||
{{ define "content" }}
|
||||
<div class="mw7 margin-center">
|
||||
<div class="mw7 m--center">
|
||||
<h3 class="mb3">Are you sure you want to delete this post?</h3>
|
||||
{{ template "forum_post_standalone.html" .Post }}
|
||||
<form action="{{ .SubmitUrl }}" method="POST" class="pv3 flex justify-end">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{{ template "base.html" . }}
|
||||
|
||||
{{ define "content" }}
|
||||
<div class="post-content mw7 ph3 ph0-ns margin-center">
|
||||
<div class="post-content mw7 ph3 ph0-ns m--center">
|
||||
<h1>Handmade Software Foundation</h1>
|
||||
<!-- <div> -->
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
<footer>
|
||||
<div class="mv5 h3 fill-current link--normal">
|
||||
<a href="{{ .Header.HMNHomepageUrl }}">{{ svg "hmn_circuit" }}</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
@ -6,29 +6,26 @@
|
|||
{{ $footerClasses := "ma0 pa0 dib-ns" }}
|
||||
<li class="{{ $footerClasses }}">
|
||||
<a href="{{ .Footer.HomepageUrl }}">Main Page</a>
|
||||
<span class="c--dimmer dn di-ns"> / </span>
|
||||
</li>
|
||||
<li class="{{ $footerClasses }}">
|
||||
<a href="{{ .Footer.ManifestoUrl }}">Manifesto</a>
|
||||
<span class="c--dimmer dn di-ns"> / </span>
|
||||
</li>
|
||||
<li class="{{ $footerClasses }}">
|
||||
<a href="{{ .Footer.AboutUrl }}">About</a>
|
||||
</li>
|
||||
<li class="{{ $footerClasses }}">
|
||||
<a href="{{ .Footer.RolesUrl }}">Roles</a>
|
||||
<span class="c--dimmer dn di-ns"> / </span>
|
||||
</li>
|
||||
<li class="{{ $footerClasses }}">
|
||||
<a href="{{ .Footer.ProjectIndexUrl }}">Projects</a>
|
||||
<span class="c--dimmer dn di-ns"> / </span>
|
||||
</li>
|
||||
<li class="{{ $footerClasses }}">
|
||||
<a href="{{ .Footer.CommunicationGuidelinesUrl }}">Communication Guidelines</a>
|
||||
<span class="c--dimmer dn di-ns"> / </span>
|
||||
</li>
|
||||
<li class="{{ $footerClasses }}">
|
||||
<a href="{{ .Footer.ContactUrl }}">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form onsubmit="this.querySelector('input[name=q]').value = this.querySelector('#searchstring').value + ' site:handmade.network';" class="ma0 mt3 bg--card pa1 br2 dib" method="GET" action="{{ .Footer.SearchActionUrl }}" target="_blank">
|
||||
<input type="hidden" name="q" />
|
||||
<input class="site-search bn lite pa2 fira" type="text" id="searchstring" value="" placeholder="Search with DuckDuckGo" size="18" />
|
||||
<input id="search_button_homepage" type="submit" value="Go"/>
|
||||
</form>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="bg--dim pa3 br3 tl">
|
||||
<div class="bg3 pa3 br3 tl">
|
||||
<div class="w-100 flex items-center">
|
||||
<div class="w-20 mw3 w3">
|
||||
<!-- Mobile avatar -->
|
||||
|
|
|
|||
|
|
@ -0,0 +1,103 @@
|
|||
<header id="site-header" class="flex flex-row items-center link--normal">
|
||||
<a href="{{ .Header.HMNHomepageUrl }}" class="hmn-logo flex-shrink-0">
|
||||
Handmade
|
||||
</a>
|
||||
<div class="flex-grow-1 flex-shrink-1"></div>
|
||||
<div class="header-nav flex flex-row items-center lh-solid f6">
|
||||
<a href="{{ .Header.ProjectIndexUrl }}">Projects</a>
|
||||
<a href="{{ .Header.JamsUrl }}">Jams</a>
|
||||
<div class="root-item">
|
||||
<a aria-expanded="false" aria-controls="events-submenu" class="menu-dropdown-js" href="#">
|
||||
Events <div class="menu-chevron svgicon">{{ svg "chevron-down-thick" }}</div>
|
||||
</a>
|
||||
<div class="submenu" id="events-submenu">
|
||||
<a href="{{ .Header.JamsUrl }}">Jams</a>
|
||||
<a href="https://twitch.tv/HandmadeNetwork">Unwind</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="root-item">
|
||||
<a aria-expanded="false" aria-controls="resource-submenu" class="menu-dropdown-js" href="#">
|
||||
Resources <div class="menu-chevron svgicon">{{ svg "chevron-down-thick" }}</div>
|
||||
</a>
|
||||
<div class="submenu" id="resource-submenu">
|
||||
<a href="{{ .Header.ForumsUrl }}">Forums</a>
|
||||
<a href="{{ .Header.FishbowlUrl }}">Fishbowls</a>
|
||||
<a href="{{ .Header.PodcastUrl }}">Podcast</a>
|
||||
<!-- TODO: This is not a "resource", nor do we want to imply that we own Handmade Cities. -->
|
||||
<a href="https://handmadecities.com/media/">Handmade Cities</a>
|
||||
<!-- TODO: What about our existing conferences page? How to properly reference HandmadeCon? Does this give enough context? (Make sure to reference Casey's email to me and Abner.) -->
|
||||
<a href="https://guide.handmadehero.org/hmcon/">HandmadeCon</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="root-item">
|
||||
<a aria-expanded="false" aria-controls="about-submenu" class="menu-dropdown-js" href="#">
|
||||
About <div class="menu-chevron svgicon">{{ svg "chevron-down-thick" }}</div>
|
||||
</a>
|
||||
<div class="submenu" id="about-submenu">
|
||||
<a href="{{ .Header.ManifestoUrl }}">Manifesto</a>
|
||||
<a href="{{ .Header.AboutUrl }}">About the Team</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="db ph3 pv2 flex" href="{{ or .Header.UserProfileUrl .LoginPageUrl }}">
|
||||
<img class="avatar" src="{{ with .User }}{{ .AvatarUrl }}{{ end }}">
|
||||
</a>
|
||||
</header>
|
||||
<script type="text/javascript">
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const header = document.querySelector('#site-header');
|
||||
|
||||
// set up dropdown stuff for mobile / touch
|
||||
{
|
||||
const rootItems = header.querySelectorAll('.root-item');
|
||||
|
||||
function clearDropdowns() {
|
||||
for (const item of rootItems) {
|
||||
item.classList.remove('clicked');
|
||||
}
|
||||
}
|
||||
|
||||
function clickDropdown(el) {
|
||||
header.classList.add('clicked');
|
||||
|
||||
if (el.classList.contains('clicked')) {
|
||||
clearDropdowns();
|
||||
} else {
|
||||
clearDropdowns();
|
||||
el.classList.add('clicked');
|
||||
}
|
||||
}
|
||||
|
||||
for (const item of rootItems) {
|
||||
if (item.querySelector('.submenu')) {
|
||||
item.addEventListener('click', e => {
|
||||
clickDropdown(item);
|
||||
e.stopPropagation();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// dropdown accessiblity
|
||||
{
|
||||
const dropdowns = document.querySelectorAll('.menu-dropdown-js');
|
||||
|
||||
for(let i = 0; i < dropdowns.length; i++) {
|
||||
let dropdown = dropdowns[i];
|
||||
dropdown.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
for(let j = 0; j < dropdowns.length; j++){
|
||||
let each = dropdowns[j];
|
||||
if(each != dropdown){
|
||||
each.setAttribute("aria-expanded", false);
|
||||
}
|
||||
}
|
||||
// getAttribute returns a string so we have to do it this way
|
||||
var toSetTo = dropdown.getAttribute("aria-expanded") == "false" ? "true" : "false";
|
||||
dropdown.setAttribute("aria-expanded", toSetTo);
|
||||
console.log(dropdown);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,43 +1,21 @@
|
|||
<header id="site-header" class="mb3 bb bw1 b--theme-dark">
|
||||
<a href="#content-start" class="sr-focusable" id="content-jump">Jump to Content</a>
|
||||
<div class="user-options flex justify-center justify-end-ns relative">
|
||||
<header id="site-header" class="old mb3 bb bw1 b--theme-dark">
|
||||
<a href="#content-start" class="sr sr-focusable" id="content-jump">Jump to Content</a>
|
||||
<div class="flex justify-center justify-end-ns relative">
|
||||
{{ if .User }}
|
||||
{{ if .User.IsStaff }}
|
||||
<a class="admin-panel pa2" href="{{ .Header.AdminUrl }}"><span class="icon-settings"> Admin</span></a>
|
||||
<a class="pa2" href="{{ .Header.AdminUrl }}"><span class="icon-settings"> Admin</span></a>
|
||||
{{ end }}
|
||||
<div>
|
||||
<a class="dib pv2 pl2" href="{{ .Header.UserProfileUrl }}">{{ .User.Username }}</a>
|
||||
<a class="dib pv2 pr2" href="{{ .Header.UserSettingsUrl }}">(settings)</a>
|
||||
</div>
|
||||
<a class="logout pa2" href="{{ .Header.LogoutActionUrl }}"><span class="icon-logout"></span> Log Out</a>
|
||||
<a class="pa2" href="{{ .Header.LogoutActionUrl }}"><span class="icon-logout"></span> Log Out</a>
|
||||
{{ else }}
|
||||
<a class="register pa2" id="register-link" href="{{ .Header.RegisterUrl }}">Register</a>
|
||||
<a class="login pa2" id="login-link" href="{{ .LoginPageUrl }}">Log in</a>
|
||||
<div id="login-popup" class="pa3 bt bb ba-ns bw1 b--theme-dark">
|
||||
<form action="{{ .Header.LoginActionUrl }}" method="post" class="ma0 flex flex-column">
|
||||
<input type="text" name="username" class="w-100" value="" placeholder="Username" />
|
||||
<input type="password" name="password" class="w-100 mt1" value="" placeholder="Password" />
|
||||
<a class="db mt1" href="{{ .Header.ForgotPasswordUrl }}">Forgot your password?</a>
|
||||
<input type="hidden" name="redirect" value="{{ $.CurrentUrl }}">
|
||||
<div class="mt2">
|
||||
<input type="submit" value="Log In" class="w-100" />
|
||||
</div>
|
||||
<div class="mt3 tc">
|
||||
<div class="b mb1">Third-party login</div>
|
||||
<div class="flex flex-column g1">
|
||||
<a href="{{ .Header.LoginWithDiscordUrl }}" class="db br2 overflow-hidden flex" title="Log in with Discord">
|
||||
<img
|
||||
src="{{ static "discord-login.svg" }}"
|
||||
alt="Log in with Discord"
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<a class="pa2" id="register-link" href="{{ .Header.RegisterUrl }}">Register</a>
|
||||
<a class="pa2" id="login-link" href="{{ .LoginPageUrl }}">Log in</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="menu-bar flex flex-column flex-row-ns justify-between w-100 {{ if .IsProjectPage }}project{{ end }}">
|
||||
<div class="flex flex-column flex-row-ns justify-between w-100 {{ if .IsProjectPage }}project{{ end }}">
|
||||
<div class="flex flex-column flex-row-ns items-center w-100">
|
||||
{{ $itemsClass := "items self-stretch flex items-center justify-center justify-start-ns ml2-ns ml3-l" }}
|
||||
{{ if .Header.Project }}
|
||||
|
|
@ -79,30 +57,30 @@
|
|||
</a>
|
||||
<div class="{{ $itemsClass }}">
|
||||
<div class="root-item">
|
||||
<a href="{{ .Header.ProjectIndexUrl }}">Projects</a>
|
||||
<a class="pa2 ph3-l" href="{{ .Header.ProjectIndexUrl }}">Projects</a>
|
||||
</div>
|
||||
<div class="root-item">
|
||||
<a aria-expanded="false" aria-controls="events-submenu" class="menu-dropdown-js" href="#">
|
||||
<a class="pa2 ph3-l" aria-expanded="false" aria-controls="events-submenu" class="menu-dropdown-js" href="#">
|
||||
Events <div class="dib svgicon ml1">{{ svg "chevron-down-thick" }}</div>
|
||||
</a>
|
||||
<div class="submenu b--theme-dark" id="events-submenu">
|
||||
<a href="{{ .Header.JamsUrl }}">Jams</a>
|
||||
<a href="{{ .Header.ConferencesUrl }}">Conferences</a>
|
||||
<a href="{{ .Header.FishbowlUrl }}">Fishbowls</a>
|
||||
<a href="{{ .Header.PodcastUrl }}">Podcast</a>
|
||||
<a href="https://guide.handmade-seattle.com/s" target="_blank">Handmade Dev Show</a>
|
||||
{{/*<a href="{{ .Header.CalendarUrl }}">Calendar</a>*/}}
|
||||
<div class="submenu bw1 b--theme-dark bg--main" id="events-submenu">
|
||||
<a class="pa2 ph3-l" href="{{ .Header.JamsUrl }}">Jams</a>
|
||||
<a class="pa2 ph3-l" href="{{ .Header.ConferencesUrl }}">Conferences</a>
|
||||
<a class="pa2 ph3-l" href="{{ .Header.FishbowlUrl }}">Fishbowls</a>
|
||||
<a class="pa2 ph3-l" href="{{ .Header.PodcastUrl }}">Podcast</a>
|
||||
<a class="pa2 ph3-l" href="https://guide.handmade-seattle.com/s" target="_blank">Handmade Dev Show</a>
|
||||
<a class="pa2 ph3-l" href="{{ .Header.CalendarUrl }}">Calendar</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="root-item">
|
||||
<a href="{{ .Header.ForumsUrl }}">Forums</a>
|
||||
<a class="pa2 ph3-l" href="{{ .Header.ForumsUrl }}">Forums</a>
|
||||
</div>
|
||||
<div class="root-item">
|
||||
<a aria-expanded="false" aria-controls="resource-submenu" class="menu-dropdown-js" href="#">
|
||||
<a class="pa2 ph3-l" aria-expanded="false" aria-controls="resource-submenu" class="menu-dropdown-js" href="#">
|
||||
Resources <div class="dib svgicon ml1">{{ svg "chevron-down-thick" }}</div>
|
||||
</a>
|
||||
<div class="submenu b--theme-dark" id="resource-submenu">
|
||||
<a href="{{ .Header.EducationUrl }}">Education</a>
|
||||
<div class="submenu bw1 b--theme-dark bg--main" id="resource-submenu">
|
||||
<a class="pa2 ph3-l" href="{{ .Header.EducationUrl }}">Education</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -171,32 +149,5 @@
|
|||
});
|
||||
}
|
||||
}
|
||||
|
||||
// set up login form
|
||||
{
|
||||
const loginPopup = document.getElementById("login-popup");
|
||||
const loginLink = document.getElementById("login-link");
|
||||
|
||||
if (loginPopup !== null) {
|
||||
loginLink.onclick = (e) => {
|
||||
e.preventDefault();
|
||||
loginPopup.classList.toggle("open");
|
||||
}
|
||||
}
|
||||
|
||||
const dtf = new Intl.DateTimeFormat([], {
|
||||
dateStyle: "full",
|
||||
timeStyle: "short",
|
||||
});
|
||||
|
||||
for (const time of document.querySelectorAll('time')) {
|
||||
const d = new Date(Date.parse(time.dateTime));
|
||||
if (time.getAttribute("data-type") == "content") {
|
||||
time.textContent = dtf.format(d);
|
||||
} else {
|
||||
time.title = dtf.format(d);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,16 @@
|
|||
{{/* NOTE(asaf): Make sure to include js/image_selector.js */}}
|
||||
<input {{ if .Required }}required{{ end }} class="image_input" type="file" accept="image/*" name="{{ .Name }}" />
|
||||
<input class="remove_input" type="hidden" name="remove_{{ .Name }}" />
|
||||
<input {{ if .Required }}required{{ end }} class="imginput dn" type="file" accept="image/*" name="{{ .Name }}" />
|
||||
<input class="imginput-remove" type="hidden" name="remove_{{ .Name }}" />
|
||||
<span class="error dn notice notice-failure mv2 mw6"></span>
|
||||
<div class="image_container">
|
||||
<img class="mw6" data-original="{{ .Src }}" src="{{ .Src }}" />
|
||||
<div >
|
||||
<a href="javascript:;" class="reset">Reset</a>
|
||||
<a href="javascript:;" class="remove">Remove</a>
|
||||
<div class="imginput-container pa3 flex g3 items-center">
|
||||
{{ $url := or (and .Asset .Asset.Url) "" }}
|
||||
{{ $filename := or (and .Asset .Asset.Filename) "" }}
|
||||
<img class="w4 flex-shrink-0" data-imginput-original="{{ $url }}" data-imginput-original-filename="{{ $filename }}" src="{{ $url }}" />
|
||||
<div class="w1 flex-grow-1 flex flex-column g1">
|
||||
<div class="flex f6">
|
||||
<a href="javascript:;" class="imginput-reset-link">Reset</a>
|
||||
<a href="javascript:;" class="imginput-remove-link">Remove</a>
|
||||
</div>
|
||||
<div class="imginput-filename b truncate lh-title"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div>
|
||||
{{ range . }}
|
||||
<div class="notice notice-{{ .Class }} mb2">
|
||||
<div class="notice notice-{{ .Class }} mb2 white ph3 pv2 br2-ns">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -2,29 +2,29 @@
|
|||
{{ if gt .Total 1 }}
|
||||
<div class="pagination flex">
|
||||
{{ if gt .Current 1 }}
|
||||
<a class="button" href="{{ .PreviousUrl }}">Prev</a>
|
||||
<a class="option" href="{{ .PreviousUrl }}">Prev</a>
|
||||
{{ end }}
|
||||
{{ if gt .Current 1 }}
|
||||
{{ if gt .Current 2 }}
|
||||
<a class="page button" href="{{ .FirstUrl }}">1</a>
|
||||
<a class="page option" href="{{ .FirstUrl }}">1</a>
|
||||
{{ end }}
|
||||
{{ if gt .Current 3 }}
|
||||
<a class="page button"> ... </a>
|
||||
<a class="page option"> ... </a>
|
||||
{{ end }}
|
||||
<a class="page button" href="{{ .PreviousUrl }}">{{ sub .Current 1 }}</a>
|
||||
<a class="page option" href="{{ .PreviousUrl }}">{{ sub .Current 1 }}</a>
|
||||
{{ end }}
|
||||
<a class="page button current">{{ .Current }}</a>
|
||||
<a class="page option b">{{ .Current }}</a>
|
||||
{{ if lt .Current .Total }}
|
||||
<a class="page button" href="{{ .NextUrl }}">{{ add .Current 1 }}</a>
|
||||
<a class="page option" href="{{ .NextUrl }}">{{ add .Current 1 }}</a>
|
||||
{{ if lt .Current (sub .Total 2) }}
|
||||
<a class="page button"> ... </a>
|
||||
<a class="page option"> ... </a>
|
||||
{{ end }}
|
||||
{{ if lt .Current (sub .Total 1) }}
|
||||
<a class="page button" href="{{ .LastUrl }}">{{ .Total }}</a>
|
||||
<a class="page option" href="{{ .LastUrl }}">{{ .Total }}</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ if lt .Current .Total }}
|
||||
<a class="button" href="{{ .NextUrl }}">Next</a>
|
||||
<a class="option" href="{{ .NextUrl }}">Next</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue