morrigan/crabbysearch
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

💄 chore(simple): modernize the appearance of about page & make it responsive. (#530)

Browse source 
* lazyload search result text with css content-visibility

* typo, lightning-fast is grammatically correct

* revamped logo to look more modern

* added class to control how new logo looks and behaves

* added class to control how new logo looks and behaves

* Replace old websurfx logo in readme file

* major visual revamp

* removed logo files and switched to inline svg

* added `--logo-color` to make svg logo colorscheme adaptive

* Update public/static/themes/simple.css

Co-authored-by: neon_arch <mustafadhuleb53@gmail.com>

* [CodeFactor] Apply fixes

* chores: fix duplicate footer selector and remove unknown pseudo-class

* chores: remove missed  duplicate footer selector

* chores: pass formatter check by deleting empty line at 18

* fix search result title disappearing after being visited

* 💄 style: revamped the about page to look more modern and responsive

* [CodeFactor] Apply fixes

* chore: remove invalid css property

* chore: remove lines between or after svg string literals to conform with proper rust formatting

* chore: remove blank lines between svg literals to conform with proper Rust formatting

* refactor: changed decimal values to percentage, added quotation in urls, add blank lines to before rule declarations and between font-face rules

* refactor: correctly remove blank lines between and after svg string literals to conform with proper rust formatting

* chore: revert percentage values into decimals and trimmed blank lines before first rule inside media queries

* combine font face queries into one

* fix: added missing quotation marks on font face url

---------

Co-authored-by: neon_arch <mustafadhuleb53@gmail.com>
Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
Co-authored-by: alamin655 <mdalamin655@outlook.com>
Co-authored-by: codefactor-io <support@codefactor.io>
Co-authored-by: alamin655 <129589283+alamin655@users.noreply.github.com>
This commit is contained in:
aocosmic 2024-03-02 14:50:35 +08:00 • committed by GitHub
parent 41ab8a2a76
commit 11d23fd1b2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 273 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

173
public/static/themes/simple.css
View file

@ -1,8 +1,11 @@
/* @import url('./catppuccin-mocha.css'); */
@font-face {
font-family: Rubik;
src: url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800&display=swap');
fallback: sans-serif;
font-style: normal;
font-weight: 200 600;
font-stretch: 0% 200%;
font-display: swap;
src: url("https://fonts.gstatic.com/s/rubik/v28/iJWKBXyIfDnIV7nErXyi0A.woff2") format('woff2');
}
* {
@ -20,7 +23,7 @@ body {
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 100vh;
min-height: 100vh;
font-family: Rubik, sans-serif;
background-color: var(--background-color);
}
@ -459,39 +462,121 @@ footer div {
font-size: 1.5rem;
color: var(--foreground-color);
padding-bottom: 10px;
max-width: 1100px;
margin: 14rem auto;
display: flex;
flex-direction: column;
row-gap: 100px;
}
.about-container article h1 {
color: var(--color-two);
font-size: 2.8rem;
font-size: 4.5rem;
}
.about-container article div {
padding-bottom: 15px;
.about-container article .logo-container {
display: flex;
align-items: center;
justify-content: center;
}
.about-container article .logo-container svg {
width: clamp(200px, 530px, 815px);
}
.about-container article .text-block {
box-shadow: 0 0 0 100vmax var(--foreground-color);
background-color: var(--foreground-color);
clip-path: inset(0 -100vmax);
padding: 90px 0;
display: flex;
gap: 40px;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
color: var(--background-color);
}
.about-container article .text-block .text-block-title {
font-size: 64px;
font-weight: 500;
}
.hero-text-container {
width: 860px;
}
.hero-text {
font-size: 45px;
font-weight: 200;
}
.about-container a {
color: var(--color-three);
}
.about-container article h2 {
color: var(--color-three);
font-size: 1.8rem;
padding-bottom: 10px;
}
.about-container p {
color: var(--foreground-color);
font-size: 1.6rem;
padding-bottom: 10px;
}
.about-container h3 {
font-size: 1.5rem;
}
.about-container {
width: 80%;
margin-bottom: 140px;
}
.feature-list {
padding: 35px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
row-gap: 60px;
}
.feature-list-title {
text-align: center;
font-size: 64px;
font-weight: 500;
}
.features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.feature-card {
background-color: var(--foreground-color);
color: var(--background-color);
text-align: center;
display: flex;
padding: 30px;
border-radius: 24px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 15px;
}
.feature-card-header {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
row-gap: 15px;
}
.feature-card-header h4 {
font-size: 33px;
font-weight: 500;
}
.feature-card-body p {
font-size: 20px;
font-weight: 200;
}
.about-footnote {
font-size: 24px;
text-align: center;
color: var(--foreground-color);
}
/* Styles for the settings page */
@ -730,3 +815,47 @@ input:checked + .slider::before {
.slider.round::before {
border-radius: 50%;
}
@media screen and (width <= 1136px) {
.hero-text-container {
width: unset;
}
.features {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (width <= 706px) {
.about-container article .logo-container svg {
width: clamp(200px, 290px, 815px);
}
.about-container article .text-block .text-block-title {
font-size: 33px;
}
.hero-text {
font-size: 22px;
}
.about-container {
width: unset;
}
.feature-list-title {
font-size: 33px;
}
.features {
grid-template-columns: 1fr;
}
.feature-list {
padding: 35px 0;
}
.feature-card {
border-radius: 0;
}
}