From ef53dc7cb26ef78c1bd1b8811bc3b8359ebb8253 Mon Sep 17 00:00:00 2001 From: Murdock9803 Date: Thu, 27 Jun 2024 23:44:49 +0530 Subject: [PATCH 1/3] Added documentation about sections and seprated CSS for different sections in style.css --- docs/_assets/css/style.css | 60 +++++++++++++++++++++----------------- 1 file changed, 33 insertions(+), 27 deletions(-) diff --git a/docs/_assets/css/style.css b/docs/_assets/css/style.css index e83d2528..47055e5e 100644 --- a/docs/_assets/css/style.css +++ b/docs/_assets/css/style.css @@ -1,5 +1,7 @@ +/* Importing vocabulary.css */ @import '/_assets/vocabulary/css/vocabulary.css' layer(vocabulary); +/* CSS For All Pages */ body { font-family: sans-serif; margin: 0; @@ -8,8 +10,7 @@ flex-direction: column; padding: 0 0 0; } -/* STYLES FOR MAIN CONTENT */ - +/* Styles For listing.html and submission.html*/ .main-content a { color: #40ae49; cursor:pointer; @@ -25,31 +26,6 @@ min-width: 250px; margin: 0 auto; } -#preview { -width: 500px; -height: 375px; -margin: 0 auto; -background-image: url(/_assets/images/placeholder-500.gif); -border-radius: 25px; -} - -#downloadbuttonholder { -height: 100px; -width: 100%; -display: flex; -justify-content: center; -align-items: center; -margin: 10px auto; -} - -#longdescription { -max-width: 500px; -margin: 0 auto; -border: 2px solid #C0C0C0; -border-radius: 25px; -padding: 10px; -} - .thumbnailbox { width: 200px; float: left; @@ -79,6 +55,32 @@ height: 150px; margin: 0 auto; } +/* Styles For resource.html */ +#preview { + width: 500px; + height: 375px; + margin: 0 auto; + background-image: url(/_assets/images/placeholder-500.gif); + border-radius: 25px; + } + + #downloadbuttonholder { + height: 100px; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + margin: 10px auto; + } + + #longdescription { + max-width: 500px; + margin: 0 auto; + border: 2px solid #C0C0C0; + border-radius: 25px; + padding: 10px; + } + .downloadbutton { min-width: 150px; width: max-content; @@ -99,6 +101,7 @@ line-height: 75px; color: white; } +/* Styles For index.html and all.html */ #resourcenavbar { height: fit-content; margin: 0 auto 100px; @@ -122,6 +125,8 @@ height: 50px; margin-left: 100px; } + +/* Styles For footer.html */ footer a { color: var(--vocabulary-brand-color-turquoise); } @@ -130,6 +135,7 @@ footer .donate a { color: #000; } +/* Media Queries for responsiveness */ @media screen and (max-width: 600px) { #resourcenavbar { flex-direction: column; From d239d056955935ecf205ec643fe8ce03a0f06a7d Mon Sep 17 00:00:00 2001 From: Murdock9803 Date: Thu, 27 Jun 2024 23:48:48 +0530 Subject: [PATCH 2/3] Added more documentation about different sections in style.css --- docs/_assets/css/style.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/_assets/css/style.css b/docs/_assets/css/style.css index 47055e5e..e865eadd 100644 --- a/docs/_assets/css/style.css +++ b/docs/_assets/css/style.css @@ -1,7 +1,7 @@ /* Importing vocabulary.css */ @import '/_assets/vocabulary/css/vocabulary.css' layer(vocabulary); -/* CSS For All Pages */ +/* CSS for All Pages */ body { font-family: sans-serif; margin: 0; @@ -10,7 +10,7 @@ flex-direction: column; padding: 0 0 0; } -/* Styles For listing.html and submission.html*/ +/* Styles for listing.html and submission.html*/ .main-content a { color: #40ae49; cursor:pointer; @@ -20,6 +20,7 @@ h1 { text-align: center; } +/* Styles for listing.html resource thumbnail cards */ #thumbnaillist { max-width: 900px; min-width: 250px; From 263763a2366e988549d0a0aa04726af37151cbc7 Mon Sep 17 00:00:00 2001 From: Murdock9803 Date: Thu, 27 Jun 2024 23:50:30 +0530 Subject: [PATCH 3/3] Formatted the file style.css with prettier --- docs/_assets/css/style.css | 159 ++++++++++++++++++------------------- 1 file changed, 79 insertions(+), 80 deletions(-) diff --git a/docs/_assets/css/style.css b/docs/_assets/css/style.css index e865eadd..361ebddc 100644 --- a/docs/_assets/css/style.css +++ b/docs/_assets/css/style.css @@ -1,144 +1,143 @@ /* Importing vocabulary.css */ -@import '/_assets/vocabulary/css/vocabulary.css' layer(vocabulary); +@import "/_assets/vocabulary/css/vocabulary.css" layer(vocabulary); /* CSS for All Pages */ body { -font-family: sans-serif; -margin: 0; -display: flex; -flex-direction: column; -padding: 0 0 0; + font-family: sans-serif; + margin: 0; + display: flex; + flex-direction: column; + padding: 0 0 0; } /* Styles for listing.html and submission.html*/ .main-content a { -color: #40ae49; -cursor:pointer; + color: #40ae49; + cursor: pointer; } h1 { -text-align: center; + text-align: center; } /* Styles for listing.html resource thumbnail cards */ #thumbnaillist { -max-width: 900px; -min-width: 250px; -margin: 0 auto; + max-width: 900px; + min-width: 250px; + margin: 0 auto; } .thumbnailbox { -width: 200px; -float: left; -display: block; -border-radius: 25px; -border: 2px solid #C0C0C0; -margin: 5px; + width: 200px; + float: left; + display: block; + border-radius: 25px; + border: 2px solid #c0c0c0; + margin: 5px; } .thumbnailLink { - text-decoration: none; + text-decoration: none; } .thumbnailtitle { -text-align: center; -height: 75px; + text-align: center; + height: 75px; } .thumbnailblurb { -height: 100px; -padding: 5px; + height: 100px; + padding: 5px; } .thumbnail { -width: 200px; -height: 150px; -margin: 0 auto; + width: 200px; + height: 150px; + margin: 0 auto; } /* Styles For resource.html */ #preview { - width: 500px; - height: 375px; - margin: 0 auto; - background-image: url(/_assets/images/placeholder-500.gif); - border-radius: 25px; - } - - #downloadbuttonholder { - height: 100px; - width: 100%; - display: flex; - justify-content: center; - align-items: center; - margin: 10px auto; - } - - #longdescription { - max-width: 500px; - margin: 0 auto; - border: 2px solid #C0C0C0; - border-radius: 25px; - padding: 10px; - } + width: 500px; + height: 375px; + margin: 0 auto; + background-image: url(/_assets/images/placeholder-500.gif); + border-radius: 25px; +} + +#downloadbuttonholder { + height: 100px; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + margin: 10px auto; +} + +#longdescription { + max-width: 500px; + margin: 0 auto; + border: 2px solid #c0c0c0; + border-radius: 25px; + padding: 10px; +} .downloadbutton { -min-width: 150px; -width: max-content; -height: 70%; -padding: 0 5px; -border-radius: 8px; -background-color: #40ae49; -display: flex; -justify-content: center; -align-items: center; + min-width: 150px; + width: max-content; + height: 70%; + padding: 0 5px; + border-radius: 8px; + background-color: #40ae49; + display: flex; + justify-content: center; + align-items: center; } .downloadbutton p { -height: 100%; -margin: 0; -font-size: 130%; -line-height: 75px; -color: white; + height: 100%; + margin: 0; + font-size: 130%; + line-height: 75px; + color: white; } /* Styles For index.html and all.html */ #resourcenavbar { -height: fit-content; -margin: 0 auto 100px; -display: flex; -justify-content: center; + height: fit-content; + margin: 0 auto 100px; + display: flex; + justify-content: center; } .resourcenav { -width: 200px; -height: fit-content; -display: none; + width: 200px; + height: fit-content; + display: none; } .resourcenav.resourcenavstatic { -display: block; + display: block; } #bannercc { -width: 210px; -height: 50px; -margin-left: 100px; + width: 210px; + height: 50px; + margin-left: 100px; } - /* Styles For footer.html */ footer a { - color: var(--vocabulary-brand-color-turquoise); + color: var(--vocabulary-brand-color-turquoise); } footer .donate a { - color: #000; + color: #000; } /* Media Queries for responsiveness */ @media screen and (max-width: 600px) { - #resourcenavbar { - flex-direction: column; - } + #resourcenavbar { + flex-direction: column; + } }