diff --git a/StartSch/Components/Home.razor b/StartSch/Components/Home.razor index f24f1f50..a36b82f2 100644 --- a/StartSch/Components/Home.razor +++ b/StartSch/Components/Home.razor @@ -41,7 +41,7 @@ else @@ -94,8 +94,8 @@ else
-

- +

+ @opening.Title

@@ -173,7 +173,8 @@ else

-

+ +

Hírek

diff --git a/StartSch/Components/Layout/MainLayout.razor b/StartSch/Components/Layout/MainLayout.razor index 4d5c53cb..07a4091d 100644 --- a/StartSch/Components/Layout/MainLayout.razor +++ b/StartSch/Components/Layout/MainLayout.razor @@ -6,7 +6,7 @@ diff --git a/StartSch/Components/Pages/OpeningHistoryPage.razor b/StartSch/Components/Pages/OpeningHistoryPage.razor index b6b7efbd..becf978f 100644 --- a/StartSch/Components/Pages/OpeningHistoryPage.razor +++ b/StartSch/Components/Pages/OpeningHistoryPage.razor @@ -3,11 +3,11 @@ @inject Db Db @inject InterestService InterestService -

Nyitások

+

Nyitások

@foreach (var opening in _openings) { -
+
} diff --git a/StartSch/Components/Shared/EventPreview.razor b/StartSch/Components/Shared/EventPreview.razor index 93b5b601..0abff105 100644 --- a/StartSch/Components/Shared/EventPreview.razor +++ b/StartSch/Components/Shared/EventPreview.razor @@ -1,4 +1,4 @@ -
+

