GeorgeSG/gardev-startpage
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor css

Browse Source
This commit is contained in:
Georgi Gardev
2023-11-20 13:37:12 +02:00
parent 4b8fcbf7a7
commit eeaef2169e
9 changed files with 103 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/apps/App.module.css
View File

@@ -1,27 +1,24 @@
.App {
position: relative;
overflow: hidden;
overflow-clip-margin: -10px;
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(10px);
color: #eee;
border-radius: 1rem;
backdrop-filter: var(--bg-blur);
color: var(--color-text);
border-radius: var(--border-radius-default);
cursor: pointer;
transition: background-color 0.2s ease-in-out;
background-color: var(--color-bg-dark);
transition: background-color var(--transition-duration-default) var(--transition-fn);
}
.App:hover, .Box:focus-within {
background-color: rgba(0, 0, 0, 0.9);
background-color: var(--color-bg-darker);
}
.App > a {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
width: 150px;
height: 150px;
padding: 1rem;
@@ -34,8 +31,8 @@
}
.Url {
font-size: .85rem;
color: #ddd
font-size: 85%;
color: var(--color-secondary);
}
.Text {
@@ -46,7 +43,7 @@
}
.Name {
line-height: 1.3rem;
line-height: 1.3;
font-weight: bold;
}
@@ -57,5 +54,5 @@
font-size: 100px;
color: rgba(255, 255, 255, 0.3);
letter-spacing: -4px;
font-family: "Nova Mono";
font-family: var(--font-accent);
}

4
src/components/apps/AppList.module.css
View File

@@ -9,13 +9,13 @@
margin-bottom: 1rem;
padding-bottom: 8px;
font-size: clamp(1.3rem, 1.8vw, 3rem);
text-shadow: 1px 1px 7px #000;
text-shadow: var(--text-shadow-default);
}
.Close {
font-size: 1.4rem;
cursor: pointer;
color: #ccc;
color: var(--color-secondary);
}
.AppList {

5
src/components/ui/Background.module.css
View File

@@ -15,8 +15,9 @@
.Overlay {
pointer-events: none;
opacity: 0;
transition: opacity 1s ease;
transition: opacity var(--transition-duration-bg) var(--transition-fn);
}
.Overlay.Pending {
@@ -36,6 +37,6 @@
left: 0;
width: 100vw;
height: 100vh;
backdrop-filter: blur(20px);
backdrop-filter: var(--bg-blur-large);
background-color: rgba(0, 0, 0, 0.4);
}

41
src/components/ui/Sidebar.module.css
View File

@@ -8,10 +8,11 @@
width: max(25vw, 180px);
padding-bottom: 1.5rem;
backdrop-filter: blur(20px);
backdrop-filter: var(--bg-blur-large);
background-color: rgba(0, 0, 0, 0.3);
opacity: 1;
transition: opacity 0.5s ease, transform 0.5s ease;
transition: opacity var(--transition-duration-slow) var(--transition-fn);
}
.Sidebar.Loading {
@@ -35,11 +36,13 @@
.Menu li {
position: relative;
cursor: pointer;
text-shadow: 1px 1px 7px #000;
text-shadow: var(--text-shadow-default);
padding: clamp(0.5rem, 1vw, 1.5rem) 1.5rem;
opacity: 1;
transition: opacity 0.2s ease, transform 0.2s ease;
opacity: 1;
transform: translateY(0);
transition: opacity var(--transition-duration-default) var(--transition-fn),
transform var(--transition-duration-default) var(--transition-fn);
}
.Sidebar.Loading .Menu li {
@@ -48,25 +51,25 @@
}
.Sidebar .Menu li:nth-child(2) {
transition-delay: .2s;
transition-delay: 0.2s;
}
.Sidebar .Menu li:nth-child(3) {
transition-delay: .3s;
transition-delay: 0.3s;
}
.Sidebar .Menu li:nth-child(4) {
transition-delay: .4s;
transition-delay: 0.4s;
}
.Sidebar .Menu li:nth-child(5) {
transition-delay: .5s;
transition-delay: 0.5s;
}
.Sidebar .Menu li:nth-child(6) {
transition-delay: .6s;
transition-delay: 0.6s;
}
.Sidebar .Menu li:nth-child(7) {
transition-delay: .7s;
transition-delay: 0.7s;
}
.Sidebar .Menu li:nth-child(8) {
transition-delay: .8s;
transition-delay: 0.8s;
}
.Menu li::after {
@@ -74,13 +77,13 @@
right: 0;
top: 0;
content: '';
display: block;
height: 0;
width: 3px;
display: block;
background-color: var(--color-text);
border-radius: 1rem;
border-radius: var(--border-radius-default);
transition: height 0.2s ease, width 0.2s ease;
height: 0;
transition: height var(--transition-duration-slow) var(--transition-fn);
}
.Menu li:hover::after,
@@ -95,9 +98,11 @@
margin-top: clamp(0.5rem, 1vw, 1.5rem);
margin-right: 1.5rem;
align-self: flex-end;
opacity: 1;
transition: opacity 0.2s ease, transform 0.2s ease;
opacity: 1;
transform: translateY(0);
transition: opacity var(--transition-duration-default) var(--transition-fn),
transform var(--transition-duration-default) var(--transition-fn);
transition-delay: 1s;
}

8
src/components/widgets/Date.module.css
View File

@@ -2,9 +2,9 @@
display: flex;
flex-direction: column;
height: 100%;
font-family: nova mono;
font-family: var(--font-accent);
letter-spacing: -2px;
text-shadow: 1px 1px 12px #000;
text-shadow: var(--text-shadow-lg);
font-weight: bold;
}
@@ -16,9 +16,9 @@
.Time {
font-size: clamp(1.5rem, 2vw, 2.8rem);
text-shadow: 1px 1px 5px #000;
text-shadow: var(--text-shadow-default);
}
.Logo {
color: #ccc;
color: var(--color-secondary);
}

