Skip to content

Commit 1f80e89

Browse files
committed
resolve conflicts
1 parent c05cf92 commit 1f80e89

2 files changed

Lines changed: 1504 additions & 791 deletions

File tree

public/css/style.css

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1875,3 +1875,105 @@ ul {
18751875

18761876
}
18771877

1878+
/* Base skeleton styles */
1879+
.skeleton {
1880+
background-color: #e0e0e0;
1881+
position: relative;
1882+
overflow: hidden;
1883+
border-radius: 4px;
1884+
}
1885+
1886+
/* Loading animation */
1887+
.skeleton::before {
1888+
content: "";
1889+
position: absolute;
1890+
top: 0;
1891+
left: -100%;
1892+
width: 100%;
1893+
height: 100%;
1894+
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
1895+
animation: loading 1.5s infinite;
1896+
}
1897+
1898+
@keyframes loading {
1899+
0% {
1900+
left: -100%;
1901+
}
1902+
50% {
1903+
left: 100%;
1904+
}
1905+
100% {
1906+
left: -100%;
1907+
}
1908+
}
1909+
1910+
/* Header Skeleton */
1911+
.skeleton-header {
1912+
height: 60px;
1913+
margin-bottom: 20px;
1914+
width: 100%;
1915+
}
1916+
1917+
/* Banner Skeleton */
1918+
.skeleton-banner {
1919+
height: 300px;
1920+
width: 100%;
1921+
margin-bottom: 20px;
1922+
border-radius: 10px;
1923+
}
1924+
1925+
/* Section Skeleton with different types of elements */
1926+
.skeleton-container {
1927+
display: flex;
1928+
flex-direction: column;
1929+
gap: 20px;
1930+
}
1931+
1932+
.skeleton-section {
1933+
display: flex;
1934+
flex-direction: column;
1935+
gap: 10px;
1936+
}
1937+
1938+
.skeleton-title {
1939+
width: 50%;
1940+
height: 24px;
1941+
border-radius: 4px;
1942+
margin: 5px 0;
1943+
}
1944+
1945+
.skeleton-paragraph {
1946+
width: 100%;
1947+
height: 16px;
1948+
border-radius: 4px;
1949+
margin: 4px 0;
1950+
}
1951+
1952+
.skeleton-icon {
1953+
width: 40px;
1954+
height: 40px;
1955+
border-radius: 50%;
1956+
}
1957+
1958+
.skeleton-button {
1959+
width: 120px;
1960+
height: 32px;
1961+
border-radius: 8px;
1962+
margin-top: 10px;
1963+
}
1964+
1965+
/* Multi-column layout to simulate cards or sections */
1966+
.skeleton-card-container {
1967+
display: flex;
1968+
gap: 15px;
1969+
}
1970+
1971+
.skeleton-card {
1972+
flex: 1 1 200px;
1973+
height: 250px;
1974+
display: flex;
1975+
flex-direction: column;
1976+
gap: 10px;
1977+
padding: 15px;
1978+
border-radius: 8px;
1979+
}

0 commit comments

Comments
 (0)