back round 0 view raw

appview: increase base layout width on md size screens #560

merged

opened by

oppi.li 3 months ago targeting master from push-kltomzxpyoxq

sm: single column grid
md: 10 column grid, with 1-8-1 layout
lg: 12 column grid, with 2-8-2 layout

Signed-off-by: oppiliappan me@oppi.li

options

unified split

Changed files

+8 -8

appview

pages

templates

layouts

base.html

timeline

fragments

hero.html

home.html

+4 -4

appview/pages/templates/layouts/base.html

···

       21
       21
        
                   <title>{{ block "title" . }}{{ end }} · tangled</title>

     

       22
       22
        
                   {{ block "extrameta" . }}{{ end }}

     

       23
       23
        
               </head>

     

       24
       24
       -
               <body class="min-h-screen grid grid-cols-1 grid-rows-[min-content_auto_min-content] md:grid-cols-12 gap-4 bg-slate-100 dark:bg-gray-900 dark:text-white transition-colors duration-200">

     

       24
       24
       +
               <body class="min-h-screen grid grid-cols-1 grid-rows-[min-content_auto_min-content] md:grid-cols-10 lg:grid-cols-12 gap-4 bg-slate-100 dark:bg-gray-900 dark:text-white transition-colors duration-200">

     

       25
       25
        
                 {{ block "topbarLayout" . }}

     

       26
       26
       -
                   <header class="px-1 col-span-1 md:col-start-3 md:col-span-8" style="z-index: 20;">

     

       26
       26
       +
                   <header class="px-1 col-span-1 md:col-start-2 md:col-span-8 lg:col-start-3" style="z-index: 20;">

     

       27
       27
        
       

     

       28
       28
        
                      {{ if .LoggedInUser }}

     

       29
       29
        
                       <div id="upgrade-banner"

     
···

       37
       37
        
                 {{ end }}

     

       38
       38
        
       

     

       39
       39
        
                 {{ block "mainLayout" . }}

     

       40
       40
       -
                   <div class="px-1 col-span-1 md:col-start-3 md:col-span-8 flex flex-col gap-4">

     

       40
       40
       +
                   <div class="px-1 col-span-1 md:col-start-2 md:col-span-8 lg:col-start-3 flex flex-col gap-4">

     

       41
       41
        
                     {{ block "contentLayout" . }}

     

       42
       42
        
                       <main class="col-span-1 md:col-span-8">

     

       43
       43
        
                         {{ block "content" . }}{{ end }}

     
···

       53
       53
        
                 {{ end }}

     

       54
       54
        
       

     

       55
       55
        
                 {{ block "footerLayout" . }}

     

       56
       56
       -
                   <footer class="px-1 col-span-1 md:col-start-3 md:col-span-8 mt-12">

     

       56
       56
       +
                   <footer class="px-1 col-span-1 md:col-start-2 md:col-span-8 lg:col-start-3 mt-12">

     

       57
       57
        
                     {{ template "layouts/fragments/footer" . }}

     

       58
       58
        
                   </footer>

     

       59
       59
        
                 {{ end }}

+1 -1

appview/pages/templates/timeline/fragments/hero.html

···

       23
       23
        
       

     

       24
       24
        
               <figure class="w-full hidden md:block md:w-auto">

     

       25
       25
        
                   <a href="https://tangled.sh/@tangled.sh/core" class="block">

     

       26
       26
       -
                       <img src="https://assets.tangled.network/hero-repo.png" alt="Screenshot of the Tangled monorepo." class="max-w-md mx-auto md:max-w-none w-full md:w-[30vw] h-auto shadow-sm rounded hover:shadow-md transition-shadow" />

     

       26
       26
       +
                       <img src="https://assets.tangled.network/hero-repo.png" alt="Screenshot of the Tangled monorepo." class="max-w-md mx-auto md:max-w-none w-full md:w-[30vw] h-auto shadow-sm rounded" />

     

       27
       27
        
                   </a>

     

       28
       28
        
                   <figcaption class="text-sm text-gray-600 dark:text-gray-400 mt-2 text-center">

     

       29
       29
        
                       Monorepo for Tangled, built in the open with the community.

+3 -3

appview/pages/templates/timeline/home.html

···

       27
       27
        
       {{ define "feature" }}

     

       28
       28
        
           {{ $info := index . 0 }}

     

       29
       29
        
           {{ $bullets := index . 1 }}

     

       30
       30
       -
           <div class="flex flex-col items-top gap-6 md:flex-row md:gap-12">

     

       30
       30
       +
           <div class="flex flex-col items-center gap-6 md:flex-row md:items-top">

     

       31
       31
        
               <div class="flex-1">

     

       32
       32
        
                   <h2 class="text-2xl font-bold text-black dark:text-white mb-6">{{ $info.title }}</h2>

     

       33
       33
        
                   <ul class="leading-normal">

     
···

       38
       38
        
               </div>

     

       39
       39
        
               <div class="flex-shrink-0 w-96 md:w-1/3">

     

       40
       40
        
                 <a href="{{ $info.image }}">

     

       41
       41
       -
                   <img src="{{ $info.image }}" alt="{{ $info.alt }}" class="w-full h-auto rounded" />

     

       41
       41
       +
                   <img src="{{ $info.image }}" alt="{{ $info.alt }}" class="w-full h-auto rounded shadow-sm" />

     

       42
       42
        
                 </a>

     

       43
       43
        
               </div>

     

       44
       44
        
           </div>

     

       45
       45
        
       {{ end }}

     

       46
       46
        
       

     

       47
       47
        
       {{ define "features" }}

     

       48
       48
       -
         <div class="prose dark:text-gray-200 space-y-12 px-6 py-4">

     

       48
       48
       +
         <div class="prose dark:text-gray-200 space-y-12 px-6 py-4 bg-white dark:bg-gray-800 rounded drop-shadow-sm">

     

       49
       49
        
           {{ template "feature" (list

     

       50
       50
        
               (dict

     

       51
       51
        
                   "title" "lightweight git repo hosting"