diff --git a/LICENSE b/LICENSE index 204b93d..c274668 100644 --- a/LICENSE +++ b/LICENSE @@ -1,4 +1,4 @@ -MIT License Copyright (c) +MIT License Copyright (c) 2020 FollieHiyuki Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3a313d7..97f96b6 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,20 @@ -# Startpage +# A minimal startpage -My startpage for Firefox \ No newline at end of file +> Old commits can be seen on [my old Github repo](https://github.com/FollieHiyuki/Startpage) + +### :clipboard: To-do list :clipboard: + +- [ ] Make the page responsive + +### :star2: Credits :star2: + +Fonts used: + +- [FiraCode Nerd Font](https://github.com/ryanoasis/nerd-fonts) (for the glyphs) +- [Sarasa Gothic](https://github.com/be5invis/Sarasa-Gothic) (Japanese supported) + +The Firefox CSS is taken from [here](https://github.com/evanswa0606/firefox-simpletheme) with some minor changes. + +### :camera: And it looks like this: + +~[screenshot](./images/screenshot.png) diff --git a/chrome/userChrome.css b/chrome/userChrome.css new file mode 100644 index 0000000..363ff42 --- /dev/null +++ b/chrome/userChrome.css @@ -0,0 +1,99 @@ +:root { + --uc-urlbar-bg-color: #2e3440; + --uc-show-new-tab-button: none; + --uc-show-tab-separators: none; + --uc-tab-separators-color: none; + --uc-tab-separators-width: none; +} +#titlebar { + -moz-box-ordinal-group: 2 !important; +} +.titlebar-buttonbox-container { + display: none !important; +} +#TabsToolbar { + min-height: 28px !important; +} +.tabbrowser-tab:not([pinned]) { + max-width: 100vw !important; +} +.tabbrowser-tab:not([fadein]), +/* #page-action-buttons, */ +.titlebar-spacer, +.tab-line, +#tracking-protection-icon-container { + display: none !important; + border: none !important; +} +/* #identity-box { */ +/* visibility: collapse !important; */ +/* } */ +#urlbar-background, +.titlebar-buttonbox-container, +#nav-bar, +.tabbrowser-tab:not([selected]) .tab-background { + background: none !important; + background-color: var(--uc-urlbar-bg-color) !important; + border: none !important; +} +#urlbar[breakout][breakout-extend] { + top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important; + left: 0 !important; + width: 100% !important; +} + +#urlbar[breakout][breakout-extend] > #urlbar-input-container { + height: var(--urlbar-height) !important; + padding-block: 0 !important; + padding-inline: 0 !important; +} + +#urlbar[breakout][breakout-extend] > #urlbar-background { + animation-name: none !important; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important; +} +#urlbar-background { + box-shadow: none !important; +} +#nav-bar, +.titlebar-buttonbox-container { + border-bottom: 1px solid rgb(229, 233, 240); +} +#tabs-newtab-button { + display: var(--uc-show-new-tab-button) !important; +} +.tabbrowser-tab::after { + border-left: var(--uc-tab-separators-width) solid var(--uc-tab-separators-color) !important; + display: var(--uc-show-tab-separators) !important; +} +.tab-background[selected="true"] { + background-color: #4c566a !important; +} +.tabbrowser-tab[first-visible-tab][last-visible-tab] { + background-color: var(--uc-bar-bg-color) !important; +} +.tab-close-button.close-icon { + display: none !important; +} +.tabbrowser-tab:hover .tab-close-button.close-icon { + display: block !important; +} +#urlbar-input { + text-align: center !important; +} +#urlbar-input:focus { + text-align: left !important; +} +#PersonalToolbar { + background-color: #2e3440 !important; + padding: 3px 0 !important; +} +#PersonalToolbar toolbarbutton.bookmark-item { + padding: 6px !important; + background-color: #2e3440 !important; + border: 0 !important; +} +#PersonalToolbar toolbarbutton.bookmark-item:hover, +#PersonalToolbar toolbarbutton.bookmark-item[open="true"] { + background: #4c566a !important; +} diff --git a/fonts/FiraCode-Regular-NerdFont-Complete.ttf b/fonts/FiraCode-Regular-NerdFont-Complete.ttf new file mode 100644 index 0000000..6d6a9a4 Binary files /dev/null and b/fonts/FiraCode-Regular-NerdFont-Complete.ttf differ diff --git a/fonts/sarasa-fixed-j-regular.ttf b/fonts/sarasa-fixed-j-regular.ttf new file mode 100644 index 0000000..1e6d09a Binary files /dev/null and b/fonts/sarasa-fixed-j-regular.ttf differ diff --git a/images/penguin.png b/images/penguin.png new file mode 100644 index 0000000..02901d1 Binary files /dev/null and b/images/penguin.png differ diff --git a/images/rose.png b/images/rose.png new file mode 100644 index 0000000..8ed30b2 Binary files /dev/null and b/images/rose.png differ diff --git a/images/screenshot.png b/images/screenshot.png new file mode 100644 index 0000000..5e9c873 Binary files /dev/null and b/images/screenshot.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..8b1519a --- /dev/null +++ b/index.html @@ -0,0 +1,87 @@ + + + + + + ~ + + + + + +
+
+ rose +

