comparing 487c39c6a5f3caffeba3ce429c22469d6e65f7c4 and main on veryroundbird.house/pds-dash

+54 -31

.tangled/workflows/build.yml

···

       1
        
       when:

     

       2
       -
       	- event: ["push", "manual"]

     

       3
       -
       		branch: ["main"]

     

       4
        
       

     

       5
        
       engine: "nixery"

     

       6
        
       

     

       7
        
       dependencies:

     

       8
       -
       	nixpkgs:

     

       9
       -
       		- deno

     

       0
        
       
     

       0
        
       
     

       10
        
       

     

       11
        
       steps:

     

       12
       -
       	- name: "Build static files"

     

       13
       -
       		command: "deno run build"

     

       14
       -
       	

     

       15
       -
       	- name: "SSH setup"

     

       16
       -
       		command: |

     

       17
       -
       			mkdir ~/.ssh

     

       18
       -
       			echo "${{secrets.SSH_KEY}}" > ~/.ssh/id_tangledsh

     

       19
       -
       			chmod 600 ~/.ssh/id_tangledsh

     

       20
       -
       			cat > ~/.ssh/config << EOF

     

       21
       -
       			Host deploy

     

       22
       -
       				HostName ${{ secrets.SERVER_HOST }}

     

       23
       -
       				User ${{ secrets.SERVER_USER }}

     

       24
       -
       				IdentityFile ~/.ssh/id_tangledsh

     

       25
       -
       				StrictHostKeyChecking accept-new

     

       26
       -
       				BatchMode yes

     

       27
       -
       				PasswordAuthentication no

     

       28
       -
       				PubkeyAuthentication yes

     

       29
       -
       			EOF

     

       30
       -
       			chmod 600 ~/.ssh/config

     

       31
       -
       			ssh-keyscan -H ${{ secrets.SERVER_HOST }} >> ~/.ssh/known_hosts

     

       32
       -
       			echo "🪶 deploying to shimaenaga pds"

     

       33
       -
       	

     

       34
       -
       	- name: "Deploy via SCP"

     

       35
       -
       		run: scp -r ./dist/* deploy:/pds/caddy/webroot

     

       36
       -
       	

     

       37
       -
       	- name: "Done!"

     

       38
       -
       		command: "echo \"🪶 all done!\""
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0

···

       1
        
       when:

     

       2
       +
         - event: ["push", "manual"]

     

       3
       +
           branch: ["main"]

     

       4
        
       

     

       5
        
       engine: "nixery"

     

       6
        
       

     

       7
        
       dependencies:

     

       8
       +
         nixpkgs:

     

       9
       +
           - deno

     

       10
       +
           - openssh

     

       11
       +
           - su

     

       12
        
       

     

       13
        
       steps:

     

       14
       +
         - name: "Pretend we have a real local user"

     

       15
       +
           command: |

     

       16
       +
             echo "🪶 pretend root is a real user"

     

       17
       +
             echo "root:x:0:0:System administrator:/root:/run/current-system/sw/bin/bash" >> /etc/passwd

     

       18
       +
           

     

       19
       +
         - name: "Copy config to server"

     

       20
       +
           command: |

     

       21
       +
             echo "🪶 copying config from secrets"

     

       22
       +
             echo "${CONFIG}" > config.ts

     

       23
       +
            

     

       24
       +
         - name: "Set up Deno"

     

       25
       +
           command: |

     

       26
       +
             echo "🪶 installing deno packages"

     

       27
       +
             deno install

     

       28
       +
           

     

       29
       +
         - name: "Build static files"

     

       30
       +
           command: |

     

       31
       +
             echo "🪶 building static files"

     

       32
       +
             deno run build

     

       33
       +
         

     

       34
       +
         - name: "SSH setup"

     

       35
       +
           command: |

     

       36
       +
             echo "🪶 setting up ssh connection"

     

       37
       +
             mkdir ~/.ssh

     

       38
       +
             echo "${SSH_KEY}" > ~/.ssh/id_tangledsh

     

       39
       +
             chmod 600 ~/.ssh/id_tangledsh

     

       40
       +
             cat > /etc/ssh/ssh_config << EOF

     

       41
       +
             Host deploy

     

       42
       +
               HostName ${SERVER_HOST}

     

       43
       +
               User ${SERVER_USER}

     

       44
       +
               IdentityFile ~/.ssh/id_tangledsh

     

       45
       +
               StrictHostKeyChecking no

     

       46
       +
               UserKnownHostsFile /dev/null

     

       47
       +
               BatchMode yes

     

       48
       +
               PasswordAuthentication no

     

       49
       +
               PubkeyAuthentication yes

     

       50
       +
             EOF

     

       51
       +
             chmod 600 /etc/ssh/ssh_config

     

       52
       +
             ssh-keyscan -H $SERVER_HOST >> ~/.ssh/known_hosts

     

       53
       +
         

     

       54
       +
         - name: "Deploy via SCP"

     

       55
       +
           command: |

     

       56
       +
             echo "🪶 deploying files via scp"

     

       57
       +
             scp -r ./dist/* deploy:/pds/caddy/etc/caddy/static

     

       58
       +
         

     

       59
       +
         - name: "Done!"

     

       60
       +
           command: |

     

       61
       +
             echo "🪶 all done!

+3 -1

README.md

···

       10
        
       * Replaced favicon

     

       11
        
       * Ported in guestbook functionality from another PDS frontpage (see new config options)

     

       12
        
       * Secret unique easter egg :)

     

       13
       -
       * Wrote deploy pipeline for tangled.sh

     

       0
        
       
     

       0
        
       
     

       14
        
       

     

       15
        
       # original readme below this line

     

       16

···

       10
        
       * Replaced favicon

     

       11
        
       * Ported in guestbook functionality from another PDS frontpage (see new config options)

     

       12
        
       * Secret unique easter egg :)

     

       13
       +
       * Wrote deploy pipeline for tangled.sh (WORK IN PROGRESS help try #5 - changing ssh perms?)

     

       14
       +
       

     

       15
       +
       you can see it running at [my pds!](https://shimaenaga.veryroundbird.house)

     

       16
        
       

     

       17
        
       # original readme below this line

     

       18

+71 -2

src/App.svelte

···

       1
        
       <script lang="ts">

     

       2
        
         import PostComponent from "./lib/PostComponent.svelte";

     

       0
        
       
     

       3
        
         import AccountComponent from "./lib/AccountComponent.svelte";

     

       4
        
         import InfiniteLoading from "svelte-infinite-loading";

     

       5
        
         import { getNextPosts, Post, getAllMetadataFromPds, fetchGuestbookPosts } from "./lib/pdsfetch";

     
···

       50
        
       <main>

     

       51
        
         <div id="content">

     

       52
        
           {#await accountsPromise}

     

       53
       -
             <p>Loading...</p>

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       54
        
           {:then accountsData}

     

       55
        
             <div id="account">

     

       56
        
       				<pre id="asciiart">

     
···

       84
        
       							<div id="guestbookPosts">

     

       85
        
       								{#if guestbookPosts.length > 0}

     

       86
        
       									{#each guestbookPosts as postObject}

     

       87
       -
       										<PostComponent post={postObject as Post} />

     

       88
        
       									{/each}

     

       89
        
       								{:else}

     

       90
        
       									<p class="noGuestbookPosts">No guestbook posts yet!</p>

···

       1
        
       <script lang="ts">

     

       2
        
         import PostComponent from "./lib/PostComponent.svelte";

     

       3
       +
         import GuestbookPostComponent from "./lib/GuestbookPostComponent.svelte";

     

       4
        
         import AccountComponent from "./lib/AccountComponent.svelte";

     

       5
        
         import InfiniteLoading from "svelte-infinite-loading";

     

       6
        
         import { getNextPosts, Post, getAllMetadataFromPds, fetchGuestbookPosts } from "./lib/pdsfetch";

     
···

       51
        
       <main>

     

       52
        
         <div id="content">

     

       53
        
           {#await accountsPromise}

     

       54
       +
       			<div id="loadingbirds">

     

       55
       +
       			<div class="small">

     

       56
       +
       <pre>

     

       57
       +
                                     █▓░░░░░░░░░▒        

     

       58
       +
                                   █▓▒           ░▒      

     

       59
       +
                                ▓▒▒▒░              ▒     

     

       60
       +
                              ▓▒░░░░                ░▓   

     

       61
       +
                            █▒  ░░     ░   ░   ▓▒    ░█  

     

       62
       +
                          ▓░    ░░     ▒▓░░▒▒░        ▒  

     

       63
       +
       ███████      ██▓▒░▒▒░   ░░░░       ░░░          ▒ 

     

       64
       +
       █▓▓▓▓▓▓▓▓▓▓▓▓▓▒▓▓▓▓▓▒▒▓▒▒▒▓░                     ▓

     

       65
       +
               ███▓▒░░▒░░░░▓▓█▓▓▒░                      ░

     

       66
       +
                       ▓                                ░

     

       67
       +
                       █              ░                 ▒

     

       68
       +
                       █░                              ▒█

     

       69
       +
                        ▒                             ▒  

     

       70
       +
                        █▒                           █   

     

       71
       +
                          ▓                        ░█    

     

       72
       +
                           ▓▒    ░░              ░▒      

     

       73
       +
                             ▓▒▒░░▒▓░  ░░░▒▒▓▓▒▓▓        

     

       74
       +
                                 █▓█▓▓█    ███▓█         

     

       75
       +
                                  ████      ████         

     

       76
       +
       </pre>

     

       77
       +
       			</div>

     

       78
       +
       			<div class="large">

     

       79
       +
       <pre>

     

       80
       +
                                                                        ████▓▒░░░░░░░▒▓██                   

     

       81
       +
                                                                     █▓░                 ▒█                

     

       82
       +
                                                                  ██▓░                     ▒█              

     

       83
       +
                                                                ██▒                          ▒█            

     

       84
       +
                                                            ███▓▒░                             ▓█          

     

       85
       +
                                                          █▓░   ░                               █          

     

       86
       +
                                                       ██░     ░                                 ░█        

     

       87
       +
                                                      █░                                           ▓       

     

       88
       +
                                                    █▒                                              ▓      

     

       89
       +
                                                 ██▒                                   ▒▓▓           █     

     

       90
       +
                                               █▒                       ▓█     ░▒       ▒▓           ▓█    

     

       91
       +
                                            ██▒                         ▒▓░   ░▒░░                    ▓█   

     

       92
       +
                                        ███▒░                                ░▒▒▒▒▒░                   ▓█  

     

       93
       +
        █████                       ██▓░    ░░░░                                                        █  

     

       94
       +
       █▓▒░░░░░░▒▒▒▓▓██████████▓▓▒░   ░▒▒▒▒▒▒▓▒▒░         ░▒▒░                                          ░█ 

     

       95
       +
          ██████▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░▒▒▒▒▓▒▒▓▓▓▓▒▒▒▒▒▒▓▒░░░▒▒▒░                                           ▒█

     

       96
       +
                     ███▓▓▒▒░░░░       ░░░▒▓▓▓▒▒▓▓▓▓▓▒░░▒▒▒▒░                                             █

     

       97
       +
                                ███▓▓▒         ▒▓▓▓▓▓▓▓█▓▒░░                                              █

     

       98
       +
                                      █▓           ░▒▒▓▒░                                                 ▓

     

       99
       +
                                       █▓                                                                 ▓

     

       100
       +
                                        █                                                                 █

     

       101
       +
                                        █                                                                ░█

     

       102
       +
                                        █                                                                ▓█

     

       103
       +
                                        █░                                                              ▒█ 

     

       104
       +
                                         ▒                                                             ▓█  

     

       105
       +
                                         ▓                                                            █    

     

       106
       +
                                         █▒                                                         ▒█     

     

       107
       +
                                          █▒                                                       ▒█      

     

       108
       +
                                           █▓                                                     ▒█       

     

       109
       +
                                            ██                                                   ██        

     

       110
       +
                                              █▒                                               ▓█          

     

       111
       +
                                               ██░                                           ▒█            

     

       112
       +
                                                  █░                                      ░▓█              

     

       113
       +
                                                    █▓░       ▓▓▓░               ░▓▓▒  ░██                 

     

       114
       +
                                                       ███▓▒░ ▒▓▓▓    ▒▓▓▓▓▓▓▓████▓▓▓▓▒█                   

     

       115
       +
                                                            █▓██▓▓▓▓██          ████▓▓▓██                  

     

       116
       +
                                                               ██▓▓██              ██▓▓██                  

     

       117
       +
                                                              ███▓██               █▓▓▓██                  

     

       118
       +
                                                            ██████              ███████                                        

     

       119
       +
       </pre>

     

       120
       +
       			</div>

     

       121
       +
       			<p id="loadingText" data-text="pds is landing..." title="pds is landing...">pds is landing...</p>

     

       122
       +
             </div>

     

       123
        
           {:then accountsData}

     

       124
        
             <div id="account">

     

       125
        
       				<pre id="asciiart">

     
···

       153
        
       							<div id="guestbookPosts">

     

       154
        
       								{#if guestbookPosts.length > 0}

     

       155
        
       									{#each guestbookPosts as postObject}

     

       156
       +
                           <GuestbookPostComponent post={postObject.post} />

     

       157
        
       									{/each}

     

       158
        
       								{:else}

     

       159
        
       									<p class="noGuestbookPosts">No guestbook posts yet!</p>

+1 -1

src/lib/AccountComponent.svelte

···

       24
        
       	    />

     

       25
        
           {/if}

     

       26
        
         </div>

     

       27
       -
       	<div class="accountTooltip" popover id="{account.handle.replace('.')}">

     

       28
        
       		<div class="banner">

     

       29
        
       			<img class="bannerImg" src="{Config.PDS_URL}/xrpc/com.atproto.sync.getBlob?did={account.did}&cid={account.bannerCid}" alt="{account.displayName}'s banner" width="300" height="100" />

     

       30
        
       			<img class="avatarInsetImg" src="{Config.PDS_URL}/xrpc/com.atproto.sync.getBlob?did={account.did}&cid={account.avatarCid}" alt="{account.displayName}'s avatar" width="50" height="50" />

···

       24
        
       	    />

     

       25
        
           {/if}

     

       26
        
         </div>

     

       27
       +
       	<div class="accountTooltip" popover id="{account.handle.replace('.', '')}">

     

       28
        
       		<div class="banner">

     

       29
        
       			<img class="bannerImg" src="{Config.PDS_URL}/xrpc/com.atproto.sync.getBlob?did={account.did}&cid={account.bannerCid}" alt="{account.displayName}'s banner" width="300" height="100" />

     

       30
        
       			<img class="avatarInsetImg" src="{Config.PDS_URL}/xrpc/com.atproto.sync.getBlob?did={account.did}&cid={account.avatarCid}" alt="{account.displayName}'s avatar" width="50" height="50" />

+92

src/lib/GuestbookPostComponent.svelte

···

       1
       +
       <script lang="ts">

     

       2
       +
         import { Post } from "./pdsfetch";

     

       3
       +
         import { Config } from "../../config";

     

       4
       +
         import { onMount } from "svelte";

     

       5
       +
         import moment from "moment";

     

       6
       +
         

     

       7
       +
         let { post }: { post: Post } = $props();

     

       8
       +
         console.log(post);

     

       9
       +
       </script>

     

       10
       +
       

     

       11
       +
       <div class="postContainer">

     

       12
       +
         <div class="postHeader">

     

       13
       +
           {#if post.author.avatar}

     

       14
       +
             <img

     

       15
       +
               class="avatar"

     

       16
       +
               src="{post.author.avatar}"

     

       17
       +
               alt="avatar of {post.author.displayName}"

     

       18
       +
             />

     

       19
       +
           {/if}

     

       20
       +
           <div class="headerText">

     

       21
       +
             <a class="displayName" href="{Config.FRONTEND_URL}/profile/{post.author.did}">{post.author.displayName}</a>

     

       22
       +
             <p class="handle">

     

       23
       +
               <a href="{Config.FRONTEND_URL}/profile/{post.author.handle}"

     

       24
       +
                 >@{post.author.handle}</a

     

       25
       +
               >

     

       26
       +
               <a

     

       27
       +
                 class="postLink" href="{Config.FRONTEND_URL}/profile/{post.author.did}/post/{post.record.id}"

     

       28
       +
                 >{moment(post.record.createdAt).isBefore(moment().subtract(1, "month"))

     

       29
       +
                   ? moment(post.record.createdAt).format("MMM D, YYYY")

     

       30
       +
                   : moment(post.record.createdAt).fromNow()}</a>

     

       31
       +
             </p>

     

       32
       +
           </div>

     

       33
       +
         </div>

     

       34
       +
         <div class="postContent">

     

       35
       +
           {#if post.record.quote}

     

       36
       +
             <a

     

       37
       +
               class="quotingText"

     

       38
       +
               href="{Config.FRONTEND_URL}/profile/{post.record.quote.uri}/post/{post

     

       39
       +
                 .quotingUri.rkey}">quoting {post.quotingUri.repo}</a

     

       40
       +
             >

     

       41
       +
           {/if}

     

       42
       +
           <div class="postText">{post.record.text}</div>

     

       43
       +
           {#if post.record.imagesCid && post.record.imagesCid.length > 0}

     

       44
       +
             <div id="carouselContainer">

     

       45
       +
               <img

     

       46
       +
                 class="embedImages"

     

       47
       +
                 alt="Post Image {currentImageIndex + 1} of {post.record.imagesCid.length}"

     

       48
       +
                 src="{Config.PDS_URL}/xrpc/com.atproto.sync.getBlob?did={post.record.author.did}&cid={post.record

     

       49
       +
                   .imagesCid[currentImageIndex]}"

     

       50
       +
               />

     

       51
       +
       

     

       52
       +
               {#if post.imagesCid.length > 1}

     

       53
       +
                 <div class="carouselControls">

     

       54
       +
                   <button

     

       55
       +
                     id="prevBtn"

     

       56
       +
                     onclick={prevImage}

     

       57
       +
                     disabled={currentImageIndex === 0}>←</button

     

       58
       +
                   >

     

       59
       +
                   <div class="carouselIndicators">

     

       60
       +
                     {#each post.record.imagesCid as _, i}

     

       61
       +
                       <div

     

       62
       +
                         class="indicator {i === currentImageIndex ? 'active' : ''}"

     

       63
       +
                       ></div>

     

       64
       +
                     {/each}

     

       65
       +
                   </div>

     

       66
       +
                   <button

     

       67
       +
                     class="nextBtn"

     

       68
       +
                     onclick={nextImage}

     

       69
       +
                     disabled={currentImageIndex === post.imagesCid.length - 1}

     

       70
       +
                     >→</button

     

       71
       +
                   >

     

       72
       +
                 </div>

     

       73
       +
               {/if}

     

       74
       +
             </div>

     

       75
       +
           {/if}

     

       76
       +
           {#if post.record.videosLinkCid}

     

       77
       +
             <!-- svelte-ignore a11y_media_has_caption -->

     

       78
       +
             <video

     

       79
       +
               class="embedVideo"

     

       80
       +
               src="{Config.PDS_URL}/xrpc/com.atproto.sync.getBlob?did={post.authorDid}&cid={post.videosLinkCid}"

     

       81
       +
               controls

     

       82
       +
             ></video>

     

       83
       +
           {/if}

     

       84
       +
           {#if post.gifLink}

     

       85
       +
             <img

     

       86
       +
               class="embedVideo"

     

       87
       +
               src="{post.record.gifLink}"

     

       88
       +
               alt="Post GIF"

     

       89
       +
             />

     

       90
       +
           {/if}

     

       91
       +
         </div>

     

       92
       +
       </div>

+42 -2

themes/birdrights/theme.css

···

       328
        
       	background-color: transparent;

     

       329
        
       	padding: 0;

     

       330
        
       	position: relative;

     

       0
        
       
     

       331
        
       }

     

       332
        
       

     

       333
        
       .accountContainer {

     
···

       354
        
         white-space: nowrap;

     

       355
        
       }

     

       356
        
       

     

       357
       -
       .accountTooltip {

     

       358
        
       	border: 1px var(--border-color) solid;

     

       359
        
       	color: var(--text-color);

     

       360
        
       	background-color: var(--content-background-color);

     
···

       428
        
       	padding: 10px;

     

       429
        
       	gap: 10px;

     

       430
        
       	z-index: 10;

     

       0
        
       
     

       431
        
       }

     

       432
        
       

     

       433
        
       #guestbookContents:popover-open {

     
···

       441
        
       /* Source Link */

     

       442
        
       

     

       443
        
       #footer {

     

       444
       -
       	position: absolute;

     

       445
        
       	bottom: 5px;

     

       446
        
       	right: 5px;

     

       447
        
       	z-index: 99;

     