diff --git a/StartSch/Components/Shared/StartschButton.razor b/StartSch/Components/Shared/StartschButton.razor new file mode 100644 index 00000000..7188109b --- /dev/null +++ b/StartSch/Components/Shared/StartschButton.razor @@ -0,0 +1,9 @@ + + + +@code { + [Parameter, EditorRequired] public required RenderFragment ChildContent { get; set; } + [Parameter] public String ButtonStyle { get; set; } = "outlined"; +} \ No newline at end of file diff --git a/StartSch/Components/Shared/TopLevelLinks.razor b/StartSch/Components/Shared/TopLevelLinks.razor index 80fdb9e4..3a8ba532 100644 --- a/StartSch/Components/Shared/TopLevelLinks.razor +++ b/StartSch/Components/Shared/TopLevelLinks.razor @@ -2,7 +2,7 @@ @*
  • Naptár
  • *@
  • - + explore Felfedezés diff --git a/StartSch/Components/Shared/WordmarkLogo.razor b/StartSch/Components/Shared/WordmarkLogo.razor new file mode 100644 index 00000000..6c4aac99 --- /dev/null +++ b/StartSch/Components/Shared/WordmarkLogo.razor @@ -0,0 +1,106 @@ + + + + + StartSCH + + + + + + + + + + + + + + + + diff --git a/StartSch/Services/FontCache.cs b/StartSch/Services/FontCache.cs index 7dde8ded..989bdf58 100644 --- a/StartSch/Services/FontCache.cs +++ b/StartSch/Services/FontCache.cs @@ -16,14 +16,24 @@ public class FontCache [ new() { - Name = "Roboto Serif", - ParameterNames = "ital,opsz,wdth,wght,GRAD", + Name = "DM Serif Text", + ParameterNames = "wght", ParameterVariations = [ - "0,8..144,50..150,100..900,-50..100", - "1,8..144,50..150,100..900,-50..100", + "300", + "400", ], }, + new () + { + Name = "PT Serif", + ParameterNames = "ital,wght", + ParameterVariations = + [ + "0,400..700", + "1,400..700", + ], + } ], Display = "swap", }, @@ -49,7 +59,7 @@ public class FontCache "chat_add_on", "chat_paste_go", "chevron_right", - "close", + "close", "code", "edit", "event", @@ -123,11 +133,11 @@ public async Task GetFontStyles() { Uri uri = GetUri(fontRequest); HttpRequestMessage request = new(HttpMethod.Get, uri); - + // without this, we get 21k lines back for the symbols request. // the version will have to be incremented occasionally request.Headers.UserAgent.Add(new("Firefox", "141")); - + HttpResponseMessage response = await _httpClient.SendAsync(request); string s = await response.Content.ReadAsStringAsync(); return (s, response.Headers.CacheControl?.MaxAge); diff --git a/StartSch/css/app.css b/StartSch/css/app.css index 7aa681ae..09a896c1 100644 --- a/StartSch/css/app.css +++ b/StartSch/css/app.css @@ -9,6 +9,8 @@ @import "posts.css"; @import "shadows.css"; @import "tippy.js/dist/tippy.css"; +@import "logo.css"; + * { box-sizing: border-box; @@ -79,7 +81,8 @@ body, h1, h2, h3, h4, h5, h6, p, ul, ol, menu, li, a, span, div, input, button, } body { - background: var(--md-sys-color-surface); + background-color: var(--startsch-sys-color-page-bg); + /* background: var(--md-sys-color-surface); */ color: var(--md-sys-color-on-surface); } diff --git a/StartSch/css/borders.css b/StartSch/css/borders.css new file mode 100644 index 00000000..cc999944 --- /dev/null +++ b/StartSch/css/borders.css @@ -0,0 +1,5 @@ +* { + --startsch-sys-border-dotted: 5px dotted var(--md-sys-color-outline-variant); + --startsch-sys-border-dashed: 1px dashed var(--md-sys-color-outline-variant); + --startsch-sys-border-solid: 1px solid var(--md-sys-color-outline-variant); +} \ No newline at end of file diff --git a/StartSch/css/buttons.css b/StartSch/css/buttons.css index 0c0b042c..2eb67388 100644 --- a/StartSch/css/buttons.css +++ b/StartSch/css/buttons.css @@ -3,3 +3,35 @@ md-text-button { --md-sys-color-primary: var(--md-sys-color-error); } } + +.startsch-button { + --startsch-button-accent-color: none; + + display: flex; + padding: 0.5em; + margin: 0; + border: none; + border-radius: 5px; + margin: 3px; + font-family: 'DM Serif Display'; + font-size: larger; + font-weight: bold; + background: var(--startsch-button-accent-color); + color: var(--md-sys-color-on-surface); +} + +.startsch-button:hover { + /* text-decoration: underline; */ + text-decoration-style: dotted; + text-decoration-thickness: 3px; + text-underline-offset: 0.5em; + box-shadow: 2px 2px 3px var(--md-sys-color-primary); + background-color: oklch(from var(--md-sys-color-primary) 10 0 0); + color: var(--md-sys-color-on-primary); + transition: all ease-in-out 0.1s; +} + +.startsch-button-filled { + --startsch-button-accent-color: var(--md-sys-color-primary); + color: var(--md-sys-color-on-primary); +} \ No newline at end of file diff --git a/StartSch/css/colors.css b/StartSch/css/colors.css index 6eff5128..210523e7 100644 --- a/StartSch/css/colors.css +++ b/StartSch/css/colors.css @@ -38,6 +38,10 @@ --md-sys-color-surface-container-highest: #E3E2E6; --md-sys-color-outline-variant: #C6C6CA; --md-sys-color-primary2: #496C97; + + --shadow-color: #c6c6ca; + --startsch-sys-color-main-section-bg: #ececec; + --startsch-sys-color-page-bg: #f7f7f7; } @media (prefers-color-scheme: dark) { @@ -81,5 +85,9 @@ --md-sys-color-surface-container-highest: #333538; --md-sys-color-outline-variant: #46474A; --md-sys-color-primary2: #97BDF1; + + --startsch-sys-color-main-section-bg: #111111; + --startsch-sys-color-page-bg: #141414; + --shadow-color: #121316; } } diff --git a/StartSch/css/fonts.css b/StartSch/css/fonts.css index a91f982d..9cef065d 100644 --- a/StartSch/css/fonts.css +++ b/StartSch/css/fonts.css @@ -1,3 +1,8 @@ +* { + --sys-startsch-font-sans: "Inter", sans-serif; + --sys-startsch-font-serif: "PT Serif", serif; +} + .roboto-regular { font-family: "Roboto", sans-serif; font-weight: 400; @@ -17,12 +22,22 @@ } body { - font-family: system-ui, sans-serif; - --md-ref-typeface-plain: system-ui, sans-serif; + font-family: var(--sys-startsch-font-sans); + --md-ref-typeface-plain: var(--sys-startsch-font-sans); } .display h1 { + font-family: 'DM Serif Text', serif; font-size: 64px; font-weight: 900; - font-variation-settings: "wdth" 100, "GRAD" 0, "opsz" 144; +} + +h1, h2{ + font-family: 'DM Serif Text', serif; + font-weight: 900; +} + +h3 { + font-family: var(--sys-startsch-font-serif); + font-weight: 500; } diff --git a/StartSch/css/home.css b/StartSch/css/home.css index d8db19b8..9a1e3dc6 100644 --- a/StartSch/css/home.css +++ b/StartSch/css/home.css @@ -32,8 +32,17 @@ grid-column: right; grid-row: 1; + + li { + border-right: var(--startsch-sys-border-solid); + } + + li:last-child { + border-right: none; + } + menu { - justify-content: space-between; + justify-content: left; } } @@ -62,9 +71,10 @@ #news { grid-column: middle; grid-row: 1 / 4; - background-color: var(--md-sys-color-surface-container-low); + background-color: var(--startsch-sys-color-main-section-bg); margin-top: 24px; padding: 16px; + border-radius: 1em; } } @@ -91,7 +101,8 @@ right: 0; z-index: 100; - background-color: var(--md-sys-color-surface-container); + background-color: var(--startsch-sys-color-page-bg); + border-bottom: 1px solid var(--md-sys-color-outline-variant); display: grid; grid-template-columns: @@ -147,7 +158,7 @@ align-items: center; menu { - gap: 24px; + gap: 0; } } @@ -223,7 +234,7 @@ display: flex; align-items: center; list-style: none; - gap: 24px; + gap: 0; li { margin-left: 0; @@ -244,18 +255,34 @@ } #openings { + background-color: var(--md-sys-color-tertiary); + color: var(--md-sys-color-on-tertiary); + border-radius: 0.5em; + padding: 1em; + + * { + color: var(--md-sys-color-on-tertiary) !important; + } + h2 { padding-bottom: 8px; - border-bottom: 1px solid var(--md-sys-color-outline-variant); + border-bottom: var(--startsch-sys-border-dashed); /* 1px solid var(--md-sys-color-outline-variant); */ margin-bottom: 24px; } article { margin-top: 8px; line-height: 1.5; + border-bottom: var(--startsch-sys-border-dashed); + padding-bottom: 0.5em; h3 { - font-size: 16px; + color: var(--md-sys-color-on-primary); + font-size: 24px; + @media (width <= 1016px) { + font-size: 16px; + } + font-weight: 500; } @@ -274,6 +301,10 @@ @media (max-width: 900px) { } } + + @media (max-width: 900px) { + margin: 1em; + } } #about { diff --git a/StartSch/css/logo.css b/StartSch/css/logo.css new file mode 100644 index 00000000..071786e1 --- /dev/null +++ b/StartSch/css/logo.css @@ -0,0 +1,7 @@ +#wordmark-logo-svg { + width: 10rem; + margin-top: 2rem; + margin-bottom: 1rem; + + height: auto; +} \ No newline at end of file diff --git a/StartSch/css/main-layout.css b/StartSch/css/main-layout.css index f0cb25c1..a0fa64a8 100644 --- a/StartSch/css/main-layout.css +++ b/StartSch/css/main-layout.css @@ -62,9 +62,11 @@ main { grid-column: middle; grid-row: 1 / 4; - background-color: var(--md-sys-color-surface-container-low); + background-color: var(--startsch-sys-color-main-section-bg); + /* background-color: var(--md-sys-color-surface-container-low); */ margin-top: 24px; padding: 16px; + border-radius: 1em; } } @@ -256,3 +258,10 @@ } } } + +#explore-link { + background-color: var(--md-sys-color-surface-container); + border-radius: 1em; + padding: 1em !important; + display: block; + } \ No newline at end of file diff --git a/StartSch/css/post-body.css b/StartSch/css/post-body.css index 120c657f..1a93abc1 100644 --- a/StartSch/css/post-body.css +++ b/StartSch/css/post-body.css @@ -1,6 +1,7 @@ .post .body { line-height: 1.6; - + font-family: var(--sys-startsch-font-serif); + font-size: 1rem; p { margin-bottom: 16px; } @@ -11,7 +12,7 @@ overflow: clip; line-height: 1.5; - font-variation-settings: "wdth" 80, "opsz" 14; + /*font-variation-settings: "wdth" 80, "opsz" 14;*/ font-size: 14px; p { diff --git a/StartSch/css/posts.css b/StartSch/css/posts.css index 6cb63028..f44c50d0 100644 --- a/StartSch/css/posts.css +++ b/StartSch/css/posts.css @@ -3,8 +3,11 @@ Used by: EventView, EventPreview, PostView, PostPreview, GroupPage */ +@import "borders.css"; + .post, .post-preview { .title { + padding-top: 0.1em; display: flex; align-items: center; @@ -54,7 +57,8 @@ EventView, EventPreview, PostView, PostPreview, GroupPage .post { .title { margin-top: 8px; - + padding-top: 0.5em; + border-top: var(--startsch-sys-border-dotted); h1 { font-size: 30px; font-weight: 700; @@ -97,8 +101,12 @@ EventView, EventPreview, PostView, PostPreview, GroupPage .post-preview { .title { h3 { - font-size: 16px; - font-weight: 700; + font-size: 1.1em; + font-weight: 400; + + a { + color: var(--md-sys-color-on-surface) !important; + } } .icon-buttons { @@ -126,7 +134,15 @@ EventView, EventPreview, PostView, PostPreview, GroupPage .body { margin-top: 4px; + font-family: var(--startsch-sys-font-sans); + font-size: 1rem; } - margin-bottom: 16px; -} + + padding: 1em; + border-bottom: var(--startsch-sys-border-dashed); + /* Below is another, shadow-y, "elevated" style for post previews, use instead of the line above if you'd prefer */ + /* border-radius: 1em; + box-shadow: 2px 2px 3px 3px var(--shadow-color); + margin-bottom: 1em; */ +} \ No newline at end of file diff --git a/StartSch/js/components/category-list.ts b/StartSch/js/components/category-list.ts index 80679d77..73806c08 100644 --- a/StartSch/js/components/category-list.ts +++ b/StartSch/js/components/category-list.ts @@ -13,6 +13,7 @@ export class CategoryList extends LitElement { div { display: flex; + flex-wrap: wrap; gap: 2px; } `;