From a428fc49aac7e7e6b443fc57b0e03e9cd31d2c1b Mon Sep 17 00:00:00 2001 From: Derek Taylor Date: Wed, 22 Jun 2022 11:40:00 -0500 Subject: [PATCH] Adding homepage html/css for surf (works for all browsers though). --- .surf/html/homepage.html | 152 ++++++++++++++++++++++++++++++++++++++ .surf/styles/homepage.css | 125 +++++++++++++++++++++++++++++++ 2 files changed, 277 insertions(+) create mode 100644 .surf/html/homepage.html create mode 100644 .surf/styles/homepage.css diff --git a/.surf/html/homepage.html b/.surf/html/homepage.html new file mode 100644 index 0000000..d7b4453 --- /dev/null +++ b/.surf/html/homepage.html @@ -0,0 +1,152 @@ + + + + + + + + + Home + + + + + +
+
+
+
+
+
-
+
+
+
+
+
+
Linux News
+
+ DistroTube.com + LinuxToday + LinuxInsider + OMG Ubuntu + It's Foss + Phoronix + ZDNet +
+
+
+
Arch Linux
+
+ Arch Homepage + Arch Wiki + Arch Packages + AUR Home + Arch Bugs + Arch Forums + Planet Arch +
+
+
+
Suckless
+
+ Suckless Homepage + Suckless Source Code + dwm + st + dmenu + surf + tabbed +
+
+
+
Social & Video
+
+ Youtube + LBRY + Patreon + GitLab + GitHub + Mastodon + Diaspora + Netflix +
+
+
+
Reddit
+
+ /r/linux + /r/archlinux + /r/commandline + /r/linux4noobs + /r/linuxquestions + /r/linuxmemes + /r/suckless + /r/unixporn + /r/vim + /r/emacs +
+
+
+
+ + + + diff --git a/.surf/styles/homepage.css b/.surf/styles/homepage.css new file mode 100644 index 0000000..5ab1418 --- /dev/null +++ b/.surf/styles/homepage.css @@ -0,0 +1,125 @@ + +@import url('https://fonts.googleapis.com/css?family=Roboto+Mono'); +@import url('https://fonts.googleapis.com/css?family=Roboto'); +@import url('https://fonts.googleapis.com/css?family=Anton'); + +body { + background-color: #282c34; + margin: 0px; +} + +.container { + width: 100%; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +#clock { + font-family: sans-serif; + font-size: 4.0rem; + font-family: "Anton"; + color: #fff; + margin-bottom: .25em; +} + +#search { + width: 100%; + height: 100vh; + background-color: #000000; + display: none; + position: absolute; + box-sizing: border-box; + flex-direction: column; + align-items: center; + justify-content: center; +} + +#search-field { + width: 90%; + padding: .75em 1em; + box-sizing: border-box; + background-color: #000000; + border: solid 0px #000000; + font-family: "Roboto Mono"; + font-size: 4rem; + color: #f2f2f2; + outline: none; + border-radius: 3px; + margin-bottom: 1em; + text-align: center; +} + +.weather-container { + width: 30%; + background-color: #000000; + padding: 1em; + border-radius: 3px; + font-family: "Roboto Mono"; + font-size: 1.2rem; + color: #fff; + text-align: center; +} +.inline { + display: inline-block; +} + +.bookmark-container { + display: flex; + flex-direction: row; + justify-content: center; + width: 60%; + margin: 1em 0em; +} + +@media only screen and (max-width: 960px) { + .container { + height: auto; + } + #clock { + margin-top: 1em; + } + .container > .bookmark-container { + flex-direction: column; + width: 60%; + } + .bookmark-container > .bookmark-set { + width: auto; + margin: 1em 0em; + } +} + +.bookmark-set{ + padding: 1em; + background-color: #000000; + border-radius: 3px; + font-family: "Roboto Mono"; + font-size: .85rem; + width: 25%; + height: 16em; + margin: 0em .5em; +} +.bookmark-inner-container { + overflow-y: scroll; + height: 80%; + vertical-align: top; +} +.bookmark-title { + font-family: "Roboto"; + font-size: 1.2rem; + font-weight: 600; + color: #ededed; + margin: 0em 0em .35em 0em; +} +.bookmark { + text-decoration: none; + color: #8c8c8b; + display:block; + margin: .4em 0em; +} +.bookmark:hover { + color: #fff; +} +