···

       456
        
       

     

       457
        
       #footer:hover {

     

       458
        
       	opacity: 1;

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       459
        
       }

     

       460
        
       

     

       461
        
       /* Responsive Styling */

···

       328
        
       	background-color: transparent;

     

       329
        
       	padding: 0;

     

       330
        
       	position: relative;

     

       331
       +
       	cursor: pointer;

     

       332
        
       }

     

       333
        
       

     

       334
        
       .accountContainer {

     
···

       355
        
         white-space: nowrap;

     

       356
        
       }

     

       357
        
       

     

       358
       +
       .accountTooltip[popover] {

     

       359
        
       	border: 1px var(--border-color) solid;

     

       360
        
       	color: var(--text-color);

     

       361
        
       	background-color: var(--content-background-color);

     
···

       429
        
       	padding: 10px;

     

       430
        
       	gap: 10px;

     

       431
        
       	z-index: 10;

     

       432
       +
         grid-template-rows: auto 1fr;

     

       433
        
       }

     

       434
        
       

     

       435
        
       #guestbookContents:popover-open {

     
···

       443
        
       /* Source Link */

     

       444
        
       

     

       445
        
       #footer {

     

       446
       +
       	position: fixed;

     

       447
        
       	bottom: 5px;

     

       448
        
       	right: 5px;

     

       449
        
       	z-index: 99;

     
