Hugging Face's logo

Spaces:
tfrere
/
research-article-template-editor
Running

App Files Community
research-article-template-editor
File size: 4,724 Bytes
76fc93a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
/* ============================================================================ */
/* Editor layout                                                                */
/*                                                                              */
/* Aligned with the research-article-template's 3-column grid, but with         */
/* narrower sidebars so the chat/drawer UI fits comfortably:                    */
/*     [ TOC 200px ] [ content 680px ] [ sidenotes 200px ]                      */
/*                                                                              */
/* wide/fullWidth use viewport-based breakout (see article.css) so they look    */
/* identical to the published output.                                           */
/* ============================================================================ */

.editor-app {
  height: 100dvh;          /* dvh = dynamic viewport (iOS Safari URL bar) */
  display: flex;
  flex-direction: column;
  /* Use the page background so the editor shell matches the article content
     (no greyish frame around the white canvas in light mode). */
  background: var(--page-bg);
  overflow: hidden;
  position: relative;
}

/* ---- Grid: 3-col symmetric, centered in viewport ---- */

.editor-app .content-grid {
  display: grid;                    /* wins specificity over _layout.css */
  grid-template-columns:
    var(--layout-editor-toc-width)
    minmax(0, var(--layout-content-width))
    var(--layout-editor-sidenote-width);
  grid-template-rows: auto 1fr;
  gap: 0 var(--layout-gap);
  max-width: var(--layout-editor-max-width);
  margin: 0 auto;
  padding: 0 var(--content-padding-x);
}

.content-grid__hero  { grid-column: 1 / -1; grid-row: 1; }
.content-grid__toc   { grid-column: 1;      grid-row: 2; }
.content-grid__editor {
  grid-column: 2;
  grid-row: 2;
  padding-top: 24px;
  padding-bottom: 32px;
  position: relative;
  overflow: visible;
}

/* In the editor, .tiptap is a plain flow container; wide/fullWidth escape
   the 680px column via viewport breakout (see article.css). */
.editor-app .tiptap {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* ============================================================================ */
/* Responsive                                                                   */
/*                                                                              */
/* <= 1100px : TOC collapses into a drawer, sidenotes stack inline              */
/*             (handled in article.css). Single-column grid.                    */
/* <=  768px : Compact top-bar, narrower floating panels, stacked embed studio. */
/* ============================================================================ */

/* Hamburger toggle: hidden on desktop, shown below the collapse breakpoint */
.top-bar__toc-toggle { display: none; }

/* Mobile TOC overlay: hidden by default on desktop */
.editor-app .toc-mobile-backdrop { display: none; }
.editor-app .toc-mobile-sidebar  { display: none; }

@media (max-width: 1100px) {
  .editor-app .content-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    max-width: none;
    gap: 0;
  }
  .editor-app .content-grid__hero   { grid-column: 1; grid-row: 1; }
  .editor-app .content-grid__toc    { display: none; }
  .editor-app .content-grid__editor { grid-column: 1; grid-row: 2; }

  .top-bar__toc-toggle {
    display: inline-flex;
    margin-right: auto;
  }
  .editor-app .toc-mobile-backdrop { display: block; }
  .editor-app .toc-mobile-sidebar  { display: flex; }
}

@media (max-width: 768px) {
  .editor-app .content-grid__editor {
    padding-top: 16px;
    padding-bottom: 24px;
  }

  /* Top bar: compact, wrap-safe */
  .editor-app .top-bar {
    padding: 6px 8px;
    gap: 2px;
    flex-wrap: wrap;
  }
  .editor-app .top-bar .divider-v { display: none; }
  .editor-app .top-bar .sync-indicator .sync-indicator__label { display: none; }

  /* Chat floating: fill width on mobile */
  .editor-app .chat-floating {
    width: calc(100vw - 24px);
    max-width: 360px;
    left: 12px;
    bottom: 12px;
    height: calc(100dvh - 80px);
    max-height: calc(100dvh - 80px);
  }
  .editor-app .chat-fab {
    bottom: 12px;
    left: 12px;
  }

  /* Settings drawer: full-width on mobile */
  .editor-app .drawer-panel { width: 100vw; }

  /* Embed Studio: stack body vertically */
  .editor-app .es-body { flex-direction: column; }
  .editor-app .es-chat {
    width: 100%;
    min-width: 0;
    max-width: none;
    max-height: 45vh;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }

  /* Citation panel: narrower on mobile */
  .editor-app .citation-panel {
    width: calc(100vw - 32px);
    max-width: 480px;
  }
}