做 FLOSCAS 的时候，我想把自己写过的文章、拍过的照片，还有喜欢的电影放在一起。东西可以多一点，但页面要清楚，进来的人能找到想看的内容，也愿意多待一会儿。
整体上，我参考了杂志和独立刊物的排版，用比较大的标题、留白和简单的线条来区分内容。底色选了接近纸张的米白，电影区用了暗红，图集用了深蓝。这些都是我喜欢的颜色，放在不同板块里，也能让页面有一些变化。
首页一开始放过标语，后来觉得照片本身就很好看，便把那些文字和边框去掉了。现在打开网站，先看到的是一张照片，角落里保留版权和拍摄说明。往下滑，才会看到文章和其他内容。我希望首页简单一点，不用一进来就把所有事情都说完。
文章是这个网站的主要内容。列表里放标题、日期和短摘要，方便大家先看看写的是什么。正文则尽量排得舒服一些，宽度、字号和行距都做过调整。标题可以大一点，但不能大到和正文不协调；照片旁边的日期和说明也要放好，免得被当成文章的一部分。
电影区做成了可以左右滑动的海报列表，下面附上片名和创作者信息。排列按我添加的顺序来，最近加入的在最左边，所以新片和老片会混在一起。这里主要是分享自己的兴趣，不想做成一份很正式的榜单。
图集叫「走马，观花」，放的是平时拍的照片。画框跟着照片的比例调整，尽量完整展示原来的画面，再用相同粗细的边框和统一间距把它们排整齐。另外，也从照片里取了一些植物、建筑之类的形状，画成有点潦草的小装饰，散放在首页和文章里，让页面多一点趣味。相册会按月更新。
游戏的配色和字体尽量与网站保持一致，想休息一下的时候，可以进去玩一会儿。导航右侧则把 FLOSCAS 和 LAVIE 的切换、语言选择、日夜模式按顺序放在一起，希望不同语言的朋友都能方便地使用。关于页面留给自我介绍，联系方式放在最后。
网站是借助 AI 一点点做起来的。我提出想法、提供参考，再根据页面的实际效果继续修改，AI 帮我完成代码和具体实现。很多细节都是看了以后才发现问题，再慢慢调整。以后有新的文章、照片或想法，也会继续加进来。
本文由 Codex 根据 FLOSCAS 建站过程中的对话整理生成。
When I made FLOSCAS, I wanted to bring together my writing, photographs, and favourite films. There could be plenty to explore, but the pages needed to be clear, so visitors could find something to read or look at and feel like staying a little longer.
For the layout, I looked to magazines and independent publications, using larger headings, open space, and simple lines to organise the content. I chose a paper-like ivory background, burgundy for cinema, and deep blue for the gallery. They are colours I like, and using them in different sections gives the pages some variety.
The home page once had a slogan. Later, I felt the photograph looked good on its own, so I removed the text and border. Now the site opens with a photograph, with copyright and camera information in the corners. Articles and other content come further down. I wanted a simple opening that did not have to explain everything at once.
Writing is the site's main focus. Article lists show titles, dates, and short summaries so readers can see what each piece is about. In the articles, I have adjusted the reading width, type size, and leading for comfort. Headings can be large, but should still work with the body text. Dates and captions also need clear positions so they are not mistaken for part of the article.
The cinema section is a row of posters you can scroll sideways, with titles and credits underneath. Films appear in the order I added them, newest additions on the left, so old and new releases sit together. It is a way to share my interests rather than a formal ranking.
The gallery, called “走马，观花”, holds photographs I take in everyday life. Frames follow each photo's proportions so the whole image can be shown. Consistent borders and spacing keep the collection tidy. I also borrowed plant and building shapes from the photos and redrew them as loose little decorations scattered through the home page and articles. The album is updated monthly.
The games use colours and type that fit the rest of the site, offering something to play during a break. On the right of the navigation, the FLOSCAS/LAVIE switch, language choice, and day/night mode appear in that order, making them easy for friends who speak different languages to find. The About page holds my introduction, and contact details come at the end.
I built the site gradually with AI. I bring ideas and references, then review the pages and ask for changes; AI helps with the code and implementation. Many details only became apparent once I saw them on screen. I will keep adjusting the site and adding writing, photographs, and ideas.
This article was generated by Codex from conversations about building FLOSCAS.
En créant FLOSCAS, je voulais réunir mes textes, mes photographies et les films que j’aime. Le contenu pouvait être varié, mais les pages devaient rester claires, pour que chacun trouve quelque chose à lire ou à regarder et ait envie de rester un peu.
Pour la mise en page, je me suis inspiré des magazines et des revues indépendantes : des titres assez grands, des espaces et des lignes simples pour organiser le contenu. J’ai choisi un fond ivoire proche du papier, du bordeaux pour le cinéma et du bleu profond pour la galerie. Ce sont des couleurs que j’aime, et leur répartition apporte de la variété.
L’accueil comportait autrefois un slogan. J’ai ensuite trouvé que la photographie se suffisait à elle-même et retiré le texte ainsi que le cadre. Le site s’ouvre désormais sur une photo, avec les mentions de droits et de prise de vue dans les coins. Les articles et les autres contenus viennent plus bas. Je souhaitais une entrée simple, sans tout expliquer dès l’arrivée.
Les textes restent au centre du site. Les listes présentent les titres, les dates et de courts résumés pour aider à choisir une lecture. Dans les articles, j’ai ajusté la largeur du texte, la taille des caractères et l’interligne. Un titre peut être grand tout en restant proportionné au corps du texte. Dates et légendes doivent aussi avoir une place claire pour ne pas être confondues avec le récit.
Le cinéma prend la forme d’une rangée d’affiches que l’on fait défiler horizontalement, avec titres et crédits en dessous. L’ordre suit celui de mes ajouts, les plus récents à gauche : films anciens et nouvelles sorties se côtoient. J’y partage mes goûts, sans chercher à établir un classement officiel.
La galerie, intitulée « 走马，观花 », accueille mes photos du quotidien. Les cadres suivent leurs proportions afin de montrer l’image entière. Des bordures et espacements réguliers gardent l’ensemble ordonné. J’ai aussi repris des formes de plantes et de bâtiments pour en faire de petits dessins libres, dispersés dans l’accueil et les articles. L’album est mis à jour chaque mois.
Les jeux reprennent des couleurs et des caractères proches du reste du site et permettent de faire une pause. À droite de la navigation se trouvent, dans cet ordre, le passage entre FLOSCAS et LAVIE, le choix de la langue et le mode jour ou nuit. Mes amis qui parlent différentes langues peuvent ainsi les trouver facilement. La page À propos contient ma présentation ; les coordonnées viennent à la fin.
J’ai construit le site progressivement avec l’IA. Je propose des idées et des références, puis je regarde le résultat et demande des retouches ; l’IA aide pour le code et la réalisation. Beaucoup de détails sont apparus en voyant les pages fonctionner. Je continuerai à les ajuster et à ajouter des textes, des photos et de nouvelles idées.
Cet article a été généré par Codex à partir de conversations sur la création de FLOSCAS.
FLOSCASを作る時、自分の文章や写真、好きな映画を一か所にまとめたいと思いました。内容はいろいろあっても、ページはわかりやすく。訪れた人が読みたいものや見たいものを見つけ、少し長く過ごしてくれたらと思っています。
全体のレイアウトは雑誌や独立誌を参考にしました。大きめの見出し、余白、シンプルな線で内容を整理しています。背景は紙に近いアイボリー、映画のコーナーはえんじ色、写真集は深い青にしました。自分の好きな色を使い、コーナーごとに変化をつけています。
トップページには以前、標語を置いていました。でも写真だけでも十分いいと思い、文字と枠を外しました。今はサイトを開くとまず一枚の写真があり、隅に著作権と撮影情報を添えています。下へ進むと文章やほかの内容が現れます。最初からすべてを説明せず、すっきりした入口にしたいと思いました。
このサイトの中心は文章です。一覧にはタイトル、日付、短い概要を置き、何について書いてあるかを先にわかるようにしています。本文は読みやすくなるよう、幅や文字の大きさ、行間を調整しました。見出しを大きくしても本文との釣り合いは大切です。写真の日付や説明も、本文と間違われない位置に置く必要があります。
映画は横に送って見られるポスターの列にし、その下に作品名とクレジットを添えました。追加した順に並び、最近加えたものが左端に来るので、新作と古い作品が混ざっています。正式なランキングというより、自分の好きな映画を紹介する場所です。
写真集の名前は「走马，观花」。普段撮った写真を載せています。額は写真の比率に合わせ、元の画面をなるべく全部見せるようにしました。枠の太さと間隔をそろえて整えて並べています。植物や建物の形を写真から借り、少しラフな小さな絵にしてトップページや記事にも散らしました。写真集は毎月更新します。
ゲームの色と文字はサイト全体に合わせ、休憩したい時に少し遊べるようにしています。ナビゲーション右側にはFLOSCASとLAVIEの切り替え、言語、昼夜モードをこの順番で配置しました。違う言語を話す友人も使いやすいようにしたかったからです。Aboutには自己紹介を、最後には連絡先を置いています。
サイトはAIの力を借りながら少しずつ作ってきました。自分が考えや参考を伝え、画面を見て修正し、AIがコードや実装を手伝います。実際に見て初めて気づいたことも多く、その都度調整してきました。これからも文章や写真、新しいアイデアを加えていくつもりです。
この記事は、FLOSCASの制作過程での対話をもとにCodexが生成しました。