29
src/components/widgets/Search.module.css
View File

@@ -13,40 +13,39 @@
.Provider {
flex-shrink: 0;
text-transform: uppercase;
backdrop-filter: blur(10px);
backdrop-filter: var(--bg-blur);
padding: 11px 20px;
text-align: center;
background-color: rgba(0, 0, 0, 0.6);
border-bottom: 2px solid rgba(0, 0, 0, 0.6);
font-family: Nova Mono;
border-top-right-radius: .5rem;
border-bottom-right-radius: .5rem;
background-color: var(--color-bg-dark);
border-bottom: 2px solid var(--color-bg-dark);
font-family: var(--font-accent);
border-top-right-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
}
.Search {
flex-grow: 1;
padding: 10px 20px;
border: 0;
font-size: 1rem;
backdrop-filter: blur(10px);
background-color: rgba(0, 0, 0, 0.6);
border-bottom: 2px solid rgba(0, 0, 0, 0.6);
backdrop-filter: var(--bg-blur);
background-color: var(--color-bg-dark);
border-bottom: 2px solid var(--color-bg-dark);
color: var(--color-text);
outline: 0;
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
transition: border-color var(--transition-duration-default) var(--transition-fn);
}
.Search:focus-within{
.Search:focus-within {
border-color: var(--color-text);
}
.Search::placeholder {
color: #eee;
color: var(--color-text);
user-select: none;
}
.Hint {
font-size: .9rem;
color: #aaa;
font-size: 0.8rem;
color: var(--color-secondary);
}

26
src/components/widgets/Weather.module.css
View File

@@ -6,14 +6,16 @@
padding: 30px;
display: flex;
flex-direction: column;
gap: .5rem;
border-radius: .75rem;
gap: 0.5rem;
border-radius: var(--border-radius-default);
backdrop-filter: var(--bg-blur);
background-color: var(--color-bg-dark);
backdrop-filter: blur(10px);
background-color: rgba(0, 0, 0, 0.6);
opacity: 1;
transform: translateY(0);
transition: opacity 0.5s ease, transform 0.5s ease;
transition: opacity var(--transition-duration-slow) var(--transition-fn),
transform var(--transition-duration-slow) var(--transition-fn);
}
.Weather.Loading {
@@ -24,26 +26,26 @@
.FeelsLike {
display: flex;
flex-direction: column;
gap: .5rem;
margin-left: .5rem;
gap: 0.5rem;
margin-left: 0.5rem;
font-size: 1.3rem;
color: #eee;
color: var(--color-text);
}
.FeelsLike :last-child {
font-size: 1rem;
color: #ddd;
color: var(--color-secondary);
}
.Delimiter {
border-bottom: 1px solid #bbb;
border-bottom: 1px solid var(--color-secondary);
padding-bottom: 1.2rem;
margin-bottom: .8rem;
margin-bottom: 0.8rem;
}
.WeatherLine {
display: flex;
gap: .3rem;
gap: 0.3rem;
align-items: center;
}

27
src/root.css
View File

@@ -1,7 +1,24 @@
:root {
--color-text: #ddd;
--color-secondary: #555;
--color-bright: #eee;
--color-text: #eee;
--color-secondary: #ddd;
--color-bg-dark: rgba(0, 0, 0, 0.6);
--color-bg-darker: rgba(0, 0, 0, 0.9);
--bg-blur: blur(10px);
--bg-blur-lg: blur(20px);
--text-shadow-default: 1px 1px 7px #000;
--text-shadow-lg: 1px 1px 12px #000;
--border-radius-default: .75rem;
--font-default: "Helvetica Neue", sans-serif;
--font-accent: "Nova Mono", monospace;
--transition-fn: ease;
--transition-duration-default: 0.2s;
--transition-duration-slow: 0.5s;
--transition-duration-bg: 1s;
}
::selection {
@@ -10,7 +27,7 @@
}
body {
font-family: 'Helvetica Neue', sans-serif;
font-family: var(--font-default);
}
html,
@@ -41,7 +58,7 @@ strong {
table {
width: 100%;
background-color: rgba(30, 30, 30, 0.85);
backdrop-filter: blur(10px);
backdrop-filter: var(--bg-blur);
border: 2px solid rgba(30, 30, 30, 1);
color: var(--color-text);
}

18
src/routes/index.module.css
View File

@@ -30,9 +30,11 @@
display: flex;
flex-direction: column;
gap: 2rem;
opacity: 1;
transform: translateY(0);
transition: opacity 0.5s ease, transform 0.5s ease;
transition: opacity var(--transition-duration-slow) var(--transition-fn),
transform var(--transition-duration-slow) var(--transition-fn);
}
.Loading .MainWidgets {
@@ -46,16 +48,18 @@
right: 1rem;
padding: 1rem 1.5rem;
line-height: 1.5rem;
backdrop-filter: blur(10px);
background-color: rgba(0, 0, 0, 0.6);
border-radius: .75rem;
backdrop-filter: var(--bg-blur);
background-color: var(--color-bg-dark);
border-radius: var(--border-radius-default);
opacity: 1;
transform: translateY(0);
transition: opacity 0.5s ease, transform 0.5s ease;
transition-delay: 1s;
transition: opacity var(--transition-duration-slow) var(--transition-fn),
transform var(--transition-duration-slow) var(--transition-fn);
transition-delay: 1s;
}
.Loading .CurrentBackground {
opacity: 1;
transform: translateY(8rem);
transform: translateY(4.5rem);
}