···

       458
        
       

     

       459
        
       #footer:hover {

     

       460
        
       	opacity: 1;

     

       461
       +
       }

     

       462
       +
       

     

       463
       +
       #loadingbirds {

     

       464
       +
       	line-height: 1;

     

       465
       +
       	text-align: center;

     

       466
       +
       	width: 100%;

     

       467
       +
       }

     

       468
       +
       

     

       469
       +
       #loadingbirds pre {

     

       470
       +
       	display: inline-block;

     

       471
       +
       	margin: 0 auto;

     

       472
       +
       	text-align: left;

     

       473
       +
       }

     

       474
       +
       

     

       475
       +
       #loadingbirds .small {

     

       476
       +
       	display: none;

     

       477
       +
       }

     

       478
       +
       

     

       479
       +
       #loadingbirds #loadingText {

     

       480
       +
       	font-family: "Space Mono", monospace;

     

       481
       +
       	text-align: center;

     

       482
       +
       	font-style: oblique 5deg;

     

       483
       +
       	font-size: 2em;

     

       484
       +
       	min-height: 1em;

     

       485
       +
       }

     

       486
       +
       

     

       487
       +
       @media screen and (max-width: 780px) {

     

       488
       +
       	#loadingbirds .small {

     

       489
       +
       		display: block;

     

       490
       +
       	}

     

       491
       +
       	

     

       492
       +
       	#loadingbirds .large {

     

       493
       +
       		display: none;

     

       494
       +
       	}

     

       495
       +
       	

     

       496
       +
       	#loadingbirds #loadingText {

     

       497
       +
       		font-size: 1.25em;

     

       498
       +
       	}

     

       499
        
       }

     

       500
        
       

     

       501
        
       /* Responsive Styling */

Compare changes