+ おかえりなさい +

+ rose +
+ +
+
+ + +
+
+ +
+
+

 Linux/BSD 

+ +
+ +
+

 Coding 

+ +
+ +
+

⚡ Stuff ⚡

+ +
+
+
+ + + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..2291292 --- /dev/null +++ b/style.css @@ -0,0 +1,146 @@ +@font-face { + font-family: "Sarasa"; + src: url("./fonts/sarasa-fixed-j-regular.ttf"); +} + +@font-face { + font-family: "FiraCode"; + src: url("./fonts/FiraCode-Regular-NerdFont-Complete.ttf"); +} + +:root { + --black: #1b2229; + --red: #e06c75; + --yellow: #ebcb8b; + + --fg: #81a1c1; + --bg: #3b4252; +} + +body { + background: #2e3440; +} + +main { + margin: 0; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.rose1 { + float: left; + margin-top: 12px; + width: 56px; +} + +.rose2 { + float: right; + margin-top: 12px; + width: 56px; +} + +.title { + font-family: "Sarasa"; + font-size: 56px; + font-weight: bold; + color: var(--red); + display: inline; + text-shadow: 4px 4px 6px var(--black); +} + +.cardtitle { + text-align: center; +} + +.searchbox { + background-color: var(--bg); + border-radius: 8px; + box-shadow: 8px 8px 5px var(--black); + height: 48px; + display: flex; + align-items: center; + margin-top: 60px; +} + +form { + width: 100%; +} + +form label { + font-family: "FiraCode"; + font-size: 24px; + font-style: normal; + font-weight: bold; + color: var(--red); + margin-left: 8px; +} + +form input[type="search"] { + font-family: "Sarasa"; + font-size: 24px; + font-style: normal; + font-weight: bold; + border: none; + background: none; + color: var(--fg); + width: 96%; +} + +form:focus-within input::placeholder { + opacity: 0; +} + +.bookmarks { + margin-top: 40px; + display: flex; + flex-direction: row; + align-items: flex-start; +} + +.card { + background-color: var(--bg); + width: 240px; + height: 420px; + box-shadow: 8px 8px 5px var(--black); + border-radius: 8px; +} + +.group { + color: var(--red); + font-family: "FiraCode"; + font-size: 24px; + font-style: italic; + font-weight: bold; + margin-bottom: 12px; + text-shadow: 2px 2px 4px var(--black); + text-align: center; +} + +li { + list-style-type: none; + text-align: center; +} + +a { + font-family: "FiraCode"; + font-size: 24px; + font-weight: normal; + font-style: italic; + text-decoration: none; + color: var(--fg); +} + +a:hover { + color: var(--yellow); +} + +footer { + position: fixed; + bottom: 0; + font-family: "FiraCode"; + font-size: 14px; + font-style: italic; + font-weight: bold; +}