flyman13 · flyman13 · Jan 27, 2026
diff --git a/app/assets/stylesheets/all_styles/inline_from_views.css b/app/assets/stylesheets/all_styles/inline_from_views.css
@@ -0,0 +1,71 @@
+/* styles extracted from app/views/accounts/new.html.erb */
+.accounts-new__panel {
+  max-width: 400px;
+  margin: 50px auto;
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-radius: 10px;
+}
+
+.accounts-new__panel h2 {
+  margin-top: 0;
+}
+
+.form-row {
+  margin-bottom: 10px;
+}
+
+.form-row--large {
+  margin-bottom: 20px;
+}
+
+.full-width {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.btn-primary {
+  background: green;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+/* sessions/new.html.erb */
+.sessions__panel {
+  max-width: 300px;
+  margin: 50px auto;
+  font-family: sans-serif;
+}
+
+.btn-block {
+  width: 100%;
+  background: #efefef;
+  cursor: pointer;
+  border: none;
+  padding: 8px 12px;
+}
+
+/* comments/_form.html.erb */
+.comment-form__wrap {
+  margin-top: 10px;
+}
+
+.textarea-full {
+  width: 100%;
+  border-radius: 5px;
+  border: 1px solid #ddd;
+  box-sizing: border-box;
+}
+
+.comment-submit {
+  margin-top: 5px;
+  background: #0095f6;
+  color: white;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+}
diff --git a/app/assets/stylesheets/all_styles/posts.css b/app/assets/stylesheets/all_styles/posts.css
@@ -0,0 +1,148 @@
+/* moved from app/assets/stylesheets/posts.css */
+.feed-container {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 20px 0;
+}
+
+.feed-post {
+  background: white;
+  border: 1px solid #dbdbdb;
+  border-radius: 8px;
+  margin-bottom: 24px;
+}
+
+.post-header {
+  padding: 14px;
+}
+
+.feed-post-placeholder {
+  background-color: #fafafa;
+  aspect-ratio: 1 / 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-top: 1px solid #efefef;
+  border-bottom: 1px solid #efefef;
+}
+
+.post-footer {
+  padding: 12px;
+}
+
+.post-time {
+  color: #8e8e8e;
+  font-size: 12px;
+  text-transform: uppercase;
+}
+
+/* Styles for posts/index view */
+.posts-index__container {
+  max-width: 600px;
+  margin: 0 auto;
+  font-family: sans-serif;
+}
+
+.posts-index__header {
+  display: flex;
+  justify-content: space-between;
+  padding: 20px 0;
+  border-bottom: 1px solid #ddd;
+}
+
+.posts-index__header-actions a + a {
+  margin-left: 10px;
+}
+
+.link-danger {
+  margin-left: 10px;
+  color: red;
+}
+
+.link-strong {
+  font-weight: bold;
+  color: blue;
+}
+
+.new-post-btn {
+  padding: 10px 20px;
+  background: #0095f6;
+  color: white;
+  border-radius: 5px;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.post-card {
+  border: 1px solid #ccc;
+  margin-top: 20px;
+  padding: 15px;
+  border-radius: 8px;
+  position: relative;
+}
+
+.post-meta-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.post-image {
+  margin-bottom: 10px;
+}
+
+.post-image img {
+  width: 100%;
+  border-radius: 4px;
+}
+
+.post-body {
+  margin-bottom: 15px;
+}
+
+.reactions-btn {
+  background: none;
+  border: 1px solid #ddd;
+  border-radius: 20px;
+  cursor: pointer;
+  padding: 5px 15px;
+}
+
+.comments-wrap {
+  background: #f9f9f9;
+  padding: 10px;
+  border-radius: 5px;
+}
+
+.comment-item {
+  margin-bottom: 10px;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 5px;
+}
+
+.comment-author {
+  font-size: 0.9em;
+  margin-bottom: 3px;
+}
+
+.comment-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.comment-action-link {
+  text-decoration: none;
+  font-size: 0.8em;
+}
+
+.new-post-wrap {
+  margin: 20px 0;
+  text-align: center;
+}
+
+.comment-form-wrap {
+  margin-top: 10px;
+}
+
diff --git a/app/assets/stylesheets/all_styles/profiles.css b/app/assets/stylesheets/all_styles/profiles.css
@@ -0,0 +1,79 @@
+/* moved from app/assets/stylesheets/profiles.css */
+.profile-container {
+  max-width: 935px;
+  margin: 0 auto;
+  padding: 30px 20px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+
+.profile-header {
+  display: flex;
+  margin-bottom: 44px;
+}
+
+.avatar-placeholder {
+  width: 150px;
+  height: 150px;
+  background-color: #fafafa;
+  border-radius: 50%;
+  border: 1px solid #dbdbdb;
+  margin-right: 100px;
+}
+
+.profile-info {
+  flex-grow: 1;
+}
+
+.profile-top-row {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.profile-top-row h1 {
+  font-size: 28px;
+  font-weight: 300;
+}
+
+.edit-btn {
+  background: transparent;
+  border: 1px solid #dbdbdb;
+  border-radius: 4px;
+  padding: 5px 9px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.profile-stats {
+  display: flex;
+  list-style: none;
+  padding: 0;
+  gap: 40px;
+  margin-bottom: 20px;
+}
+
+.full-name {
+  font-weight: 600;
+}
+
+.posts-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr); /* 3 колонки, як в інсті */
+  gap: 28px;
+}
+
+.post-item {
+  background-color: #efefef;
+  aspect-ratio: 1 / 1; /* Робимо блоки ідеально квадратними */
+  position: relative;
+  cursor: pointer;
+}
+
+.post-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -1,3 +1,4 @@
+
 /*
  * This is a manifest file that'll be compiled into application.css.
  *
@@ -6,5 +7,11 @@
  * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
  * depending on specificity.
  *
- * Consider organizing styles into separate files for maintainability.
+ * Organized imports: styles moved into `all_styles/` for maintainability. If you add more view-extracted
+ * styles, put them into `all_styles/` and import them here.
  */
+
+@import "all_styles/posts.css";
+@import "all_styles/profiles.css";
+@import "all_styles/inline_from_views.css";
+
diff --git a/app/assets/stylesheets/posts.css b/app/assets/stylesheets/posts.css
@@ -1,36 +1,2 @@
-.feed-container {
-  max-width: 600px;
-  margin: 0 auto;
-  padding: 20px 0;
-}
-
-.feed-post {
-  background: white;
-  border: 1px solid #dbdbdb;
-  border-radius: 8px;
-  margin-bottom: 24px;
-}
-
-.post-header {
-  padding: 14px;
-}
-
-.feed-post-placeholder {
-  background-color: #fafafa;
-  aspect-ratio: 1 / 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-top: 1px solid #efefef;
-  border-bottom: 1px solid #efefef;
-}
-
-.post-footer {
-  padding: 12px;
-}
-
-.post-time {
-  color: #8e8e8e;
-  font-size: 12px;
-  text-transform: uppercase;
-}
+/* NOTE: styles moved to app/assets/stylesheets/all_styles/posts.css */
+@import "all_styles/posts.css";