├── LICENSE ├── README.md ├── assets ├── Kyok-medium.otf ├── background.png ├── favicon.svg └── nazrin.png ├── colors.css ├── index.html ├── main.css └── previews ├── narrow.png └── wide.png /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 elenapan 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Startpage 2 | 3 | This is a simple startpage featuring [Nazrin](https://en.touhouwiki.net/wiki/Nazrin) from the [Touhou Project](https://en.touhouwiki.net/wiki/Touhou_Wiki). 4 | 5 | It is written in pure HTML & CSS without JavaScript. 6 | 7 | ## Previews 8 | 9 | Wide | Narrow 10 | :-------------------------:|:-------------------------: 11 | ![](./previews/wide.png?raw=true "Preview of the page in wide screen mode") | ![](./previews/narrow.png?raw=true "Preview of the page in narrow screen mode") 12 | 13 | ## Assets 14 | - [Nazrin art](https://danbooru.donmai.us/posts/6379868) (removed the red background) 15 | - [City background](https://unsplash.com/photos/an-aerial-view-of-a-city-at-night-JBkwaYMuhdc) (edited) 16 | - [Kyok font](https://www.1001fonts.com/kyok-font.html) 17 | -------------------------------------------------------------------------------- /assets/Kyok-medium.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elenapan/startpage/455b56243e9419b8366e2bb480fe59deb2e51628/assets/Kyok-medium.otf -------------------------------------------------------------------------------- /assets/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elenapan/startpage/455b56243e9419b8366e2bb480fe59deb2e51628/assets/background.png -------------------------------------------------------------------------------- /assets/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /assets/nazrin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elenapan/startpage/455b56243e9419b8366e2bb480fe59deb2e51628/assets/nazrin.png -------------------------------------------------------------------------------- /colors.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --background: #101319; 3 | --foreground: #f4f3ee; 4 | --color0: #171b24; 5 | --color1: #E34F4F; 6 | --color2: #69bfce; 7 | --color3: #e37e4f; 8 | --color4: #5679E3; 9 | --color5: #956dca; 10 | --color6: #5599E2; 11 | --color7: #f4f3ee; 12 | --color8: #3A435A; 13 | --color9: #DE2B2B; 14 | --color10: #56B7C8; 15 | --color11: #DE642B; 16 | --color12: #3E66E0; 17 | --color13: #885AC4; 18 | --color14: #3F8CDE; 19 | --color15: #DDDBCF; 20 | } 21 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Home 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |
あなたに会えるのが楽しみです!
17 |
18 |
19 |
20 |
daily
21 |
22 | Youtube 23 |
·
24 | Github 25 |
·
26 | Hacker News 27 |
·
28 | Tux Machines 29 |
30 |
31 |
32 | reddit 33 |
34 | /r/linux 35 |
·
36 | /r/unixporn 37 |
·
38 | /r/gentoo 39 |
40 |
41 |
42 | lemmy 43 |
44 | /c/linux 45 |
·
46 | /c/unixporn 47 |
·
48 | /c/privacy 49 |
50 |
51 |
52 | twitch 53 |
54 | PoE 55 |
·
56 | Dota 57 |
·
58 | GW2 59 |
·
60 | FFXIV 61 |
·
62 | GD 63 |
64 |
65 |
66 |
67 |
68 | 69 | 70 | -------------------------------------------------------------------------------- /main.css: -------------------------------------------------------------------------------- 1 | @import url("colors.css"); 2 | 3 | @font-face { 4 | font-family: "Kyok Medium"; 5 | src: url("assets/Kyok-medium.otf") format('truetype'); 6 | } 7 | 8 | :root { 9 | --border-radius: 20px; 10 | --margin-main: 40px; 11 | --art-size: 550px; 12 | --art-size-small: 250px; 13 | } 14 | 15 | body { 16 | background-color: var(--background); 17 | background-image: url("assets/background.png"); 18 | background-size: cover; 19 | margin: 0px; 20 | width: 100vw; 21 | height: 100vh; 22 | font-family: "Kyok Medium"; 23 | } 24 | 25 | .container { 26 | min-width: 100%; 27 | min-height: 100%; 28 | display: flex; 29 | align-items: center; 30 | justify-content: center; 31 | } 32 | 33 | .floating-box { 34 | background: var(--background); 35 | display: flex; 36 | align-items: center; 37 | justify-content: center; 38 | flex-direction: row; 39 | border-radius: var(--border-radius); 40 | box-shadow: 5px 5px 25px 1px rgba(0,0,0,0.8); 41 | margin: var(--margin-main); 42 | } 43 | 44 | #art { 45 | position: relative; 46 | } 47 | 48 | #nazrin { 49 | width: var(--art-size); 50 | height: var(--art-size); 51 | background-image: url("assets/nazrin.png"); 52 | background-size: cover; 53 | background-position: left; 54 | border-radius: var(--border-radius); 55 | } 56 | 57 | #subtitle-box { 58 | position: absolute; 59 | bottom: 30px; 60 | width: var(--art-size); 61 | font-size: 22pt; 62 | background: var(--background); 63 | opacity: 0.9; 64 | text-align: center; 65 | vertical-align: middle; 66 | color: var(--foreground); 67 | min-height: 50px; 68 | } 69 | 70 | a { 71 | text-decoration: none; 72 | color: var(--color15); 73 | padding-bottom: 2px; 74 | border-bottom: 3px solid rgba(0,0,0,0); 75 | transition-duration: 0.2s; 76 | } 77 | 78 | .bookmark-set.red a:hover { 79 | border-color: var(--color1); 80 | } 81 | 82 | .bookmark-set.green a:hover { 83 | border-color: var(--color2); 84 | } 85 | 86 | .bookmark-set.yellow a:hover { 87 | border-color: var(--color3); 88 | } 89 | 90 | .bookmark-set.blue a:hover { 91 | border-color: var(--color4); 92 | } 93 | 94 | .bookmark-set.magenta a:hover { 95 | border-color: var(--color5); 96 | } 97 | 98 | .bookmark-set.cyan a:hover { 99 | border-color: var(--color6); 100 | } 101 | 102 | #bookmark-container { 103 | display: flex; 104 | flex-direction: column; 105 | font-size: 16pt; 106 | overflow-y: scroll; 107 | margin-right: var(--margin-main); 108 | gap: 20px; 109 | overflow: hidden; 110 | } 111 | 112 | div.divider { 113 | display: inline-block; 114 | font-weight: bold; 115 | } 116 | 117 | .bookmark-set.red .bookmark-title, 118 | .bookmark-set.red .divider { 119 | color: var(--color1); 120 | } 121 | 122 | .bookmark-set.green .bookmark-title, 123 | .bookmark-set.green .divider { 124 | color: var(--color2); 125 | } 126 | 127 | .bookmark-set.yellow .bookmark-title, 128 | .bookmark-set.yellow .divider { 129 | color: var(--color3); 130 | } 131 | 132 | .bookmark-set.blue .bookmark-title, 133 | .bookmark-set.blue .divider { 134 | color: var(--color4); 135 | } 136 | .bookmark-set.magenta .bookmark-title, 137 | .bookmark-set.magenta .divider { 138 | color: var(--color5); 139 | } 140 | 141 | .bookmark-set.cyan .bookmark-title, 142 | .bookmark-set.cyan .divider { 143 | color: var(--color6); 144 | } 145 | 146 | .bookmark-title { 147 | font-size: 23pt; 148 | text-decoration: none; 149 | } 150 | 151 | /* Narrow screen layout */ 152 | @media only screen and (max-width: 900px) { 153 | .floating-box { 154 | flex-direction: column; 155 | } 156 | #bookmark-container { 157 | margin: var(--margin-main); 158 | word-break: keep-all; 159 | } 160 | #art { 161 | margin-top: var(--margin-main); 162 | display: grid; 163 | width: 100%; 164 | } 165 | #nazrin { 166 | place-self: center; 167 | width: var(--art-size-small); 168 | height: var(--art-size-small); 169 | border-radius: 50%; 170 | border: 8px solid var(--color0); 171 | } 172 | #subtitle-box { 173 | position: relative; 174 | margin-top: var(--margin-main); 175 | bottom: 0; 176 | background: var(--color0); 177 | opacity: 1; 178 | width: 100%; 179 | } 180 | } 181 | -------------------------------------------------------------------------------- /previews/narrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elenapan/startpage/455b56243e9419b8366e2bb480fe59deb2e51628/previews/narrow.png -------------------------------------------------------------------------------- /previews/wide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elenapan/startpage/455b56243e9419b8366e2bb480fe59deb2e51628/previews/wide.png --------------------------------------------------------------------------------